unit 5-Screen based controls-USER INTERFACE DESIGN

MODULE
5
SCREEN BASED
CONTROLS
Referred Text Book:
The Essential Guide to User Interface Design (Second
Edition)
Author: Wilbert O. Galitz

Screen-based controls, often simply called controls or widgets, are the elements
of a screen that represent the properties or operations of other objects.
A control may:
• Permit the entry or selection of a particular value.
• Permit the changing or editing of a particular value.
• Display only a particular piece of text, value, or graphic.
• Cause a command to be performed.
• Possess a contextual pop-up window.
SCREEN-BASED CONTROLS

Topics to be covered
1. Operable control
2. Text control
3. Selection control
4. Custom control
5. Presentation control
6. Windows Tests-prototypes
7. Kinds of tests.

1. OPERABLE CONTROL
• Operable controls are those that permit the entry, selection, changing, or editing of a particular value,
or cause a command to be performed.
• It mainly includes “Buttons” : A square or rectangular-shaped control with a label inside
that
indicates action to be accomplished.
• Styles/ Types of Buttons
1. Command buttons
2. Toolbar buttons without labels.
3. A symbol
button.

1. Command Buttons
Command button guidelines include the following:
1. Usage
2. Structure
3. Size

4. Labels 7. Location and Layout
5. Number
6. Expansion Buttons

8. Organization
9. Unavailable Choices

14. Button
Activation
13. Keyboard Equivalents and Accelerators

2. Toolbar Buttons
Toolbars are compilations of commands, actions, or functions, usually graphical in structure but
sometimes textual, grouped together for speedy access.
Toolbar button guidelines include the following:
1. Usage
2. Structure

5. Location
6. Active
Items
7. Customization

8. Keyboard Equivalents and
Accelerators
9. Button Activation

OTHER OPERABLE CONTROLS
1. Tabs
2. Slider
3. Date-Picker
4. Tree Views
5. Scroll Bars
1. Tabs

Guidelines to use tabs are following:
1. Section and Pages
2. Location, Size and Labels
3. Command Buttons

Guidelines to use slider are following:
1. Caption and Labels
2. Scale
3. Slider
Arm
4. Slider Buttons
5. Detents
6. Proportions

5. Scroll Bar
Scroll Bar Design Guidelines

2. TEXT ENTRY/READ-ONLY CONTROLS
• A Text Entry/Read-Only control contains text that is exclusively entered or modified through the
keyboard.
• It may also contain entered text being presented for reading or display purposes only.
• There are two types of Text Boxes: Single-Line and Multiple-Line Text Boxes.

3. SELECTION CONTROLS
• A selection control presents on the screen all the possible alternatives, conditions, or
choices that may exist for an entity, property, or value.
• Selection controls include:
1. Radio buttons
2. Check boxes
3. List boxes
4. Drop-down/pop-up list boxes
5. Palettes.

Radio button guidelines include the following:
1. Choice Descriptions
2. Size
3. Default

6. Related Control
7. Keyboard Equivalents

9. Selection Method and Indication

Check boxes guidelines include the following:
2. Size
3. Default

5. Organization

List box guidelines include the following:
1. Selection Descriptions
2. List Size
3. Organization

7. Disabling

4. Drop-down/pop-up list boxes

1. Selection Descriptions
2. List Size
3. Box Size
Drop-down/pop-up list boxes guidelines include the following:

4. Organization
6. Captions
5. Layout and Separation

7. Defaults
8. Disabling

Palettes guidelines include the following:
1. Graphical Representations
2. Size
3. Layout

4. Organization

4. CUSTOM CONTROL
• Many toolkits and interface builders provide the ability to create custom
controls; implement them with caution.
• The addition of custom controls increases system complexity.
• If custom controls must be developed and implemented, make their look and
behavior as different as possible from the standard controls. This will avoid
confusion between the various controls.

5. PRESENTATION CONTROL
• Presentation controls are purely informational.
• They provide details about other screen elements or controls, or assist in giving the
screen structure.
• Common presentation controls are:
1. Static text fields
2. Group boxes
3. Column headings
4. ToolTips
5. Balloon tips
6. Progress indicators
7. Sample box
8. Scrolling tickers

6. Progress Indicators
Exampl
e

6. WINDOWS TESTS-PROTOTYPES
• A prototype is a simulation of an actual system that can be quickly created.
• A prototype may be a rough approximation, such as a simple hand-drawn sketch, or
it may be interactive, allowing the user to key or select data using controls,
navigate through menus, retrieve displays of data, and perform basic system
functions.
• Various kinds of prototypes are:
1. Hand Sketches and Scenarios
2. Interactive Paper Prototypes
3. Programmed Facades
4. Prototype-Oriented Languages

1. Hand Sketches and Scenarios

2. Interactive Paper Prototypes

4. Prototype-Oriented Languages

7. KINDS OF
TESTS
• A test is a tool that is used to measure something.
The “something” may be: Conformance with a
requirement.
• Conformance with guidelines for good design.
• Identification of design problems.
• Ease of system learning.
• Retention of learning over time.
• Speed of task completion.
• Speed of need fulfillment.
• Error rates.
• Subjective user satisfaction.
• Various kinds of windows tests are:
1. Guidelines Review
2. Think-Aloud Evaluations
3. Cognitive Walkthroughs
4. Heuristic Evaluation
5. Usability Test
6. Focus Groups
7. Classic Experiments

1.Guidelines Review 3. Cognitive Walkthroughs
2. Think-Aloud Evaluations

5. Usability Test
7. Classic Experiments
6. Focus Group
End of Module 5

unit 5-Screen based controls-USER INTERFACE DESIGN

Recommended

More Related Content

Similar to unit 5-Screen based controls-USER INTERFACE DESIGN (20)

More from SarmiHarsha (6)

Recently uploaded (20)

unit 5-Screen based controls-USER INTERFACE DESIGN