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

• 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

• 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 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

• Provide descriptive caption
• Consider the cursor movement from one field to another.
• Provide large enough boxes for fixedlength 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.

Label
Text Box
TEST.MSG

Date:
Distance:
Frequency:
SSN:
Miles
MHz
(YYYYMMDD)

• 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 frequentlyused commands
– standard shapes and screen location for similar commands.

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

Save Options...
Delete Help
Push Buttons with Text Labels
A
Push Buttons with Graphic Labels
2X
Increase Scale Range Circle Range Radius
Push Buttons with Graphic and Text 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

• 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).

Plan Choice: Limited Basic Superior Premium
Plan Choice:
Limited
Basic
Superior
Premium
Plan Choice
Limited
Basic
Superior
Premium

• 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.

Label
List Box
Airfields:
Chicago
Delhi
Dulles
Guam
Jakarta
Kuwait

Airfields:
Delhi
Dulles
Guam
Jakarta
Kuwait
London
Manila
Search for:
DE

• 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.

Airfields: Chicago
Label Text area
Arrow button
Airfields:
List box
Chicago
Chicago
Delhi
Dulles
Guam
Jakarta
Kuwait

• 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.

Label Airfields: Chicago
Chicago
Delhi
Dulles
Guam
Jakarta
Kuwait
Text box
List box

Airfields: Chicago
Label Text box
Arrow button
Airfields:
List box
Du
Chicago
Delhi
Dulles
Guam
Jakarta
Kuwait

• List box • Combo box
– unlimited number of choices
– unlimited number of choices
– possible multiple choices
– highlight the selection
– consumes screen space
– conserves screen space
– can be set to different size
– Extra step to display all the choices
– easy to see 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 leftaligned 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.

Text area
Label
Altitude (in feet): 40000
Arrow buttons
Left Margin:
0.5”

• to select analog value from finite range