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