Visible Interfaces

Now for some specifics. A summary of the common visible interfaces used by Windows programs follows.

Commands

• Menu bars Menu bars are a highly visible, hierarchically organized catalog of a program's features.
• Toolbars with tooltips Toolbars are less visible than menu bars because they lack the context that menus provide. Menus have a clearly indicated hierarchy with submenus, cascading menus, and separators to show relationships. Toolbars do not have descriptive categories, and the placement of buttons on a toolbar is far less significant than the ordering of commands in a menu. Also, a menu command can include an ellipsis to indicate that giving the command will require more input, but toolbar buttons do not use ellipses.
• Coordinated menu bars and toolbars Using the same icons on both menu commands and toolbar buttons adds extra visibility by giving a visual indication that the commands are the same. (See the screen shot below.)



• Hyperlinks The popularity of the World Wide Web has made hyperlinks an especially popular user interface. Just point and click. However, the best way to make sure that hyperlinks are visible is to use the standard hyperlink colors to clearly indicate that the text is a hyperlink and not just underlined text. Unfortunately, hyperlink colors are not yet in the system colors—I think they should be—but you can get the hyperlink colors used by Microsoft Internet Explorer by reading the registry values Anchor Color and Anchor Color Visited under the HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Settings key.

Windows

• Dialog boxes A well-designed dialog box with instructive labels and with controls organized to clearly show their relationships is a very visible mechanism for performing tasks.
• Wizards A well-designed wizard that doesn't require any external information to be used is a very visible way to help the user perform complex tasks.

Controls

• Command buttons A command button with clear, descriptive text is one of the most basic visible user interfaces. Note how the animation performed when a command button is clicked reinforces its correspondence to real-world buttons and clearly separates it from other nonclickable user interface elements.
• All other controls except edit boxes All controls except for edit boxes have a high degree of visibility. Edit controls are visible only when the user is free to enter any text or numeric input, since only then is its functionality obvious by inspection. When the input is constrained, other more specific controls are much more visible, as in these examples:



• Edit boxes with spin boxes and browse buttons Providing spin boxes for numeric input and browse buttons for file paths is a simple, visible mechanism to help the user give valid input in an edit box. In this case, the edit box still really isn't visible but the associated control is.

Visual Feedback

• Plain old text Just because Windows is a graphical user interface doesn't mean you can't use text. In fact, sometimes the most visible way to communicate with the user is to just say something. For example, Microsoft Outlook and the Find utility indicate when no information is available by showing "There are no items to show in this view." This text also eliminates the need to display a notification message reading "No matches found." You can't get more visible than that.
• Previews Previews are an effective way to give the user feedback on the results of a command without the user having to perform the command. They make features self-explanatory and easy to understand, reducing the need for documentation.
• Tooltips Tooltips make the functionality of toolbar buttons and other user interface elements visible by displaying a little popup window with brief context-sensitive information. However, you should never use tooltips as an excuse not to make the meaning of your icons and other screen elements obvious.
• Cursor hinting Cursor hinting allows the cursor to change shape when it passes over an object; the cursor's new shape suggests what the user can do with that object. Cursor hinting is commonly used to visually indicate text that is editable, a window or other object that can be moved or resized, or a dragged object that can be dropped.



• Status bars Status bars work well to make status information and feedback for background tasks visible. Status bars can be used to make selections more visible. For example, the visibility of a multiple-selection list can be significantly improved by indicating how many items are selected, as done with the Windows Explorer status bar. This technique not only helps the user know what has been selected but also makes it obvious that multiple selection is possible in the first place.
• Animation Animation is a visible way to indicate that a command is being performed or that an object is being manipulated. Animations such as zoom rectangles can also show cause-and-effect relationships. For example, when you access the Find dialog box in Microsoft Word, zoom rectangles go from the Select Browse Object button below the vertical scroll bar to the Find dialog box. When you close the Find dialog box, the zoom rectangles go from the dialog box back to the button. This action makes the relationship between the Find dialog box and the Select Browse Object button (as well as the Previous Find and Next Find buttons) very visible.

Other

• Grabbers Grabbers are raised lines on a window that indicate that the item can be dragged. For example, the new 2-D menu bars have grabbers on their left-hand side to indicate how they can be moved. For another example, the Open and Save As common dialog boxes in Windows 98 clearly indicate that they can be resized through a combination of grabbers in the lower right corner and cursor hinting.

Edit boxes are especially challenging to make visible. While an edit box that allows any kind of input in any format is visible, an edit box that requires the user to enter text according to some constraint is not visible. For example, requiring the user to enter -1 into an edit box to indicate a special state makes the edit box's functionality invisible. On the other hand, a check box used to indicate such a state is visible, even if the -1 value is stored internally. Another example is an edit box that requires a date to be entered in a special format, such as "07FEB1961." In this case, using the new date and time picker control is much more visible. If you want to make a constrained edit box visible, the best alternatives are to

• Use spin boxes for numeric input and browse buttons for file paths
• Supply an appropriate default value in the required format
• Put the required format in the label or other nearby static text