Download - User Interface Principles
3 — User Interface Principles
From Code to Product gidgreen.com/course
Lecture 3
• Introduction • Vision • Cognition • Memory • Action • Emotion
From Code to Product Lecture 3 — UI Principles — Slide 2 gidgreen.com/course
User Interface
“The aspects of a computer system or program which can be seen (or heard or otherwise perceived) by the human user, and the commands and mechanisms the user uses to control its operation and input data.”
— Free On-Line Dictionary of Computing
From Code to Product Lecture 3 — UI Principles — Slide 3 gidgreen.com/course
Other terms
• Graphical user interface • User experience • Interaction design • Human-computer interaction • Usability • Information architecture
From Code to Product Lecture 3 — UI Principles — Slide 4 gidgreen.com/course
Layers of a product
From Code to Product Lecture 3 — UI Principles — Slide 5 gidgreen.com/course
Core
The problem
From Code to Product Lecture 3 — UI Principles — Slide 6 gidgreen.com/course
I want to see this guy’s face
MOV r0, #10 ADD r0, r0, r1
How do we bridge this gap?
The solution
From Code to Product Lecture 3 — UI Principles — Slide 7 gidgreen.com/course
I want to see this guy’s face
MOV r0, #10 ADD r0, r0, r1
I can use Skype on my mobile
I will press his name in the app
Function call in Skype app
Touch event detected
Channels of communication
From Code to Product Lecture 3 — UI Principles — Slide 8 gidgreen.com/course
Pressing buttons
Pointing on screen
Talking and singing
Being photographed
Moving the device
Flashing lights
Image on screen
Playing sound
Vibration
Lecture 3
• Introduction • Vision • Cognition • Memory • Action • Emotion
From Code to Product Lecture 3 — UI Principles — Slide 9 gidgreen.com/course
Vision
From Code to Product Lecture 3 — UI Principles — Slide 10 gidgreen.com/course
Proximity
From Code to Product Lecture 3 — UI Principles — Slide 11 gidgreen.com/course
Similarity
From Code to Product Lecture 3 — UI Principles — Slide 12 gidgreen.com/course
Similarity
From Code to Product Lecture 3 — UI Principles — Slide 13 gidgreen.com/course
Proximity
From Code to Product Lecture 3 — UI Principles — Slide 14 gidgreen.com/course
Similarity
From Code to Product Lecture 3 — UI Principles — Slide 15 gidgreen.com/course
Similarity
From Code to Product Lecture 3 — UI Principles — Slide 16 gidgreen.com/course
Continuity
From Code to Product Lecture 3 — UI Principles — Slide 17 gidgreen.com/course
Symmetry
From Code to Product Lecture 3 — UI Principles — Slide 18 gidgreen.com/course
Continuity and Symmetry
From Code to Product Lecture 3 — UI Principles — Slide 19 gidgreen.com/course
Ambiguity
From Code to Product Lecture 3 — UI Principles — Slide 20 gidgreen.com/course
Grids
From Code to Product Lecture 3 — UI Principles — Slide 21 gidgreen.com/course
Figure and Ground
From Code to Product Lecture 3 — UI Principles — Slide 22 gidgreen.com/course
Phot
o by
Sha
Sha
Chu
Figure and Ground
From Code to Product Lecture 3 — UI Principles — Slide 23 gidgreen.com/course
Hierarchy
From Code to Product Lecture 3 — UI Principles — Slide 24 gidgreen.com/course
1
2
4 3
5
Movement
From Code to Product Lecture 3 — UI Principles — Slide 25 gidgreen.com/course
Tunnel Vision
From Code to Product Lecture 3 — UI Principles — Slide 26 gidgreen.com/course
Photo by Ali Khurshid
Tunnel Vision
From Code to Product Lecture 3 — UI Principles — Slide 27 gidgreen.com/course
Structure
Thank you for your reservation. Your indoor table has been booked for four people at 8 in the evening on Tuesday January 6th 2012 at Sushi Samba. The address is 245 Park Avenue South, between East 19th and 20th Street. You must arrive by 8.15pm to maintain your reservation. In the event of problems, please call the restaurant on 2124759377. Note that the minimum charge is $50 per person.
From Code to Product Lecture 3 — UI Principles — Slide 28 gidgreen.com/course
Structure
Date Tue 6 Jan
Time 8.00pm
Latest 8.15pm
People 4
Table Indoors
Minimum $50/person
From Code to Product Lecture 3 — UI Principles — Slide 29 gidgreen.com/course
Thank you for your reservation.
Sushi Samba 245 Park Avenue South
(212) 475–9377
Structure
Date Tue 6 Jan Time 8.00pm Latest 8.15pm People 4 Table Indoors Minimum $50/person
From Code to Product Lecture 3 — UI Principles — Slide 30 gidgreen.com/course
Thank you for your reservation.
Sushi Samba 245 Park Avenue South (212) 475–9377
Prominence
From Code to Product Lecture 3 — UI Principles — Slide 31 gidgreen.com/course
Prominence
From Code to Product Lecture 3 — UI Principles — Slide 32 gidgreen.com/course
1
2
3 4
Sequence
From Code to Product Lecture 3 — UI Principles — Slide 33 gidgreen.com/course
Source: xkcd.com
Sequence
From Code to Product Lecture 3 — UI Principles — Slide 34 gidgreen.com/course
Sequence
From Code to Product Lecture 3 — UI Principles — Slide 35 gidgreen.com/course
Sequence
From Code to Product Lecture 3 — UI Principles — Slide 36 gidgreen.com/course
Sequence
From Code to Product Lecture 3 — UI Principles — Slide 37 gidgreen.com/course
Clutter
From Code to Product Lecture 3 — UI Principles — Slide 38 gidgreen.com/course
Phot
o by
Met
ro C
entr
ic
Clutter
From Code to Product Lecture 3 — UI Principles — Slide 39 gidgreen.com/course
Minimalism
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” — Antoine de Saint-Exupéry
From Code to Product Lecture 3 — UI Principles — Slide 40 gidgreen.com/course
Minimalism
From Code to Product Lecture 3 — UI Principles — Slide 41 gidgreen.com/course
The face of a $200b company
Visual affordance
From Code to Product Lecture 3 — UI Principles — Slide 42 gidgreen.com/course
Sour
ce:
Chri
sEly
ea.c
om
Visual affordance
From Code to Product Lecture 3 — UI Principles — Slide 43 gidgreen.com/course
A few words about sound…
• Don’t do it, unless… – Audio/video player
– Game or other experiential product
– Alert from desktop/mobile app
– Phone number entry
– Reassuring key clicks
– Accessibility
• Let users switch it off
From Code to Product Lecture 3 — UI Principles — Slide 44 gidgreen.com/course
Lecture 3
• Introduction • Vision • Cognition • Memory • Action • Emotion
From Code to Product Lecture 3 — UI Principles — Slide 45 gidgreen.com/course
Cognition
Consider babies Ben and Sam.
They were born to the same woman, on the same day, in the same month and the same year.
Yet they're not twins.
How can this be?
From Code to Product Lecture 3 — UI Principles — Slide 46 gidgreen.com/course
The ideal interface
From Code to Product Lecture 3 — UI Principles — Slide 47 gidgreen.com/course
Implementation model
From Code to Product Lecture 3 — UI Principles — Slide 48 gidgreen.com/course
Mental model
From Code to Product Lecture 3 — UI Principles — Slide 49 gidgreen.com/course
Talk to people
From Code to Product Lecture 3 — UI Principles — Slide 50 gidgreen.com/course
Metaphors
From Code to Product Lecture 3 — UI Principles — Slide 51 gidgreen.com/course
Overly literal metaphors
From Code to Product Lecture 3 — UI Principles — Slide 52 gidgreen.com/course
Mapping
From Code to Product Lecture 3 — UI Principles — Slide 53 gidgreen.com/course
Sour
ce:
UXH
ero.
com
Mapping
From Code to Product Lecture 3 — UI Principles — Slide 54 gidgreen.com/course
Unnecessary burdens
From Code to Product Lecture 3 — UI Principles — Slide 55 gidgreen.com/course
Unnecessary burdens
From Code to Product Lecture 3 — UI Principles — Slide 56 gidgreen.com/course
adm
inap
ps.u
tep.
edu/
chan
gepa
ssw
ord
Examples + Defaults
From Code to Product Lecture 3 — UI Principles — Slide 57 gidgreen.com/course
Interruptions
From Code to Product Lecture 3 — UI Principles — Slide 58 gidgreen.com/course
Interruptions
From Code to Product Lecture 3 — UI Principles — Slide 59 gidgreen.com/course
Lecture 3
• Introduction • Vision • Cognition • Memory • Action • Emotion
From Code to Product Lecture 3 — UI Principles — Slide 60 gidgreen.com/course
Memory
From Code to Product Lecture 3 — UI Principles — Slide 61 gidgreen.com/course
Two types of memory
From Code to Product Lecture 3 — UI Principles — Slide 62 gidgreen.com/course
Short-term Long-term
Contents Current task Life history
Capacity Tiny (7 items?) Huge
Recall Instant Slow
Retention Short Eternal
Accuracy Perfect Poor
Just like… CPU cache Lots of floppy disks
Modes
From Code to Product Lecture 3 — UI Principles — Slide 63 gidgreen.com/course
Modes
From Code to Product Lecture 3 — UI Principles — Slide 64 gidgreen.com/course
Modes
From Code to Product Lecture 3 — UI Principles — Slide 65 gidgreen.com/course
Drawing Selection
Modes
From Code to Product Lecture 3 — UI Principles — Slide 66 gidgreen.com/course
Context
From Code to Product Lecture 3 — UI Principles — Slide 67 gidgreen.com/course
Phot
o by
jim
a
Context
From Code to Product Lecture 3 — UI Principles — Slide 68 gidgreen.com/course
Instructions
From Code to Product Lecture 3 — UI Principles — Slide 69 gidgreen.com/course
Imag
e by
Zoa
gli
Instructions
From Code to Product Lecture 3 — UI Principles — Slide 70 gidgreen.com/course
Instructions
From Code to Product Lecture 3 — UI Principles — Slide 71 gidgreen.com/course
Comparisons
From Code to Product Lecture 3 — UI Principles — Slide 72 gidgreen.com/course
Offer, don’t ask
From Code to Product Lecture 3 — UI Principles — Slide 73 gidgreen.com/course
Offer, don’t ask
From Code to Product Lecture 3 — UI Principles — Slide 74 gidgreen.com/course
Car$ /bin/set-temperature 73fTemperature set OKCar$ /bin/rear-demister onCOMMAND NOT RECOGNIZED
Overviews
From Code to Product Lecture 3 — UI Principles — Slide 75 gidgreen.com/course
Autosuggest
From Code to Product Lecture 3 — UI Principles — Slide 76 gidgreen.com/course
Show what’s old
From Code to Product Lecture 3 — UI Principles — Slide 77 gidgreen.com/course
Show what’s new
From Code to Product Lecture 3 — UI Principles — Slide 78 gidgreen.com/course
Consistency
From Code to Product Lecture 3 — UI Principles — Slide 79 gidgreen.com/course
Source: bhc3.com
Learned mapping
From Code to Product Lecture 3 — UI Principles — Slide 80 gidgreen.com/course
Learned affordance
From Code to Product Lecture 3 — UI Principles — Slide 81 gidgreen.com/course
Learned idioms
From Code to Product Lecture 3 — UI Principles — Slide 82 gidgreen.com/course
Lecture 3
• Introduction • Vision • Cognition • Memory • Action • Emotion
From Code to Product Lecture 3 — UI Principles — Slide 83 gidgreen.com/course
Action
From Code to Product Lecture 3 — UI Principles — Slide 84 gidgreen.com/course
http
://w
ww
.85q
m.d
e/up
/Big
RedB
utto
n.sw
f
Goals and subgoals
From Code to Product Lecture 3 — UI Principles — Slide 85 gidgreen.com/course
Make my friend feel better
Send flowers to friend online Call friend up
Wait for flowers to arrive
Find a flowers website Order the flowers
Open web browser
Go to google.com
Type in “flowers” Choose the best site
f l o w e r s
Execute—Evaluate
From Code to Product Lecture 3 — UI Principles — Slide 86 gidgreen.com/course
Define subgoal
Try something sensible
Was the subgoal
reached?
Next subgoal…
YES! NO
Execute—Evaluate
From Code to Product Lecture 3 — UI Principles — Slide 87 gidgreen.com/course
Choose the best site
Looks OK, but only first. Back! Seems to be UK
only. Back!
Seems really pricey. Back!
Looks perfect. We’re done!
Wikipedia
Enabling evaluation
• Every user action – Key presses and mouse clicks
• Instant results, or… – Waiting cursor (0.1s … 1s) – Progress bar (>1s)
• If invisible… – Confirmation message – Activity logs
From Code to Product Lecture 3 — UI Principles — Slide 88 gidgreen.com/course
Evaluation
From Code to Product Lecture 3 — UI Principles — Slide 89 gidgreen.com/course
Information scent
• Information = food – We follow a ‘scent’
• Links and category names – Don’t make up words!
• Provide feedback – Scent getting stronger
• Gain vs cost – Good content, easy to find
From Code to Product Lecture 3 — UI Principles — Slide 90 gidgreen.com/course
Information scent
From Code to Product Lecture 3 — UI Principles — Slide 91 gidgreen.com/course
Information scent
From Code to Product Lecture 3 — UI Principles — Slide 92 gidgreen.com/course
Direct manipulation
From Code to Product Lecture 3 — UI Principles — Slide 93 gidgreen.com/course
Phot
o by
gar
rykn
ight
Direct manipulation
From Code to Product Lecture 3 — UI Principles — Slide 94 gidgreen.com/course
Reversibility
From Code to Product Lecture 3 — UI Principles — Slide 95 gidgreen.com/course
Dangerous actions
From Code to Product Lecture 3 — UI Principles — Slide 96 gidgreen.com/course
Dangerous actions
From Code to Product Lecture 3 — UI Principles — Slide 97 gidgreen.com/course
Common actions
From Code to Product Lecture 3 — UI Principles — Slide 98 gidgreen.com/course
Common actions
From Code to Product Lecture 3 — UI Principles — Slide 99 gidgreen.com/course
Lecture 3
• Introduction • Vision • Cognition • Memory • Action • Emotion
From Code to Product Lecture 3 — UI Principles — Slide 100 gidgreen.com/course
Emotion
From Code to Product Lecture 3 — UI Principles — Slide 101 gidgreen.com/course
Waiting…
From Code to Product Lecture 3 — UI Principles — Slide 102 gidgreen.com/course
Time limits
From Code to Product Lecture 3 — UI Principles — Slide 103 gidgreen.com/course
0.01 sec
0.1 sec
1 sec
10 sec
Moment of perception Stylus input on screen
Hand–eye coordination Clicks, drags, keys
Gap in conversation Waiting without progress bar
Concentration on mini-task Wizard step, field entry
Avoid insults
From Code to Product Lecture 3 — UI Principles — Slide 104 gidgreen.com/course
Color
From Code to Product Lecture 3 — UI Principles — Slide 105 gidgreen.com/course
Color
From Code to Product Lecture 3 — UI Principles — Slide 106 gidgreen.com/course
Design
From Code to Product Lecture 3 — UI Principles — Slide 107 gidgreen.com/course
But…
From Code to Product Lecture 3 — UI Principles — Slide 108 gidgreen.com/course
Feeling served
From Code to Product Lecture 3 — UI Principles — Slide 109 gidgreen.com/course
• What you want • When you want it • How you like it • No grunt work • No criticism • No “personality” • Cleanly presented
Books
From Code to Product Lecture 3 — UI Principles — Slide 110 gidgreen.com/course
Memory
From Code to Product Lecture 3 — UI Principles — Slide 111 gidgreen.com/course