Wearables Workshop: UX Essentials

Download Wearables Workshop: UX Essentials

Post on 07-Aug-2015




5 download


  1. 1. Wearables Workshop: UX Essentials UXPA Conference 2015 - San Diego @PhilipLikens
  2. 2. @PhilipLikens Thank You
  3. 3. @PhilipLikens Agenda 6:30 PM 7:30 PM 8:00 PM 9:30 PM IntroductionsState of the UnionBreak / PlaytimePlatforms Deep-diveWireframing ExercisePresentations & FeedbackEnd
  4. 4. @PhilipLikens Introductions
  5. 5. @PhilipLikens Who am I?
  6. 6. @PhilipLikens Sabre is hiring UX talent in Dallas
  7. 7. @PhilipLikens Who are yall? Whats 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?
  8. 8. @PhilipLikens Wearables Experiences
  9. 9. @PhilipLikens State of the Union
  10. 10. @PhilipLikens Philips 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?
  11. 11. @PhilipLikens What is it?
  12. 12. @PhilipLikens By denition Body-borne devices with complex interfaces, visual displays, multiple use cases, ongoing connectivity, and some computational power. What is it?
  13. 13. @PhilipLikens The Internet of Things? What is it?
  14. 14. @PhilipLikens The Internet of Things? What is it?
  15. 15. -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
  16. 16. @PhilipLikens The Internet of Things? What is it?
  17. 17. @PhilipLikens What can it do?
  18. 18. @PhilipLikens Log Athos What Can It Do?
  19. 19. @PhilipLikens Notify What Can It Do? Ringly
  20. 20. @PhilipLikens Communicate Cuff What Can It Do?
  21. 21. @PhilipLikens Monitor Sproutling What Can It Do?
  22. 22. @PhilipLikens Record Kapture What Can It Do?
  23. 23. @PhilipLikens Find Google Glass What Can It Do?
  24. 24. @PhilipLikens Consume Bragi Dash What Can It Do?
  25. 25. @PhilipLikens Control Samsung Gear What Can It Do?
  26. 26. @PhilipLikens Verify Nymi What Can It Do?
  27. 27. @PhilipLikens Comfort FiLIP What Can It Do?
  28. 28. @PhilipLikens Others Digitsole What Can It Do?
  29. 29. @PhilipLikens Why does it matter?
  30. 30. @PhilipLikens In tune with things we care about Why does it matter? ? Withings Activite
  31. 31. -Google IO 2014 Across the world, people check their Android phones an average of 125 times every day.
  32. 32. @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 ? ?
  33. 33. @PhilipLikens Who are the leaders?
  34. 34. @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 Who are the leaders?
  35. 35. @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 Who are the leaders?
  36. 36. @PhilipLikens Heads up Displays Google? BMW Skully More to come for industrial / business / medical use Who are the leaders?
  37. 37. @PhilipLikens How do I design for it?
  38. 38. @PhilipLikens What does it mean for our profession?
  39. 39. @PhilipLikens App building difculty* *All gures approximate What does it mean for our profession? Whoa Nelly! Difficult Not Easy Easy 2008 2010 2012 2014 2016
  40. 40. @PhilipLikens Design for Context Consider the environment Leverage sensors Be careful of speculation What does it mean for our profession?
  41. 41. -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.
  42. 42. -Ami Ben David The user context is about how people are dierent. Its about what every user likes, hates, owns (a digital watch?), installs (apps?) and likes on social networks. Its also about the users state of mind (bored, late, hungry,etc.), their habits and their state of motion (is the user standing, moving, running).
  43. 43. -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 inuences your application.
  44. 44. -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, trac jams, package delivery times, a TV show everyones watching, or something trending on Twitter.
  45. 45. @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
  46. 46. @PhilipLikens Context engines Google Now on Tap Apples Location relevant Apps Factual ? What does it mean for our profession? / Design for Context
  47. 47. -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.
  48. 48. @PhilipLikens Most advanced implementations Google Now Apple Watch / iPhone / Wrist interplay Apples Messages What does it mean for our profession? / Design for Context
  49. 49. @PhilipLikens Design for Continuity Think about what youre 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?
  50. 50. Google Dictionary The unbroken and consistent existence or operation of something over a period of time.
  51. 51. @PhilipLikens Google Open on phone Chrome can sync tabs across devices What does it mean for our profession? / Design for continuity
  52. 52. @PhilipLikens Apple Hando Calls & texts on other devices Network sharing What does it mean for our profession? / Design for continuity
  53. 53. @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 gloried Graphic Designers or truly concerned with UX? What does it mean for our profession?
  54. 54. All the IT people everywhere Voice? We already do that. Our IVR customer support system is awesome.
  55. 55. @PhilipLikens Brands Investing Microsoft - Hey Cortana Google - Now Ok Google Amazon - Echo Alexa Nuance (Powers Samsungs S Voice) Apple - Siri
  56. 56. @PhilipLikens Cards Modular / atomic content & functionality Take actions directly from information / notications 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?
  57. 57. @PhilipLikens App building difculty* *All gures approximate What does it mean for our profession? Whoa Nelly! Difficult Not Easy Easy 2008 2010 2012 2014 2016
  58. 58. @PhilipLikens Where are we headed?
  59. 59. @PhilipLikens Holy Grail Watch w/ Cell: notications / 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?
  60. 60. @PhilipLikens Devices in Everyday Life Where are we headed? voice/watch/phone/tablet/car/laptop Kids: Commute: Walking: Desk: Meetings: Lunch: Evenings: + + + - - - + + + + + + + - + + + + + + + - + - + + + + - + - - - - - - - - + + - +
  61. 61. @PhilipLikens Devices traveling in DC Where are we headed? voice/watch/phone/tablet/car/laptop Train: Walking: Airport: - + - + + + + + + + - + - - - - - +
  62. 62. @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 Where are we headed?
  63. 63. @PhilipLikens Thoughts, Questions?
  64. 64. @PhilipLikens Platforms Deepdive
  65. 65. @PhilipLikens Tizen (Samsung)
  66. 66. @PhilipLikens Either Samsung will go all-in or it will die. Next
  67. 67. @PhilipLikens Pebble
  68. 68. @PhilipLikens Its all in ux. But
  69. 69. @PhilipLikens Hardware Source: pebble.com Pebble
  70. 70. @PhilipLikens Timeline Source: pebble.com Pebble
  71. 71. @PhilipLikens Select / More Source: pebble.com Pebble
  72. 72. @PhilipLikens Lists Source: pebble.com Pebble
  73. 73. @PhilipLikens Set information Source: pebble.com Pebble
  74. 74. @PhilipLikens Android Wear
  75. 75. @PhilipLikens Hardware Source: phandroid.com Android Wear
  76. 76. @PhilipLikens Creative vision Launched automatically: Wearable apps are aware of the users 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 specic. Glanceable Zero or low interaction Source: google.com Android Wear
  77. 77. @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
  78. 78. @PhilipLikens The Home Screen Source: google.com Android Wear
  79. 79. @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 specic 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
  80. 80. @PhilipLikens The Cue Card Source: google.com Android Wear
  81. 81. @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 dont have to launch many different applications to check for updates; they can simply glance at their stream for a brief update on whats important to them. Cards in the stream are more than simple notications. 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
  82. 82. @PhilipLikens The Context Stream Source: 2359media.com Android Wear
  83. 83. @PhilipLikens Notications Bridged notications, such as new message notications, are pushed to the wearable from the connected handheld using standard Android notications. They require very little or no Wear- specic code. Contextual notications, 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 notication bridged from the handheld. Source: google.com Android Wear
  84. 84. @PhilipLikens Notications Bridged notications Contextual notications Source: justinribeiro.com & google.com Android Wear
  85. 85. @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 specic location, activity, time of day, or something happening in the cloud. Source: google.com Android Wear
  86. 86. @PhilipLikens Custom App Layouts There are some things you cant 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
  87. 87. @PhilipLikens Elements: Cards Source: google.com Android Wear
  88. 88. @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
  89. 89. @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
  90. 90. @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
  91. 91. @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
  92. 92. @PhilipLikens Example Source: google.com Android Wear
  93. 93. @PhilipLikens Apple Watch
  94. 94. @PhilipLikens Hardware Source: apple.com Apple Watch
  95. 95. @PhilipLikens Notications Notications on Apple Watch communicate high-value and immediate information through quick interactions. Notications occur in two stages short looks and long looks. Source: apple.com Apple Watch
  96. 96. @PhilipLikens Notications: Short looks Short looks appear briey, giving the wearer just enough time to see what the notication 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 notication. Keep privacy in mind. Short looks are intended to be discreet and provide only basic information. Avoid including potentially sensitive text in the notications title. Source: apple.com Apple Watch
  97. 97. @PhilipLikens Notications: Short looks Source: apple.com Apple Watch
  98. 98. @PhilipLikens Notications: Long looks Long looks provide more detail about an incoming notication. The long look appears when the wearers wrist remains raised or when the wearer taps a short look. Although its 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 notication types already registered by your iOS app and uses them to congure custom action buttons. The system determines which buttons to display based on a notications type and automatically adds a Dismiss button after all custom buttons. Source: apple.com Apple Watch
  99. 99. @PhilipLikens Notications: Long looks Source: apple.com Apple Watch
  100. 100. @PhilipLikens Glances Glances are browsable collections of timely and contextually relevant moments from the wearers 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
  101. 101. @PhilipLikens Glances Source: apple.com Apple Watch
  102. 102. @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
  103. 103. @PhilipLikens Navigation: Page-based Source: apple.com Apple Watch
  104. 104. @PhilipLikens Navigation: Hierarchical Source: tutsplus.com Apple Watch
  105. 105. @PhilipLikens Navigation: Modal sheets Retitle the Close button if it makes sense. ex. Dismiss or Cancel. Dont 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
  106. 106. @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 wearers current activity to their other devices. People initiate Handoff by swiping up on your app icon on an iOS devices 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
  107. 107. @PhilipLikens Handoff Source: thedeepblog.com Apple Watch
  108. 108. @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 signicant new sensing capability since Multi-Touch. Source: apple.com Apple Watch
  109. 109. @PhilipLikens Example Source: TripCase App Apple Watch
  110. 110. @PhilipLikens Thoughts, Questions?
  111. 111. @PhilipLikens Break / Playtime
  112. 112. @PhilipLikens Wireframing Exercise
  113. 113. @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 (notications), 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 - well present those (Apple lightning connector) https://goo.gl/3esutt for assets
  114. 114. @PhilipLikens Presentations & Feedback