Screen based controls in HCI

Screen Based Control
Screen-based controls, often simply called controls and
sometimes called widgets.These are the graphic
components which we can see on the Screen and can
interact with them.
Ex:

Screen based controls do can:
Selection of a particular value.
Editing of a particular value.
Display a particular piece of text, value, or graphic.
Cause an action to be performed.

Types:
 Buttons
 Text entry/read-only controls
 Selection controls
 Combination entry/selection controls
 Custom controls
 Presentation controls
 Web controls

Buttons
 A square or rectangular-shaped control with a label inside that
indicates action to be accomplished.
 The label may consist of text, graphics or both.
Purpose of buttons are:
 To start actions.
 To change properties.

Advantages
 Always visible, reminding one of the choices available.
 Can be logically organized in the work area.
Disadvantages
 Size limits the number that may be displayed.
 Requires looking away from main working area to activate.

Text Entry/Read-Only Controls
A control is usually rectangular in shape, in which text may
be entered or may be displayed for read-only purposes.
Entry:
Read-only:

Advantages
 Very flexible.
 Consumes little screen space.
Disadvantages
 Requires use of typewriter keyboard.
 Requires user to remember what must be keyed.

Selection Controls
To select a particular value(s)
Types:
 Radio Buttons
 Check Boxes

Radio Boxes
These are used for a selecting a single element from a group of
list of elements or items.
When the user selects a radio button, any button previously
selected gets deselected automatically.
A two part control consisting of the following
 Small circles, diamonds or rectangles.
 Choice descriptions.
When a choice is selected the option is highlighted.

Advantages
 Easy-to-access choices.
 Easy-to-compare choices.
Disadvantages
 Consume screen space.
 Limited number of choices

Check Boxes
A checkbox is used to select many choices at a time and some will
have default checked. A two-part control consisting of a square box
and choice description.
Each option acts as a switch and can be either “on” or “off”.
When an option is selected, a mark such as an “X” or “check” appears
within the square box or the box is highlighted in some other
manner.
If square box is unselected or empty (off)
Each box can be:
 Switched on or off independently
 Used alone or grouped in sets

Advantages
 Easy-to-access choices
 Easy-to-compare choices
Disadvantages
 Limited number of choices.
 Single check boxes difficult to align with other screen controls.

Combination text-entry/selection controls:
A control can have characteristics of both a text field and a
selection field.
Here information is either typed or selected and placed in it.
Ex:

Types:
 Spin boxes
 Attached combination boxes
 Drop-down/pop-up combination boxes

Spin boxes:
A spin box, also called a spin button, is a single-line
field followed by two small, vertically arranged buttons
inscribed with up and down arrows.
-We can enter a value or we can navigate through
up-down arrows.

Advantages:
 Consumes little screen space
 Flexible, permitting selection or typed entry
 Useful for small set of values
Disadvantages:
 Sometimes difficult to operate
 Useful only for certain kinds of data
 Difficult to compare choices

Combo boxes:
A single rectangular text box entry field and can display
a list of options
- Allows both text entry or selecting one/multiple
option(s)

Advantages:
Disadvantages:
 Consumes some screen space
 All list box choices not always visible, requiring
scrolling
 The list may be ordered in an unpredictable way,
making it hard to find items
Unlimited number of entries and choices
Flexible, permitting selection or typed entry
Can select one or more options
Entries not necessarily restricted to items
selectable from list box

Drop-down/pop-up boxes:
A single rectangular text box with a small button to the side and
an associated hidden list of options.
When we click on down arrow, options are visible
-We can select only one option either by text entry or by
selection

Advantages:
 Unlimited number of entries and choices
 Flexible, permitting selection or typed entry
 Entries not restricted to items selectable from list box
 Conserves screen space
Disadvantages:
 Requires an extra step to display the list of choices.
 When displayed, all box choices may not always be
visible, requiring scrolling
 User may have difficulty in recalling what to type.
 The list may be ordered in an unpredictable way, making
it hard to find items

Other operable controls:
Slider
Date picker
Tree
Scrolling bar

Slider:
A scale exhibiting a range of values.
-in smart phones used for setting brightness, volume etc.
-in PC for setting screen size, resolution etc.
-used in media players.
Best examples: MX player,VLC player

Date Picker:
A drop-down list box that displays a 1-month calendar in the
drop-down list box.
-month can be changed by pressing command buttons with
left- and right-pointing arrows.

Tree View:
A special list box control that displays a set of objects as
hierarchical view.

Scroll Bar:
A vertical or horizontal bar commonly located on the far right or
bottom of a window that allows you to move the window
viewing area up, down, left, or right.

Presentation controls:
Presentation controls are purely informational.They provide
details about other screen elements or controls.
Ex:

Types:
 static text fields
 group boxes and column headings
 balloon tips
 progress indicators

static text fields:
Read-only textual information.
Purpose:
 To identify a control by displaying a control caption.
 To present descriptive information.

group boxes and column headings:
Group box:
A rectangular frame that surrounds a control or group of
controls.
Purpose:
 To visually relate a group of related controls.

Column headings:
A column heading control, also known as a header control, is
used to display a heading above columns of text or numbers.
Purpose:
 To identify a column of information contained in a table.

Boolean tip:
A small pop-up window that contains information in a word
balloon
Purpose:
 To provide additional descriptive about a screen element.

Progress Indicators:
A rectangular bar or circular that fills as a process is being
performed, indicating the percentage of the process that has
been completed.
Purpose:
 To provide feedback about the completion of a lengthy
operation.

Screen based controls in HCI

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Screen based controls in HCI

Similar to Screen based controls in HCI (20)

Recently uploaded

Recently uploaded (20)

Screen based controls in HCI