Choose the Proper Screen-Based Controls 451

Step 7: Choose the Proper Screen-Based Controls 451

For exiting and expanding/invoking feature buttons, do not — Align with the other screen controls. — Present displayed within a line border.

Provide equal and adequate spacing between adjacent buttons.

Provide adequate spacing between buttons and the screen body controls.

For Web pages spanning more than one screen — Repeat the buttons at the top and bottom of the page.

Command buttons should be positioned in consistent positions within a window. This enables a person to memorize button locations and predict where they will appear when a window is presented. For an experienced user this permits faster point- ing and activation because a button may be identified simply by its location without its label having to be read, and a mouse movement to that location may be commenced before a window is even displayed. Consistent locations also aid in quickly discrimi- nating the different kinds of buttons described below. A common failing of many win- dows is that buttons are positioned within windows after locations for the other window controls are established. When this occurs, buttons are positioned where there is space available. The result is usually a hodgepodge of locations. Never simply “fit” buttons in available space. Allocate a space for buttons before the other control locations are established.

Button location within a window is dependent upon the type of button. Buttons exiting a dialog, and usually closing the window, should be positioned horizontally and centered across the lower part of the window. This positioning places the buttons at the end of the dialog. A study of Web pages (Spool et al., 1997) found that people preferred to scroll to the bottom of a page to press the final buttons. If a button invokes

a dialog feature or expands the dialog, position it centered and aligned vertically along the right side of the window. Maintaining these consistent locations will enable a per- son to quickly identify what general kind of button it is, and what kind of action will occur if the button is activated. The location of the exiting buttons across the bottom will also allow more efficient use of window real estate when invoking/expanding buttons are not included within a window. Exiting and expanding/invoking feature button locations are illustrated in Figure 7.5. If exiting and expanding/invoking fea- ture buttons must be positioned together at the screen bottom because of screen space constraints, place the exiting buttons to the right, separating the groupings by one standard button’s width. If they are located together along the right side, place exiting buttons at the bottom, separating the groupings by one button’s height.

If a button has a contingent relationship to another control, position it adjacent to the related control in the order in which the controls are usually operated, as illustrated in Figure 7.6. If a button possesses a contingent relationship to a group of controls, posi- tion it at the bottom or to the right of the grouping, again in logical flow order, as illus- trated in Figure 7.7.

For Web pages containing buttons and longer than one screen, repeat the buttons at the top and bottom of the page. This will provide easier access to the buttons from varying locations within the page, minimize the chance of people missing the buttons, and comply with the expectancies of people who assume they will be found both at

452 Part 2: The User Interface Design Process

Invoking feature /

expanding dialog buttons

Exiting buttons Figure 7.5: Exiting and invoking feature/expanding dialog buttons.

Figure 7.6: Button with contingent relationship to a control. For exiting and expanding/invoking feature buttons, do not provide alignment

with the other screen controls. Maintain alignment and spacing only within the but- tons themselves. Trying to align the buttons to other screen controls will most often create variable spacing between the buttons themselves, which is visually distracting. Also, do not display buttons within a line border; instead present them on the back- ground of the window itself. The unique physical look of the buttons is strong enough for them to create their own visual grouping. Reserve line borders for individual con- trols or groups of controls that are in greater need of closure. Too many borders can also create visual clutter.