GUI Controls for Input Design

Introduction –Most new applications being developed today include a GUI. This approach is influenced by a new trend in programming, called repository-driven programming.

GUI Components (or Controls) Common GUI controls (for both Windows and Web interfaces) –Text boxes –Radio buttons –Check boxes –List boxes –Drop down lists –Combination boxes –Spin boxes –Buttons –Hyperlinks Advanced controls (mostly for Windows interfaces) –Drop down calendars –Slider edit controls –Masked edit controls –Ellipsis controls –Alternate numerical spinners –Check list boxes –Check tree boxes

Common GUI Components

Advanced GUI Components

GUI Controls Text Box Buttons Radio Button Check Box List Box Combo Box Drop-Down List Spin (Spinner) Box

Text Box –A text box consists of a rectangular shaped box that is usually accompanied by a caption. –A text box requires the user to type the data inside the box. –A text box can allow for single or multiple lines of data characters to entered. –When a text box contains multiple lines of data, scrolling features are also normally included.

Text Entry/Read-Only Controls Text boxes –Editable/read-only (fields vs. labels) –single line/multiple lines –fixed size/resizable –fixed length/variable lengths –visual box/non-visual box –scrollable /non-scrollable Properties –background/foreground colors –sizes/fonts/styles of text –alignments

Text Box Design Provide descriptive caption Consider the cursor movement from one field to another. Provide large enough boxes for fixed- length data Select reasonable fonts/sizes/colors Design highlight to attract attention

Text Box –When to Use Text Boxes For Input: A text box is most appropriately used in those situations where the input data values are unlimited in scope and the analyst is unable to provide the user with a meaningful list of values from which they can select. –Suggested Guidelines for Using Text Boxes: A text box should be accompanied by a descriptive caption. The size of the text box should be large enough for all characters of fixed-length input data to be entered and viewed by the user.

Example text box and label in MS Windows

Example text box labels providing format cues

Buttons Initiates an action –to activate a command (an alternate to menu choice or command line entry). –to display another window or menu selection Always visible –provides convenient access to frequently- used commands –standard shapes and screen location for similar commands.

Buttons Types –Command buttons -- text as labels –Bar buttons (menu buttons) -- graphics and/or text as labels –Radio buttons Next

Example push buttons with text labels, graphic labels, or both

Buttons -- labels Use standard button labels when available Provide meaningful action description Use regular system font –unless for some special purposes Center the label text Provide consistency across all screens

Buttons --shape and graphics Use rectangular shape whatever possible Maintain consistent button heights and widths Design graphics/icons that have natural mapping to the actions Enhanced graphics with text description

Radio Button –A Radio button consists of a small circle and an associated textual description that corresponds to the value choice. The circle is located to the left of the textual description of the value choice. Radio buttons normally appear in groups - a radio button per value choice. When a user selects the appropriate choice from the value set, the circle corresponding to that choice is partially filled to indicated that it has been selected. When a choice is selected, any default or previously selected choice’s circle is deselected.

Radio Button –When to Use Radio Buttons For Input: When a user is expected to input data that has a limited predefined set of mutually exclusive values. –Suggested Guidelines for Using Radio Buttons: Radio buttons should present the alternatives vertically aligned and left-justified to aid the user in browsing.

Radio Button –Suggested Guidelines for Using Radio Buttons: (continued) The sequencing of the choices should also be given consideration. It is not recommended that radio button(s) be used to select the value for an input data whose value is simply a Yes/No (or On/off state).

Which one is better? Plan Choice: LimitedBasicSuperiorPremium Plan Choice: Limited Basic Superior Premium Limited Basic Superior Premium Plan Choice

Check Box –A check box also consists of two parts. A square box followed by a textual description of the input field for which the user is to provide the Yes/No value. –Check boxes provide the user the flexibility of selecting the value via the keyboard or mouse. –An input data field whose value is “Yes” is represented by square that is filled with an “x”. –The absence of an “x” means the input field’s value is “No”. –The user simply toggles the input fields value from one value/state to the other as desired.

Check Box –When to Use Check boxes For Input: When a user needs to input a data field whose value set consists of a simple “Yes” or “No” value. –Suggested Guidelines for Using Check boxes : Make sure that the textual description is meaningful to the user. Arrange the group of check box controls where they are aligned vertically and left-justified. –If necessary, align horizontally and be sure to leave adequate space to visually separate the controls off from one another. Appropriately sequence the input fields according to their textual description.

