CS487 - Human Computer Interaction

Understanding the Problem

Week 2
 Today’s Agenda

01 Usability Principles

02 User-Centered Design

03 Universal Design
What Makes a Good UI?
✗Functionality
✗Speed & efficiency
✗Reliability, security, data integrity
✗Standardization, consistency
✗USABILITY !

4
 Usability
“Extent to which a product can be used
by specified users to achieve specified
goals with effectiveness, efficiency and
satisfaction in a specified context of use.”
Remember…
✗A usable system is:
✗easy to use
✗easy to learn
✗easy to remember how to use
✗effective to use
✗efficient to use
✗safe to use
✗enjoyable to use

6
 Why is Usability Important?

✗A GOOD user-interface can: ✗A BAD user-interface can:

✗Earn a company billions ✗be annoying, embarrassing,
✗Increase users loyalty frustrating, or even deadly
✗Increase users trust ✗Increase mistakes in data entry
✗Makes users happy :) and system operation
✗ Decrease functions accessibility
✗Cause system failure because of
7
user rejection
How Hard Is It?

✗It is not simple to make usable user interfaces

✗Basic misconceptions:
✗If I (the developer) can use it, everyone can use it
✗If our non-technical staff can use it, everyone can
✗Good user interfaces are applied common sense
✗A system is usable if all style guidelines are met

7
 How to Ensure Usability?
Definition Charectarestis Example
Advice on UI design
Principles General and abstract Be consistent
issues
Suggestions on how Be consistent in the way that you
Guidlines General and semi-detailed
to increase usability have users leave menus
Provide an “Escape” option in the
Instructions on dialog in which users may want to
Rules principle/guideline Specific and detailed leave the dialog box without
implementation making any changes or selecting
any options. -> “Cancel” button
ISO 9241 multi-part standard
Set by national or
Standards international bodies Specific and mandated covering ergonomics of human-
computer interaction 8
Principles, Guidelines, Rules, and Standards

Abstract Generic

Principles “Design to avoid errors.”

Guidelines, “Don’t offer invalid menu choices.”

Standards
“Make all unavailable menu choices
Rules gray and not selectable.”
Concrete Specific 10
Why Principles & Guidelines?
✗…Because, well, not everything goes…
✗Principles and guidelines are intended to prevent many bad
designs, before they begin, or evaluate existing designs on a
scientific basis
✗They are established based on previous designs and experimental
findings
✗However, rules can all be “broken” (but usually in order to satisfy
another principle)
10
The Variety
✗No “cookbooks” (sorry:/)
✗No simple, universal checklists
✗There are many concepts, principles, and guidelines to help you!
✗You need to:
✗ Think from perspective of user
✗ Understand the higher level principles that apply across situations,
display types, etc.
✗ Implement the standards and guidelines following the specified rules
11
Golden Rules and Heuristics
✗“Broad brush” design rules
✗Useful check list for good design
✗Better design using these than using nothing!
✗Different collections, e.g.
✗Dix’s UI design principles (1998, see chapter 7)
✗Shneiderman’s 8 golden rules (1998)
✗Nielsen’s 10 usability heuristics (1994)
✗Norman’s 7 principles (1988)
✗And many more… 13
UI Design Principles (Dix et al.)
✗Three main categories of principles:
1. Learnability principles
■ aim to support the ease with which new users can begin
effective interaction and achieve maximal performance
2. Flexibility principles
■ aim to support the multiplicity of ways a task can be done or the
user and system exchange information
3. Robustness principles
■ aim to improve the level of support provided to the user to
successfully achieve their goals 14
Golden Rules of UI Design (B. Shneiderman)

✗Eight rules for good interaction design:

1. Strive for consistency
2. Enable frequent users to use shortcuts
3. Offer informative feedback
4. Design dialogs to yield closure
5. Offer error prevention and simple error handling
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short-term memory load
15
Usability Heuristics (J. Nielsen)
✗Ten general principles for interaction design:
1. Visibility of system status
2. Match between system and real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition over recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9.Help users recognize, diagnose, and recover from errors 16
10.Help and documentation
Fundamental Principles (D. Norman)
✗Seven key UI design principles:
1. Use both knowledge in the world and knowledge in the head.
2. Simplify the structure of tasks.
3. Make things visible: bridge the gulfs of Execution and Evaluation.
4. Get the mappings right.
5. Exploit the power of constraints, both natural and artificial.
6. Design for error.
7. When all else fails, standardize.
✗Interesting watch: 3 ways good design makes you happy 17
(TED talk by Don Norman)
Levels of Consideration
1. Meta-display level
✗Apply to the whole system, across media & across displays
✗Focus on this in Basic Layout Stage
2. Display Layout
✗Apply to groups of elements in a display
✗Focus on this in Prototyping and Redesign
3. Element level
✗Details about specific parts of a display
✗Colors, sound attributes, symbols
17
Application of These Principles

