Firebug crams a lot of disparate UI into a relatively small amount of
screen real estate, and consequently it can't help but be noisy and
confusing. However, I think there's some obvious areas for
improvement, and I wanted to document some of the problems I've been
noticing as I go along, and maybe propose some solutions while I'm at
it.
First up: Is it a button or is it a menu?
One of the most notable aspects of the Firebug UI is that it wants to
stick menus all over the place, including on some of the tabs. Firebug
is not very consistent about how it does this, and so the user is left
wondering: Is it a menu, or just a button? For example, in the
screenshot below, you can see two Firebug bug icons -- one on the right
end of the Firefox status bar at the bottom of the window and another
one (slightly larger but otherwise identical) as the first control on
the Firebug toolbar. The small icon behaves as a simple button -- it
toggles Firebug on and off. The larger icon actually triggers a menu.
Next on the toolbar is the Inspect button, which always appears in the
location, regardless of the current tab. The Inspect button triggers a
mode where you can click on elements in an HTML page and have them show
up in Firebug. Continuing to the right, the "all" button actually
controls a menu, and there's a helpful arrow next to it to indicate
that there's a menu there. Next is the button that's labeled
"slideshow.html". It's also a menu, only this time there's no helpful
arrow to indicate that.
One simple improvement that can be made here is to consistently use the
arrow next to all menu items. I'd also consider replacing the Inspect
label with an icon, and the Firebug icon with just "Firebug", so the
button is an icon, and the menu has a label. This sounds more natural
to me, although in terms of actual usability, I don't know if it would
make a big difference.
This is just scratching the surface, but it seemed like a good place to
start.
