Development Blog

Evolving the User Interface: 1.3 -> 1.5 -> 1.4

The 1.4 user interface design has many improvements. One improvement has caused some confusion as users of Firebug 1.3 try Firebug 1.4b: the Firebug window-control icons.

The controls from 1.4b are arranged to be consistent with operating systems windows. 1.4Design-WindowButtons From the left the buttons are minimize, detach (so I can maximize), and close. For the developers and alpha testers, it seemed like the design was a step forward. It’s possible that some of the alpha testers were confused, but did not know if the problem was design or bugs.

But now look back at the 1.3 controls. There are just two, 1.3Design-WindowButtons detach and hmm, well that [X] thing. By position and shape, the icon looks like the 1.4 ‘close’ but its implementation in 1.3 was 1.4 ‘minimize’. Naturally users expected the [X] button in 1.4 to minimize. When it closed they thought “arggh 1.4b is broken!”

So now we are in a jam: we can’t be consistent with both user expectations from 1.3 and normal practice.

Here is a proposed path out of this jam. 1.5OffButton Firebug 1.5a9 uses the same icons as 1.4b, but orders them like 1.3 and explicitly calls out the new one. So on the far right we have minimize like 1.3 but the button now looks like minimize. Next in the middle is detach aka maximize, also a new icon. Same position, new graphic. Then comes the troublesome [X] close icon.  We want the same icon, different meaning.  So, in addition to moving it out of the 1.3 position, we add explicit text, yelling to users that it means “off” not minimize.

Yes, this is a clunky solution and it’s not consistent with the visual order we want.  But I propose we ship 1.4.0 with this clunky arrangement because it will dramatically improve the chances that users will understand the new meaning of the buttons. When 1.4.0 is released all current 1.3 users will be upgraded (if they accept it).  Then at 1.4.1 we swap the order of the button, leaving the icons (and function) unchanged. Finally at 1.4.2, we lose the “Off” label.

Two foot notes:

  1. The meaning of the icon [X] varies across and within applications. For example, in Firefox [X] on a tab closes the tab, the page is gone. But on say, the bookmark side bar, [X] means hide the UI but don’t stop managing bookmarks.  From this perspective, both the 1.3 and 1.4 implementations of [X] are consistent with other applications.
  2. In revisiting 1.3 to understand this issue, I was reminded of how clunky the 1.3 UI design is. I’m now more confident of our choices in 1.4.


Please followup in the newsgroup.

2 Responses to “Evolving the User Interface: 1.3 -> 1.5 -> 1.4”

  1. Getfirebug Blog » Blog Archive » 1.4 Issue Summary Revisited Says:

    […] users are confused by or object to the use of the [X] icon. Resolution : We understand the issue and we’ve implemented a plan, adding a glaring extra word — “Off” — […]

  2. Iphone Hacks and Applications That Will Transform Your Iphone to Something Truly Different | Cell Phone Reviews and News Says:

    […] Getfirebug Blog » Blog Archive » Evolving the User Interface: 1.3 … […]