THE BATTLE OF THE SMARTWATCHES WHY A LOOK INTO ANDROID WEAR (Specifically MOTO 360) & APPLE WATCH. WHAT DO DESIGNERS NEED TO KNOW?
Jul 15, 2015
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