1Spring 2005Specification and Analysis of Information Systems
Fundamental principles Of Usability and
User Centered Design.
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
3
What is Usability?
ISO 9241 usability definition
The effectiveness, efficiency, and satisfaction with which specified users can achieve specified goals in particular environments.
Intro | UI Design | Usability | User-centered
4
Why is Usability Important?
1. The fate of the world
2. The Apple iPhone
Intro | UI Design | Usability | User-centered
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
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
7
2. The Apple iPhone
Intro | UI Design | Usability | User-centered
8
Focus on Usability and Design
Intro | UI Design | Usability | User-centered
9
The implications of usability
Intro | UI Design | Usability | User-centered
10
Usability vs. Specification
Initiation
Requirement
Design
Specification
Implementation
Testing
We design the user interface here
We test them here
Is it too late?
Intro | UI Design | Usability | User-centered
11
User Centered Design
UI Design + Testing
Initiation
Requirement
Design
Specification
Implementation
Testing
• Therefore, we need a crush course in:– UI Design– Usability principles– User-centered design
• Note, these issues will be discussed in a very shallow manner.
• Each of these issues deserve a course (actually, in our faculty, there are two courses on these issues). Take them!
Intro | UI Design | Usability | User-centered
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
13
Basic Model of HCI
Computer
input
Computation
output
Intro | UI Design | Usability | User-centered
14
Types of User Interfaces
Graphical User Interface (GUI)
Command Line Voice activated interfaces
Intro | UI Design | Usability | User-centered
15
GUI Model
Computer
inputComputation
output
Mouse : {x0..1024, y0..768}
Keyboard : {I{A..Z, 1..0,...}}
Screen : {(x,y)Z2}
Intro | UI Design | Usability | User-centered
16
GUI Components: Simple Input
• What is the type of information received by each input field?
• What’s the effect?
Intro | UI Design | Usability | User-centered
Text field Button
Text area Link
Enter Text Click to Submit
Enter Lots of text Link 1, link 2, link 3
17
Simple GUI components: Choosers
• 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
Combo box Slider
Option 2
Option 1 Option 1
Option 2
Choose one
Radio button Checkbox
18
Larger Constructs
Pages(in Web-based systems)
Windows(in Desktop-based systems)
Intro | UI Design | Usability | User-centered
19
Composing components
Tabs
Areas of reference
List
Intro | UI Design | Usability | User-centered
20
Actions
Context
Task
Consequences
Intro | UI Design | Usability | User-centered
21
Conversations pageConversations page
Designing Interface Elements (top-down)
1. User flow: take the user aspect with the use-case model
2. Storyboard: • Find compositions of
actions / information• Find relations between
compositions
3. Detailed view:• Refine each composition to
the component level
4. Check and integrate
Use Case
Login PageLogin Page
Welcome Text Login Fields
Registration Links
password
Submit
Sign in
Marketing Text
Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah
Intro | UI Design | Usability | User-centered
22
The use case model
Gmail*
User
External Email Server
»« »«
Compose message
»« »«
Manage messages
»«
»«
archive
»« »«
label
»«
»«
reply
<<extend>>
<<extend>>
<<extend>>
After selection
»« »«
Send / Receive Messages
»« »«
Manage Preferences
* It’s not exactly Gmail...
»« »«
Sign in
<<include>>
<<include>>
<<include>>
»« »«
Register
<<extend>>
Intro | UI Design | Usability | User-centered
23
User flow
LoginPage
register
Message ManagingPage
Marketing Page
Message ViewingPage
Reply Page
Compose page
Manage accounts page
Manage filters page
Manage labels page
• Integrate use-case scenarios from the user perspective
Intro | UI Design | Usability | User-centered
24
Storyboard
Login PageLogin Page
Welcome Text Login Fields
Registration Links
password
Submit
Sign in
Marketing Text
Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah
Conversations PageConversations Page
Folders
Label Filters
LOGOMessages Pane
Sign-out
Message Info: from, when, subject, has attachment?Actions: read, reply, replay, archive, delete
Message
Message
Show folder
showlabeled
Message Managing pageMessage Managing page
Intro | UI Design | Usability | User-centered
25
Detailed View
Conversations PageConversations Page
Folders
Label Filters
LOGOMessages Pane
Sign-out
Show folder
showlabeled
All mailNew mailDeleted
PersonalWork
From Subject When
Archive Delete More actions...
Intro | UI Design | Usability | User-centered
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
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
28
Which of these apps is easy to use?
Intro | UI Design | Usability | User-centered
29
Good design
• Recognizable
• Simple
• Clear purpose• Learnable
• Safe• Flexible
• Robust
• Good Metaphors
• ...
Intro | UI Design | Usability | User-centered
30
Recognizable interfaces
Pretty, or smart, is not necessarily Usable
Intro | UI Design | Usability | User-centered
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
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.
< Back Next > Cancel
Stuff to do here
Complicated ProcessComplicated Process
Intro | UI Design | Usability | User-centered
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
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
35
Solution
• Provide a way to go back to a checkpoint of the user's choice.
The "Home" button and the “Back”
Clicking the Logo inWeb sites
Intro | UI Design | Usability | User-centered
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
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
38
Usability levels
Component
Application
Project
Intro | UI Design | Usability | User-centered
39
Component Level
• Familiar to use
• Gives feedback
• Reduces errors
• Satisfies a given task
• Readable
• Self explaining
Intro | UI Design | Usability | User-centered
40
Application Level
• Accessible
• Gives sense of place
• Easy to navigate in
• Handles errors
• Realistic Scenarios
• Personalized
Intro | UI Design | Usability | User-centered
41
Project Level
• Answers real needs
• Answers current needs
• Generates value
• Communicate with all organization's units
Intro | UI Design | Usability | User-centered
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
43
User Centered Design
• The objective is to create a design process that would increase the usability of the product
• Three principles:– Finding the user’s context of
the product– Iterative process, including
ongoing tests and revisions– Participatory Design - Users
become members of the design team
Initiation
Requirement
Design
Specification
Implementation
TestingClassic: User is
involved here
UCD: User is
involved here
Intro | UI Design | Usability | User-centered
44
Where are the differences
• Requirements gathering stage:– Talk / view users– Identifying personas
• Specification stage:– Interface prototyping– Usability expert analysis– Heuristic Evaluation
• Design / Implementation– Usability Lab– Log Analysis
Intro | UI Design | Usability | User-centered
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
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 • ...
Intro | UI Design | Usability | User-centered
Taken from http://www.w3.org/WAI/redesign/personas
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
48
Prototyping
• Brainstorm
• Rough interface design
• Application walkthrough
Specification
Low fidelity paper prototypes
Intro | UI Design | Usability | User-centered
49
Prototyping – Intermediate Stages
• Fine tune interface design
• Screen design
• Heuristic evaluation and redesignDesign
Medium fidelity prototypes
Intro | UI Design | Usability | User-centered
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
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
Intro | UI Design | Usability | User-centered
Taken from http://www.clickdensity.com
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
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/