Articles Comments

GUI Journal » Controls, Featured, GUI Design, Mistakes, Tooltips » GUI Design: Vanishing Options

GUI Design: Vanishing Options

We’ve all had the experience of clicking on a menu expecting to select a particular option, only to find it disabled. Worse still is when it’s not there at all. This happens with dialogs, too. And it seems to happen to us just when we think we are finally getting comfortable with an application (or interface) or when we return after not having used it for a while. Few things in a GUI are more frustrating.

DISABLED OPTIONS

Figure 1 shows an example of WordPerfect® 9 with both menu options and toolbar options disabled.

Figure 1. WordPerfect® 9 with Grayed Print Option

For certain options, it’s fairly logical to determine why something is disabled. For example, Cut and Copy are disabled on the toolbar because there is nothing selected in the document. Also, the fact that Paste is enabled seems to indicate that something is available on the clipboard. The options for Undo and Redo seem pretty clear, too. I have apparently made a change that can be undone and, if I click Undo, then Redo will be available.

But, excuse me, what about the Print option? Why in the world is that disabled? It’s disabled both on the drop-down menu and on the toolbar. Related menu options such as Internet Publisher… and Publish to PDF… are also disabled. Figure 2 shows the tooltip that is displayed when hovering over the Print option. The tooltip “Specify how you want to print the document” is not helpful when I’m wondering how to simply “specify” print it now, please!

Figure 2. WordPerfect® 9 with Print Option Tooltip

It turns out that WordPerfect® has a quirk in that you cannot print when the focus is inside a header (or someplace similar). That makes absolutely no sense. (And, of course, the developers knew that it makes no sense.) But this is likely simply a case where the architecture made it really, really difficult to get the printing correct while editing some place other than the body of the document, so they decided to simply disable the option. It happens. The problem is that who would have a clue? And the designers did absolutely nothing to help you out (though it is likely documented somewhere where no one looks). Changing the tooltip to something like “Print not available while editing a header” would have been an excellent choice.

MISSING OR NEW OPTIONS

As bad as inexplicably disabled options are, it’s much worse when options are missing completely. Options that appear or vanish depending on the situation are extremely frustrating for users. Designers always have “a good reason” when they do this, but the user rarely has a clue what that reason might be.

Adobe® Lightroom® is a fabulous application used by photographers to edit digital images. Unfortunately, sometimes the application has different options on the Photo menu. Figure 3 shows a long Photo drop-down menu, Figure 4 shows a much shorter Photo version.

Figure 3. Adobe® Lightroom® with Long Drop-down Photo Menu

Figure 5 is a closeup screenshot of the two menus side by side for comparison.

Figure 4. Adobe® Lightroom® with Short Drop-down Photo Menu

There are drastic differences in these two Photo menus.

Figure 5. Adobe® Lightroom® Photo Drop-down Menu Variations

A photographer I know told me how frustrating this was when he was first learning to use this application. There are some very subtle clues as to why the menu options are different. Looking more closely at Figures 3 & 4 you will notice to the right and just below the menu bar that the first display is for the Library panel and the second display is for the Develop panel. In addition, the menu just to the left of the Photo menu shows menu names that match the panel in each case, while the menu name just following the Photo menu is also different. Unfortunately, these differences are so subtle and everything else is so similar that a user–especially a new one–has almost no chance of keeping track of where they are and why their desired menu options are suddenly missing and replaced by new ones.

This problem could have been avoided by either 1) making a much more obvious layout contrast between the Library and the Develop panels, or 2) using something other than the word Photo for both menus.

Having a similar look across a GUI is important, but if everything looks so much the same that the users can’t easily tell where they are, then you have a serious usability problem.

KEY DESIGN POINTS

1) If it’s not blatantly obvious why something is disabled, then give the user an explanation right in the GUI

2) Never have options appearing and vanishing (either on menus with the same name or anyplace else)

3) Make similar panels and/or menus obviously different, so users don’t think options are appearing or vanishing

GUI Design

GUI Design Guidelines

Graphical User Interface

User Interface

Graphical User Interface Design

Graphical User Interface Design Guidelines

Written by

Carl Andersen currently works for NetIQ and Novell (divisions of Attachmate) as a Software Engineering Consultant and User Experience Architect. Carl has led teams and been the principal designer of multiple GUIs which have received analyst acclaim. He also consults on multiple other products within Novell and NetIQ.

Filed under: Controls, Featured, GUI Design, Mistakes, Tooltips · Tags: , , , , ,

2 Responses to "GUI Design: Vanishing Options"

  1. Carl says:

    I was looking at some PhotoShop examples, too, when I was writing this. Funny you should mention it. I’m glad you like the tooltip idea. Thanks for your comment!

  2. Jason Sabin says:

    Rachel and I were just barely complaining about this last weekend with disappearing and disabled options in PhotoShop. Too funny! I never really thought too much about what is the best way to display this information. I like the thought of listing disabled but then having a tool tip of something which displays why it is disabled.

Leave a Reply

*


eight + 7 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>