In a previous
post I explored the idea of moving Firebug's main panel bar tabs to
the bottom of the UI. One of my teammates pointed out that a common
scenario in Firebug is to select a tab and then immediately click in
the toolbar to make a panel specific adjustment. For example, it's
common to click on the Script tab and then to click the files drop down
to select a specific JavaScript file. With the current arrangement,
the toolbar and the panel tabs are close together regardless of
Firebug's window size. If Firebug's window is opened to a large size,
for example showing 40 or 50 lines of source code, then this two step
usage scenario is going to be rather inconvenient for the user.
If this is a common scenario (and I suspect that it is), then this argues for a tabs-on-top design, which is what I'm going to look at in this post.
There's a link to the prototype at the end of the post if you want to try it out. In the meantime, here's a screenshot.
A screenshot of the Firebug UI with panel tabs at the top. The Script panel is selected.
One of my goals with the previous tabs-on-the-bottom design was to reduce the "busyness" of having the toolbar and main panel tabs right next to each other. This design doesn't do much to address the busyness angle, but it still seems cleaner than the current Firebug layout. For example, in this design the tab strip for the main panel bar is at the top of Firebug's UI, and all it has on it is tabs, and the tabs are largely static -- the selected tab can change, but that's it. It's a much simpler UI element than the toolbar.
The toolbar is placed such that it appears to be inside the currently selected panel, which seems logical since so many of the toolbar controls are dependent on which panel that is. In this particular variation, the toolbar extends all the way across the window, so I call it the "long toolbar" version. One negative of this design is that the side panel looses a line of vertical real estate.
There's another advantage of having the tabs on top. In Firebug, the major functional units correspond to individual panels in the main panel bar. In the tabs-on-top layout, the tabs for these panels is the most obvious thing you see. I think that's probably a good thing.
Moving the Search Box
A mockup with the Search Box and window controls moved from the toolbar to the tab strip.
One possible variation on the tabs-on-top layout is to move the Search Box and adjacent window buttons from the toolbar to the right end of the tab strip. Since the Search Box and window buttons don't change with the active panel, it makes sense to pull them "out" of the panel. This clutters up the tab strip a little bit, but as long as there's some reasonable amount of blank space between the rightmost tab and the search box, it doesn't really seem to hurt that much. One advantage is that it substantially reduces the clutter on the toolbar and another is that it frees up a lot of space for the "object path", which, unfortunately, you can't see in this screenshot. (In the Script panel the object path is the call stack in horizontal layout. In the HTML panel, the object path is the HTML containment hierarchy.)
The short toolbar version.
With the Search Box and window controls on the tab strip, we can also do a "short toolbar" layout as mentioned above. In this layout, the toolbar is only as long as the left sub-panel. The side panel bar (containing the Watch, Stack, and Breakpoints panels) now tops out just below the tab strip, reclaiming that line of vertical real estate that we'd lost in the first two layouts. Of course the short toolbar reduces area available to the object path by quite a bit.
Conclusion
I think putting the tabs on top and above the toolbar makes for a much nicer UI. Although I think my earlier tabs-on-the-bottom UI offered some advantage by completely separating the toolbar and the tab strip, I think the tabs-on-top design offers some clear advantages.
Try it out
A link to the Firebug "tabs-on-top" prototype extension is at the bottom of this post. The standard disclaimer applies. It's prototype code built on 1.3 pre-release code, so although it's OK to play around with, you probably don't want to leave it installed.
If this is a common scenario (and I suspect that it is), then this argues for a tabs-on-top design, which is what I'm going to look at in this post.
There's a link to the prototype at the end of the post if you want to try it out. In the meantime, here's a screenshot.
A screenshot of the Firebug UI with panel tabs at the top. The Script panel is selected.
One of my goals with the previous tabs-on-the-bottom design was to reduce the "busyness" of having the toolbar and main panel tabs right next to each other. This design doesn't do much to address the busyness angle, but it still seems cleaner than the current Firebug layout. For example, in this design the tab strip for the main panel bar is at the top of Firebug's UI, and all it has on it is tabs, and the tabs are largely static -- the selected tab can change, but that's it. It's a much simpler UI element than the toolbar.
The toolbar is placed such that it appears to be inside the currently selected panel, which seems logical since so many of the toolbar controls are dependent on which panel that is. In this particular variation, the toolbar extends all the way across the window, so I call it the "long toolbar" version. One negative of this design is that the side panel looses a line of vertical real estate.
There's another advantage of having the tabs on top. In Firebug, the major functional units correspond to individual panels in the main panel bar. In the tabs-on-top layout, the tabs for these panels is the most obvious thing you see. I think that's probably a good thing.
Moving the Search Box
A mockup with the Search Box and window controls moved from the toolbar to the tab strip.
One possible variation on the tabs-on-top layout is to move the Search Box and adjacent window buttons from the toolbar to the right end of the tab strip. Since the Search Box and window buttons don't change with the active panel, it makes sense to pull them "out" of the panel. This clutters up the tab strip a little bit, but as long as there's some reasonable amount of blank space between the rightmost tab and the search box, it doesn't really seem to hurt that much. One advantage is that it substantially reduces the clutter on the toolbar and another is that it frees up a lot of space for the "object path", which, unfortunately, you can't see in this screenshot. (In the Script panel the object path is the call stack in horizontal layout. In the HTML panel, the object path is the HTML containment hierarchy.)
The short toolbar version.
With the Search Box and window controls on the tab strip, we can also do a "short toolbar" layout as mentioned above. In this layout, the toolbar is only as long as the left sub-panel. The side panel bar (containing the Watch, Stack, and Breakpoints panels) now tops out just below the tab strip, reclaiming that line of vertical real estate that we'd lost in the first two layouts. Of course the short toolbar reduces area available to the object path by quite a bit.
Conclusion
I think putting the tabs on top and above the toolbar makes for a much nicer UI. Although I think my earlier tabs-on-the-bottom UI offered some advantage by completely separating the toolbar and the tab strip, I think the tabs-on-top design offers some clear advantages.
- The tabs are the major organizational principle in the Firebug UI
and putting them on top makes them stand out as the most prominent UI
element.
- The toolbar appears like it belongs to the current tab page, almost like you're tabbing between different toolbars as well as different panels. This seems logical since the toolbar changes with the panel anyway (The ever present Firebug-icon-menu and Inspect button do muddy the water a bit, though).
- Selecting a tab and then selecting something on the toolbar (e.g. selecting the Script tab and then selecting a JavaScript file from the drop down) is still convenient. It feels a little more natural to select something on the tab strip and then move down one line to carry out the next step. In the current UI with the toolbar on top, the flow is up rather than down.
Try it out
A link to the Firebug "tabs-on-top" prototype extension is at the bottom of this post. The standard disclaimer applies. It's prototype code built on 1.3 pre-release code, so although it's OK to play around with, you probably don't want to leave it installed.