GRAPHIC ELEMENTS IN USER INTERFACESLecture 6

Access keys/ Shortcut keys

• An access key (hot key or mnemonic) is an alphanumeric key that users can use instead of a pointing device to activate interactive controls.

• an access key correlates to a designated character in a control label. (ex: File menu, for which the access key is typically F, the user would press ALT+F).

• Access keys are associated only with controls that have text labels.• Most access keys are associated with ALT

• shortcut keys - a quick means for experienced users to perform common actions.

• most shortcut keys are associated with CTRL.

Access Keys Text Guidelines• When assigning access keys, choose a letter as close to the

beginning of the label as possible, preferably the first letter. 

• Avoid duplicating access key assignments on the same surface. Duplication confuses users at best; at worst, it prevents them from accessing the control. 

• To aid the visibility of access keys, avoid assigning them to the following characters (from most problematic to least problematic): 

• Letters that are only one pixel wide, such as i, l, a period (.), or a colon (:) 

• Letters with descenders (such as j, g, q, y, j, and p) 

• Letters that are next to a letter that has a descender

Access Keys Design Guidelines• Assign access keys to all interactive controls that have text labels. Such

controls include:•

Read-only text boxes from which users might want to copy text.

• Static text fields for which the size of the value might exceed the size of the field (so that keyboard users can view the entire value).

• The following controls take no label and therefore no access key: toolbar buttons, spin box buttons, split bars, and tree view controls.

•

Exceptions: Do not assign access keys to the OK, Finish, Cancel, or Help command buttons. 

• OK and Finish are assigned to the ENTER key, Cancel is assigned to ESC, and Help is assigned to F1.

• The command buttons OK and Cancel do not take access keys. 

Check boxes• A check box presents the user with a single yes or no decision, or a decision

between two opposite choices.

• You can use a check box by itself or in a group of check boxes. Unlike with single-selection controls such as a drop-down list box or a set of option buttons, a user can select any combination in a group of check boxes.

• A check box appears as a square box with an accompanying label. When the choice is selected, a check mark appears in the box. When the choice is not selected, the check box is empty.

• A check box can have one of three states:• Checked — the associated value is set.

• Cleared — the associated value is not set.

• Mixed value — the associated value is set for some, but not all, items in the current selection.

Check boxes states

Check boxes deign guidelines• Make clicking a check-box label have the same result as clicking its associated check

box.

• Use check boxes only when both states of a choice are opposites and unambiguous. Otherwise, use option buttons or some other form of single-selection control instead.

• Group related check-box choices. A check box in a group follows the same guidelines as a single check box. The user may select any combination of check boxes in a group.

• In a group, list check boxes in a logical order (such as most likely to be selected to least likely, simplest operation to most complex, least risk to most, and so on).It’s recommended that you use no more than five check boxes in a group

• If you need to display more than five choices, consider using a different type of control, such as a multiple-selection list box or a scrolling list box that contains check boxes and their labels.

• Stack check boxes vertically, not horizontally. Horizontal alignment leaves insufficient space for localization.

Check boxes deign guidelines• You may make a check box interoperate with a peer control, provided

that control is not another check box. For example, you can use the state of a check box to filter the contents of a list

• when embedding check boxes in a list box control, use the flat check box appearance

Check boxes text guidelines• Label all check boxes.

• Use sentence caps for check-box labels.

• Write check-box labels as sentence fragments (or imperative sentences) with no ending punctuation.

• Avoid long check-box labels.

• If a check-box label also labels the control that follows it, use a colon. 

Check boxes guidelines

• For check boxes in a set or in a group box, write parallel labels of approximately equal length.

• Use select and clear in instructions for check boxes—for example: "To add a component, select its check box. To remove the component, clear its check box."

• Write check-box labels so that they describe the checked (selected) state of the check box.

• Use grammatically positive phrasing for all check-box labels. Do not phrase a label so that selecting a check box means to not perform an action.

• Exception: You may use a "Do not show this (item) again" check-box label on wizard welcome pages, dialog boxes, and messages.

• Do not use a check box and its label as part of a larger grammatical unit. Don't use controls in the middle of a phrase, clause, or sentence. This is not a localizable design because the order of grammatical units varies from language to language.

Column headings• A column heading is a title above a column of text or

numbers in a box or table.

• Column headings can support sorting or other actions when the user clicks them.

Column headings design guidelines• In the leftmost column, put the objects’ unique identifiers

(for example, names or GUIDs), if such is available. Otherwise, use the objects’ most distinctive or important information. 

• Make each column as wide as its longest entry, plus 30 percent (for expansion during localization). 

• Left-align column headings and the values underneath them. 

Exception: For columns of numerical values, right-align the heading and values. 

