Wearables Workshop: UX Essentials

Wearables Workshop:
UX Essentials
UXPA Conference 2015 - San Diego
@PhilipLikens

@PhilipLikens
Agenda
6:30 PM
7:30 PM
8:00 PM
9:30 PM
Introductions

State of the Union

Break / Playtime

Platforms Deep-dive

Wireframing Exercise

Presentations & Feedback

End

@PhilipLikens
Sabre is hiring UX talent in Dallas

@PhilipLikens
Who are ya’ll?
• What’s your name?
• Where are you from?
• What company do you work for?
• What do you do for them?
• What are you hoping to get out of this
workshop?

@PhilipLikens
Wearables Experiences…

@PhilipLikens
State of the Union

@PhilipLikens
Philip’s 7 Questions for New Tech
What is it?
What can it do?
Why does it matter?
Where do I start?
How do I design for it?
What does it mean to our profession?
Where are we headed?

@PhilipLikens
By deﬁnition
Body-borne devices with complex interfaces,
visual displays, multiple use cases, ongoing
connectivity, and some computational power.
What is it?

@PhilipLikens
The Internet of Things?
What is it?

-2014 Google IO Keynote
“…And ﬁnally, users always have their smart
phone so we want to make sure all these
connected experiences work based on your
smart phone: be it your wearables, be it your
car, or like we have shown with Chrome
Cast, your television…”

@PhilipLikens
Log
Athos
What Can It Do?

@PhilipLikens
Notify
What Can It Do?
Ringly

@PhilipLikens
Communicate
Cuff
What Can It Do?

@PhilipLikens
Monitor
Sproutling
What Can It Do?

@PhilipLikens
Record
Kapture
What Can It Do?

@PhilipLikens
Find
Google Glass
What Can It Do?

@PhilipLikens
Consume
Bragi Dash
What Can It Do?

@PhilipLikens
Control
Samsung Gear
What Can It Do?

@PhilipLikens
Verify
Nymi
What Can It Do?

@PhilipLikens
Comfort
FiLIP
What Can It Do?

@PhilipLikens
Others
Digitsole
What Can It Do?

@PhilipLikens
Why does it matter?

@PhilipLikens
In tune with things we care about
Why does it matter?
?
Withings Activite

-Google IO 2014
“Across the world, people check their
Android phones an average of
125 times every day.”

@PhilipLikens
Technology Adoption = Scary Fast
www.asymco.com/2013/11/18/seeing-whats-next-2/
Why does it matter?
45 YRS
30 YRS
15 YRS
0 YRS
PHONE RADIO SMART PHONE TABLET SMART WATCH
?
?

@PhilipLikens
Who are the leaders?

@PhilipLikens
Fitness
FitBit est 67% Units Shipped in 2014
Jawbone est 18% Units Shipped in 2014
Nike est 11% Units Shipped in 2014
Microsoft
Garmin, Polar
Hexoskin, Athos

@PhilipLikens
Smart Watches
Pebble est 700k Units Shipped in 2014
Google est 720k Units Shipped in 2014 with Wear
Samsung est 1.2mm Units Shipped in 2014
Apple est 7mm Units Sold in Q2 2015

@PhilipLikens
Heads up Displays
• Google?
• BMW
• Skully
• More to come for industrial / business /
medical use

@PhilipLikens
How do I design for it?

@PhilipLikens
What does it mean for our
profession?

@PhilipLikens
App building difﬁculty*
*All ﬁgures approximate
What does it mean for our profession?
Whoa Nelly!
Difficult
Not Easy
Easy
2008 2010 2012 2014 2016

@PhilipLikens
Design for Context
Consider the environment
Leverage sensors
Be careful of speculation

-Ami Ben David
“A contextual product understands the full
story around a human experience, in order
to bring users exactly what they want,
with minimal interaction.”

-Ami Ben David
“The user context is about how people are
diﬀerent. It’s about what every user likes,
hates, owns (a digital watch?), installs
(apps?) and likes on social networks. It’s
also about the user’s state of mind (bored,
late, hungry,etc.), their habits and their state
of motion (is the user standing, moving,
running).”

-Ami Ben David
“The environmental context captures the
time, the day, the location, the type of place
(home, work, shop, train station,etc.), other
networks or devices the user is connected
to, or any other physical aspect that
inﬂuences your application.”

-Ami Ben David
“The world context looks at what is
happening elsewhere that may be related to
the user, such as sports events, news
events, weather, ﬂight delays, traﬃc jams,
package delivery times, a TV show
everyone’s watching, or something
trending on Twitter.”

