Chapter 2. Controls

This chapter discusses standard window controls. A control is a visually recognizable element or group of elements available for end-user interaction. Controls allow the user to manipulate data in a well-defined manner. The following list categorizes the standard controls by their function:

Displaying or Entering Text

Users interact with the following text controls:

  • Label

  • Text-entry field

  • Text-display field

Label

A label displays data, but does not allow the user to change it. In some environments, a label might be called a static text field, read-only message, or a read-only text field. An example of a label would be an age that is calculated from a birth date.

For more information, see the Label reference page.

Text-Entry Field

A text-entry field, sometimes known as a ‘ text field’ or ‘entry field,’ is an area where the user enters alphanumeric text within a specific boundary. The user can type one or more lines in a text-entry field, depending upon the information that the object or application needs. Multiline text can have both horizontal and vertical scroll bars for moving the text up, down, and across the field.

For more information, see the Text-Entry Field (Control) reference page.

Text-Display Field

The user uses the text-display field to display or select only text; the user cannot edit the text. There are single-line and multiple-line variants. Multiline text can have both horizontal and vertical scroll bars for scrolling the text up, down, and across the field.

For more information, see the Text-Display Field (Control) reference page.

Displaying Lists

The following controls display elements of a list:

  • List box

  • Drop-down list box

  • Combination box

  • Drop-down combination box

  • Selection box

  • Spin box

  • Option menu

List Box

A list box displays a fixed or variable list of objects or value choices. The user can scroll a list box that contains more items than can be displayed at one time within the border of the list box. Your application may allow the user to select only one or more than one item from the list.

For more information, see the List Box (Control) reference page.

Drop-Down List Box

A drop-down list box is a variation of a list box. Only one item in the list is displayed until the user takes an action to display the rest of the list.

The drop-down list box contains a list cascade button, a button that contains a down-arrow graphic that presents the cascaded list of items.

You should use a drop-down list box when a list box would take up too much space within the window in which it is displayed. The drop-down list box appears only when the user chooses the list cascade button.

For more information, see the Drop-Down List (Control) reference page.

Combination Box

A combination box combines a text-entry field with a list box. The user can select an item from the list or type data directly into the text-entry field. When the user selects an item from the list, that element appears in the text-entry field. The user can select only one item from the combination box.

You should use a combination box when there is an indeterminate number of items to be presented in a list box. Your application can fill the list box portion of the combination box with a set of standard choices for the user to select, while still allowing the user to enter a choice if it does not appear in the list.

For more information, see the Combination Box (Control) reference page.

Drop-Down Combination Box

A drop-down combination box is a variation of a combination box. It displays only the text-entry field portion until the user takes an action to display the list box portion of the control. The user can select only one item from the drop-down combination box.

You should use a drop-down combination box when a combination box would take up too much space within the window in which it is displayed. The drop-down list box appears only when the user chooses the list cascade button.

For more information, see the Drop-Down Combination Box (Control) reference page.

Selection Box

A selection box allows the user to make a single selection from a list of elements.

The selection box, like a combination box, combines a text-entry field with a list box. In addition, it contains push buttons, for example, to allow the user to confirm the value entered.

For more information, see the Selection Box (Control) reference page.

Spin Box

A spin box displays related but mutually exclusive choices that have a natural sequence. Unlike other list controls, the spin box operates as though the top and bottom of the list are joined. The user cycles through the choices as if the fields were on a spinning cylinder. A spin box can control multiple fields by using a single set of spin arrows to change choices in each field. A spin box that contains a single field is sometimes called a spin button.

The user can also type a choice directly in the spin box field instead of using the spin arrow to change a value.

For more information, see the Spin Box (Control) and Text-Entry Field (Control) reference pages.

Option Menu

An option menu is a menu that contains only value and cascading choices. To display an option menu, the user can use an option menu cascade button or choose an item from a cascading list within another option menu.

For more information, see the Option Menu (Menu Type) reference page.

Using Interactive Controls

The following controls present and organize actions:

  • Push button

  • Menu cascade button

  • Menu bar

  • Pull-down menu

  • Cascaded menu

  • Pop-up menu

  • Tear-off menu

  • Command box

Push Button

A push button is a control that displays a label or graphic that represents an action. When the user activates a push button, that action executes immediately.

You should use a push button when you want an action to occur quickly and easily.