Column headings text guidelines• Keep column heading text brief (one or two words). If you

have a choice, use a single noun or noun phrase (A group of words containing a noun or a pronoun that functions as the subject or object of a verb.).

• Use title caps in column headings.

• Do not use ending punctuation.

• Match column headings to the controls and dialog boxes in which you would edit the contents of their respective columns.

Command buttons• Users click a command button in order to immediately

perform an action, such as opening another surface.

• A command button is rectangular and includes a label.

• Command buttons appear in a variety of contexts. A given property sheet, for example, might have command buttons that affect a specific text box, the active tab (page), or all the tabs.

• The location of the command button determines its relationship to other controls.

Command button states

Command button design guidelines• Use command buttons for user-initiated actions (clicking a command

button results in the immediate performance of an action): closing or extending a surface, applying changes, opening a dialog box

• When another control interoperates with a command button, such as the pairing of a text box and Browse button, denote the relationship by placing the command button in one of three places:

• To the right of and top-aligned with the other control

• Below and left-aligned with the other control

• Between controls that interoperate (such as Add and Remove buttons between two interoperating list boxes)If multiple command buttons interoperate with the same control, lay them out horizontally, left-aligned under the control or top-aligned to its right.

Command button design guidelines• If the button provides direct access to a menu, include a triangular

arrow similar to the one found in cascading menu titles.

• Centered command buttons on message box 

If the button provides direct access to a menu, include a triangular arrow similar to the one found in cascading menu titles.

Command button design guidelines• If you use command buttons to change the sequence of values in a

list, use the text “Move Up” and “Move Down” for the button labels.

• Exception: Some control combinations, such as an Add/Remove layout on a property page, lack sufficient space for standard-sized Move Up/Move Down command buttons. In these cases, you may use the standard arrow icons in labels instead of text.

• Using arrow buttons in exception case 

Command button text guidelines• Use title caps for command-button labels.

• Use one-word command-button labels, and usually make that word a verb. This brevity eliminates redundancy and allows room for the localization of label text.

• two exception cases.

1. non-verb labels permitted: Back, Forward, New, Next, OK, Previous, Properties, Settings, and Detail.

2. you should use a direct object (a noun after the verb) when the object is not apparent from context. In the following example, Add is the label because the context already specifies the object (counters).

Command button text guidelines• For command buttons that open secondary surfaces, choose a command-

button label composed of part or all of the secondary surface’s title-bar text. For example, a command button labeled Browse might open a dialog box entitled Browse for Folder.

• If a command button expands the window to display additional information, include a double chevron (two angle brackets) in the button label.

• If the action is deferred (for instance, if an interim dialog box appears as a result), then the label takes an ellipsis. An ellipsis indicates to users that they have an opportunity to modify the task before it finishes.

 

• For certain standard buttons with the implied verb "open" (such as Properties, Settings, and Details), use no ellipses.

Command button text guidelines• When indicating direction in a label (such as

with Add and Remove buttons), use a single angle bracket instead of an arrow or a double chevron

Dialog boxes• a secondary window that prompts an exchange of information between the user and

the program.

• Use a dialog box to quickly obtain information that is needed to carry out a task.

• often invoked from other surfaces as a means of extending those surfaces—you can move infrequently used or sizable groups of related controls to dialog boxes.

• differ from property sheets, which simply describe an object’s current settings.

• Are more similar to wizards, which also collect information, but in steps across a sequence of surfaces.

• When the process of exchanging information requires considerable explanation, wizards are more appropriate than dialog boxes.

• the functionality and window dimensions of dialog boxes are more flexible than those of property sheets and wizards.

Dialog boxes design guidelines• Do not use customized dialog boxes when standard dialog boxes

exist - time-consuming, introduces inconsistency across the product, and increases localization costs.

• Standard dialog boxes include:

Open Save As Browse

Browse for folder Find Find and Replace

Print Page Setup User Name and Password

Color Font

Dialog boxes design guidelines• Every dialog box must include a means of closing the surface.

• available buttons and their behavior:

• Position the command buttons horizontally in the lower-right corner.

• If you use the OK button, make it the left-most button.

• If you use the Close command button, you must map it to the ESC key.

Dialog boxes text guidelines• Avoid crowded dialog boxes. Leave room for 30 percent

expansion for Localization.

• Use title-bar text that reflects the command that opened the box. For example, the Browse button might open the Browse dialog box or the Browse for Folder dialog box.

• Avoid large descriptive blocks of text, particularly in dialog boxes crowded with other controls.

Drop-down menus• A drop-down menu appears when the user clicks its label,

which remains visible when the menu is hidden.

• Drop-down menus are typically grouped together in a menu bar, just under the title bar of a surface.

Common drop-down menusStandard Drop-down Menu Command Description

