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
