user centered design
DESCRIPTION
A crush course in user-centered design, usability and GUI development.TRANSCRIPT
![Page 1: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/1.jpg)
1Spring 2005Specification and Analysis of Information Systems
A Crush Course in Usability and User Centered Design
Eran Toch
http://www.technion.ac.il/~erant
Spring 2007
![Page 2: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/2.jpg)
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
![Page 3: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/3.jpg)
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
![Page 4: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/4.jpg)
4
Why is Usability Important?
1. The fate of the world
2. The Apple iPhone
Intro | UI Design | Usability | User-centered
![Page 5: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/5.jpg)
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
![Page 6: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/6.jpg)
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
![Page 7: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/7.jpg)
7
2. The Apple iPhone
Intro | UI Design | Usability | User-centered
![Page 8: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/8.jpg)
8
Focus on Usability and Design
Intro | UI Design | Usability | User-centered
![Page 9: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/9.jpg)
9
The implications of usability
Intro | UI Design | Usability | User-centered
![Page 10: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/10.jpg)
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
![Page 11: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/11.jpg)
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
![Page 12: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/12.jpg)
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
![Page 13: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/13.jpg)
13
Basic Model of HCI
Computer
input
Computation
output
Intro | UI Design | Usability | User-centered
![Page 14: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/14.jpg)
14
Types of User Interfaces
Graphical User Interface (GUI)
Command Line Voice activated interfaces
Intro | UI Design | Usability | User-centered
![Page 15: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/15.jpg)
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
![Page 16: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/16.jpg)
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
![Page 17: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/17.jpg)
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
![Page 18: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/18.jpg)
18
Larger Constructs
Pages(in Web-based systems)
Windows(in Desktop-based systems)
Intro | UI Design | Usability | User-centered
![Page 19: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/19.jpg)
19
Composing components
Tabs
Areas of reference
List
Intro | UI Design | Usability | User-centered
![Page 20: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/20.jpg)
20
Actions
Context
Task
Consequences
Intro | UI Design | Usability | User-centered
![Page 21: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/21.jpg)
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
![Page 22: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/22.jpg)
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
![Page 23: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/23.jpg)
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
![Page 24: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/24.jpg)
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
![Page 25: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/25.jpg)
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
![Page 26: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/26.jpg)
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
![Page 27: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/27.jpg)
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
![Page 28: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/28.jpg)
28
Which of these apps is easy to use?
Intro | UI Design | Usability | User-centered
![Page 29: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/29.jpg)
29
Good design
• Recognizable
• Simple
• Clear purpose• Learnable
• Safe• Flexible
• Robust
• Good Metaphors
• ...
Intro | UI Design | Usability | User-centered
![Page 30: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/30.jpg)
30
Recognizable interfaces
Pretty, or smart, is not necessarily Usable
Intro | UI Design | Usability | User-centered
![Page 31: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/31.jpg)
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
![Page 32: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/32.jpg)
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
![Page 33: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/33.jpg)
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
![Page 34: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/34.jpg)
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
![Page 35: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/35.jpg)
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
![Page 36: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/36.jpg)
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
![Page 37: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/37.jpg)
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
![Page 38: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/38.jpg)
38
Usability levels
Component
Application
Project
Intro | UI Design | Usability | User-centered
![Page 39: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/39.jpg)
39
Component Level
• Familiar to use
• Gives feedback
• Reduces errors
• Satisfies a given task
• Readable
• Self explaining
Intro | UI Design | Usability | User-centered
![Page 40: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/40.jpg)
40
Application Level
• Accessible
• Gives sense of place
• Easy to navigate in
• Handles errors
• Realistic Scenarios
• Personalized
Intro | UI Design | Usability | User-centered
![Page 41: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/41.jpg)
41
Project Level
• Answers real needs
• Answers current needs
• Generates value
• Communicate with all organization's units
Intro | UI Design | Usability | User-centered
![Page 42: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/42.jpg)
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
![Page 43: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/43.jpg)
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
![Page 44: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/44.jpg)
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
![Page 45: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/45.jpg)
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
![Page 46: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/46.jpg)
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
![Page 47: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/47.jpg)
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
![Page 48: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/48.jpg)
48
Prototyping
• Brainstorm
• Rough interface design
• Application walkthrough
Specification
Low fidelity paper prototypes
Intro | UI Design | Usability | User-centered
![Page 49: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/49.jpg)
49
Prototyping – Intermediate Stages
• Fine tune interface design
• Screen design
• Heuristic evaluation and redesignDesign
Medium fidelity prototypes
Intro | UI Design | Usability | User-centered
![Page 50: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/50.jpg)
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
![Page 51: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/51.jpg)
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
![Page 52: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/52.jpg)
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
![Page 53: User Centered Design](https://reader034.vdocuments.mx/reader034/viewer/2022050905/54c707f84a795939288b4573/html5/thumbnails/53.jpg)
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/