File Contains commands pertaining to an entire file or resource, such as: New, Open, Close, Save, Save As, Send To, Print, and Exit.

Edit Contains editing commands (usually pertaining to a subset of a file, such as a selected item), such as Cut, Copy, Paste, Undo, Redo, Find, Replace, and Delete. The commands on this menu also appear on the shortcut menu of a selected object.

View Contains commands that change the appearance of the surface, such as Toolbars, Status Bar, Large/Small Icons, Details, Thumbnails, Arrange Icons, Choose Columns, Customize, and Refresh. The commands on this menu also appear on the shortcut menu for the surface.

Help Contains commands that open additional information, such as Help Topics and About [component name].

Drop-down menus design guidelines• When the user uses a shortcut key for a command in a drop-down menu, you should

highlight the menu label, but do not display the drop-down menu itself.

• Every command on a toolbar must be on a drop-down menu, too. This ensures both access key accessibility and discoverability (toolbars can be hidden).

• Use unique menu labels across the menu bar or within an individual menu. Labels can be repeated in different menus when they represent similar actions.

• If you provide user access to copyright and version information for your program, include an About [application name] command on the Help menu. When the user clicks this command, display a window containing the program's name, version number, copyright information, and any other information related to the application. You can display this information in a dialog box, or you can display the Version tab on the property sheet for the application's main executable file.Do not use an ellipsis[ … ] at the end of the About command. The resulting window does not require the user to provide any additional information.

• If your program supports the Exit command, place this command at the bottom of the File menu, preceded by a menu separator.

Drop-down menus text guidelines• In a menu bar, use single words for menu labels.

• A multiple-word label might be confused for two one-word labels.

• don't create artificial compound words (e.g. Fontsize)

• Make menu command labels as brief as possible, but clearly describe the functionality.

• Use unique menu labels across the menu bar or within an individual menu. Labels can be repeated in different menus when they represent similar actions.

Labels• A label (do not use the word "caption") is text attached to any

option, box, command, etc.

• Refer to any option, box, and so on by its label.

• For accessibility purposes, all list- and text-box controls should have labels, as well as any object, window, image (use alt text), or other kind of box.

• Write a clear, concise label for every control on a surface.Exception: Sometimes two or more controls can share a label, such as when a spin box is subordinate to an option button or when two drop-down list boxes are logical subsets of the same concept.

Labels• You may also specify units (seconds, connections, and so on) in

parentheses after the label. Do not place the units label to the right of the subordinate control, as it is problematic for localization.

• Do not put periods at the ends of labels, even if the text constitutes a complete sentence.

• Include a colon at the end of the label except when labeling a command button, tab, group box, option button, or check box. 

• Exception: If an option button or check box label also introduces subordinate controls, include a colon. 

Labels• Make sure there is alt text for graphics labels or unlabeled

controls.

• Additional information that is helpful but not necessary should be kept short. Place this information either in parentheses between the label and the colon following it or without parentheses below the text box.

• Always spell out for example and that is; never use i.e. or e.g.

• Avoid writing labels as questions.

List boxes• List boxes are versatile controls that allow users to select from

a list of values.

• list boxes can vary in appearance and function.

• Two list boxes forms:• the basic rectangular (or scrolling) list box, for which the list of values is

always visible• the drop-down list box (or picklist), for which the list appears only on

demand.

• Functionally, there are two main types of list boxes: • single-selection• multiple-selection list boxes.

List boxes – choosing the right list box type

Single-Selection List Boxes• In a single-selection list box, only one item in the list of values

can be selected at a time. The function is similar to that of option buttons, but a list box can more easily display a large number of values.

• Single-selection list boxes can be in either the basic or drop-down form.

• Drop-down list boxes are always single-selection.

• In a basic list box, the selected value is highlighted.

• Clicking another value moves the highlight to the new selection.

Single-Selection List Boxes• Drop-down list boxes• In its closed state, a drop-down list box displays the currently selected value for

the control.

• To change the value, the user opens the list and clicks another value.

• The selected value then is displayed in the closed list box. Highlighting denotes input focus (not selection, such as in the basic list box).

• The user clicks a highlighted value to select it.

• drop-down list boxes are an effective way to conserve space and reduce clutter

• require more user effort to browse and select an item than does a single-selection list box.

Single-Selection List Boxes• Drop-down combo list box• A drop-down combo list box combines the characteristics of a text box

with those of a drop-down list box.

• The text box and its associated list box have a dependent relationship.

• As the user types text in the box, the list scrolls to the nearest match.

• it’s visually indistinguishable from a regular drop-down list box. That is, the user’s ability to type text isn’t very discoverable.

• Recommended to use the scrolling combo list box (sometimes called an extended combo box), which functions similarly but uses a separate text box to indicate that the user can type an entry.

