3 — User Interface Principles

From Code to Product

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 2 gidgreen.com/course

 Layers of a product

Core

From Code to Product Lecture 3 — UI Principles — Slide 3 gidgreen.com/course

 The problem
I want to see MOV r0, #10
this guy’s face ADD r0, r0, r1

How do we bridge this gap?

From Code to Product Lecture 3 — UI Principles — Slide 4 gidgreen.com/course

 The solution
I want to see MOV r0, #10
this guy’s face ADD r0, r0, r1

I can use Skype Function call in

on my mobile Skype app

I will press his Touch event

name in the app detected

From Code to Product Lecture 3 — UI Principles — Slide 5 gidgreen.com/course

 Channels of communication
Pressing buttons

Flashing lights

Pointing on screen

Image on screen

Talking and singing

Playing sound

Being photographed

Vibration

Moving the device

From Code to Product Lecture 3 — UI Principles — Slide 6 gidgreen.com/course

 But it’s still very limited

From Code to Product Lecture 3 — UI Principles — Slide 7 gidgreen.com/course

 Lecture 3
•  Introduction
•  Vision
•  Cognition
•  Memory
•  Action
•  Emotion

From Code to Product Lecture 3 — UI Principles — Slide 8 gidgreen.com/course

 Proximity

From Code to Product Lecture 3 — UI Principles — Slide 9 gidgreen.com/course

 Similarity

From Code to Product Lecture 3 — UI Principles — Slide 10 gidgreen.com/course

 Similarity

From Code to Product Lecture 3 — UI Principles — Slide 11 gidgreen.com/course

 Movement

From Code to Product Lecture 3 — UI Principles — Slide 12 gidgreen.com/course

 Proximity

From Code to Product Lecture 3 — UI Principles — Slide 13 gidgreen.com/course

 Similarity

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

 Continuity

From Code to Product Lecture 3 — UI Principles — Slide 16 gidgreen.com/course

 Symmetry

From Code to Product Lecture 3 — UI Principles — Slide 17 gidgreen.com/course

 Continuity and Symmetry

From Code to Product Lecture 3 — UI Principles — Slide 18 gidgreen.com/course

 Ambiguity

From Code to Product Lecture 3 — UI Principles — Slide 19 gidgreen.com/course

 Grids

From Code to Product Lecture 3 — UI Principles — Slide 20 gidgreen.com/course

 Photo by Sha Sha Chu
Figure and Ground

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

 Hierarchy
1

5
4
3

From Code to Product Lecture 3 — UI Principles — Slide 23 gidgreen.com/course

 Tunnel Vision

Photo by Ali Khurshid

From Code to Product Lecture 3 — UI Principles — Slide 24 gidgreen.com/course

 Tunnel Vision

From Code to Product Lecture 3 — UI Principles — Slide 25 gidgreen.com/course

 Visual affordance

Source: ChrisElyea.com
From Code to Product Lecture 3 — UI Principles — Slide 26 gidgreen.com/course
 Visual affordance

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

Thank you for your reservation.

Sushi Samba Date Tue 6 Jan
245 Park Avenue South
(212) 475–9377 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

 Structure

Thank you for your reservation.

Sushi Samba 245 Park Avenue South (212) 475–9377

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

 Prominence

From Code to Product Lecture 3 — UI Principles — Slide 31 gidgreen.com/course

 Prominence
1

2
3
4

From Code to Product Lecture 3 — UI Principles — Slide 32 gidgreen.com/course

 Sequence

Source: xkcd.com

From Code to Product Lecture 3 — UI Principles — Slide 33 gidgreen.com/course

 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

Photo by Metro Centric

From Code to Product Lecture 3 — UI Principles — Slide 38 gidgreen.com/course
 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

The face of a $400b company

From Code to Product Lecture 3 — UI Principles — Slide 41 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 42 gidgreen.com/course

 Lecture 3
•  Introduction
•  Vision
•  Cognition
•  Memory
•  Action
•  Emotion

From Code to Product Lecture 3 — UI Principles — Slide 43 gidgreen.com/course

 The ideal interface