@PhilipLikens
Historical context vs context sensing
• Historical Context refers to user's context that is saved either locally
or online for later analysis and usage. Examples of Historical Context
are the user's visited locations, user's checkins and user's travelled
routes. This information can be later analyzed using a Behavioral
model to produce predictions based on the user's history.
• Context Sensing refers to user's current context. This kind of context
information is called "context state". A group of "context states"
conform a "snapshot" of the current user's context, such as where
the user is, what the user is doing, how is the user's surrounding
environment, etc. This snapshot is formally called the "state vector",
which contains a collection of "context states" describing the user's
current context.
Source: intel.com
What does it mean for our profession? / Design for Context

@PhilipLikens
Context engines
• Google Now on Tap
• Apple’s Location relevant Apps
• Factual
• …?

-Android Wear Documentation
“By using device sensors and other
contextual cues, your app can reveal
information and functionality precisely when
the user needs it, at a glance.”

@PhilipLikens
Most advanced implementations
• Google Now
• Apple Watch / iPhone / Wrist interplay
• Apple’s Messages
• …

@PhilipLikens
Design for Continuity
• Think about what you’re calling the user to do
• Make it easy for them to pick up where they
left off
• Assume interruption

Google Dictionary
“The unbroken and consistent
existence or operation of something
over a period of time.”

@PhilipLikens
Google
• Open on phone
• Chrome can sync tabs across devices
What does it mean for our profession? / Design for continuity

@PhilipLikens
Apple
• Handoﬀ
• Calls & texts on other devices
• Network sharing
What does it mean for our profession? / Design for continuity

@PhilipLikens
Design for Voice
• Voice will be a huge part of the next 5-10 years.
• Google, Apple, Amazon, Microsoft - all betting
on it.
• As UXers, are we gloriﬁed Graphic Designers
or truly concerned with UX?

–All the IT people everywhere
“Voice? We already do that.
Our IVR customer support
system is awesome.”

@PhilipLikens
Brands Investing
• Microsoft - “Hey Cortana…”
• Google - Now “Ok Google…”
• Amazon - Echo “Alexa…”
• Nuance (Powers Samsung’s S Voice)
• Apple - Siri

@PhilipLikens
Cards
• Modular / atomic content & functionality
• Take actions directly from information /
notiﬁcations
• Move away from app-centric thinking
• Moving toward apps as services?
• Worth reading https://blog.intercom.io/the-end-
of-apps-as-we-know-them/

@PhilipLikens

@PhilipLikens
Holy Grail
• Watch w/ Cell: notiﬁcations / small tasks /
emergencies
• BLE Headset: audio content consumption,
talking on the phone, small content creation
• 7” Tablet w/ Cell: creation + consumption
• Laptop: creation + consumption power use

@PhilipLikens
Devices in Everyday Life
voice/watch/phone/tablet/car/laptop
Kids:
Commute:
Walking:
Desk:
Meetings:
Lunch:
Evenings:
+
+
+
-
-
-
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
-
+
-
+
+
+
+
-
+
-
-
-
-
-
-
-
-
+
+
-
+

@PhilipLikens
Devices traveling in DC
voice/watch/phone/tablet/car/laptop
Train:
Walking:
Airport:
-
+
-
+
+
+
+
+
+
+
-
+
-
-
-
-
-
+

@PhilipLikens
Other Thoughts
• Fashion Matters
• OS consolidation brings better UX
• Fitness bands largely disappear
• Connectivity has to resolve Experience has to
propagate before mass adoption
• Touch (only) is not the holy grail

@PhilipLikens
Thoughts, Questions?

@PhilipLikens
Platforms Deepdive

@PhilipLikens
Either Samsung will go all-in
or it will die. Next…

@PhilipLikens
It’s all in ﬂux. But…

@PhilipLikens
Hardware
Source: pebble.com
Pebble

@PhilipLikens
Timeline
Source: pebble.com
Pebble

@PhilipLikens
Select / More
Source: pebble.com
Pebble

@PhilipLikens
Lists
Source: pebble.com
Pebble

@PhilipLikens
Set information
Source: pebble.com
Pebble

@PhilipLikens
Hardware
Source: phandroid.com
Android Wear

@PhilipLikens
Creative vision
• Launched automatically: Wearable apps are
aware of the user’s context - time, location,
physical activity, and so on. The apps use this
information to insert cards into the stream when
they become relevant. This makes Android
Wear timely, relevant and very speciﬁc.
• Glanceable
• Zero or low interaction
Source: google.com
Android Wear

