With the recent announcement of the Apple Watch, along with Android Wear rapidly evolving, the popularity of the smartwatch is at an all-time high. Learn the commonalities and differences between these two platforms as means to enhance the smartwatch user experience – from understanding design trends for each operating system, to utilizing the constraints of these small devices.

1. THE BATTLE OF THE
SMARTWATCHES
WHY
A LOOK INTO ANDROID WEAR (Specifically MOTO 360) & APPLE WATCH.
WHAT DO DESIGNERS NEED TO KNOW?

2. THE BATTLE OF THE
SMARTWATCHES
WHY
A LOOK INTO ANDROID WEAR (Specifically MOTO 360) & APPLE WATCH.
WHAT DO DESIGNERS NEED TO KNOW?
ALYSSA BURKE
WHO AM I?
User Interface Designer at ÄKTA
@designbyalyssa
akta.com

3. WHY
SMARTWATCHES
WHAT MAKES THEM SO DESIRABLE?
WHY ARE THEY IN DEMAND?

4. • Constraints of other wearables
can cause a lack of visual
information and interactivity
• Phones are getting bigger
• Daily digestible content is
increasing
• Getting phone out of pocket can
be cumbersome
• A need to be more connected to
both the virtual world and the real
world
• Cool factor
WHY
SMARTWATCHES
WHAT MAKES THEM SO DESIRABLE?
WHY ARE THEY IN DEMAND?

5. CHALLENGES
WHAT ARE THE
WHAT ARE DESIGNERS
GETTING THEMSELVES INTO?

6. CHALLENGES
WHAT ARE THE
WHAT ARE DESIGNERS
GETTING THEMSELVES INTO?
IT IS A GAME OF
TRADE-OFFS
AS A RESULT OF
CONSTRAINTS
Including physical,
technical & philosophical

7. CHALLENGES
WHAT ARE THE
WHAT ARE DESIGNERS
GETTING THEMSELVES INTO?
CONSTRAINTS
• Small screen
• Lack of affordances
• Readability issues
• Limited touch space can mean
limited actions
• Various screen sizes
• Cropping issues
• Resolution issues
• Various screen shapes
• Cropping Issues
PHYSICAL

8. CHALLENGES
WHAT ARE THE
WHAT ARE DESIGNERS
GETTING THEMSELVES INTO?
CONSTRAINTS
• Connectivity
• Must connect to an iPhone
or Android device for full
functionality
• Sensors
• Apple Watch | Currently
third party developers can
not access heart rate,
motion, NFC, bluetooth or
gestures
TECHNICAL

9. CHALLENGES
WHAT ARE THE
WHAT ARE DESIGNERS
GETTING THEMSELVES INTO?
CONSTRAINTS
• Interactions
• Apple Watch | Single touch,
Force, Swipes vertically
only, Taps
• Android Wear | Free form
gestures, Multitouch,
Swipes vertically and
horizontally, Taps
TECHNICAL

10. CHALLENGES
WHAT ARE THE
WHAT ARE DESIGNERS
GETTING THEMSELVES INTO?
CONSTRAINTS
• Design Philosophy
• Android Wear & Apple
Watch follow a set of
design principles which
are not exactly the same.
PHILOSOPHICAL

11. ANDROID
WEAR
DESIGN PRINCIPLE
THEMES

12. ANDROID
WEAR
DESIGN PRINCIPLE
THEMES
Design for glances
and notifications
• Long vs Short
• Content
• Frequency
Do one thing, really fast
Content inspired by http://thinkapps.com Content inspired by developer.android.com
TIP: TASKS SHOULD TAKE 5
SECONDS OR LESS
BE
EFFICIENT

13. ANDROID
WEAR
DESIGN PRINCIPLE
THEMES
Design with
Unobtrusiveness
Focus on not stopping the
user and all else will
follow
Content inspired by http://thinkapps.com Content inspired by developer.android.com
BE
SEAMLESS Don’t be a constant
shoulder taper

14. ANDROID
WEAR
DESIGN PRINCIPLE
THEMES
Design for small
screen real estate
• UI controls
• Circular buttons
Design for big
gestures
Content inspired by http://thinkapps.com Content inspired by developer.android.com
BE
CONSIDERATE
OF SIZE
CONSTRAINTS

15. ANDROID
WEAR
DESIGN PRINCIPLE
THEMES
Design to be
contextual
• Hierarchy
• Predictive intelligence
Think about stream
cards first: The right
content at the right
time
Content inspired by http://thinkapps.com Content inspired by developer.android.com
BE
RELEVANT

16. ANDROID
WEAR
DESIGN PRINCIPLE
THEMES
Design for the
corner of the eye
Content inspired by http://thinkapps.com Content inspired by developer.android.com
BE
DISTINCTIVE
Design your icons to
represent your brand
Design with good
typography and color

17. HOW
TO COMBAT THE CHALLENGES
WHAT TOOLS AND RESOURCES ARE AVAILABLE TO DESIGNERS?

18. DESIGN PATTERNS

19. DESIGN PATTERNS
• Glances
• Notifications
• Modal Sheets
• Layout
• Color and Typography
• Animations
• Branding
APPLE WATCH ANDROID WEAR
• Cards
• App icons
• Pages
• Action buttons / Action
countdown and confirmation
• Continuing activity on phone
• Controls
• Selection List
• Glances
• 2D Picker

20. DESIGN PATTERNS
• Glances
• Notifications
• Modal Sheets
• Layout
• Color and Typography
• Animations
• Branding
APPLE WATCH ANDROID WEAR
• Cards
• App icons
• Pages
• Action buttons / Action
countdown and confirmation
• Continuing activity on phone
• Controls
• Selection List
• Glances
• 2D PickerAPPLE WATCH
developer.apple.com

21. DESIGN PATTERNS
• Glances
• Notifications
• Modal Sheets
• Layout
• Color and Typography
• Animations
• Branding
APPLE WATCH ANDROID WEAR
• Cards
• App icons
• Pages
• Action buttons / Action
countdown and confirmation
• Continuing activity on phone
• Controls
• Selection List
• Glances
• 2D PickerANDROID WEAR
developer.android.com

22. IMPORTANT
WHY ARE
DESIGN PATTERNS
WHY SHOULD DESIGNERS USE
DESIGN PATTERNS AS GUIDELINES?

23. • Provides a good user
experience
• Note: Each OS has its own set
of design patterns. Don’t mix
and match!
• Helpful for developers who
are not the strongest
designers
IMPORTANT
WHY ARE
DESIGN PATTERNS
WHY SHOULD DESIGNERS USE
DESIGN PATTERNS AS GUIDELINES?

24. THE IMMEDIATE
FUTURE
OF SMARTWATCHES
BROUGHT TO YOU BY
THE NOGGIN OF ALYSSA BURKE
• Social norm
• More watch-like
• Increased battery life
• Stand alone
• Smarter prediction

25. LETS RECAP
WHAT ARE THE KEY TAKE AWAYS?
1. It is not about one watch
being better than another
2. Design for the specific
platform
3. Remember, this is a
second screen experience
4. Remember the design
principles
5. Refer back to the design
documentation

26. “Good design, when it’s done well,
becomes invisible. It’s only when it’s
done poorly that we notice it.”
- JARED SPOOL

27. THANKS QUESTIONS?
ALYSSA BURKE
@designbyalyssa