ui design-day1
TRANSCRIPT
Utility | Meaning | Engagement
UI Design Basics
?
Design
Not Design
Do not confuse design with decoration
5
“…shaping digital things for people’s use”-Raj Lal
7
Three Legged Stool
Engagement
MeaningUtility
The Horror
Design for Utility
UI Design Basics
14
Usabiltiy Performance
Usability
16
Usability is a quality attribute that assesses how easy user interfaces are to use.
17
Learnability
18
Learnability
19
Efficiency
20
Efficiency
21
Memorability
22
Errors
23
Satisfaction
Flight Search - http://www.hipmunk.com/
Online Music - http://grooveshark.com/
Zelda NES Emulator - http://game-oldies.com/play-online/legend-of-zelda-the-nintendo-nes#
24
Exercise
25
LearnabilityHow easy is it for users to accomplish basic tasks the first
time they encounter the design?
Identify the “basic tasks”.
EfficiencyOnce users have learned the design, how quickly can they
perform tasks?
Identify the task flow - identify how may steps are involved
MemorabilityWhen users return to the design after a period, how easily
can they reestablish proficiency?
You’re going to have to guess
ErrorsHow many errors do users make, how severe are they, and
how easily can they recover?
Identify potential errors and how easily they are avoided
Satisfaction How pleasant is it to use the design?
Usability Heuristics
1. Visibility of system status
28
Visibility of system status
Loading…
28
Visibility of system status
2. Match between system and the real world
31
iBooks “Library”
32
Desktop
33
Paper Paradigm
3. User control and freedom
35
Support Undo/Redo
36
Chrome
37
Turbotax
4. Help and documentation
39
Garageband Help
5. Help users recover from errors
41
Help users recover from errors
42
Help users recover from errors
42
Help users recover from errors
6. Aesthetic and minimalist design
44
Aesthetic and minimalist design
45
Aesthetic and minimalist design
7. Flexibility and efficiency of use
47
Accelerators
48
Accelerators
49
Tailor Frequent Actions
8. Recognition rather than recall
51
Minimize Memory Load
52
Avoid Visual Clutter
53
Use Conventions
54
OSX Help Menu
54
OSX Help Menu
54
OSX Help Menu
54
OSX Help Menu
9. Error prevention
56
Error PreventionWhat is your name? What is your quest?
What is your birthdate?
56
Error PreventionLancelot
What is your name?The Holy Grail
What is your quest?
The Ides of March MCCXXV
What is your birthdate?
57
Error PreventionsWhat is your name? What is your quest?
What is your birthdate?
57
Error PreventionsLancelot
What is your name?The Holy Grail
What is your quest?
What is your birthdate?March 15 1225
10. Consistency and standards
59
Consistency and standards
60
Consistency and standards
61
Affordances
Underlined Links
62
Affordances
63
Affordances
64
Affordances
Flight Search - http://www.hipmunk.com/
Online Music - http://grooveshark.com/
Zelda NES - http://game-oldies.com/play-online/legend-of-zelda-the-nintendo-nes#
65
Exercise
1. Visibility of System Status
2. Speak the user’s language
3. Provide user control and freedom (undo/redo)
4. Help and documentation
5. Help users recover from errors
6. Aesthetic and minimalist design
7. Flexibility and efficiency of use
8. Recognition rather than recall (reduce memory load)
9. Error prevention
10. Consistency and standards (affordances)
Break
Some Research
69
Experiment
1. Get some paper and pencil 2. Look for 2 seconds 3. Sketch what you see
70
70
71
71
72
72
73
Eye Tracking
Some people will read your content, but most won't.
74
F-Pattern: Lessons
The first two paragraphs should state the most important information.
75
F-Pattern: Lessons
Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning.
76
F-Pattern: Lessons
77
F-Pattern: Not Absolute
“The primary goal forevery form is completion”
Luke Wroblewski Web Form Design: Filling in the Blanks
78
Forms
The Horror
80
80
81
Illuminate A Clear Path to Completion
82
Scan Lines
83
Scan Lines
84
Button Placement
85
Button Placement
86
Button Placement
The Winner
87
Top Align LabelsFirst Name
Last Name
Telephone( ) -
88
Lastpass
89
Right Align LabelsFirst Name
Middle Initial
Telephone ( ) -
Last Name
Occupation
90
Left Align LabelsTax ID
Form 102B box1
Capital of Ireland
91
Turbotax
92
Labels Within FieldsTax ID
Middle Initial
Telephone*
Last Name
Occupation
!
93
When in doubt: Top Align
94
Forms Suck. If you don’t believe me, try to find people
who like filling them in.
-Luke Wroblewski
Performance
It’s time for us to treat performance as an essential design feature, not just as a
technical best practice.
-Brad Frost
97
Time Scales in User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
0.1 sec “I did that”
97
Time Scales in User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
97
Time Scales in User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
98
Time Scales in User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
0.2 - 1.0 seconds“I told the computer to do that”
98
Time Scales in User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
98
Time Scales in User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
99
Time Scales in User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
Greater than 1.0 second“Im waiting on the computer”
99
Time Scales in User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
99
Time Scales in User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
Column 1 ! Column 2 ! Column 3 !
Value 10Value 2 Value 3
Value 7Value 5 Value 6
Value 4Value 8 Value 9
Value 1Value 11 Value 12
See Heuristic #1 Indicate system status
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
101
Time Scales in User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
10 seconds…
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
101
Time Scales in User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
101
Time Scales in User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 10Value 2 Value 3
Value 7Value 5 Value 6
Value 4Value 8 Value 9
Value 1Value 11 Value 12
Minimize http requests
Concatenate, Minify, gzip css and javascript
Optimize images
102
Performance Best Practices
Run your current project through these performance tools. What could you do to increase performance?
http://developers.google.com/speed/pagespeed/insights/
http://tools.pingdom.com/
103
Exercise