Design

Essential Design Principles••Session 802

Mike Stern, Design Evangelism Manager© 2017 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

#WWDC17

Human Interface

UserUserHumanHumanHuman Interface Design

Everyone Needs to…

Feel safe

Everyone Needs to…

Feel safe
UnderstandEveryone Needs to…

Feel safe
UnderstandAchieveEveryone Needs to…

Feel safe
UnderstandAchieve
Experience beauty

Apps Should Provide…

Apps Should Provide…

Predictability and stability

Apps Should Provide…

Predictability and stabilityClear and helpful information

Apps Should Provide…

Predictability and stability
Clear and helpful information
Streamlined and simple workflows

Apps Should Provide…

Predictability and stability
Clear and helpful information
Streamlined and simple workflows
A delightful experienceHumanHumanity

Design Principles•

Why, not How

Profound simplicity🌊🌊🌊🌊🌊🐠🌊🌊🌊🌊🌊🌊🌊🌊🐟🌊🐟🌊🌊🌊🐠🐠🐠🌊
🌊☀🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🐟🐟🌊🌊🌊🐠🐠🌊
🌊🌊🌊🐡🌊🌊🌊🌊🌊🏖🏝🏝🏝(🌊🌊🌊🌊🌊🌊🌊🌊🚤🌊🐠🌊🐡🌊🌊🐟🐠🌊🏝🏝🌸🥑🌴🏝🏖🐢🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🐠🌊🌊🦀🌴🐒🌳🌳🌳🌳🥑🥑🏝🌊🌊🐟🌊⛵🌊🌊🌊🐟🐟🌊🌊🌊🏝🏝🥑🌳🌲⛰🌳⛰🌴🌴🦀🌊🌊🌊🌊🌊🌊🌊🌊🌊🐟🐟🌊🌊🏝🌴🌳🌺🏔🌋🏔🌲🌳🍍🏝🌊🌊🐟🐟🌊🌊🌊
🌊🌊🌊🌊🐟🌊🌊🏝🍍🌳🌴⛰🌲🌳🌳🌴🏝🌊🐟🐟🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🏝🏝🌴🌳🌳🌺🌸🍹🏝🏄🌊🌊🌊🌊🌊🌊🌊🌊🌊🐳🐠🌊🐟🌊🌊🏖🏝🌸🐒🌸🌴🏝🐢🌊🌊🌊🌊🌊🐬🌊🐬
🌊🌊🌊🌊🐳🌊🌊🌊🌊<🏝🏝🏝🏖=🌊🌊🌊🌊🌊🐬🌊🌊🌊🌊⛵🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊
🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊

Airport✈Terminals A B C D
Arrivals / Departures
Parking↑↑Terminal

Volcano Airlines
Kauai Air
Snorkel Airways↑

1Luau Air↑ Gates

A1-A40↑Gates A41-A90GateA32

Gate
A32

Gates
A33-A40↑↑Gates
A1-A31

Wayfinding•✈Terminals A B C D
Arrivals / DeparturesParking↑↑Terminal

Volcano Airlines
Kauai Air
Snorkel Airways↑

1Luau Air↑ Gates

A1-A40↑Gates A41-A90

Gate
A32

Gates
A33-A40↑↑Gates
A1-A31

Wayfinding Answers…

“Where am I?”Wayfinding Answers…

“Where am I?”“Where can I go?”Wayfinding Answers…

“Where am I?”“Where can I go?”“What will I find when I get there?”Wayfinding Answers…

“Where am I?”“Where can I go?”“What will I find when I get there?”“What’s nearby?”Wayfinding Answers…

“Where am I?”“Where can I go?”“What will I find when I get there?”“What’s nearby?”“How do I get out?”Wayfinding Answers…

“Where am I?”“Where can I go?”“What will I find when I get there?”“What’s nearby?”“How do I get out?”

CarFeedback•Feedback

StatusFeedbackStatusCompletion

FeedbackStatusCompletion
Warning

FeedbackStatusCompletion
Warning
ErrorsFeedbackStatusCompletion
Warning
ErrorsP R N D S

PTime9:41

Trip
67.0 kmTemp
76°c

PTime9:41

Trip
67.0 kmTemp
76°c

PTime9:41

Trip
67.0 kmTemp
76°c

PTime9:41

Trip
67.0 kmTemp
76°cFeedback

StatusCompletion
WarningErrors

ENGINE

START
STOP

ENGINE

START
STOP

PTime9:41

Trip
67.0 kmTemp
76°c

PTime9:41

Trip
67.0 km

Temp
76°c

P R N D S

P R N D S

Feedback

StatusCompletion
Warning
ErrorsFeedback

StatusCompletion
Warning
ErrorsGood Feedback Answers…

Good Feedback Answers…

What can I do?

Good Feedback Answers…

What can I do?
What just happened?

Good Feedback Answers…

What can I do?
What just happened?
What’s happening?

Good Feedback Answers…

What can I do?
What just happened?
What’s happening?
What will happen in the future?

What would you say?

Then say it!

Visibility•

Visibility improves usability

DTime9:41

Trip
67.0 km

Temp
76°c

D

Visibility has its limits

Consistency•

ParkDrive

ReverseNeutralBrake

SignalConsistency improves usability

Inconsistency undermines usability“Sharrow"Internal Consistency

LABELLabelLabel

LABELLabel

Label
Label

LabelLabelProvides CohesionHotelHot

Too Hot

Handle

SpoutHandle

Hot
LeftSpoutCenterColdRight

Latency

Mental Model•System ModelInteraction Model

System Model
Interaction ModelMental Model•MORTIMER SPOUTDESIGNER OF DELIGHTFUL FAUCET EXPERIENCES

408-555-0167

Proximity•Light

Light

Light

Light

Light

ShadeGrouping•179

180

183

184

185

Mapping•DeskCouch

Bed

ABC

A B C

ABC

ABC

A BC

A BCA BCA BC

Restaurant

FoodFood#PutFoodOnIt

Affordance•FoodPerceived Affordance

215

#PutFoodOnIt

Put finger here to lift screenButton

ButtonAffordance•Progressive Disclosure•SimpleSimpleComplexSimpleComplexSimpleComplexDoneness

CheeseExtras

Sides

Extra Rare

Cheddar

Bacon

Salad

Rare

Swiss

EggFries

Medium Rare

GruyereAvocadoOnion Rings

MediumJack

Medium Well

Cottage

Well Done
OvercookedRegularTruffleGarlicRegularTruffleGarlic80/20 Rule•

80%
Benefit20%
Actions

Reduce clutter
Simplify decision-making

Pr ❤gressive Discl ❤ sureBeachSymmetry•Reflection

RotationTranslationDesign Principles

Design Principles

Wayfinding

Feedback

Mental Model

Affordance

Visibility

Proximity

Consistency

Grouping

Progressive
Disclosure

Mapping

80/20 Rule

Symmetry

Everyone Needs to…

Feel safe
UnderstandAchieve
Experience beauty

Challenges Applying Design Principles

Resolving differences

Challenges Applying Design Principles

They can conflict with each otherToo much of a good thingChallenges Applying Design Principles

They can conflict with each otherToo much of a good thing
Their relevance varies

Design Principles

Wayfinding

Feedback

Mental Model

Affordance

Visibility

Proximity

Consistency

GroupingProgressive
Disclosure

Mapping

80/20 Rule

SymmetryHumanHumanity

More Information
https://developer.apple.com/wwdc17/802

Related Sessions

Designing Sound

Grand Ballroom B

Wednesday 4:10PM

Design For Everyone

Hall 3Thursday 11:00AM

Design Studio Shorts 2

Hall 3Thursday 1:50PM

Designing Across Platforms

Hall 3Thursday 4:10PM

Planning a Great Apple Watch Experience

Hall 2Thursday 5:10PM

Design Studio Shorts 3

Executive Ballroom

Friday 11:00PM

Labs

User Interface Design by Appointment Lab

User Interface Design Lab A

Thursday 9:00AM–6:00PM
Friday 9:00AM–3:30PM