✗In doing design and implementation of

your project, revisit this list
✗Assess your design against these usability
principles
✗REMEMBER: There are other principles!

18
 Good Design, The Goal!
“Every designer wants to build a high-
quality interactive system that is admired by
colleagues, celebrated by users, circulated
widely, and imitated frequently.”
— Shneiderman, 1992
...and anything goes!...
 Examples of Bad Designs

22
Can you identify what’s bad about each?
More Bad Examples

23
 Closer to Fine: A Philosophy
“The human user of any system is the focus
of the design process. Planning and
implementation is done with the user in
mind, and the system is made to fit the user,
not the other way around.”
— Bruce Walker
“Good Design” Means
✗Systems are built for humans; must be designed for the user
✗Recognize individual differences; appreciate design implications of
these human factors
✗Recognize that the design of things, procedures, etc., influences
human behavior and well-being
✗Emphasize empirical data and evaluation
✗Rely on the scientific method
✗Things, procedures, environments, and people do not exist in
isolation 23
“Good Design” Is Not…
✗ NOT just applying checklists and guidelines
✗These can help, but UI design is a whole philosophy
✗ NOT using oneself as the model user
✗Know your real users; recognize variation in humans
✗ NOT just common sense
✗Knowing how to design a fire alarm so it will be heard over
background noise is not something we all know
✗The human factors specialist knows where or how to get the
information needed to answer design questions
24
Methodologies, Traditional vs User-Centered

Traditional:
Requirements
✗Sequential
Design
✗Concerned with producing
Implementation software, software specification,
Validation maintainability, and testing
Maintenance ✗Considers the interface to be just
another software component
Example, Waterfall Model
25
 Methodologies, Traditional vs User-Centered (cont.)

User-Centered:
Requirements
✗Iterative
Design
✗Focuses on an understanding of
Implementation the users and their context
Validation ✗Interface design and evaluation
Users Needs Maintenance
are built in from the first stage of
projects, through implementation
Lots of Feedback!
26
So What is User-Centered Design?

✗A way to force yourself to identify and consider

the relevant human factors in your design
✗“User-Centered Design (UCD) is a user interface
design process that focuses on usability goals,
user characteristics, environment, tasks, and
workflow in the design of an interface.”
— Shawn Henry
✗In UCD, “all development proceeds with the
user as the center of focus.” — Jeffrey Rubin 27
So What is User-Centered Design? (cont.)

✗UCD seeks answers to:

✗What is important to users
✗The tasks users do, how frequently, and in
what order
✗The users' work environment
✗The users' problems and constraints
✗Users’ expectations in terms of functionality
✗Output required & in what form
✗How can the design of this ‘product’ facilitate 30
users' cognitive processes?
Why Bother With UCD?

“UCD can improve the usability (ease-of-use) and usefulness

(relevance) of everything from “everyday things” to software
to information systems to processes. . . anything with which
people interact.” — D. Norman

✗It can also:

✗Reduce the number of decisions made out of the blue
✗ Help focus design activities
✗ Help document and defend decisions for later review 31
✗ Cut costs and increases user satisfaction and productivity
UCD, The Goals

✗Easy-to-use products
✗Satisfy customers
✗Decrease expenditures on technical
support and training
✗Advertise ease-of-use successes
✗Ultimately increase market share
32
UCD, The Principles
1. Set clear goals 4. Evaluate Designs
Determine target market, intended User feedback is gathered early
users, and primary competition and often to drive product design
2. Understand users 5. Assess competitiveness
If you want a user to understand Whatever the majority of
your product, you must first customers are using today to
understand the user carry out the tasks
3. Design the total user experience 6. Manage users
Everything a customer sees, hears, Continue to monitor and listen to
and touches is designed to satisfy your users, and let their feedback
user’s needs inform your decisions 33
UCD, The Process
✗Essential activities in a user-centered design project include:

Requirements Requirements Design Evaluation