Multiple-Selection List Boxes

• Extended- and multiple-selection list boxes follow the same conventions for height and width as do single-selection list boxes.

• Their function is similar to that of check boxes, but multiple-selection list boxes can more easily display many values.

• If you allow extended selection, users can employ SHIFT+click and CTRL+click to select groups of contiguous and disjointed values, respectively.

• Multiple-selection list boxes are generally visually identical to single-selection list boxes.

• To better expose the multiple-selection functionality, consider using a list view control instead.

List Boxes Design Guidelines 

• For drop-down list boxes only• Make a drop-down list box as wide as the longest value it contains, plus 30 percent (for

expansion during localization). Drop-down list boxes do not scroll horizontally and don’t have InfoTips that reveal obscured values, so users can read only what you make visible in the control.

• Vertically, make the list large enough to display three to eight items when open.

• If the values in a drop-down list represent a property for which the current state is mixed, display no selected value. In the closed state, the control should appear to be empty.

• Do not move focus from the drop-down list after the user selects a value in the list. Moving focus surprises and disorients the user. For example, do not open a new surface as soon as a selection is made.

• Exceptions: • If the drop-down list is in a toolbar, you may move focus upon selection

• if the drop-down list has subordinate controls that become active when a value in the list is selected, you may move focus to the first of the subordinate controls.

List Boxes Design Guidelines • Allow multiple selection by default.

• If you allow extended selection, cue users with instructional text such as “Select one or more x.” Without such a cue, users will have to experiment with list boxes to see if extended selection is available.

• Do not embed check boxes in a list box in order to create a custom check-box list. This would not be accessible, and a common-control alternative is available. Use a list-view control with the check-box style instead.

• Allow horizontal scrolling. Even if the longest value is entirely visible in English, it might not be when localized.

• When you allow a horizontal scroll bar to appear as needed, localizers won't have to request this functional change later.

• When sizing a list box, show as many of the values as space allows.

• Minimally, make the box height no fewer than three values and generally no more than eight, unless the size of the list varies with the size of the window.

• As much as possible, make the width of the box the same as the longest probable value in the list.

List Boxes Text Guidelines

• Label every list box with a short label, preferably one-word.

• Use sentence caps for list-box labels and values in the list.

• End a list-box label with a colon.

• Use select in instructions for a list box.

• Use box instead of field to refer to a list box.

• If you need to add instructional text pertaining to the list box, add it above the label. Use ending punctuation and complete sentences in the instructional text.

• Above drop-down combo list boxes, provide instructional text that tells the user to "select or type" a value. This is important because these controls are otherwise visually indistinguishable from regular (uneditable) drop-down list boxes.

List View Controls

• A list-view control is a versatile control that displays objects in various views and levels of detail.

List View Controls Design Guidelines 

• A list-view control displays objects in various views and levels of detail

• Provide shortcut menus for objects in a list-view control (for example, containing Copy, Properties, and so on.) This provides a consistent experience for how the user interacts with objects in list-view controls elsewhere in the Windows interface.

• When creating a check-box list, use a list-view control, not a list box. List-view controls support the display of graphics that can be used to represent state information.

• Check-box lists are useful because extended selection capability is more obvious than in an ordinary list of values, where the user often must use trial and error to discover extended selection

• In List and Details views, you can use a column-heading control—also known as a header control—to display headings above the columns

List View Controls Design Guidelines• If the control has only one column and has a label, no column-heading control is needed.

• In the leftmost column, put the objects’ unique identifiers (for example, names or GUIDs), if such are available. Otherwise use the objects’ most distinctive or important information.

• Consider sorting the list when the user clicks a column heading, and on subsequent clicks, reverse the sort order.

• Visually indicate whether the list can be sorted by changing the style of each column heading. Use a raised appearance when they’re sortable, a flat appearance when they’re not.

• For lists that can be sorted, a carat should appear in the heading of the column by which the list is currently sorted.

• You can support displaying a shortcut menu when the user clicks headings by using the secondary mouse button. The shortcut menu would contain commands specific to that part, such as Sort Ascending and Sort Descending.

• A column header can be text and/or an icon.

List View Controls Text Guidelines• Place the label above and flush-left with the control. If the user can manipulate the

listed items in any way (including copying), the label takes an access key.Exceptions: List-view controls do not take a label when they:

• Comprise a Windows Explorer window

• Comprise the results pane in MMC

• Place a colon (:) after the list-view control label.

• Keep column heading text brief (one or two words). If you have a choice, use a single noun or noun phrase.

• Use title caps in column headings.

• Left-align column headings and the values underneath them.Exception: For columns of numerical values, right-align the heading and values.

• Do not use ending punctuation on column headings.

