Apr 27, 2011

Mistakes to avoid when designing an options dialog.

The (almost)  Good, the Bad and the Bone-headed

I want to examine what I see as flaws in the options dialogs of some common programs. I think its instructive to think about how you can avoid these same mistakes in your options dialogs (and maybe more generally in your overall program design). Programs tend to grow organically over time, the need for more options is a natural result of feature requests. If you don't manage the options dialog carefully you can end up with frustrated users. There are several option dialog idioms in use now, I'll take a look at the ones I see most commonly.

The Big Ball of Mud Approach

SNAGHTML236c5144This is the approach taken by Eclipse, shown at the left  and one of the older idioms (that doesn't count against it). There is a hierarchical tree on the left and a content pane on the right. The little triangles are the visual clue that lets you distinguish between a root node and a leaf node. When you design any software you have to program for your audience. In the case of Eclipse I think it's fair to assume all your users are highly sophisticated.  So this rather complicated dialog is reasonably good (but not great). It has the following advantages:

 

  1. The Window is resizable
  2. The options are searchable
  3. There is some organization to the layout

It has the following disadvantages

  1. The options are not organized well enough – there is a lot of overlap
  2. There are just too many options, even with the search feature.
  3. The non-leaf nodes have content panels.

Let's tackle the last item first.  I've never been crazy about the fact that non-leaf nodes have unique content panels on the right. If when you open this dialog and  a root is already open, the tendency is to search all the options inside the root for what you want, it seldom occurs to users to click on the root itself for choices. Organizationally, what goes on the root? Isn't there already a leaf for that option? If not is another leaf really needed? It appears that most non-leaf roots just have a collection of options that someone didn't want to bother organizing.  Despite this flaw this approach works pretty well and has decent discoverability but rates low on usability. You can spend a LOT of time in this dialog trying to find what you want. There are simply too many options buried in here and not enough sensible categorization. One very helpful feature in Eclipse (but not in most applications that take this BBOM use it – Visual Studio comes to mind) is the box at the top left that allows you to type a search string to limit the choices.

Still, typing "editor" still leaves you with too many seemingly arbitrary choices made by the designers. I've never counted, but I wouldn't be surprised if the number of options in this dialog exceed 1,000 in my configuration. That's just too many options for a single dialog. (The number of choices vary by the plug-ins installed.) In fact you'll see many questions asked online about how to perform a task in Eclipse that is nothing more than clearing or setting a checkbox in this dialog. When you need StackOverflow to manage  your options dialog box FAQs, it's time for a redesign. First most programs put the options under a Tools menu, it would be nice if Eclipse were consistent with that already established idiom. Secondly, Eclipse has unique constraints because so much of its functionality is plug-in based. Personally I would prefer if each plug in just had its own menu option. This would probably reduce a lot of clutter and increase discoverability. In fact it's probably a little unfair to blame the "designers" of Eclipse for too much here, because I suspect there is no such entity. Since much of the content comes from plug-ins, the plug-in authors control large chunks of this dialog. The price you pay for open-source and flexibility, although I still think this dialog works better than the equivalent one in Visual Studio 2010.

Tabs across the top

SNAGHTML23794abfAnother iteration on dialog option design is the tabbed dialog box with the tabs across the top. Also not a bad choice, a flaw appears only when there isn't horizontal room for all the needed tabs. In some approaches there is  an arrow-based  icon that indicates you can scroll to see more tabs. IE9 takes the tabs across the top approach but the dialog width is fixed (at way too narrow a value) and to avoid having too many tabs they just dump all the options that wouldn't fit into a scrolling  area on the Advanced tab. This means you have a lot of options to scroll through, so many in fact that I would say it significantly hurts discoverability and usability. Many times, I have found an option after a lengthy search and then months later done the same lengthy search again. Now I just write a blog article so I can remember it. It's pretty sad when the fastest way to find an optional setting in a program is to do a blog search.

 

The Not Tabs Across the Top

SNAGHTML237f8446The latest trend is for dialog boxes that use tabs that don't look like tabs and don't look like buttons, but act like tab buttons. I know I'm curmudgeonly and picky but what is the point in designing something so that it gives you no clue to its functionality? Because it looks cool? I questio any application that sacrifices usability for trendiness. Needless to say this is by far my least favorite, most space consuming choice and it's the one Firefox 4 decided to use as shown at left. They went one step further to make it even less user friendly.

It looks like the design team put a lot of thought into the organization of this dialog but then they made the decision to sacrifice discoverability for better organization. This dialog has eight "sections",  (can I just call them tabs?) When you're learning this dialog you naturally start from left to right and explore. The first seven tabs all have a similar layout and design so obviously the eighth is going to follow the same layout and design. I mean, come on, no designer is going to allow seven tabs to work one way and then depart on the eighth one after they've fully trained your eyes, mind and fingers on what to expect are they?  Of course they might be sadistic, misery loves company types, or maybe this dialog is a study in HCI and change blindness.

The Case Study

SNAGHTML2385290dI wanted to find the option to make FireFox my default browser. Obviously a setting the designers of FF want me to find right? I naturally assumed it would be on the first tab. It wasn't. I went through all eight tabs and just couldn't find it. This is the very definition of anti-discoverability. The Advanced tab appeared as shown in the image to the left. The other seven tabs look like the General Tab shown above. When I selected the Advanced tab it was already showing these Encryption options. (I can't tell you why, probably some other member of the family had been in here looking for something else). I went through all eight tabs twice and couldn't find the setting I was after. After searching other menus, I finally I resorted to the web and had to suffer through a really annoying  five page tutorial with pop up ads on About.com to see how to do this. I know some of you are saying I'm an idiot and my license to use a computer let along program one should be revoked but in my mind, if a programmer that's been using personal computers since the Apple ][ came out, can't use your dialog, then YOUR DIALOG IS BROKEN. What's going to happen when my mother goes to use your browser?

What Happened?

Firefox changed the rules on the eight section, that's what happened. They gave me seven tabs where all the choices were in the content panel, they trained me to expect it, they trained my eye to search it. They didn't train my eye to expect that on the very last section they would bury a tabbed dialog inside the content pane. They even went so far as to use a different type of tabbed dialog to enhance the chances that I wouldn't see it.

I appreciate the fact that they went t0 the trouble to organize the Advanced options into four sections but almost any other approach would have helped me find those options better. If they needed more panels, then the dialog box should be wider. If they had a specification that said all dialog boxes must be designed for users who only have a 537 pixel wide monitor (really you think?) then they should have put scroll icons of some sort in the non-button, non-tab, selectable area at the top. After all this is the area they trained me to look at for more options. Putting a different looking tabbed dialog inside the content pane was just bone-headed. They should have provided some screamingly obvious clue that this tab and its content panel were different than all the other ones I had just viewed. Labeling the tab Advanced doesn't mean it should be poorly designed. Now, if it had been labeled Poorly Designed Hodgepodge of All the Options We Couldn't Put Anywhere Else, then at least I would have had a clue to look more carefully.

Your Design

When you're designing your application and your options dialog, take a look at the programs you use. Just because they come from ginormous corporations or large open-source peer reviewed projects,  doesn't meant they are well designed. If you have trouble using them, then you aren't the only one. Think about how you can alleviate those problems in your own design for your target audience.

About Me

My photo
Tod Gentille (@todgentille) is now a Curriculum Director for Pluralsight. He's been programming professionally since well before you were born and was a software consultant for most of his career. He's also a father, husband, drummer, and windsurfer. He wants to be a guitar player but he just hasn't got the chops for it.