@PhilipLikens
The Home Screen
• The background, showing either content relating to the ﬁrst
card or a custom watch face design, depending on the
watch face the user has chosen.
• Tapping anywhere on the background or saying "Ok
Google" starts a voice query.
• Status indicators, showing connectivity, charging status,
airplane mode, and in some watch faces a count of unread
items.
• The top ranked card in the Context Stream, peeking up at
the bottom of the screen. The amount of the peek card that
appears is determined by the current watch face.
Source: google.com
Android Wear

@PhilipLikens
The Home Screen
Source: google.com
Android Wear

@PhilipLikens
The Cue Card
• The cue card allows users to speak to Google. The cue card is
opened by saying, “OK Google” or by tapping on the background
of the home screen. Swiping up on the cue card shows a list of
suggested voice commands, which can also be tapped.
• Each suggested voice command activates a speciﬁc type of
intent. Multiple applications may register for a single voice intent,
and the user will have the opportunity to choose which
application they prefer to use.
• Applications can respond to a voice command by adding or
updating a stream card, or by launching a full screen application.
Voice input often takes the form of a command, such as "remind
me to get milk.”
Source: google.com
Android Wear

@PhilipLikens
The Cue Card
Source: google.com
Android Wear

@PhilipLikens
The Context Stream
• The context stream is a vertical list of cards, each showing a useful
or timely piece of information, much like the Google Now feature
on Android phones and tablets. Your application can create cards
and inject them into the stream when they are most likely to be
useful.
• This UI model ensures that users don’t have to launch many
different applications to check for updates; they can simply glance
at their stream for a brief update on what’s important to them.
• Cards in the stream are more than simple notiﬁcations. They can
be swiped horizontally to reveal additional pages. Cards can also
be dismissed by swiping left to right, removing them from the
stream until the next time the app has useful information to display.
Source: google.com
Android Wear

@PhilipLikens
The Context Stream
Source: 2359media.com
Android Wear

@PhilipLikens
Notifications
• Bridged notifications, such as new message
notifications, are pushed to the wearable from the
connected handheld using standard Android
notifications. They require very little or no Wear-
specific code.
• Contextual notifications, such as an exercise card that
appears when you begin running, are generated locally
on the wearable and appear at contextually relevant
moments. You can do more with this kind of card than
with a notification bridged from the handheld.
Source: google.com
Android Wear

@PhilipLikens
Notifications
Bridged notifications Contextual notifications
Source: justinribeiro.com & google.com
Android Wear

@PhilipLikens
Apps
• Users are used to tapping icons to launch apps.
Android Wear is different. A typical Wear app adds a
card to the stream at a contextually relevant moment. It
might have a button that opens a full screen view for a
fast micro interaction, but it just as well might not.
• We strongly recommend not building apps the user
has to launch and quit before thinking really hard about
how you could react to a speciﬁc location, activity, time
of day, or something happening in the cloud.
Source: google.com
Android Wear

@PhilipLikens
Custom App Layouts
• There are some things you can’t do on a card.
Swiping in many directions on a map or
controlling a game with a joystick are a couple
examples. In those cases it might be good idea
to momentarily go full screen.
Source: google.com
Android Wear

@PhilipLikens
Elements: Cards
Source: google.com
Android Wear

@PhilipLikens
Elements: Pages
• Supplementary information should be displayed
on additional cards to the right of a main
Context Stream card. Actions should always
come after pages.
Source: google.com
Android Wear

@PhilipLikens
Elements: Action buttons
• These are system-rendered buttons that
appear to the right of detail cards. They
consist of a white icon set on a blue
system-rendered circular button and a
short caption with a verb. Actions should
be limited to three for a single card row.
• Tapping on an action button can cause
an action to be executed, an action to
be continued on the companion
handheld, or a full screen activity to be
invoked for further input.
Source: google.com
Android Wear

@PhilipLikens
Elements: Actions on cards
• Should not require a text label to be
understood.
• Should only result in something
happening on the wearable (apart
from web links to open them on the
phone).
• One action per card.
• Good examples: play and pause
music, toggle light switch on and off,
navigate to an address, and call a
phone number.
Source: google.com
Android Wear

@PhilipLikens
Elements: Selection List
• These are system-rendered buttons that
appear to the right of detail cards. They
consist of a white icon set on a blue
system-rendered circular button and a
short caption with a verb. Actions should
be limited to three for a single card row.
• Tapping on an action button can cause
an action to be executed, an action to
be continued on the companion
handheld, or a full screen activity to be
invoked for further input.
Source: google.com
Android Wear

@PhilipLikens
Example
Source: google.com
Android Wear

@PhilipLikens
Hardware
Source: apple.com
Apple Watch

@PhilipLikens
Notifications
• Notifications on Apple Watch communicate
high-value and immediate information through
quick interactions. Notifications occur in two
stages–– short looks and long looks.
Source: apple.com
Apple Watch