Examples of push buttons include:

  • An action choice such as Cancel

  • A dialog choice such as Find

For more information, see the Push Button (Control) and Push Button (Predefined) reference pages.

Menu Cascade Button

A menu cascade button is a control that represents cascading choices from which the user can display a pull-down menu.

For more information, see the Menu Cascade Button (Control) reference page.

Menu Bar

A menu bar appears across the top of a window, just below the title bar. It contains a horizontal list of cascading choices called menu-bar items. When the user chooses a menu-bar item, an associated pull-down menu appears.

The name of each menu-bar item indicates choices on the associated pull-down menu. For example, the associated pull-down menu for the Help menu-bar item could have the following choices:

  • Contents

  • Search for...

  • On Help

  • About...

For more information, see the Menu Bar (Menu Type) reference page.

Pull-Down Menu

A pull-down menu appears when a user chooses a menu-bar item, window menu button, or a menu cascade button.

For more information, see the Cascading (Choice Type) and Pull-Down Menu (Menu Type) reference pages.

Cascaded Menu

A cascaded menu appears next to, and contains choices related to, a cascading choice in another menu. It is not visible until the user makes a cascading choice. A cascaded menu contains choices that modify or are related to the cascading choice.

Cascaded menus allow you to layer choices so that the user can have access to a wide range of functions without using long pull-down or pop-up menus.

For more information, see the Cascading (Choice Type) reference page.

Pop-Up Menu

A pop-up menu provides choices specific to an element. A pop-up menu is not visible until the user invokes it. Only choices that are currently valid appear in a pop-up menu.

Pop-up menus provide the user with convenient access to menus. The user does not need to move the mouse pointer to the menu bar nor does the user see unavailable choices.

For more information, see the Pop-Up Menu (Menu Type) reference page.

Tear-Off Menu

A tear-off menu is a copy of a pull-down, pop-up, or cascaded menu that the user has “torn off” and placed in a separate window. The tear-off menu always contains the same choices as the original menu, with the exception of the tear-off choice.

For example, the user can ‘tear off’ a frequently used menu and position it in a convenient place on the screen.

For more information, see the Tear-Off Menu (Menu Type) reference page.

Command Box

A command box allows the user to review previous commands and to either choose to reissue a previous command or to issue a new command.

For more information, see the Command Box (Control) reference page.

Setting Values

The following controls allow the user to set values other than entering text:

  • Radio button

  • Check box

  • Slider

  • Value set

Radio Button

The user presses a radio button to display mutually exclusive value choices that have an on or off state. Within a group, the user can turn on at most one radio button at a time. When the user chooses a radio button, any previously chosen radio button within the group turns off.

You should use a radio button when you want the user to make a mutually exclusive choice, for example, to choose among available pen widths in a drawing program.

For more information, see the Properties (Choice) and Radio Button (Control) reference pages.

Check Box

A check box has two states: on and off. Occasionally there is an indeterminate third state. A check box is sometimes called a check button.

You should use a check box when you want to display choices that have two clearly discernible states and, possibly, an indeterminate third state.

The check box appears in the indeterminate state when its value reflects a property of selected data that is not completely in either state. For example, if the user selects a section of text where some characters are bold and some are not, a bold check box will show an intermediate state. The user can reset the check box to remove the bold, check the box to make all characters bold, or leave the check box in the indeterminate state to leave the text as is.

For more information, see the Check Box (Control) reference page.

Slider

A slider is a control that represents a bounded value. A slider typically shows a scale marked in equal units from which the user can select a particular value from within a slider's boundary.

For more information, see the Slider (Control) reference page.

Value Set

A value set is a matrix of mutually exclusive choices that are represented graphically. The value set is similar in concept to a group of radio buttons and primarily presents graphical representations of choices, for example, tools in a palette.

For more information, see the Value Set (Control) reference page.

Containing or Organizing Elements

The following controls contain or organize elements:

  • Container

  • Group box

  • Notebook

  • Paned box

  • Split bar

  • Scroll bar

Container

A container displays objects. For example, when the user opens a calendar container, it might contain icons for representing months.

For more information, see the Container (Control) reference page.

Group Box

A group box groups controls together visually. Group boxes help the user to understand when a group of controls belong together, for example, the radio buttons used to set a text format.

For more information, see the Group Box reference page.

Notebook

