In a previous
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
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
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
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
- 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.
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.
I haven't tested it in a prototype yet, but after looking at the
mockups, I think moving the search box and window controls to the right
end of the tab strip is a good idea. I'm less certain about whether
the long toolbar or the short toolbar is the best approach, although I
feel like the short toolbar wins on simple aesthetics.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.