Menus• A menu is a list of commands available to the user in the

current context.

• Menus differ from other lists of commands (such as task lists) in that menus are available on demand. The commands they contain are otherwise hidden from the user and they are therefore an efficient means of conserving surface space.

• There are two main types of menus: the comprehensive drop-down menus (often grouped in a menu bar) and the smaller shortcut menus, which contain core tasks.

Menus

Menus• to prevent a menu from listing an overwhelming number of

commands, you can group related commands in cascading menus.

• A cascading menu (hierarchical menu, submenu, or child menu) is a secondary menu that appears on demand—when the mouse pointer clicks or hovers over its label.

• The visual cue for a cascading menu is a triangular arrow displayed adjacent to its label, which appears as a command in the parent menu.

Menus Design Guidelines• For any selected object, make all the contents of the Edit and View menus also appear

on the shortcut menu.

• Use separators to separate obvious groups of commands.

• Designate one character out of each menu title or command as its access key.• Guidelines for cascading menus:

• If three or more menu commands begin with the same word, put them on a cascading menu that uses that word as its label. In the following example, the Newcascading menu replaces separate commands for New Computer, New Contact, New Group, and so on.

• Avoid using cascading menus in other cascading menus. Multiple levels of cascading menus add complexity and can be disorienting.

• Do not place frequently or repetitively used commands on a cascading menu, where they will be more difficult to locate.

• Do not use graphics-only or owner-drawn menus that do not support keyboard access. These types of menus are not accessible to all users.

Menus Design Guidelines• If a menu command is not appropriate or applicable in a

particular context, then disable it.

• Hiding menu commands is disorienting and denies users knowledge of their potential options, and a message informing users that a command is unavailable is disruptive.

• Exception: If disabling a menu command creates performance problems, you can leave the unavailable command active and have its selection result in an error message.

• Do not put icons next to menu commands.

Menus Text Guidelines• Use title caps for all menu commands.

• Include an ellipsis (...) at the end of a menu command that opens another dialog box rather than immediately performing an action.

• Label and capitalize a menu command in the same way on the menu and the shortcut menu.

• Use verbs or noun phrases to label menu commands that represent actions.If the menu name is a verb, use a noun or noun phrase for the menu command. For example, if the menu name is Insert, the menu commands can be Text, Table,Picture, and so on.

•

If the menu name is a noun, use a verb or verb phrase for the menu command. For example, if the menu name is Table, the menu commands can be Insert Table,Select Row, Insert Column, and so on.

• When referring to a menu or menu command, don't capitalize the descriptor (the word menu or command).

Option buttons (Radio buttons)• An option button is a control that represents a single

choice within a limited set of mutually exclusive choices.

• Similarly, the user’s selection of an option button is indicated by a dot appearing in the button.

• For tasks for which the user might select any combination of options, use a different type of control, such as check boxes.

Option Buttons Design Guidelines• List the default option button first. List the other buttons in the set in a logical order (such as most likely

to be selected to least, simplest operation to most complex, least risk to most, and so on).

• Group option buttons in sets no smaller than two options. It’s recommended that you use no more than five option buttons in a set. Do not exceed seven. If you need to display more than five choices, consider using a different type of control, such as a drop-down list box.

• Do not use the selection of an option button to trigger events (other than setting a particular option or value). Prohibited events include dynamically displaying text or controls when an option button is clicked, because screen-readers cannot detect such events.

• When a group of option buttons represent a property that’s already in a mixed state, no button should be clicked.

• Assign access keys to option button labels. You should also support the TAB or arrow keys to allow the user to navigate to and select a button.

• Stack a set of option buttons vertically, not horizontally. Horizontal alignment leaves insufficient space for localization.

• Do not move focus from the option button when the user clicks it, as the focus change surprises and disorients the user. For example, do not open a new surface as soon as an option button is selected.

Option Buttons Text Guidelines• Label every option button. 

• Use sentence caps for option-button labels.

• Don't use ending punctuation on option-button labels. 

• If an option-button label also labels a subordinate control that follows it, end the label with a colon. 

• For a set of option buttons, write parallel labels of approximately equal length.

• Positively phrase option-button labels. That is, use do instead of do not, use print instead of do not print, and so on.Exception: The common "Do not show this (item) again" label seen on some wizard pages and dialog boxes.

• Avoid long option-button labels. Ideally, option-button labels will be single-lined and use no more than two-thirds of that line. Option-button labels must be brief so that they can be easily referred to in messages and documentation.If more description is necessary, you may add complete sentences, with end punctuation, under the option-button labels. If you have both descriptive text and a subordinate control under an option button, place the text first.

• Do not use option buttons in group-box labels.