From Code to Product Lecture 3 — UI Principles — Slide 44 gidgreen.com/course

 Implementation model

From Code to Product Lecture 3 — UI Principles — Slide 45 gidgreen.com/course

 Mental model

From Code to Product Lecture 3 — UI Principles — Slide 46 gidgreen.com/course

 Talk to people

From Code to Product Lecture 3 — UI Principles — Slide 47 gidgreen.com/course

 Metaphors

From Code to Product Lecture 3 — UI Principles — Slide 48 gidgreen.com/course

 Overly literal metaphors

From Code to Product Lecture 3 — UI Principles — Slide 49 gidgreen.com/course

 Mapping

Source: UXHero.com
From Code to Product Lecture 3 — UI Principles — Slide 50 gidgreen.com/course
 Mapping
þ

ý

þ

ý

þ
From Code to Product Lecture 3 — UI Principles — Slide 51 gidgreen.com/course
 Unnecessary burdens

From Code to Product Lecture 3 — UI Principles — Slide 52 gidgreen.com/course

 Unnecessary burdens

From Code to Product Lecture 3 — UI Principles — Slide 53 gidgreen.com/course

 This one’s for real

adminapps.utep.edu/changepassword
From Code to Product Lecture 3 — UI Principles — Slide 54 gidgreen.com/course
 Examples + Defaults

From Code to Product Lecture 3 — UI Principles — Slide 55 gidgreen.com/course

 Interruptions

From Code to Product Lecture 3 — UI Principles — Slide 56 gidgreen.com/course

 Interruptions

From Code to Product Lecture 3 — UI Principles — Slide 57 gidgreen.com/course

 Lecture 3
•  Introduction
•  Vision
•  Cognition
•  Memory
•  Action
•  Emotion

From Code to Product Lecture 3 — UI Principles — Slide 58 gidgreen.com/course

 Two types of memory
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

From Code to Product Lecture 3 — UI Principles — Slide 59 gidgreen.com/course

 Modes

From Code to Product Lecture 3 — UI Principles — Slide 60 gidgreen.com/course

 Modes

From Code to Product Lecture 3 — UI Principles — Slide 61 gidgreen.com/course

 Modes

Drawing Selection

From Code to Product Lecture 3 — UI Principles — Slide 62 gidgreen.com/course

 Modes

From Code to Product Lecture 3 — UI Principles — Slide 63 gidgreen.com/course

 Context

Photo by jima
From Code to Product Lecture 3 — UI Principles — Slide 64 gidgreen.com/course
 Context

From Code to Product Lecture 3 — UI Principles — Slide 65 gidgreen.com/course

 Instructions

Image by Zoagli

From Code to Product Lecture 3 — UI Principles — Slide 66 gidgreen.com/course

 Instructions

From Code to Product Lecture 3 — UI Principles — Slide 67 gidgreen.com/course

 Instructions

From Code to Product Lecture 3 — UI Principles — Slide 68 gidgreen.com/course

 Comparisons

From Code to Product Lecture 3 — UI Principles — Slide 69 gidgreen.com/course

 Offer, don’t ask

From Code to Product Lecture 3 — UI Principles — Slide 70 gidgreen.com/course

 Offer, don’t ask

Car$ /bin/set-temperature 73f

Temperature set OK

Car$ /bin/rear-demister on
COMMAND NOT RECOGNIZED

From Code to Product Lecture 3 — UI Principles — Slide 71 gidgreen.com/course

 Overviews

From Code to Product Lecture 3 — UI Principles — Slide 72 gidgreen.com/course

 Autosuggest

From Code to Product Lecture 3 — UI Principles — Slide 73 gidgreen.com/course

 Show what’s old

From Code to Product Lecture 3 — UI Principles — Slide 74 gidgreen.com/course

 Show what’s new

From Code to Product Lecture 3 — UI Principles — Slide 75 gidgreen.com/course

 Consistency

Source: bhc3.com

From Code to Product Lecture 3 — UI Principles — Slide 76 gidgreen.com/course

 Learned mapping

