Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens
-
Upload
uxpa-international -
Category
Design
-
view
74 -
download
3
Transcript of Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens
![Page 1: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/1.jpg)
Wearables Workshop: UX EssentialsUXPA Conference 2015 - San Diego Philip Likens
![Page 2: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/2.jpg)
Thank You
![Page 3: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/3.jpg)
Agenda6:30 PM
7:50 PM 8:10 PM
9:30 PM
IntroductionsState of the UnionPlatforms Deep-diveBreak / PlaytimeWireframing ExercisePresentations & FeedbackEnd
![Page 4: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/4.jpg)
Introductions
![Page 5: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/5.jpg)
Who am I?
![Page 6: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/6.jpg)
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?
![Page 7: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/7.jpg)
Wearables Experiences…
![Page 8: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/8.jpg)
State of the Union
![Page 9: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/9.jpg)
Philip’s 7 Questions for New TechWhat 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?
![Page 10: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/10.jpg)
What is it?
![Page 11: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/11.jpg)
By definitionBody-borne devices with complex interfaces, visual displays, multiple use cases, ongoing connectivity, and some computational power.
What is it?
![Page 12: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/12.jpg)
The Internet of Things?What is it?
![Page 13: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/13.jpg)
The Internet of Things?What is it?
![Page 14: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/14.jpg)
-2014 Google IO Keynote
“…And finally, 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…”
![Page 15: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/15.jpg)
The Internet of Things?What is it?
![Page 16: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/16.jpg)
What can it do?
![Page 17: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/17.jpg)
Log
Athos
What Can It Do?
![Page 18: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/18.jpg)
NotifyWhat Can It Do?
Ringly
![Page 19: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/19.jpg)
Communicate
Cuff
What Can It Do?
![Page 20: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/20.jpg)
Monitor
Sproutling
What Can It Do?
![Page 21: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/21.jpg)
Record
Kapture
What Can It Do?
![Page 22: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/22.jpg)
Find
Google Glass
What Can It Do?
![Page 23: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/23.jpg)
Consume
Bragi Dash
What Can It Do?
![Page 24: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/24.jpg)
Control
Samsung Gear
What Can It Do?
![Page 25: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/25.jpg)
Verify
Nymi
What Can It Do?
![Page 26: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/26.jpg)
Comfort
FiLIP
What Can It Do?
![Page 27: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/27.jpg)
Others
Digitsole
What Can It Do?
![Page 28: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/28.jpg)
Why does it matter?
![Page 29: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/29.jpg)
In tune with things we care aboutWhy does it matter?
?
Withings Activite
![Page 30: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/30.jpg)
-Google IO 2014
“Across the world, people check their Android phones an average of
125 times every day.”
![Page 31: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/31.jpg)
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
??
![Page 32: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/32.jpg)
Who are the leaders?
![Page 33: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/33.jpg)
FitnessFitBit 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
Who are the leaders?
![Page 34: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/34.jpg)
Smart WatchesPebble 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
Who are the leaders?
![Page 35: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/35.jpg)
Heads up Displays• Google? • BMW • Skully • More to come for industrial / business /
medical use
Who are the leaders?
![Page 36: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/36.jpg)
How do I design for it?
![Page 37: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/37.jpg)
What does it mean for our profession?
![Page 38: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/38.jpg)
App building difficulty*
*All figures approximate
What does it mean for our profession?
Whoa Nelly!
Difficult
Not Easy
Easy
2008 2010 2012 2014 2016
![Page 39: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/39.jpg)
Design for ContextConsider the environment Leverage sensors Be careful of speculation
What does it mean for our profession?
![Page 40: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/40.jpg)
-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.”
![Page 41: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/41.jpg)
-Ami Ben David
“The user context is about how people are different. 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).”
![Page 42: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/42.jpg)
-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 influences your application.”
![Page 43: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/43.jpg)
-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, flight delays, traffic jams,
package delivery times, a TV show everyone’s watching, or something
trending on Twitter.”
![Page 44: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/44.jpg)
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
![Page 45: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/45.jpg)
Context engines• Google Now on Tap • Apple’s Location relevant Apps • Factual • …?
What does it mean for our profession? / Design for Context
![Page 46: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/46.jpg)
-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.”
![Page 47: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/47.jpg)
![Page 48: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/48.jpg)
![Page 49: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/49.jpg)
![Page 50: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/50.jpg)
Most advanced implementations• Google Now • Apple Watch / iPhone / Wrist interplay • Apple’s Messages • …
What does it mean for our profession? / Design for Context
![Page 51: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/51.jpg)
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
What does it mean for our profession?
![Page 52: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/52.jpg)
Google Dictionary
“The unbroken and consistent existence or operation of something
over a period of time.”
![Page 53: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/53.jpg)
Google• Open on phone • Chrome can sync tabs across devices
What does it mean for our profession? / Design for continuity
![Page 54: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/54.jpg)
Apple• Handoff • Calls & texts on other devices • Network sharing
What does it mean for our profession? / Design for continuity
![Page 55: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/55.jpg)
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 glorified Graphic Designers
or truly concerned with UX?
What does it mean for our profession?
![Page 56: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/56.jpg)
–All the IT people everywhere
“Voice? We already do that. Our IVR customer support
system is awesome.”
![Page 57: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/57.jpg)
Brands Investing• Microsoft - “Hey Cortana…” • Google - Now “Ok Google…” • Amazon - Echo “Alexa…” • Nuance (Powers Samsung’s S Voice) • Apple - Siri
![Page 58: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/58.jpg)
Cards• Modular / atomic content & functionality • Take actions directly from information /
notifications • 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/
What does it mean for our profession?
![Page 59: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/59.jpg)
App building difficulty*
*All figures approximate
What does it mean for our profession?
Whoa Nelly!
Difficult
Not Easy
Easy
2008 2010 2012 2014 2016
![Page 60: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/60.jpg)
Where are we headed?
![Page 61: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/61.jpg)
Holy Grail• Watch w/ Cell: notifications / 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
Where are we headed?
![Page 62: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/62.jpg)
Devices in Everyday LifeWhere are we headed?
voice/watch/phone/tablet/car/laptop Kids: Commute: Walking: Desk: Meetings: Lunch: Evenings:
+ + + - - - +
+ + + + + + -
+ + + + + + +
- + - + + + +
- + - - - - -
- - - + + - +
![Page 63: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/63.jpg)
Devices traveling in DCWhere are we headed?
voice/watch/phone/tablet/car/laptop Train: Walking: Airport:
- + -
+ + +
+ + +
+ - +
- - -
- - +
![Page 64: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/64.jpg)
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
Where are we headed?
![Page 65: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/65.jpg)
Thoughts, Questions?
![Page 66: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/66.jpg)
Platforms Deepdive
![Page 67: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/67.jpg)
Tizen (Samsung)
![Page 68: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/68.jpg)
Either Samsung will go all-in or it will die. Next…
![Page 69: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/69.jpg)
Pebble
![Page 70: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/70.jpg)
It’s all in flux. But…
![Page 76: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/76.jpg)
Android Wear
![Page 78: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/78.jpg)
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 specific.
• Glanceable • Zero or low interaction
Source: google.com
Android Wear
![Page 79: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/79.jpg)
The Home Screen• The background, showing either content relating to the first
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
![Page 81: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/81.jpg)
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 specific 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
![Page 83: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/83.jpg)
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 notifications. 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
![Page 84: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/84.jpg)
The Context Stream
Source: 2359media.com
Android Wear
![Page 85: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/85.jpg)
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
![Page 86: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/86.jpg)
NotificationsBridged notifications Contextual notifications
Source: justinribeiro.com & google.com
Android Wear
![Page 87: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/87.jpg)
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 specific location, activity, time of day, or something happening in the cloud.
Source: google.com
Android Wear
![Page 88: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/88.jpg)
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
![Page 90: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/90.jpg)
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
![Page 91: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/91.jpg)
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
![Page 92: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/92.jpg)
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
![Page 93: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/93.jpg)
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
![Page 95: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/95.jpg)
Apple Watch
![Page 97: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/97.jpg)
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
![Page 98: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/98.jpg)
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
![Page 100: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/100.jpg)
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
![Page 102: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/102.jpg)
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
![Page 104: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/104.jpg)
Navigation• Page-based navigation is best suited for a flat 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
![Page 107: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/107.jpg)
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
![Page 108: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/108.jpg)
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
![Page 109: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/109.jpg)
Handoff
Source: thedeepblog.com
Apple Watch
![Page 110: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/110.jpg)
Force TouchWith Force Touch, pressing firmly 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 significant new sensing capability since Multi-Touch.
Source: apple.com
Apple Watch
![Page 111: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/111.jpg)
Example
Source: TripCase App
Apple Watch
![Page 112: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/112.jpg)
Thoughts, Questions?
![Page 113: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/113.jpg)
Break / PlaytimeBe back by 8:10
![Page 114: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/114.jpg)
Wireframing Exercise
![Page 115: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/115.jpg)
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 (notifications), a glance, modal sheets, and a force-press menu
• Work in groups to help figure 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
![Page 116: Pre-Conference Course: Wearables Workshop: UX Essentials - Phillip Likens](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d11814bb61ebf45d8b462c/html5/thumbnails/116.jpg)
Presentations & Feedback