Eran Toch technion.ac.il/~erant
-
Upload
charlotte-davis -
Category
Documents
-
view
43 -
download
3
description
Transcript of Eran Toch technion.ac.il/~erant
![Page 1: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/html5/thumbnails/7.jpg)
7
2. The Apple iPhone
Intro | UI Design | Usability | User-centered
![Page 8: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/html5/thumbnails/8.jpg)
8
Focus on Usability and Design
Intro | UI Design | Usability | User-centered
![Page 9: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/html5/thumbnails/9.jpg)
9
The implications of usability
Intro | UI Design | Usability | User-centered
![Page 10: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/html5/thumbnails/13.jpg)
13
Basic Model of HCI
Computer
input
Computation
output
Intro | UI Design | Usability | User-centered
![Page 14: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/html5/thumbnails/19.jpg)
19
Composing components
Tabs
Areas of reference
List
Intro | UI Design | Usability | User-centered
![Page 20: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/html5/thumbnails/20.jpg)
20
Actions
Context
Task
Consequences
Intro | UI Design | Usability | User-centered
![Page 21: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/html5/thumbnails/28.jpg)
28
Which of these apps is easy to use?
Intro | UI Design | Usability | User-centered
![Page 29: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/html5/thumbnails/30.jpg)
30
Recognizable interfaces
Pretty, or smart, is not necessarily Usable
Intro | UI Design | Usability | User-centered
![Page 31: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/html5/thumbnails/38.jpg)
38
Usability levels
Component
Application
Project
Intro | UI Design | Usability | User-centered
![Page 39: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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: Eran Toch technion.ac.il/~erant](https://reader036.fdocuments.net/reader036/viewer/2022070401/5681377b550346895d9f13dd/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/