Fundamental principles of Usability and User Centred Design
1. Fundamental principles
Of Usability and
User Centered Design.
Specification and Analysis of Information Systems Spring 2005 1
2. Agenda
• Introduction
• User Interface Design
– GUI building blocks
– GUI structures
• Usability
– Good design / bad design
– Usability levels
• User-centered design
– Principles and ideals
– The process
Intro | UI Design | Usability | User-centered 2
3. What is Usability?
The effectiveness, efficiency, and
satisfaction with which specified users
can achieve specified goals in particular
environments.
ISO 9241 usability definition
Intro | UI Design | Usability | User-centered 3
4. Why is Usability Important?
1. The fate of 2. The Apple
the world iPhone
Intro | UI Design | Usability | User-centered 4
5. 1. The Fate of the World
The 2001 Florida Ballot Incident
Bush won Florida by a 537-vote margin in official results
Intro | UI Design | Usability | User-centered 5
6. The Florida Ballot
• 5,330 Palm Beach County residents invalidated their ballots by
punching for Gore and Reform Party candidate Pat Buchanan.
• Almost half of them were 65 or older and Democrats.
Intro | UI Design | Usability | User-centered 6
7. 2. The Apple iPhone
Intro | UI Design | Usability | User-centered 7
8. Focus on Usability and Design
Intro | UI Design | Usability | User-centered 8
9. The implications of usability
Intro | UI Design | Usability | User-centered 9
10. Usability vs. Specification
Initiation
Requirement We design the user
interface here
Specification
We test them here
Design
Implementation
Testing Is it too late?
Intro | UI Design | Usability | User-centered 10
11. User Centered Design
Initiation • Therefore, we need a crush
course in:
Requirement – UI Design
– Usability principles
UI Design + Testing
Specification – User-centered design
• Note, these issues will be
Design discussed in a very shallow
manner.
Implementation • Each of these issues
deserve a course (actually,
Testing in our faculty, there are two
courses on these issues).
Take them!
Intro | UI Design | Usability | User-centered 11
12. Agenda
• Introduction
• User interface design
– GUI building blocks
– GUI structures
• Usability
– Good design / bad design
– Usability levels
• User-centered design
– Principles and ideals
– The process
12
13. Basic Model of HCI
Computation
input
Computer
output
Intro | UI Design | Usability | User-centered 13
14. Types of User Interfaces
Graphical User Command Line Voice activated
Interface (GUI) interfaces
Intro | UI Design | Usability | User-centered 14
16. GUI Components: Simple Input
Text field Button
Enter Text Click to Submit
Text area Link
Enter Lots of text Link 1, link 2, link 3
• What is the type of information received by each input field?
• What’s the effect?
Intro | UI Design | Usability | User-centered 16
17. Simple GUI components: Choosers
Combo box Slider
Choose one
Radio button Checkbox
Option 1 Option 1
Option 2 Option 2
• What is the difference between a radio button and a check
box?
• What is the choice domain and the choice range of each
component?
Intro | UI Design | Usability | User-centered 17
18. Larger Constructs
Pages
(in Web-based systems)
Windows
(in Desktop-based systems)
Intro | UI Design | Usability | User-centered 18
19. Composing components
Tabs
Areas of
reference
List
Intro | UI Design | Usability | User-centered 19
21. Designing Interface Elements (top-down)
1. User flow: take the user
Use Case aspect with the use-
case model
2. Storyboard:
• Find compositions of
actions / information
• Find relations between
compositions
1. Detailed view:
• Refine each composition to
the component level
1. Check and integrate
Intro | UI Design | Usability | User-centered 21
22. The use case model
Intro | UI Design | Usability | User-centered 22
23. User flow
• Integrate use-case scenarios from the user
perspective
Intro | UI Design | Usability | User-centered 23
26. Agenda
• Introduction
• User interface design
– GUI building blocks
– GUI structures
• Usability
– Good design / bad design
– Usability levels
• User-centered design
– Principles and ideals
– The process
26
27. Good UI design vs. bad design
• What makes a good design different from a bad
design?
• In order to answer this question we will define the
concept of usability.
Intro | UI Design | Usability | User-centered 27
28. Which of these apps is easy to use?
Intro | UI Design | Usability | User-centered 28
30. Recognizable interfaces
Pretty, or smart, is not
necessarily Usable
Intro | UI Design | Usability | User-centered 30
31. Patterns
• Design patterns in HCI are a good way to explore
suggestions for good design
• We would look at some patterns:
– Wizard (for simplicity)
– Contextual help (for learnable interface)
– Go back to a safe place
– Shortcuts (for flexible)
– Undo (for robustness)
Intro | UI Design | Usability | User-centered 31
32. Wizard
• Problem:
– The user wants to
achieve a single goal but
several decisions need to
be made.
• Solution:
– Take the user through the
entire task one step at
the time.
Intro | UI Design | Usability | User-centered 32
33. Contextual Help
• Problem:
– Users may need help
regarding specific tasks,
but would spend a lot of
energy searching for it.
• Solution:
– Place help in the context of
the given task.
Intro | UI Design | Usability | User-centered 33
34. Computers can be SCARY
Sometimes an innocent user gets into a state
she don’t want to be in…
And then, the terror!!!
Intro | UI Design | Usability | User-centered 34
35. Solution
• Provide a way to go back to a checkpoint of the
user's choice.
The "Home" button Clicking the Logo in
and the “Back” Web sites
Intro | UI Design | Usability | User-centered 35
36. Shortcuts
• Problem:
– Power users need faster ways
to execute operations than
novice users
• Solution:
– Create shortcuts for power
operations, using keyboard,
combinations, icons, special
menus etc...
Intro | UI Design | Usability | User-centered 36
37. Undo
• Problem:
– The user might regret executing some operation.
– Asking the user for confirmation after executing each
operation will make the interaction unusable.
• Solution:
– Enable the user to undo her operations, after they were
executed.
Intro | UI Design | Usability | User-centered 37
39. Component Level
• Familiar to use
• Gives feedback
• Reduces errors
• Satisfies a given task
• Readable
• Self explaining
Intro | UI Design | Usability | User-centered 39
40. Application Level
• Accessible
• Gives sense of place
• Easy to navigate in
• Handles errors
• Realistic Scenarios
• Personalized
Intro | UI Design | Usability | User-centered 40
41. Project Level
• Answers real needs
• Answers current needs
• Generates value
• Communicate with all organization's units
Intro | UI Design | Usability | User-centered 41
42. Agenda
• Introduction
• User interface design
– GUI building blocks
– GUI structures
• Usability
– Good design / bad design
– Usability levels
• User-centered design
– Principles and ideals
– The process
42
43. User Centered Design
• The objective is to create
a design process that Initiation
would increase the UCD:
usability of the product Requirement User is
involved here
• Three principles:
Specification
– Finding the user’s context of
the product
– Iterative process, including Design
ongoing tests and revisions
– Participatory Design - Users Implementation
become members of the Classic:
User is
design team Testing involved here
Intro | UI Design | Usability | User-centered 43
45. Requirements stage
• Talk to users
– Interview them in order to
discover user’s culture,
requirements, expectations,
etc.
• Watch the users
– At work
– See how they use their
existing systems
– See what they do not use
Intro | UI Design | Usability | User-centered 45
46. Identifying Personas
• Personas are
hypothetical archetypes
of actual users
• By identifying a small set
of personas, we can:
– make the users seem more
real
– Judge the importance of
features
– Look at the:
• Usage frequency
• Competency
Taken from
• ... http://www.w3.org/WAI/redesign/personas
Intro | UI Design | Usability | User-centered 46
47. Evaluation at the requirements stage
Focus Group
The ideas of the new system are
presented to a group of potential
users.
Cognitive Walkthrough
The user “imagines” the system,
by going with the interviewer
through its stages and actions
Intro | UI Design | Usability | User-centered 47
50. Evaluation at the specification / design
Usability Lab
Testing the prototypes by actual
users. Good for: finding
unexpected problems and process
refinement.
Guided Walkthrough
Guiding and questioning the users
while they perform specific tasks.
Intro | UI Design | Usability | User-centered 50
51. Evaluation with the actual system
• Log analysis may be
used to:
– Identifying actual usage
patterns
– Effectiveness of processes,
and components
• Benefits:
– Real statistical information
– Real-time information
Taken from
http://www.clickdensity.com
Intro | UI Design | Usability | User-centered 51
52. Summary
Usability is important:
– Changing the registration interface at eBay had increased
success rate from 16% to 68%. Sales went up in 84M$.
User interface design
– Components, storyboard, maps
Usability
– Familiar, rules, patterns
User-centered design
– Involve the users
– Evaluate early and often
52
53. References
• Bad design:
– http://homepage.mac.com/bradster/iarchitect/shame.htm
• Patterns:
– http://www.welie.com/patterns/index.php
– COMMON GROUND: A Pattern Language for Human-
Computer Interface Design, Jenifer Tidwell,
http://www.mit.edu/~jtidwell/common_ground_onefile.html
• Interaction Design:
– User Interface Design, Prototyping, and Evaluation (UC
Berkeley Extension Summer Engineering Institute)
http://guir.berkeley.edu/courses/SummerHCI02/
– http://www.interaction-design.org/
– http://www.useit.com/
53