THE BATTLE OF THE

SMARTWATCHES

WHYA LOOK INTO ANDROID WEAR (Specifically MOTO 360) & APPLE WATCH.WHAT DO DESIGNERS NEED TO KNOW?

THE BATTLE OF THE

SMARTWATCHES

WHYA 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

WHYSMARTWATCHESWHAT MAKES THEM SO DESIRABLE? WHY ARE THEY IN DEMAND?

• 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

WHYSMARTWATCHESWHAT MAKES THEM SO DESIRABLE? WHY ARE THEY IN DEMAND?

CHALLENGESWHAT ARE THE

WHAT ARE DESIGNERS GETTING THEMSELVES INTO?

CHALLENGESWHAT ARE THE

WHAT ARE DESIGNERS GETTING THEMSELVES INTO?

IT IS A GAME OF TRADE-OFFS AS A RESULT OF CONSTRAINTS

Including physical, technical & philosophical

CHALLENGESWHAT 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

CHALLENGESWHAT 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

CHALLENGESWHAT 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

CHALLENGESWHAT 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

ANDROID WEAR

DESIGN PRINCIPLE

THEMES

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

BEEFFICIENT

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

BESEAMLESS Don’t be a constant

shoulder taper

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

BECONSIDERATE

OF SIZE CONSTRAINTS

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

BERELEVANT

ANDROID WEAR

DESIGN PRINCIPLE

THEMES

Design for the corner of the eye

Content inspired by http://thinkapps.com Content inspired by developer.android.com

BEDISTINCTIVE

Design your icons to represent your brand

Design with good typography and color

HOWTO COMBAT THE CHALLENGESWHAT TOOLS AND RESOURCES ARE AVAILABLE TO DESIGNERS?

DESIGN PATTERNS

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

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 APPLE WATCH

developer.apple.com

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 ANDROID WEAR

developer.android.com

IMPORTANT

WHY ARE DESIGN PATTERNS

WHY SHOULD DESIGNERS USE DESIGN PATTERNS AS GUIDELINES?

• 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?

THE IMMEDIATE

FUTUREOF SMARTWATCHESBROUGHT TO YOU BY THE NOGGIN OF ALYSSA BURKE

• Social norm

• More watch-like • Increased battery life

• Stand alone

• Smarter prediction

LETS RECAPWHAT 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

“Good design, when it’s done well, becomes invisible. It’s only when it’s

done poorly that we notice it.” - JARED SPOOL

THANKS QUESTIONS?

ALYSSA BURKE@designbyalyssa