A notebook groups data. It visually resembles a bound notebook that contains pages separated into sections by tabbed divider pages. A user can ‘turn’ individual pages of the notebook or choose tabs to move from one entire section to another.

Users can use notebooks to organize information that they would expect to find in a real (hardcopy) notebook. Examples include an address book, an alphabetized index, or a clip art library.

For more information, see the Notebook (Control) reference page.

Paned Box

A paned box is a control that the user can divide into panes by using split bars. Each pane has one or more controls.

For more information, see the  Paned Box (Control) reference page.

Split Bar

A split bar is a control that separates panes in a window and allows the user to change the size of the panes.

If the window is too small to hold all of the information provided, the user can split the window and scroll each pane separately.

For more information, see the Sash (Control) reference page.

Scroll Bar

A scroll bar is a control associated with an area that is too large to be completely displayed. It indicates to the user that more information is available and can be scrolled into view.

For more information, see the Scroll Bar (Control) reference page.

Using Window Manager Controls

The window manager is a specific application that manages the windows in an interface. Each window contains defined controls for user interaction provided by the window manager. The following window controls assist the user in interacting with and navigating in the interface:

  • Client area

  • Window title

  • Window menu

  • Maximize button

  • Minimize button

  • Window icon

  • Size borders

  • Additional buttons

Client Area

The client area is the application's display area where the user performs most application-level tasks. For example, if a user is working with a graphics editor or text editor, the client area contains the figure or document being edited. The client area is inside the window frame and can contain multiple work areas.

For more information, see the Client Area reference page.

Window Title

The window title contains a short string of text that identifies the window. Depending on the type of window and its function, the title is the title of the application or it indicates the purpose of the window.

If a window includes a title, it is in a horizontal bar at the top of the window, just above the client area and between the window menu button and the window control buttons (maximize and minimize).

For more information, see the Window Title reference page.

Window Menu

The window menu displays a list of window actions. You should list all possible actions because keyboard users must interact with the window manager through the window menu. Almost all windows have window menus.

Locate a window menu button just above the client area. Align the left edge of the button with the left edge of the client area and the button just to the left of the window title, unless you include other buttons between the window menu button and the window title.

For more information, see the Window Menu reference page.

Maximize Button

The maximize button contains a graphic that indicates whether or not the window is maximized. If it is not, the user can press the maximize button to enlarge the window. If the window is already maximized, the user can press the maximize button to change the window to its original size and location. Using the maximize button is faster than choosing the Maximize or Restore choice from the window menu.

If the window includes a maximize button, it appears just above the client area and its right border is aligned with the right border of the client area. Primary windows contain maximize buttons; secondary windows usually do not.

For more information, see the Maximize (Choice) reference page.

Minimize Button

The minimize button is a small square or down arrow graphic. The user can press the minimize button to minimize or iconify the window to an icon. Using the minimize button is faster than choosing the Minimize choice from the window menu.

If the window includes a minimize button, it appears just above the client area and directly to the left of the maximize button. Primary windows usually have minimize buttons; secondary windows do not have them.

For more information, see the Minimize (Choice) reference page.

Window Icon

The window icon is a minimized (or iconified) representation of a window or window family. The window manager places window icons in the window icon viewer.

The window manager minimizes all windows of a window family together. When a window is minimized, the application running inside the window continues running. To interact with window icons, the user opens the window icon viewer.

For more information, see the Window Icon and Window Icon Box reference pages.

Size Borders

Although your application can supply an initial size for windows to the window manager, the user can vary window size for easier interaction. Using size borders is faster for mouse users than the Size choice in the window menu. Secondary windows do not include size borders.

The size borders are the outermost controls of the window frame and are made up of two parts: the corner handles and the edge handles. If you want to include size borders, put one corner handle in each corner of the window and one edge handle between each pair of corner handles.

Handles let the user change the height and width of windows without affecting the relative position of the window, as follows.

  • Corner handles let users change the height and width of the window.

  • Top and bottom handles let users change the height of the window without affecting the width.

  • Side handles let users change the width of the window without affecting the height.

For more information, see the Window Frame reference page.

Additional Buttons

You can present additional window manager functions as buttons on the window frame. Place any additional buttons directly to the left of the minimize button or directly to the right of the window menu button and above the client area. Any additional buttons should correspond to an entry in the window menu.