Design #WWDC17

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.
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

Understand

Achieve
Everyone Needs to…

Feel safe

Understand

Achieve

Experience beauty
Apps Should Provide…
Apps Should Provide…

Predictability and stability

Apps Should Provide…

Predictability and stability

Clear 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 Luau Air
Volcano Airlines
1

↑
Kauai Air
Snorkel Airways
↑ Gates
A1-A40

Gates A41-A90

↑
Gate
A32
Gates Gate Gates
A1-A31 A32 A33-A40

↑
↑
Wayfinding
•
✈ Terminals A B C D
Arrivals / Departures
Parking
↑ ↑
Terminal Luau Air
Volcano Airlines
1

↑
Kauai Air
Snorkel Airways
↑ Gates
A1-A40

Gates A41-A90

↑
Gates Gate Gates
A1-A31 A32 A33-A40

↑
↑
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
Feedback

Status

Completion
Feedback

Status

Completion

Warning
Feedback

Status

Completion

Warning

Errors
Feedback

Status

Completion

Warning

Errors
P R N D S
 P
Time Trip Temp
9:41 67.0 km 76°c
 P
Time Trip Temp
9:41 67.0 km 76°c
 P
Time Trip Temp
9:41 67.0 km 76°c
 P
Time Trip Temp
9:41 67.0 km 76°c
Feedback

Status

Completion

Warning

Errors
ENGINE

START
STOP
ENGINE

START
STOP
 P
Time Trip Temp
9:41 67.0 km 76°c
 P
Time Trip Temp
9:41 67.0 km 76°c
P R N D S
P R N D S
Feedback

Status

Completion

Warning

Errors
Feedback

Status

Completion

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
 D
Time Trip Temp
9:41 67.0 km 76°c
D
Visibility has its limits
Consistency
•
 Park Drive Reverse

Neutral Brake Signal

Consistency improves usability
Inconsistency undermines usability
“Sharrow"
Internal Consistency
LABEL
Label
Label
LABEL Label
Label Label
Label Label
Provides Cohesion
Hotel
Hot
Too Hot
Handle Spout Handle
Hot Spout Cold
Left Center Right
Latency
Mental Model
•
System Model
Interaction Model
 System Model
Interaction Model
Mental Model
•
 MORTIMER SPOUT
DESIGNER OF DELIGHTFUL FAUCET EXPERIENCES

408-555-0167
Proximity
•
Light
Light Light Light Light
Shade
Grouping
•
179
180
183
184
185
Mapping
•
Desk Couch 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
Simple Complex
 Simple

Complex
 Simple

Complex
Doneness Cheese Extras Sides

Extra Rare Cheddar Bacon Salad

Rare Swiss Egg Fries
Medium Rare Gruyere Avocado Onion Rings
Medium Jack
Medium Well Cottage
Well Done
Overcooked
Regular Truffle Garlic
Regular Truffle Garlic
80/20 Rule
•
 80% 20%
Benefit Actions
 Reduce clutter
Simplify decision-making
Pr ❤gressive Discl ❤ sure
Beach
Symmetry
•
Reflection Rotation Translation
Design Principles
Design Principles

Wayfinding Feedback Mental Model Affordance Symmetry

Visibility Proximity Progressive

Disclosure
Consistency Grouping
80/20 Rule
Mapping
Everyone Needs to…

Feel safe

Understand

Achieve

Experience beauty
Challenges Applying Design Principles

Resolving differences
Challenges Applying Design Principles

They can conflict with each other

Too much of a good thing

Challenges Applying Design Principles

They can conflict with each other

Too much of a good thing

Their relevance varies

Design Principles

Wayfinding Feedback Mental Model Affordance Symmetry

Visibility Proximity Progressive

Disclosure
Consistency Grouping
80/20 Rule
Mapping
Human
Humanity
 More Information
https://developer.apple.com/wwdc17/802
Related Sessions

Designing Sound Grand Ballroom B Wednesday 4:10PM

Design For Everyone Hall 3 Thursday 11:00AM

Design Studio Shorts 2 Hall 3 Thursday 1:50PM

Designing Across Platforms Hall 3 Thursday 4:10PM

Planning a Great Apple Watch Experience Hall 2 Thursday 5:10PM

Design Studio Shorts 3 Executive Ballroom Friday 11:00PM

Labs

Thursday 9:00AM–6:00PM
User Interface Design by Appointment Lab User Interface Design Lab A
Friday 9:00AM–3:30PM