17CS832

USER INTERFACE DESIGN

Mr. Karthik S Referred Text Book:

Assistant Professor, The Essential Guide to User Interface Design (Second Edi
Dept. of CSE, Author: Wilbert O. Galitz
BNMIT.
BNM INSTITUTE OF
TECHNOLOGY
VISION
To be one of the premier Institutes of Engineering and Management
education in the country.
MISSION
To provide Engineering and Management education that meets the
needs of human resources in the country.
To develop leadership qualities, team spirit and concern for
environment in students.
DEPARTMENT OF COMPUTER
SCIENCE
VISION
To be a premier Department for Education in Computer Science and
Engineering in Karnataka State, moulding students into professional
engineers.
MISSION
To provide teaching/ learning facilities in Computer Science and
Engineering better than prescribed by University for easy
adaptation to industry and higher learning.
Provide a platform for self learning to meet the challenges of
changing technology and inculcate team spirit and leadership
qualities to succeed in professional career.
Comprehend the societal needs and environmental concerns in the
MODULE 5: SCREEN BASED
CONTROLS
 MODULE-5 SYLLABUS

Screen based controls- Operable control, Text

control, Selection control, Custom control,
Presentation control, Windows Tests
prototypes, kinds of tests.
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.
 SCREEN-BASED CONTROLS
 Screen-based controls, often simply called controls or widgets, are the
elements of a screen that controls its body.
 By definition, they are the graphic objects that represents 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.
 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.
BUTTONS
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
10. Defaults

11. Scrolling
12. Intent Indicators
13. Keyboard Equivalents and Accelerators

14. Button Activation

Command button advantages.
• An advantage of a command button is that it is always visible, providing a reminder of its
existence.
• Command buttons are conveniently and logically located in the work area and can be
inscribed with meaningful descriptions of what they do.
• Buttons can also provide meaningful visual feedback through the movement of the button
when activated. Their activation is much easier and faster than using a two-step menu
bar/pull-down sequence.
Command button disadvantages.
• Among the disadvantages of command buttons is their larger size, which consumes
considerable screen space and limits the number that can be displayed.
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
3. Size

4. Organization
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
 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.
1. Text Boxes
2. Captions
3. Fields
 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.
1. Radio buttons
Radio button guidelines include the following:
1. Choice Descriptions

2. Size

3. Default
4. Structure

5. Organization
6. Related Control

7. Keyboard Equivalents
8. Captions
9. Selection Method and Indication
2. Check boxes
Check boxes guidelines include the following:
1. Choice Descriptions

2. Size

3. Default
4. Choice Descriptions

5. Organization
6. Related Control

7. Keyboard Equivalents
8. Captions
9. Selection Method and Indication
3. List Boxes
List box guidelines include the following:
1. Selection Descriptions

2. List Size

3. Organization
4. Box size

5. Organization
5. Organization

6. Captions
7. Disabling

8. Selection Method and Indication

4. Drop-down/pop-up list boxes
Drop-down/pop-up list boxes guidelines include the following:

1. Selection Descriptions

2. List Size

3. Box Size
4. Organization

5. Layout and Separation

6. Captions
7. Defaults

8. Disabling

9. Selection Method and Indication

5. Palettes
Palettes guidelines include the following:
1. Graphical Representations

2. Size

3. Layout
4. Organization

5. Selection Method and Indication

6. Captions
 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
1. Static Text Fields
2. Group Boxes

Example
3. Column headings

Example
4. ToolTips
Example
5. Balloon Tips
Example
6. Progress Indicators
Example
7. Sample Box

Example
8. Scrolling Tickers
 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
• The first, and simplest, prototype is a low-fidelity rough hand-drawn sketch, or mock-
up, of the screens.
• These can start early in the design process and before any attempt is made to create a
prototype using an available toolkit or interface builder.
• With sketches, the focus is on the design of individual screens, not the interface
mechanics.
• The hand sketch should be an entity that has enough of a general look to suggest the
functionality, interaction, and layout of screens.
• The goal is a rough vision, not a polished work of art.
• This sketch will be useful in defining and refining task organization, conceptual ideas,
and the general layout of screens.
2. Interactive Paper Prototypes
• Another simple low-fidelity prototype involves use of common office supplies such as Post-
It notes, transparencies, markers, and scissors.
• Menu bars, pull-down menus, pop-up windows, screen bodies, and so on reflecting system
tasks are created using these media.
• Then, the components are manually manipulated to illustrate the dynamics of the software.
• The purpose of this kind of prototype is to provide a sense of the dynamics of a program
without actually having to build a functional version of it.
• The objective, again, is to create a rough vision, not a polished piece of art, in order to elicit
substantive suggestions and critical comments.
• The goal is not to show how the system or Web site will look, but to assess if people can
easily use it.
3. Programmed Facades
• To provide a realistic surface view of a real program and to illustrate some of
the program’s functioning, a programmed facade can be created.
• Using prototyping tools such as Hypercard, Supercard, and Toolbook,
examples of finished dialogs and screens for some important aspects of the
system are constructed and viewed.
• A facade is very shallow, duplicating only a small portion of
what is ultimately intended in both depth and breadth.
• Because of this shallow nature, it is best described as a medium-fidelity to
high-fidelity prototype.
4. Prototype-Oriented Languages
• To present an example of completed dialogs and screens for some parts of the
system, prototypes can be constructed using programming languages that support
the actual programming process.
• Examples include Power Builder, Visual Basic, and so on.
• Using these tools, a high-fidelity, real program can be created to illustrate some of
the program’s functioning and the mechanics of the interface.
• One consideration to be decided up front: Will the prototype software be a “throw-
away,” or the actual system software?
• This will have implications concerning the amount of programming effort expended
on the prototype.
 7. KINDS OF TESTS

• A test is a tool that is used to measure • Various kinds of windows tests are:
something. The “something” may be: 1. Guidelines Review
Conformance with a requirement. 2. Think-Aloud Evaluations
• Conformance with guidelines for good design. 3. Cognitive Walkthroughs
• Identification of design problems. 4. Heuristic Evaluation
• Ease of system learning. 5. Usability Test
6. Focus Groups
• Retention of learning over time.
7. Classic Experiments
• Speed of task completion.
• Speed of need fulfillment.
• Error rates.
• Subjective user satisfaction.
 GUIDELINES REVIEW
• A guidelines review is an inspection of an interface’s navigation and screen design and layout in the
context of an organization’s standards and design guidelines.
• A checklist summarizing a system’s standard or guideline document is prepared and is used as the
basis for the comparison.
• Failure to comply with a guideline or standard indicates that a design modification may be necessary.
 HEURISTIC EVALUATION
• . In a heuristic evaluation, interface specialists study a system in depth and look for
properties they know, from experience, will lead to problems.
• The interface is judged for its compliance with recognized usability principles, the heuristics
• Severity Ratings in Heuristic Evaluation
• 0 = I don’t agree that this is a usability problem at all.
• 1 = A cosmetic problem only. Need not be fixed unless extra
time is available.
• 2 = A minor usability problem. Fixing should be given a low
priority.
• 3 = A major usability problem. Important to fi
 COGNITIVE WALKTHROUGH

• In a cognitive walkthrough, developers walk through an interface in the context of representative user
tasks.
• Individual task actions are examined and the evaluators try to establish a logical reason why the user
would perform each examined action.
• Actions are compared to the user’s goals and knowledge.
• Discrepancies and problems are noted and analyzed and the tasks modified as necessary.
• Walkthroughs require that the task definition methodology must have been properly accomplished in
the system requirements stage.
• The user’s goals and assumptions must also be clearly defined before the walkthrough is performed
 THINK-ALOUD EVALUATION
• In a think-aloud evaluation, users perform specific tasks while thinking out load.
• The objective is to get the user to talk continuously.
• All comments are recorded so all thoughts are captured and subtle points are not missed
when analysis occurs.
 USABILITY TEST

• A usability test evaluates an interface under real-world or

controlled conditions.
• Specific tasks are performed by users, measures of performance
taken, and the results compared with the previously defined
performance goals.
• Evaluators also gather data on problems that arise.
• Errors, confusion, frustrations, and com- plaints can be noted and
discussed with the user.
• It is also useful to have the user talk aloud about what he or she is
doing.
• Failure to meet these usability design objectives will indicate that
redesign is necessary.
 CLASSIC EXPERIMENTS
• When two or more design alternatives
exist, either of which may appear
possible, a classic experiment may be
developed to compare them directly.
• Two or more prototypes are constructed,
identical in all aspects except for the de-
sign issue (type of control, wording of
an instruction, and so forth).
• Speed and accuracy measures are
collected and user preferences solicited.
 FOCUS GROUP

• In a focus group, a small group of knowledgeable

users and a moderator are brought together to
discuss an interface design prototype or proposed
design tasks.
• The discussion is loosely structured but must be
focused on a specific topic or topics.

End of Module 5
!!!THANK YOU !!!