@PhilipLikens
Notifications: Short looks
• Short looks appear briefly, giving the wearer just
enough time to see what the notification is about and
which app sent it.
• Make titles short and easy to understand. Space for
titles is limited, so keep titles brief and put detailed
information in the body of your notification.
• Keep privacy in mind. Short looks are intended to be
discreet and provide only basic information. Avoid
including potentially sensitive text in the notification’s
title.
Source: apple.com
Apple Watch

@PhilipLikens
Notiﬁcations: Short looks
Source: apple.com
Apple Watch

@PhilipLikens
Notifications: Long looks
• Long looks provide more detail about an incoming
notification. The long look appears when the wearer’s wrist
remains raised or when the wearer taps a short look.
• Although it’s best to be succinct, wearers can swipe vertically
or use the Digital Crown to scroll your long look as needed.
• Add up to four custom action buttons. Apple Watch shares
the interactive notification types already registered by your
iOS app and uses them to configure custom action buttons.
The system determines which buttons to display based on a
notification’s type and automatically adds a Dismiss button
after all custom buttons.
Source: apple.com
Apple Watch

@PhilipLikens
Notiﬁcations: Long looks
Source: apple.com
Apple Watch

@PhilipLikens
Glances
• Glances are browsable collections of timely and
contextually relevant moments from the
wearer’s favorite apps.
• Because people can choose which glances
they want to display, glances should always
offer value and be relevant.
• Always left aligned.
Source: apple.com
Apple Watch

@PhilipLikens
Glances
Source: apple.com
Apple Watch

@PhilipLikens
Navigation
• Page-based navigation is best suited for a ﬂat collection of
information in which all items are peers. Each item is
displayed on a single page that scrolls vertically. Wearers
swipe horizontally to navigate from page to page.
• Hierarchical navigation is best suited for master-detail
interfaces or for presenting a navigable list of options. When
wearers tap an item in a hierarchy, a new screen appears
that displays details about that item.
• Use modal sheets to extend your interface, if necessary.
Although you must choose a single navigation style, you
can present a modal sheet from either style.
Source: apple.com
Apple Watch

@PhilipLikens
Navigation: Page-based
Source: apple.com
Apple Watch

@PhilipLikens
Navigation: Hierarchical
Source: tutsplus.com
Apple Watch

@PhilipLikens
Navigation: Modal sheets
• Retitle the Close button if it
makes sense.  
ex. Dismiss or Cancel.
• Don’t use “Back” or “<“ in the
Close button title.
• Provide a separate Accept
button. If you want the wearer
to explicitly accept changes,
provide a separate button in
the body of your interface.
Source: apple.com
Apple Watch

@PhilipLikens
Handoff
• Apple Watch helps people quickly access information,
but there are times when they may want to dive deeper
into content on their iOS devices. Your Apple Watch
app uses Handoff to convey information about the
wearer’s current activity to their other devices.
• People initiate Handoff by swiping up on your app icon
on an iOS device’s lock screen. When your iOS app
receives a Handoff request, it uses the provided
information to continue the task that was initiated on
Apple Watch.
Source: apple.com
Apple Watch

@PhilipLikens
Handoff
Source: thedeepblog.com
Apple Watch

@PhilipLikens
Force Touch
With Force Touch, pressing
ﬁrmly on the screen brings up
additional controls in apps like
Messages, Music, and Calendar.
It also lets you select different
watch faces, pause or end a
workout, search an address in
Maps, and more. Force Touch is
the most signiﬁcant new sensing
capability since Multi-Touch.
Source: apple.com
Apple Watch

@PhilipLikens
Example
Source: TripCase App
Apple Watch

@PhilipLikens
Break / Playtime

@PhilipLikens
Wireframing Exercise

@PhilipLikens
Rules of the game
• Create an Apple Watch app using your paper prototyping
materials and cheat-sheet
• Choose your navigation structure, use both short and
long looks (notiﬁcations), a glance, modal sheets, and a
force-press menu
• Work in groups to help ﬁgure things out
• Share a concept or work on your own - your choice
• Sharing and feedback at 9pm (until we run out of time)
• Take photos of your paper prototype as you step through
it in order - we’ll present those (Apple lightning connector)
https://goo.gl/3esutt for assets

@PhilipLikens
Presentations & Feedback

Wearables Workshop: UX Essentials

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Wearables Workshop: UX Essentials

Similar to Wearables Workshop: UX Essentials (20)

More from Philip Likens

More from Philip Likens (6)

Recently uploaded

Recently uploaded (20)

Wearables Workshop: UX Essentials