• Use "click" in instructions for using option buttons. For example: "Click Only on Tuesdays, and then click OK."

• Do not repeat words unnecessarily at the beginning of option-button labels. Repetition makes it harder for the reader to scan the text and differentiate among the options.

• Label every set of option buttons. The label allows references to the set both in the UI and in documentation.

Progress Indicators 

• Progress indicators are non-interactive, visual cues that indicate that a process is underway. They provide “busy” feedback to the user

• can be displayed as mouse pointers, which typically change into an hourglass to indicate a “busy” state, as progress bars, and as .avi animation.

• The progress bar, also erroneously referred to as a status bar or slider, shows the estimated percentage of completion of a lengthy operation, such as printing or setup.

• The percentage of completion shown is only an approximation; it does not always correlate precisely with the process underway.

• Progress is indicated by a solid or segmented rectangular bar that “fills” from left to right.

Progress Indicators Design Guidelines

• Use the progress indicator that is appropriate for the process underway.• Do not embed text, such as a percentage, in the progress bar itself. This is

not accessible.

• If you provide a button for stopping a process in progress, use a Cancel button if the process is rolled back (the original state is restored). Otherwise, use a Stop button, which indicates that the process is partially complete.

• Use an hourglass pointer only over surfaces that are non-interactive during the process that’s underway. If the user moves the pointer over a window that is interactive, then change the pointer to its interactive form. If a process makes the entire interface non-interactive, display the hourglass pointer no matter where the user moves it.

• If the progress bar is contained in the status bar, put any corresponding message text to its left in the status bar.

Progress Indicators Design Guidelines

If the process... Then use...

Takes 0-2 seconds No progress indicator

Takes 2-7 seconds Hourglass mouse pointer

Takes 8 seconds or more Progress bar or .avi animation

Awaits asynchronous return .avi animation

Progress Indicators Text Guidelines• for progress bars, place static or dynamic status text.

Make the status text short, informational messages (just an ing verb such as "Copying...").

• Avoid being too granular; each status message should be displayed for a minimum of 3 seconds.

• To indicate a continuing action, end the text with an ellipsis.

• For .avi files, do not use text, because it would have to be localized.

Shortcut Menus

•  also referred to as right-click, context, or pop-up menus

• provide an efficient way for the user to access commands relating to specific objects.

• Because shortcut menus are displayed at the mouse pointer’s current location, they eliminate the need for the user to move the pointer to the menu bar or a toolbar.

• because shortcut menus include commands that are specific to the object or to its immediate context, shortcut menus reduce the number of commands the user must browse through.

Shortcut Menus Design Guidelines• On shortcut menus, place only commands that apply to the selected object (or objects) and its context. For

example, a shortcut menu for a text selection can include commands for moving and copying the text.

• Do not make commands available only through shortcut menus. Like shortcut keys, shortcut menus are alternative means of selecting commands.

• Place commands on a shortcut menu in the following order when used:

• The object's primary commands — for example, Open, Play, Print.

• Transfer commands — Cut, Copy, Paste, and then other specialized Paste commands.

• Other commands supported by the object (whether provided by the object or by its context).

• The What's This? command (when supported).

• Properties and Help (when supported).

• When the user clicks an object by using the secondary mouse button, make that objected selected (if it isn’t already).

• Access keys, arrow keys, and ENTER and ESC keys operate in shortcut menus the same way they operate in drop-down menus.

• To enhance spatial efficiency and readability, avoid including shortcut keys in shortcut menus.

Sliders• A slider (trackbar), is a control for selecting one of a range of

values. • It consists of a bar that represents the range and an indicator that

shows the current value.

• Sliders are especially useful when all of the values in a range aren't known in advance.

• Sliders represent defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).

• Sliders are best used for ranges of four or more values; for smaller ranges, recommended to use option buttons instead.

Sliders Design Guidelines• Use a slider for setting defined, contiguous values (such

as volume or brightness) or a range of discrete values (such as screen resolution settings).

• Use sliders for ranges of four or more values.

Sliders Text Guidelines• Ensure that you leave enough room for all static text fields (for example, the indicator reflecting the current value) to expand by

30 percent during localization.

• Identify the extremes of the slider range. Make sure these range identifiers are descriptive and parallel ( Low/High, Soft/Loud).

• Position a slider label either to the left of the slider or above and aligned with the left edge of the slider (or its range identifier, if present).

• When the slider represents actual values (such as screen resolution)—as opposed to relative values (such as lower or higher volume)—display the value of current selection underneath the slider. Center this text relative to the control, and include the units (such as pixels) as shown below.

• Do not place other types of text (such as instructional text) underneath the slider.

• If values require explanatory text, place that text above the slider or consider using option buttons instead, so that the explanatory text is more accessible.

• Use sentence caps for all labels.

