Firefox Options dialog

I’m a big Firefox fan, having converted back in the days of Internet Explorer 6 (IE6), which loaded horribly slowly and had little to recommend it over the faster, more extensible Firefox browser.  

But I’m also a HUGE fan of clarity in the user interface, especially when it comes to configuring, controlling, or customizing the way an application works.   I believe that dialog boxes should always provide explanatory text for each option presented.   Take for example, Exhibit “A”, the Firefox 3.6 options screen (Tools | Options… on the menu):

 

I had arrived here to turn on the “Search for text…” option in a new installation of Windows 7 Professional.   The Firefox Search for Text is pretty cool:  when you want to find something on a web page you’re reading, it allows you to just start typing and does an incremental search through the text. 

But what does the Always use cursor keys to navigate within pages mean?   This is ambiguous at best, and truly confusing at worst.  I am sure I personally could make some reasonable inferences about this, given that I’m a software developer and architect and have spent almost 30 years in technology, but….   what about poor old Mom and Pop?  The wording assumes a frame of reference or “state” of the user that is not explicitly stated.  For example:

• First and foremost: what is the problem with navigating within a page?  Is there a problem?  
• Always use the cursor keys instead of…  what?  The mouse (we assume)?   
• Will the cursor keys not work to navigate within pages if I leave this option off, or will I just have to click my mouse in the page content area and then I can use the cursor keys to navigate?
• What do you mean by navigation?  Is it up and down only, or does it include left and right?   Another confusing common conception of navigation is that of navigating between hyperlinked pages on the Web (or in any application that has the concept of the user’s moving through a collection of pages or dialogs). 

The option Warn me when web sites try to redirect or load the page has similar usability issues.  Do you believe for a second that Mom ‘n’ Pop will have a clue as to when or why a site might try to redirect or load the page?  

Here’s a great example of going an extra mile to help out Mom ‘n’ Pop, guys, taken straight from -- completely coincidentally, but actually highly relevant since it’s from a competing browser --  Microsoft’s own Internet Explorer 8’s Tools | Options dialog:

Here, we see a number of good design techniques:

• Right aways, we see an explanation of the setting group: “Select a setting for the Internet zone”.   This should really probably say “Select a privacy setting for Internet browsing,” since setting is generic (vs. privacy setting) and Dad is not likely to understand what the Internet zone is.  
• The slider bar on the left conveys the concept of “low” and “high” privacy through a physical metaphor:  the “High” setting is actually physically above and higher than the “Low” setting.   When the user selects a setting, an entire list of bulleted points is shown to help and inform the user.
• There’s still room for improvement (isn’t there always?) – for example, a top bullet point boiling the privacy setting down for Mom ‘n’ Pop would be great, as in “Medium:  Use this when {sum it up here}.”   

Overall, this IE8 options screen does a much better job than most at explaining what the options mean. 

You could make a case in the Firefox team’s favor by pointing out that the Firefox settings dialog above is the Advanced settings dialog, and that most users, especially Mom ‘n’ Pop, won’t typically be venturing into this territory.    But other, more prominent dialogs in Firefox exhibit similar ambiguities.   The main options dialog, for one:

This shows similar issues with the Advanced dialog box, and it’s the main settings window for the application!  What’s the benefit of changing a startup page and why would Mom or Pop want to do this?  (Educate them!)  Why would someone want to show or not show the “Downloads window”?   What happens to Mom if she checks “Close it when all downloads are finished.”  And so on…

Recommendations

How can we help here?   From a content or conceptual integrity point of view, by remembering that three primary elements must be present to make each item understandable:  the problem, the solution, and the alternatives.    

• State the problem so we’re all clear why the option or setting exists at all.
• State the solution so we know what to do. In this case, it’s inherently “check the box” or “clear the checkbox.”
• State the alternatives so the user feels empowered to make an informed decision.  

From a UI design perspective, a designer could simply add a paragraph of descriptive text under each option.

    

So for example, the Firefox team might add a description along the following lines:  “By default, Firefox can search the current web page via the Edit | Find menu option or by typing Ctrl-F.  Check this box to automatically start searching the page when you begin typing text to search for.”

Conclusion

Most computer programs make most people feel stupid.   We don’t want to contribute to this, especially not a top-flight, world-class application like FireFox, which is my favorite and default browser.   A little effort goes a long way here.   By describing why we might want or need to change a setting -- the “use case” in the designer’s parlance – we educate and inform the user, who has the power to make an informed decision. 

in my opinion, that’s a central guiding principle for any killer application.