Gathering Specification Producing designs Carrying out user-
Understanding Specifying the user and prototypes based assessment
of the product 34
and specifying and organizational
the context of use requirements
UCD, The Methods
✗Common methods used in UCD include:
Method Cost When to use?

Focus groups Low Requirement gathering

Usability tetsing High Design & Evaluation

Card sorting High Design

Participatory design Low Design

Questionnaries Low Requirement gathering & Evaluation

33
Interviews High Requirement gathering & Evaluation
 UCD, The Pros and Cons
Pros Cons
Products are more efficient, effective, and safe It is more costly
Assists in managing users’ expectations and
It takes more time
levels of satisfaction with the product
Users develop a sense of ownership for the May require involving additional design team
product member and a wide range of stakeholders
Products require less redesign and integrate May be difficult to translate some types of
into the environment more quickly data into design
The product may be too specific for more
The collaborative process generated more
general use, thus not readily transferable to
creative design solutions to problems
other clients 34
Universal Design
• The 5 senses (sight, sound, touch, taste and smell) are
used by us every day
• each is important on its own
• together, they provide a fuller interaction with
the natural world

• Computers rarely offer such a rich interaction

• Can we use all the available senses?

• ideally, yes
• practically – no

• We can use• sight • sound • touch (sometimes)

• We cannot (yet) use • taste • smell 35

Multi-modal vs. Multi-media

• Multi-modal systems
• use more than one sense (or mode ) of interaction
• e.g. visual and aural senses: a text processor may speak the words
as well as echoing them to the screen

• Multi-media systems
• use a number of different media to communicate
information
• e.g. a computer-based teaching system: may use video, animation,
text and still images: different media all using the visual mode of 36
interaction; may also use sounds, both speech and non-speech:
two more media, now using a different mode
Structure Speech Recognition Problems

• phonemes
• 40 of them
• basic atomic units
• sound slightly different depending on the context they
are in, these larger units are …
• allophones
• all the sounds in the language
• between 120 and 130 of them
• these are formed into …
• morphemes
37
• smallest unit of language that has meaning.
 Structure of Speech
Different people speak differently:
accent, intonation, stress, idiom, volume, etc.
The syntax of semantically similar sentences may vary.
Background noises can interfere.
People often “ummm.....” and “errr.....”
Words not enough - semantics needed as well
requires intelligence to understand a sentence
context of the utterance often has to be known
also information about the subject and speaker
e.g. even if “Errr.... I, um, don’t like this” is recognised, it is a fairly useless piece of
38
information on it’s own
 Non-Speech Sounds
• boings, bangs, squeaks, clicks etc.
• commonly used for warnings and alarms
• Evidence to show they are useful
• fewer typing mistakes with key clicks
• video games harder without sound
• Language/culture independent, unlike speech

39
 Auditory Icons

Use natural sounds to represent different types of object or action

Natural sounds have associated semantics which can be mapped onto
similar meanings in the interaction
e.g. throwing something away
~ the sound of smashing glass
Problem: not all things have associated meanings

Additional information can also be presented:

muffled sounds if object is obscured or action is in the background
use of stereo allows positional information to be added
40
 Handwriting recognition

Problems
personal differences in letter formation
co-articulation effects

Breakthroughs:
stroke not just bitmap
special ‘alphabet’ – Graffeti on PalmOS

Current state:
usable – even without training 41
but many prefer keyboards!
 Users with Disabilities

• visual impairment
• screen readers, SonicFinder
• hearing impairment
• text communication, gesture, captions
• physical impairment
• speech I/O, eyegaze, gesture, predictive systems (e.g. Reactive keyboard)
• speech impairment
• speech synthesis, text communication
• dyslexia
• speech input, output
• autism 42
• communication, education
 … Plus …
• age groups
• older people e.g. disability aids, memory aids, communication tools
to prevent social isolation
• children e.g. appropriate input/output devices, involvement in
design process
• cultural differences
• influence of nationality, generation, gender, race, sexuality, class,
religion, political persuasion etc. on interpretation of interface
features
• e.g. interpretation and acceptability of language, cultural symbols, 43
gesture and colour
Resources & More…
Textbooks Chapters:
✗ Human-Computer Interaction - CH2, CH3, CH4, and CH7
Credits:
✗ Some slides content and illustrations are courtesy of:
✗ Prof. David G. Kay @UCLA, <link>
✗ Prof. John T.Stasko @GeorgiaTech, <link>
✗ Nigini Oliveira et al. @The Allen School, <link>
✗ Slides design and infographics <slidescarnival.com/>

44