Home > Graphic User Interface >
Dialogs

Overview

"Confusion and clutter are failures of design, not attributes of information." — Edward R. Tufte, Envisioning Information

Compare just the buttons in the following dialogs from Mac OS X and Windows XP:

save-panther.jpg
Buttons from a Mac OS X dialog


Buttons from a Windows XP dialog

Both screenshots were both taken from a standard Save dialog in each operating system. This illustrates the differences in approach that Apple and Microsoft take regarding dialog box design.

Complete your PC certification classes and finish your online degree program right now at this online college.

Mac OS X

OS X has two different forms of dialogs - "regular" dialogs that appear in their own window, and "sheets" that slide out from underneath a window's title. Sheets are unique in that they attach themselves to the window that they pertain to, which has two advantages:

  • It is clear which window the dialog applies to
  • The dialog does not interrupt one's workflow (you can move a window with an open sheet, or ignore it until you're ready)


Note how the "sheet" is attached to the TextEdit window and doesn't prevent you from working elsewhere

Mac OS X places the strongest visual weight on the safest button in a dialog box. In addition, OS X separates the "safe" buttons from the "unsafe" buttons, minimizing the chances of accidentally performing an unwanted (and possibly irreversible) operation. Note how "Save" is highlighted in blue, and "Don't Save" is placed away from the dialog's other buttons:


This dialog appears when you attempt to close an unsaved document

Apple's own developer guidelines explicity state that a button that "could result in data loss" should be positioned "at least 24 pixels away from the 'safe' buttons (Cancel and Save, for example)." In addition, Apple recommends that developers use verbs for button titles, which has two advantages:

  • The function of each button is very clear
  • The user does not have to read the dialog text to understand the function of each button

Windows XP

Windows XP dialogs always appear in their own window. XP places the strongest visual weight on the safest button in a dialog box, although "safe" buttons are not separated from "unsafe" ones (as seen in the screenshot at the top of this section).

Standard Windows dialogs use "yes" and "no" for button titles rather than verbs. This can sometimes result in confusing dialogs:


Internet Explorer's "Media Bar Settings" dialog

The use of "yes" and "no" buttons in this dialog forces the user to read all of the text in order to understand what each button does. The dialog text itself is somewhat confusing, as it is worded such that it can be answered with a "yes" or "no" response. For instance, what happens if you click the "no" button? Will the item not play at all? Will it play in the current window rather than in "its own window" as the dialog says? Clicking "no" will in fact play the item externally in your default media player, which the dialog did not explain clearly. While it's true that you can click the "More Info" button for clarification, a better designed dialog wouldn't need to provide additional information to begin with:


A mockup redesign of the above dialog

This redesigned dialog takes up less space and is much easier to understand. The action assigned to each button is clear, and the need for a "More Info" button is eliminated.

Conclusion

Mac OS X's implementation of dialog "sheets" is smart, as it makes it clear which window a dialog applies to, and also doesn't force you to respond to the dialog immediately. Its placement of "dangerous" buttons away from other buttons creates a safeguard that helps prevent users from losing data or making other irreversible changes. In addition, the philosophy of using verbs as dialog button titles has considerable advantages over XP's method of using "yes" and "no" - the function of each button is clearer, and reading the dialog text is not essential.

Of course, these "rules" for dialog box buttons are merely recommendations. Developers are free to use "yes" and "no" buttons on Mac OS X, just as they are free to use verb buttons on Windows XP; likewise, they can place buttons anywhere they wish. Still, examples from within each operating system show the dialog box design that each favors (and therefore encourages developers to follow).

Mac OS X: 8
Windows XP: 5

Back Adherence To Fitt's Law | Next Feedback & Responsiveness