3. 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
4. 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
5. Layers of a product
From Code to Product Lecture 3 — UI Principles — Slide 5 gidgreen.com/course
Core
6. 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?
7. 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
8. 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
28. 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
29. 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
30. 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
32. Prominence
From Code to Product Lecture 3 — UI Principles — Slide 32 gidgreen.com/course
1
2
3
4
33. Sequence
From Code to Product Lecture 3 — UI Principles — Slide 33 gidgreen.com/course
Source: xkcd.com
34. Sequence
From Code to Product Lecture 3 — UI Principles — Slide 34 gidgreen.com/course
35. Sequence
From Code to Product Lecture 3 — UI Principles — Slide 35 gidgreen.com/course
36. Sequence
From Code to Product Lecture 3 — UI Principles — Slide 36 gidgreen.com/course
37. Sequence
From Code to Product Lecture 3 — UI Principles — Slide 37 gidgreen.com/course
38. Clutter
From Code to Product Lecture 3 — UI Principles — Slide 38 gidgreen.com/course
PhotobyMetroCentric
39. Clutter
From Code to Product Lecture 3 — UI Principles — Slide 39 gidgreen.com/course
40. 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
41. Minimalism
From Code to Product Lecture 3 — UI Principles — Slide 41 gidgreen.com/course
The face of a $200b company
42. Visual affordance
From Code to Product Lecture 3 — UI Principles — Slide 42 gidgreen.com/course
Source:ChrisElyea.com
44. 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
46. 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
47. The ideal interface
From Code to Product Lecture 3 — UI Principles — Slide 47 gidgreen.com/course
62. Memory
From Code to Product Lecture 3 — UI Principles — Slide 62 gidgreen.com/course
63. Two types of memory
From Code to Product Lecture 3 — UI Principles — Slide 63 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
64. Memory
From Code to Product Lecture 3 — UI Principles — Slide 64 gidgreen.com/course
65. Modes
From Code to Product Lecture 3 — UI Principles — Slide 65 gidgreen.com/course
66. Modes
From Code to Product Lecture 3 — UI Principles — Slide 66 gidgreen.com/course
67. Modes
From Code to Product Lecture 3 — UI Principles — Slide 67 gidgreen.com/course
Drawing Selection
68. Modes
From Code to Product Lecture 3 — UI Principles — Slide 68 gidgreen.com/course
69. Context
From Code to Product Lecture 3 — UI Principles — Slide 69 gidgreen.com/course
Photobyjima
70. Context
From Code to Product Lecture 3 — UI Principles — Slide 70 gidgreen.com/course
71. Instructions
From Code to Product Lecture 3 — UI Principles — Slide 71 gidgreen.com/course
ImagebyZoagli
75. Offer, don’t ask
From Code to Product Lecture 3 — UI Principles — Slide 75 gidgreen.com/course
76. Offer, don’t ask
From Code to Product Lecture 3 — UI Principles — Slide 76 gidgreen.com/course
Car$ /bin/set-temperature 73f
Temperature set OK
Car$ /bin/rear-demister on
COMMAND NOT RECOGNIZED
86. Action
From Code to Product Lecture 3 — UI Principles — Slide 86 gidgreen.com/course
http://www.85qm.de/up/BigRedButton.swf
87. Goals and subgoals
From Code to Product Lecture 3 — UI Principles — Slide 87 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
88. Execute—Evaluate
From Code to Product Lecture 3 — UI Principles — Slide 88 gidgreen.com/course
Define
subgoal
Try
something
sensible
Was the
subgoal
reached?
Next
subgoal…
YES!
NO
89. Execute—Evaluate
From Code to Product Lecture 3 — UI Principles — Slide 89 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
90. 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 90 gidgreen.com/course
92. 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 92 gidgreen.com/course
103. Emotion
From Code to Product Lecture 3 — UI Principles — Slide 103 gidgreen.com/course
104. Waiting…
From Code to Product Lecture 3 — UI Principles — Slide 104 gidgreen.com/course
105. Time limits
From Code to Product Lecture 3 — UI Principles — Slide 105 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
106. Avoid insults
From Code to Product Lecture 3 — UI Principles — Slide 106 gidgreen.com/course
107. Color
From Code to Product Lecture 3 — UI Principles — Slide 107 gidgreen.com/course
108. Color
From Code to Product Lecture 3 — UI Principles — Slide 108 gidgreen.com/course
109. Design
From Code to Product Lecture 3 — UI Principles — Slide 109 gidgreen.com/course
110. But…
From Code to Product Lecture 3 — UI Principles — Slide 110 gidgreen.com/course
111. Feeling served
From Code to Product Lecture 3 — UI Principles — Slide 111 gidgreen.com/course
• What you want
• When you want it
• How you like it
• No grunt work
• No criticism
• No “personality”
• Cleanly presented
112. Books
From Code to Product Lecture 3 — UI Principles — Slide 112 gidgreen.com/course