COM201: System Analysis and Design

Lecture 6 : User Interface Design

Dr. Fayza A. Nada

1
 Overview
 What is the field of HCI?
 The limitations and capabilities of “Human” and
“Computer” that influence the designing of user
interfaces
 Examples of Interactions between humans and
computers
 User Interface Design
 Need to understanding users
 Guidelines for creating usable user interfaces
 Approaches for evaluating user interfaces
2
 Human Computer Interaction

What is HCI
“… involves the design,
Components?

implementation and evaluation of

interactive systems in
Interaction
the context of
the user’s task and work”
• Human: Individuals, Group, Sequence
• Computer: Computerized/Not
• Interaction: Direct/Indirect

Human (Users) Computer

3
 HCI: Multi-Disciplinary Subject
Origin - Influence

Psychology and cognitive Business

science
Perceptual, cognitive, problem
•
solving
Computer
science and
Ergonomics engineering
Physical…

Sociology Technical
writing
Graphic design Expertise?
Adapt
Others …
Input
Computer scientists 4
Human: Capacities and Limitations
 Perceptual system (differences in handling
sensory stimulus )

 Senses: sight, hearing, touch, taste, and

smell
 e.g. visual processing system
• Limitations: Illusions – Colour Blind

 Motor skills (How to move, click…)

 Movement time (age, fitness, design for different

groups)
 Reaction time (sound, vision, pain, compound,
increase, decrease)
 Speed and accuracy (imp. In interactive sys)

 Human memory (Temp recall o Info)

Human
 Short term memory (digits, grouping Num.)
(Users) 5
 Computer: Capacities and Limitations
 Input devices
 Keyboard (QWERTY or typewriters?)
 Positioning and pointing devices
 Handwriting recognition (simple, technology, mistakes, 24
words!...)
 Speech recognition (promising, applications, disabilities)

 Output devices
 Computer screens (Raster, Resolution, hazards…)
 3D displays, Virtual Reality
 Printing (diff. readability, fonts…)
 Memory and Processing (Limitations on storage, Computer
comp, graphics, Net.) 6
 Interaction: Different Styles
Direct Manipulation Form Fill-In

Limitation…
Interaction styles?

Interaction

Menu Selection Command Language

Natural Language
[Schneiderman, 2004]
7
 Direct Manipulation Form Fill-In
Advantages Disadvantages
Advantages Disadvantages
Visually presents task concept May be hard to program
Simplifies data entry Consumes screen space
Allows easy learning May require graphics display
and point devices Requires modest training

Allow errors to be avoided Gives convenient assistance

Encourages exploration
Affords high subjective
satisfactions Command language
Advantages Disadvantages
Is flexible Has poor error handling
Appeals to the “power” users Requires substantial training
Menu Selection and memorization
Allows convenient creation user-
Advantages Disadvantages defined macros
Shorten learning time Present danger of many
menus - overwhelm the user
Reduces keystrokes May slow frequent users Natural language
Structures decision making - all Consumes screen space
choices are presented Advantages Disadvantages
Permits use of dialog- Requires rapid display rates Relives burden of learning May require more keystrokes
management tools syntax

[Source: Schneiderman, 2004] 8

 User Profiles: Human Diversity
 Physical abilities and physical workplaces
 Cognitive and perceptual abilities
 Personality differences
 Cultural and international diversity
 Users with disabilities
 Elderly users

[Source: Schneiderman, 2004]

9
 User Profiles: Diversity of Users

Novice Expert frequent

Users
(first-time users)

Knowledgeable
Intermittent Users
[Source: Schneiderman, 2004] 10
 References
 Shneuiderman and Plaisant, Designing the User
Interface, 4th Edition, Addison Wesley, 2005
 Dix, et al., Human-computer interaction, 2nd
Edition, Prentice Hall, 1998
 Satzinger, et al., Systems Analysis and Design
in a changing world, Thomson, 2007
 --------------------------------------------------------
 NOTE: Time for Practical Test 1 (10%)

11