• End a slider label with a colon.

• Use move in instructions for a slider. For example, Move the slider to the right.

Spin Boxes•  spin box—sometimes called a spinner control—is a collective term for the combination of

a text box with an up-down control• Users can click arrow buttons (the up-down control) or press the UP ARROW or DOWN

ARROW key to change the value in the text box.

• The value ascends or descends incrementally.

• Spin boxes are useful when users don’t need to see the whole range of values in order to make a selection. For example, if the range is so familiar to users that they'll be able to infer all values from seeing just one (such as Monday indicating days of the week), consider using a spin box.

• When the user clicks the text box or the buttons, the input focus is set to the text box component of the control.

• Usually, the user can type a text value directly into the control or use the buttons to increase or decrease the value.

• The increment of change varies.

Spin Boxes Design Guidelines• Right-align numerical values in the text box.

• Define the top button to increase the value by one unit and the bottom button to decrease the value by one unit. However, you can specify any increment that is appropriate, such as increments of 5 seconds, 30 minutes, etc.

• Provide a label and access key for every spin box—unless the spin box is subordinate to a check box or option button.

• Position the label to the left of the box.

• When the control has the input focus, the user can change the spin-box value by pressing the UP ARROW or DOWN ARROW key.

• In some cases the user can also type the value directly.

• At the end of a range of values, restart the range. The spin-box metaphor is that the user is spinning a wheel of values, hence this wheel-like behavior.

• If a set number of values comprise the range (such as with the months of the year), do not make the text box editable

Spin Boxes Text Guidelines• You may specify units (seconds, connections, and so on) in parentheses after

the label.

• Do not place the units label to the right of the up-down control, because it is problematic for localization.

• Do not make the contents of the spin box part of a sentence, because this will not be localizable.

• Use sentence caps and end every spin box label with a colon.

• Use enter in instructions for a spin box in which the user can either type or select an option. Use select in instructions for a spin box that does not allow typing.

• Do not use the term spin box in the UI itself. Rather, refer to it as a box. For example, In the Date box, enter a new date.

Status Bars• A status bar is an optional area in a window, typically at

the bottom, that displays information about the current state of whatever is appearing in the window.

• It can also display any other contextual information, such as the keyboard state.

• Although a status bar can contain controls, it typically includes read-only or non-interactive information, such as progress indicators.

Status Bars Design Guidelines• Do not place interactive controls in the status bar.•

Exception: You may place an interactive control in the status bar when the control is related to status and not critically important (if status-bar text indicates that an event occurred, you could include a View Log command button near that text).

Status Bars Text Guidelines • Put only notification-type messages in status bars.

• Start tips with a verb.

• For tips about items the user can manipulate upon opening, use a second-person singular verb, such as manage, and describe the function of the selected item.

• For messages about the status of an ongoing process, start the text with the gerund form (ing) of the verb. Write short messages, such as "Copying...," because the message will be displayed for only a moment. End the text with an ellipsis to reflect the ongoing process.

• If an object is associated with both a status bar tip and an InfoTip, make the text of the tips identical.

Tables Design Guidelines• Place important information in a column as far left as possible.

The left-most column usually contains unique identifiers, such as names, GUIDs, etc.

• Make each column as wide as its longest entry, plus 30percent (for expansion during localization).

• Within a given column, align cell contents in the following manner:• Left-align text.

• Align numbers at the decimal point (seen or unseen).

• Right-align numerical entries (such as MB, baud, etc.) 

• Left-align columns that contain a combination of text and numerical values.

Text Boxes• A text box (sometimes called an edit control) is a

rectangular control in which the user types (or pastes) text to interact with the computer.

• A text box can be defined to support single or multiple lines of text.

• Unlike text in a static text field, text in an active text box can be edited, selected, and copied.

Common Text Boxes TypesCharacteristics Common Uses Examples

Single-line, editable Entering short strings

Multiple-line, editable Entering lengthy strings

Multiple-line, read-only Displaying EULAs, wizard summaries, event logs, and other types of lengthy material for the user to read

Single-line, read-only Displaying text that the user might want to copy or horizontally scroll (the size of the text might exceed the allotted space)

Rich text, read-only Displaying embedded objects and links

Rich text, editable Entering strings with font and format properties

Text Boxes Design Guidelines• When the text box is displayed in a toolbar or a secondary window, include the outline border

of the control. Otherwise, it’s optional.

• When sizing text boxes, choose a size appropriate for the longest value users will likely enter

• Do not use auto-exit text boxes. The automatic shift of focus can surprise the user. Further, auto-exit text boxes do not localize easily (for example, international postal codes often exceed five characters). 

•

Exception: You may use auto-exiting for values that will not change in length when localized. They are best limited to situations that involve extensive data entry.

