Post on 24-May-2020
© 2015 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.
Apple Watch Design Tips and Tricks
Mike Stern User Experience EvangelistRachel Roth User Experience Evangelist
Design
Session 805
#WWDC15
Designing for Apple Watch
Designing for Apple Watch
Personal CommunicationHolistic DesignLightweight Interaction
Designing for Apple Watch
Personal CommunicationHolistic DesignLightweight Interaction
Designing for Apple Watch
Personal CommunicationHolistic DesignLightweight Interaction
Designing for Apple Watch
Personal Communication
Designing for Apple Watch
Personal CommunicationHolistic Design
Designing for Apple Watch
Personal CommunicationHolistic Design
Designing for Apple Watch
Personal CommunicationHolistic DesignLightweight Interaction
Designing for Apple Watch
Personal CommunicationHolistic DesignLightweight Interaction
Top 10 Common Pitfalls
1. Slow apps2. Complex apps3. Tedious navigation4. Confusing labels5. Using Menus for navigation6. Buttons that don’t look like buttons7. Small buttons8. Font is too small9. Background colors and unnecessary padding10. Mismatching app icons
10 Common Pitfalls
Designing for Performance
Designing for Performance
Progressive loadingOrdering contentOptimize graphics
Designing for Performance
Progressive loading• Ordering content
Optimize graphics
Designing for Performance
Progressive loading• Ordering content
Optimize graphics
Designing for Performance
Progressive loading• Ordering content
Optimize graphics• Compress
JPEG Compression
12 11 10 9 8 7 6 5 4 3 2 10
50 KB
100 KB
125 KB
75 KB
25 KB
Highest Quality
Lowest Quality
JPEG Compression
12 11 10 9 8 7 6 5 4 3 2 10
50 KB
100 KB
125 KB
75 KB
25 KB
Highest Quality
Lowest Quality
123 KB
JPEG Compression
12 11 10 9 8 7 6 5 4 3 2 10
50 KB
100 KB
125 KB
75 KB
25 KB
Highest Quality
Lowest Quality
123 KB
25 KB
12 11 10 9 8 7 6 5 4 3 2 10
50 KB
100 KB
125 KB
75 KB
25 KB
Highest Quality
Lowest Quality
JPEG Compression
41 KB
123 KB
– 67%
41 KB123 KB
– 67%
41 KB123 KB
PNG 24-Bit
20.94 KB
PNG 8-Bit
2.68 KB (-87.2%)
Designing for Performance
Progressive loading• Ordering content
Optimize graphics• Compress• Avoid transparency
Transparent Background
Black Matte Background
Designing for Performance
Progressive loading• Ordering content
Optimize graphics• Compress• Avoid transparency• Right size
Designing for Performance
Progressive loading• Ordering content
Optimize graphics• Compress• Avoid transparency• Right size
Designing for Performance
Progressive loading• Ordering content
Optimize graphics• Compress• Avoid transparency• Right size
WatchKit Tips and Tricks Friday 10:00AM
1. Slow apps2. Complex apps3. Tedious navigation4. Confusing labels5. Using Menus for navigation6. Buttons that don’t look like buttons7. Small buttons8. Font is too small9. Background colors and unnecessary padding10. Mismatching app icons
10 Common Pitfalls
Apple Watch is Not a Miniature iPhone
Quick and Convenient
Focus on the Essentials
Complement Your iPhone App
1. Slow apps2. Complex apps3. Tedious navigation4. Confusing labels5. Using Menus for navigation6. Buttons that don’t look like buttons7. Small buttons8. Font is too small9. Background colors and unnecessary padding10. Mismatching app icons
10 Common Pitfalls
Page-based
Page-based
Page-based
Hierarchical
Hierarchical
Hierarchical
Page-based or Hierarchical
Page-based or Hierarchical
Page-based
Hierarchical
Page-based
Hierarchical
Page-based or Hierarchical
Page-based or Hierarchical
Page-based or Hierarchical
Page-based or Hierarchical
Page-based
Hierarchical
Modal Sheet
Hierarchical
Keep It Simple
Tedious Navigation
1. Slow apps2. Complex apps3. Tedious navigation4. Confusing labels5. Using Menus for navigation6. Buttons that don’t look like buttons7. Small buttons8. Font is too small9. Background colors and unnecessary padding10. Mismatching app icons
10 Common Pitfalls
Parent Child
Parent Child
Parent Child
Parent Child
Parent Child
Parent Child
Parent Child
Parent Child
Colors
Colors
< Back
< Back
1. Slow apps2. Complex apps3. Tedious navigation4. Confusing labels5. Using Menus for navigation6. Buttons that don’t look like buttons7. Small buttons8. Font is too small9. Background colors and unnecessary padding10. Mismatching app icons
10 Common Pitfalls
1. Slow apps2. Complex apps3. Tedious navigation4. Confusing labels5. Using Menus for navigation6. Buttons that don’t look like buttons7. Small buttons8. Font is too small9. Background colors and unnecessary padding10. Mismatching app icons
10 Common Pitfalls
Bonus Pitfall
1. Slow apps2. Complex apps3. Tedious navigation4. Confusing labels5. Using Menus for navigation6. Buttons that don’t look like buttons7. Small buttons8. Font is too small9. Background colors and unnecessary padding10. Mismatching app icons
10 Common Pitfalls
1. Slow apps2. Complex apps3. Tedious navigation4. Confusing labels5. Using Menus for navigation6. Buttons that don’t look like buttons7. Inadequate tap targets8. Tiny fonts9. Background colors and unnecessary padding10. Mismatched app icons
10 Common Pitfalls
1. Slow apps2. Complex apps3. Tedious navigation4. Confusing labels5. Using Menus for navigation6. Buttons that don’t look like buttons7. Inadequate tap targets8. Tiny fonts9. Background colors and unnecessary padding10. Mismatched app icons
10 Common Pitfalls
add cursor and Mac desktop in the bg
add cursor and Mac desktop in the bg
80 px
80 px
1. Slow apps2. Complex apps3. Tedious navigation4. Confusing labels5. Using Menus for navigation6. Buttons that don’t look like buttons7. Inadequate tap targets8. Tiny fonts9. Background colors and unnecessary padding10. Mismatched app icons
10 Common Pitfalls
Related Sessions
Introducing the New System Fonts Friday 2:30PM
Size
Size
19 pt14 pt
Leading
Leading
16.5 pt 21.5 pt
Tracking
xSmall
xxxLarge
Tracking
-12
14
xSmall
xxxLarge
xSmall
Large
xxxLarge
1. Slow apps2. Complex apps3. Tedious navigation4. Confusing labels5. Using Menus for navigation6. Buttons that don’t look like buttons7. Inadequate tap targets8. Tiny fonts9. Background colors and unnecessary padding10. Mismatched app icons
10 Common Pitfalls
Hailo
Citymapper
Rules!
Rules!
Lifesum
1. Slow apps2. Complex apps3. Tedious navigation4. Confusing labels5. Using Menus for navigation6. Buttons that don’t look like buttons7. Inadequate tap targets8. Tiny fonts9. Background colors and unnecessary padding10. Mismatched app icons
10 Common Pitfalls
App Icon Tips
App Icon Tips
Remove text
App Icon Tips
Remove text
App Icon Tips
Remove textSimplify glyphs
App Icon Tips
Remove textSimplify glyphs
App Icon Tips
Remove textSimplify glyphsRetain color and style
App Icon Tips
Remove textSimplify glyphsRetain color and style
App Icon Tips
Remove textSimplify glyphsRetain color and styleCreate a complementary concept
App Icon Tips
Remove textSimplify glyphsRetain color and styleCreate a complementary concept
1. Slow apps2. Complex apps3. Tedious navigation4. Confusing labels5. Using Menus for navigation6. Buttons that don’t look like buttons7. Inadequate tap targets8. Tiny fonts9. Background colors and unnecessary padding10. Mismatched app icons
10 Common Pitfalls
Related Sessions
Designing for Apple Watch Wednesday 4:30PM
Introducing the New System Fonts Friday 2:30PM
Designing for Future Hardware Wednesday 2:30PM
Designing with Animation Thursday 3:30PM
WatchKit Tips and Tricks Friday 10:00AM
More Information
Documentation and SupportDesigning Great Appshttp://developer.apple.com/design/
Apple Watch Human Interface Guidelineshttp://developer.apple.com/watch/human-interface-guidelines/
General InquiriesMike Stern, User Experience Evangeliststern@apple.com
Rachel Roth, User Experience Evangelistrroth@apple.com
See you next year!