Baby Got Back Button
Apr 30, 2008
What if you reached for the light switch and ended up turning on your faucet instead? That's what reaching for the Firefox 2 back button is like. Going back one page is not an action a user should think about, yet Firefox 2 does make us stop and think about it–a lot.
The Firefox 2.0 back button is split in two—the arrow is another action that gets in the way.
In Firefox 2, the history button keeps getting in the way of our click back. It frustratingly takes up space in front of the back button. Browser history is a useful feature for jumping back several steps, but pales compared to the mighty back button. As Mozilla designer Alex Faaborg mentions, a web browser would function just fine for most people if it only had a back button and URL field. These are the two most important features users need in order to interact with the web. A usable web browser interface should work within this constraint.
Firefox 2's interface missed this ball by trying to inject an extra feature too close to a critical one. The effect is jarring – you expect one thing and you feel interrupted by another.
Now in Firefox 3.0 beta, Mozilla's design team responded to this problem and even found fresh opportunity. Faaborg, User Experience Designer on the 3.0 project, wrote an extensive piece in November documenting their design thinking early on. He presents some clever design work here and shares several of the visuals the team worked with. Their justification for the back button change was twofold:
1. The back button is "a really important button" that should be easier to see and hit with your cursor.
2. They wanted to create a unique visual identity for the application, something 'iconic' like Mickey Mouse or the iPod.
It's fascinating that Mozilla would try to use a design element they neglected in their previous release to distinguish their product's brand moving forward. Whether or not they're successful in this second goal, theirs is an example of how putting users' needs first can not only solve a problem, but improve upon what went wrong and open up new opportunity for a business.
They listened to their users. They didn't need an exciting new feature, but refined a boring old one that happens to be core to any good web browsing experience.
References:
- Firefox 3 beta is available to download
- Alex Faaborg's article on the Firefox 3 design thinking
Comments
Jeremy
said,
I agree. None of the mockups Faaborg shares include that shadowed inset that's in the current beta interface, so you wonder who over there decided it needed more elements to it. The inset is unnecessary and the left hand protrusion you point out is downright distracting from the effect they were after.
Ryan
said,
I totally agree guys. That dark inset shape was actually the reason I didn't like the back button re-design. I found it to be very distracting. Although, removing it creates the dilemma of where to put the drop-down list located to the right of the buttons.
In many ways, I'm actually a fan of how Safari solved that problem by moving that drop down list into the "History" menu, which leaves only the back/forward buttons.
Bryan said,
Jeremy, great stuff. I think this improves the usability a bunch.
However, when you look at the icon outline and then look at the actual interface, I think Firefox misses the opportunity. By creating a negative space to include the down arrow they have now complicated the form and lost the 'iconic moment'. I wonder how this could be resolved?
I don't think the left negative element was necessary- without this piece the shape would still be solid.