From Code to Product Lecture 3 — UI Principles — Slide 77 gidgreen.com/course

 Learned affordance

From Code to Product Lecture 3 — UI Principles — Slide 78 gidgreen.com/course

 Learned idioms

From Code to Product Lecture 3 — UI Principles — Slide 79 gidgreen.com/course

 Lecture 3
•  Introduction
•  Vision
•  Cognition
•  Memory
•  Action
•  Emotion

From Code to Product Lecture 3 — UI Principles — Slide 80 gidgreen.com/course

 Action

http://www.85qm.de/up/BigRedButton.swf
From Code to Product Lecture 3 — UI Principles — Slide 81 gidgreen.com/course
 Goals and subgoals
Make my friend feel better

Wait for flowers Call

Send flowers to friend online
to arrive friend up

Find a flowers website Order the flowers

Open web Go to Type in

Choose the best site
browser google.com “flowers”

f l o w e r s

From Code to Product Lecture 3 — UI Principles — Slide 82 gidgreen.com/course

 Execute—Evaluate

Try Was the

Define Next
something subgoal YES!
subgoal NO subgoal…
sensible reached?

From Code to Product Lecture 3 — UI Principles — Slide 83 gidgreen.com/course

 Execute—Evaluate
Choose the best site

Wikipedia
Looks OK, but
Seems to be UK
only first. Back!
only. Back!

Seems really Looks perfect.

pricey. Back! We’re done!

From Code to Product Lecture 3 — UI Principles — Slide 84 gidgreen.com/course

 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 85 gidgreen.com/course

 Evaluation

From Code to Product Lecture 3 — UI Principles — Slide 86 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 87 gidgreen.com/course

 Direct manipulation
Photo by garryknight

From Code to Product Lecture 3 — UI Principles — Slide 88 gidgreen.com/course

 Direct manipulation

From Code to Product Lecture 3 — UI Principles — Slide 89 gidgreen.com/course

 Reversibility

From Code to Product Lecture 3 — UI Principles — Slide 90 gidgreen.com/course

 Dangerous actions

From Code to Product Lecture 3 — UI Principles — Slide 91 gidgreen.com/course

 Dangerous actions

From Code to Product Lecture 3 — UI Principles — Slide 92 gidgreen.com/course

 Common actions

From Code to Product Lecture 3 — UI Principles — Slide 93 gidgreen.com/course

 Common actions

From Code to Product Lecture 3 — UI Principles — Slide 94 gidgreen.com/course

 Lecture 3
•  Introduction
•  Vision
•  Cognition
•  Memory
•  Action
•  Emotion

From Code to Product Lecture 3 — UI Principles — Slide 95 gidgreen.com/course

 Emotion

From Code to Product Lecture 3 — UI Principles — Slide 96 gidgreen.com/course

 Waiting…

From Code to Product Lecture 3 — UI Principles — Slide 97 gidgreen.com/course

 Time limits
Moment of perception
0.01 sec
Stylus input on screen

Hand–eye coordination
0.1 sec
Clicks, drags, keys

Gap in conversation
1 sec
Waiting without progress bar

Concentration on mini-task
10 sec
Wizard step, field entry

From Code to Product Lecture 3 — UI Principles — Slide 98 gidgreen.com/course

 Avoid insults

From Code to Product Lecture 3 — UI Principles — Slide 99 gidgreen.com/course

 Bestow achievements

From Code to Product Lecture 3 — UI Principles — Slide 100 gidgreen.com/course

 Color

From Code to Product Lecture 3 — UI Principles — Slide 101 gidgreen.com/course

 Color

From Code to Product Lecture 3 — UI Principles — Slide 102 gidgreen.com/course

 Design

From Code to Product Lecture 3 — UI Principles — Slide 103 gidgreen.com/course

 But…

From Code to Product Lecture 3 — UI Principles — Slide 104 gidgreen.com/course

 Books

From Code to Product Lecture 3 — UI Principles — Slide 105 gidgreen.com/course