List Box –A list box is a control that requires the user select a data item’s value from a list of possible choices. –The list box is rectangular shaped and contains one or more rows of possible data values. –The values may appear as either a textual description or graphical representation. –List boxes having a large number of possible values may consist of scroll bars to navigate through the row of choices. –A list box’s row may contain more than one column.

List Box –When to Use List Boxes For Input: A list box’s scrolling capabilities make it appropriate for use in those cases where there is limited screen space available and the input data item has a large number of predefined, mutually exclusive set of values from which to choose. –Suggested Guidelines for Using List Boxes: A list box should be accompanied by a descriptive caption.

List Box –Suggested Guidelines for Using List Boxes: (continued) It is recommended that a list box contain a highlighted default value. The width of the list box should be large enough for most characters of fixed-length input data to be entered and viewed by the user. The length of the box should allow for at least 3 choices and be limited in size to containing roughly 7 choices. Scrolling features should be used to suggest additional choices are available to the user.

List Box –Suggested Guidelines for Using List Boxes: (continued) If graphical representations are used for value choices, make sure they are meaningful and truly representative of the choice. If textual descriptions are used, use mixed-case letters and ensure that the descriptions are meaningful. The list of choices should be left-justified to aid in browsing.

Example list box in Motif

Example list and text box used in an incremental search in Motif

Check List Box

Drop-Down List –A drop-down list is another control that requires the user to select a data item’s value from a list of possible choices. –A drop-down list control consists of a rectangular shaped selection field with a small button connected to its side. The small button contains the image of a downward pointing arrow and bar. When the user selects a value from the list of choices, the selected value is displayed in the selection field and the list of choices once again becomes hidden from the user.

Drop-Down List –When to Use Drop-Down Lists For Input: A drop-down list should be used in those cases where the data item has a large number of predefined values and screen space availability prohibits the use of a list box to provide the user with a list box. Once disadvantage of a drop-down list is that it requires extra steps by the user, in comparison to the previously mentioned controls. –Suggested Guidelines for Drop-Down Lists: The caption for a drop-down list is generally either left-aligned immediately above of the selection field portion of the control or located to the left of the control.

Example drop-down list box in Motif

Combination (Combo) Box –A “combo box” combines the capabilities of a text box and list box. A combo box allows the entering of a data item’s value (as with a text box) or by selecting its value from list (as with a list box). –The associated small button is not directly connected to the rectangular entry field. Once the small button is selected, a hidden list is revealed. The revealed list appears slightly indented beneath the rectangular entry field. When the user selects a value from the list of choices, the selected value is displayed in the entry field and the list of choices once again becomes hidden from the user.

Combination (Combo) Box –When to Use Combo Boxes For Input: A combo box is most appropriately used in those cases where limited screen space is available and it is desirable to provide the user with the option of selecting a value from a list or typing a value that may or may not appear as an option in the list. –Suggested Guidelines for Combo Boxes: The same guidelines for using drop-down lists directly apply to combo boxes.

Example combo box in Motif

Example drop-down combo box in MS Windows

List Box or Combo Box? List box –unlimited number of choices –possible multiple choices –consumes screen space –can be set to different size –easy to see the choices Combo box –unlimited number of choices –highlight the selection –conserves screen space –Extra step to display all the choices

Spin (Spinner) Box –A spin box is a screen based control that consists of a single-line text box followed immediately by two small buttons. The two buttons are vertically aligned. Top button has an arrow pointing upward and the bottom button has an arrow pointing down.

Spin (Spinner) Box –This control allows the user to enter data directly into the associated text box or to select a value by using the mouse to scroll (or “spin”) through a list of values using the buttons. The buttons have a unit of measure associated with them. When the user clicks on one of the arrow buttons, a value will appear in the text box. The value in the text box is manipulated by clicking on the arrow buttons.

Spin (Spinner) Box –When to Use Spin Boxes For Input: A spin box is most appropriately used to allow the user to make an input selection by using the buttons to navigate through a small set of meaningful choices or by directly keying the data value into the textbox. The data values for a spin box should be capable of being sequenced in a predictable manner. –Suggested Guidelines for Spin Boxes: Spin boxes should contain a label or caption that clearly identifies the input data item. –This label should be located to the left of the text box or left- aligned immediately above the text box portion of the control. Spin boxes should always contain a default value in the text box portion of the control.

Example spin box in Motif Altitude (in feet): Label Text area Arrow buttons 0.5” Left Margin:

Slider Bar to select analog value from finite range