Articles Comments

GUI Journal » GUI Design, Mistakes » GUI Design: One Way Ticket

GUI Design: One Way Ticket

One-way tickets certainly have their place in the physical world, but not in the navigation of dialogs in a GUI. When one dialog invokes another dialog (known as nested dialogs), the return trip should be part of the deal. GUI users expect a roundtrip ticket; they do not think they will be stranded somewhere with no apparent knowledge of what has happened along the way. Microsoft® Word® 2010 has more than one instance of stranding users at the end of a dialog trail.

 

MS WORD® PAGE SETUP DIALOG

The Page Setup dialog in MS Word 2010 is invoked by clicking the small icon in the lower right corner of the Page Setup group on the ribbon. The icon highlights and displays a large, helpful tooltip on mouse hover. Figure 1 is a portion of a screen shot of the highlighted Page Setup icon and tooltip on hover.

Figure 1. Microsoft Word 2010 Page Setup Icon and Tooltip

Figure 2. MS Word 2010 Page Setup and Line Numbers Dialogs

Figure 2 is a portion of a screen shot of the Page Setup dialog after the checkbox for Different odd and even has been checked, but the change has not been saved, and then the Line Numbers… button was clicked, invoking the nested Line Numbers dialog. This is a predictable (and standard) implementation where the user understands that clicking Cancel first on the Line Numbers dialog and then clicking Cancel on the Page Setup dialog will result in no changes being saved. So far, so good.

Unfortunately, the same cannot be said regarding the Borders… button. Figure 3 is a screen shot of the Borders and Shading dialog, which is invoked by selecting the Borders… button (after the Line Numbers dialog has been dismissed). Note that it does not appear over the top of the Page Setup dialog. Instead, selecting the Borders… button actually dismisses the Page Setup dialog and invokes the Borders and Shading dialog in its place.

Figure 3. MS Word 2010 Borders and Shading Dialog

The problem with this implementation is that the user may not be finished with the settings on the previous dialog. The user also lost the chance to select the OK button or the Cancel button. In fact, until the user invokes the dialog again, it may not even be clear which one happened. It turns out that the changes are automatically saved, simulating the OK button. That is a non-standard, unpredictable, poor implementation.

I’m sure the reason it was done this way is because the Borders and Shading dialog can be invoked independently by selecting Page Borders in the Page Background group of the ribbon (see Figure 1). So when this dialog is invoked from within another dialog, the application (to use a metaphor) changes horses mid-stream, leaving the user unaware of what has happened with the valuables in the saddlebags on the previous horse!

If this dialog cannot be nested (like the Line Numbers dialog), then a better choice would have been to show the Borders, Page Border, and Shading tabs as additional tabs on the Page Setup dialog. In this way, all changes would be saved and/or canceled simultaneously by the dialog’s OK and Cancel buttons, resulting in a standard implementation and behavior.

 

MS WORD PARAGRAPH DIALOG

The Paragraph dialog is another example in Word 2010 of the same problem. This dialog is invoked by clicking the icon in the lower right corner of the Paragraph group of the ribbon (similar to Page Setup in Figure 1). Figure 4 is a portion of a screen shot of the Paragraph dialog after the Alignment value has been changed to Centered but the change has not been saved (see the left-aligned paragraph behind the dialog).

Figure 4. Microsoft® Word® 2010 Paragraph Dialog

Like the Borders… button on the Page Setup dialog, the Tabs… button on the Paragraph button will automatically dismiss the Paragraph dialog and simulate clicking the OK button, saving the current changes. Figure 5 is a portion of a screen shot of the Tabs dialog immediately after it is invoked by selecting the Tabs… button.

Figure 5. MS Word Tabs Dialog Dismisses the Page Setup Dialog

Note that the paragraph behind the dialog is now centered, as specified in the previous dialog before it was dismissed. This might seem like the logical choice, but the user may have decided to use Tabs to achieve the desired formatting changes, rather than changing the alignment. Not giving the user the opportunity to cancel the changes on the first dialog is a huge design mistake.

If the user did not want those previous changes saved, then the Page Setup dialog must be invoked one more time in order to change them back and then save the changes. Again, this dialog should either be nested or the Tabs functionality could be added as a tab on the Paragraph dialog. Again, poorly done.

 

KEY DESIGN POINTS

  1. A nested dialog should never dismiss its parent dialog.
  2. Never automatically simulate selecting OK or Cancel on a dialog without making it obvious to the user.
  3. Users expect a roundtrip ticket, so don’t leave them stranded!

 

 

Written by

Carl Andersen currently works for Micro Focus International as a Senior Development Manager. Carl has led teams at NetIQ, Novell, and WordPerfect and been the principal designer of multiple GUIs which have received analyst acclaim.

Filed under: GUI Design, Mistakes · Tags: , , , , ,

Leave a Reply

*


eight − = 5

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>