gui controls for input design
DESCRIPTION
GUI Controls for Input Design. 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). - PowerPoint PPT PresentationTRANSCRIPT
GUI Controls for Input Design
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
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.
Drafter/Title:
TEST.MSG
Label
Text Box
_
Example text box and label in MS Windows
Date:
Distance:
Frequency:
SSN:
Miles
MHz
(YYYYMMDD)
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
NextNext
Increase Scale Range Circle Range Radius
Push Buttons with Graphic and Text Labels
2X
Save Delete
Push Buttons with Text Labels
Options... Help
APush Buttons with Graphic Labels
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: Limited Basic Superior Premium
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.
Airfields:
Chicago
Delhi
Dulles
Guam
Jakarta
Kuwait
Label
List Box
Example list box in Motif
Airfields:
Delhi
Dulles
Guam
Jakarta
Kuwait
London
Manila
Search for:
DE
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.
Chicago
Delhi
Dulles
Guam
Jakarta
Kuwait
ChicagoAirfields:ChicagoAirfields:
Label Textarea
Arrowbutton List
box
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.
Airfields:
Chicago
Delhi
Dulles
Guam
Jakarta
Kuwait
ChicagoLabel Text box
List box
Example combo box in Motif
Chicago
Delhi
Guam
Jakarta
Kuwait
DuAirfields:ChicagoAirfields:
DullesLabel
List box
Text box
Arrowbutton
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): 40000
LabelText area
Arrowbuttons
0.5”Left Margin:
Slider Bar• to select analog value from finite range