• Do not disable single-line, read-only text boxes. This will prevent the user from selecting and copying the text to the Clipboard. It will also prevent the user from viewing all of the data if it exceeds the size of its boundaries.

• In editable text boxes, limit the size of the text string and data type when you can. • Do not put scroll bars (horizontal or vertical) on a single-line text box.

• horizontal and vertical scroll bars are supported for multiple-line text boxes.

Text Boxes Text Guidelines• Label every text box with a short label—preferably a one-word description—and assign an access key to that

label.

• Position a text box label either to the left of or above the text box, and align the label with the left edge of the text box.

• Use sentence caps.

• End a text box label with a colon. 

• If you need to add instructional text pertaining to the text box, add it above the label. Use ending punctuation for complete sentences.

• Use either type or enter in instructions for filling in text boxes. Use type if the user must type the information in the text box (for example, Type your user name.).

• Use enter if the user can paste information in the text box, browse for the information, or select the information from a list. Do not use the type or select construction.

• Use select when referring to an entry in a read-only text box.

• You may specify units (seconds, connections, and so on) in parentheses after the label.Do not place the units label to the right of the text box, as it is problematic for localization.Do not make the contents of the text box (or its units label) part of a sentence, because this will not be localizable.

Title Bars• Title bars appear at the top of all program windows, dialog

boxes, wizards, and message boxes.

Title Bars Design Guidelines• Include command buttons associated with the common

commands of the primary window in the title bar. • These buttons act as shortcuts to specific window commands. • Clicking a title-bar button by using the primary mouse button

invokes the same command as that associated with the command button.

• Optionally, you can support clicking a title bar command button with the secondary mouse button to display the shortcut menu for the window.

• All buttons on a primary window's title bar must have equivalent commands on the shortcut menu for that window.

• In a typical situation, one or more of the following buttons appear in a primary window (provided that the window supports the respective functions).

Title Bars Buttons

Button Command Operation

Close Closes the window

Minimize Minimizes the window

Maximize Maximizes the window

Restore Restores the window

Help Opens associated Help content

Title Bars Buttons

Button Combination Surface Types

Property sheets, dialog boxes

Wizards, pop-up message boxes

All other windows

All other windows (maximized)

Title Bars Text Guidelines

• Use title caps.

• Do not use ending punctuation.

• Do not use the words warning, caution, or error in a message-box title bar. Instead, use the program name.

• Title bars in dialog boxes and wizards should reflect the command that opened them. For example, if you click New and then click User to open a dialog box, the title bar of that dialog box should be New User.

Title Bars Text Guidelines

Window type Use this Example

Dialog box Name of related command or slight modification

Browse for Folder

Document window Document title Sample.doc

Message Name of program or document that generated message

Microsoft Windows 2000

Palette window Name of objects on palette Color

Program window Product (or component) name* Microsoft Word

Property sheet <feature or item name> Properties Recycle Bin Properties

Toolbar Toolbar name Formatting

Web page Page title - <Browser Name> Web Directory - Microsoft Internet Explorer

Wizard Full wizard name Maintenance Wizard

Toolbars• A toolbar is a panel of controls designed to provide quick

access to specific commands.

• Specialized toolbars are sometimes called tool boxes and palettes.

Toolbars Design Guidelines• Do not include in a toolbar functionality that is not available elsewhere in the interface. Toolbars are

generally displayed optionally, and therefore important functionality might not be discoverable.

• Provide a ToolTip for every toolbar control

• To provide maximum flexibility for users and their tasks, design your toolbars and status bars to be user-configurable.

• Give the user the option to display or hide toolbars and status bars.

• You can also include options that allow the user to change or rearrange the elements included in toolbars and status bars.

• Make sure your configuration options are also available from the keyboard to ensure that they are accessible for all users.

• When the user interacts with toolbar or status bar controls that represent property settings, apply any change directly to the current selection. For example, if a button in a toolbar changes the property of text to bold, clicking that button immediately changes the text to bold; no further confirmation or action is required.

Toolbars Text Guidelines• Use title caps.

• If your toolbar button includes text, assign it an access key. If possible, make it the same access key as in the menu command.

• Toolbar titles should consist of one or two words, typically the same as the corresponding menu command.

• Use the toolbar title in the title bar of the floating toolbar.

Tree View Controls• A tree view control—also known as folder view and an explorer

tree—displays a hierarchy of containers.

• The control includes buttons that expand and collapse the outline.

• You can use a tree-view control to display the relationship between a set of containers or other hierarchical elements.

• Containers are represented by the combination of a text label and icon.

• Plusses and minuses indicate whether a container is open or closed.

Recommended reading• Jakob Nielsen -Top 10 Application-Design Mistakes