Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing Multi-Device Experiences (book review)

2,273 views

Published on

A review of Michal Levin's book by the same title, published in January 2014 by O'Reilly Media. The presentation explains the basic ideas of her book with some new examples. Also included: Examples of single-device scenarios as well as multi-device scenarios for Apple Watch. The presentation was first held on April 21st, 2015 at Usability-Stammtisch Berlin (works best with audio, though). Oh, and the book is highly recommended – buy her book!

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Designing Multi-Device Experiences (book review)

  1. 1. Designing Multi- Device ExperiencesBook review b Creative Commons license for this presentation. Copyright and licenses for included images differ.
  2. 2. Photo: Stefan Freimark
  3. 3. @freimark Photo: flickr.com/photos/j_benson/7296569144
  4. 4. slideshare.net/sfreimark Photo: flickr.com/photos/114382574@N05/12221680395
  5. 5. Michal Levin O’Reilly, 2014
  6. 6. Michal Levin Senior UX Designer Google, Palo Alto @michall79 Photo used with permission
  7. 7. 7 Topics An ecosystem of connected devices Three approaches for multi-device design Beyond the core devices How to 01 02 03 04
  8. 8. An ecosystem of connected devices
  9. 9. Photo: flickr.com/photos/gabrielap93/6074460669
  10. 10. Photo: shutterstock.com/pic-154488353
  11. 11. Photo: shutterstock.com/pic-173451509
  12. 12. Photo: flickr.com/photos/poolie/2433764292
  13. 13. Photo: shutterstock.com/pic-135544436
  14. 14. Photo: shutterstock.com/pic-251428303
  15. 15. Photo: Stefan Freimark
  16. 16. Photo: flickr.com/photos/robgreen/11211153914
  17. 17. Photo: flickr.com/photos/smoothgroover22/13145117175
  18. 18. Photo: flickr.com/photos/smoothgroover22/13145117175 7G Amount of connected devices in 2013 Cisco Visual Networking Index: Global Media Data Traffic Forecast
  19. 19. Photo: flickr.com/photos/smoothgroover22/13145117175 24G Amount of connected devices in 2020 (estimation) Cisco Visual Networking Index: Global Media Data Traffic Forecast
  20. 20. Photo: shutterstock.com/pic-206326831 90% of 1,611 respondents use more than one device for getting a task done The New Multi-screen World: Understanding Cross- platform Consumer Behavior Google, August 2012 http://services.google.com/fh/files/misc/ multiscreenworld_final.pdf
  21. 21. Single-device design is history. And: With new possibilities, expectations rise.
  22. 22. Three approaches for multi-device design
  23. 23. 23 Three approaches for multi-device design Consistent ComplementaryContinuous
  24. 24. Consistent
  25. 25. Consistent means: The same content and features are available on multiple devices.
  26. 26. Full-responsive website 26 Asklepios Kliniken
  27. 27. Account section 27 Miles & More
  28. 28. Cross-platform app 28 Trello
  29. 29. Consistent doesn‘t mean identical.
  30. 30. Some examples for device differences: §  display size §  interaction model (physical buttons, gestures, voice recognition...) §  availability or non-availability of sensors (GPS, gyrometer, accelerometer...) 30 Differences between devices require design optimizations
  31. 31. 31 Adjust for device differences Optimize for layout Grid, dimensions of images and buttons, font size, spacing between elements Optimize for gestures Larger tap targets and gaps between linked areas, swipeable sliders, avoiding hover interactions Optimize for device characteristics <a href=“tel:12345“> <input type=“tel“> <input type=“email“>
  32. 32. Photo: flickr.com/photos/quinnanya/5892760393 Optimization for devices vs. consistent ecosystem
  33. 33. 33 The core experience should remain consistent across devices. Consistent core functionality The MVP should be identical across devices. Feature parity: Features should be available as much as possible and work as similar as possible. Consistent content Content parity: All content is available of all devices. The IA should be identical (as much as possible). Consistent “Look & Feel“ A common visual language supports recognition and orientation across devices.
  34. 34. Continuous
  35. 35. Continuous design addresses a user flow that runs along a set of contexts, during which devices “pass the baton” to one another.
  36. 36. Single Activity Photo: flickr.com/photos/toffee_maky/7928636400
  37. 37. Single Activity Sequenced Activity Photo: flickr.com/photos/toffee_maky/7928636400 Photo: Stefan Freimark
  38. 38. Photo: flickr.com/photos/toffee_maky/7928636400 Single Activity
  39. 39. Single Activity Photo: flickr.com/photos/toffee_maky/7928636400 Examples include reading a book, watching a movie or writing a document. These activities typically span a longer time period and might occur in different contexts – the activity itself doesn‘t change, though.
  40. 40. Amazon Kindle SingleActivity: Reading Photo: Stefan Freimark
  41. 41. Handoff/Continuity on OS X and iOS SingleActivity, e.g. Reading Photo: Stefan Freimark
  42. 42. Single Activity: Drawing a diagram 42 OmniGraffle (and syncing with OmniPresence) Photo: omnigroup.com/omnigraffle © The Omni Group. Reproduced by permission of the Omni Group.
  43. 43. Continuous vs. Consistent?
  44. 44. Sequenced Activity Photo: Stefan Freimark
  45. 45. Sequenced Activity Photo: Stefan Freimark Some activities consist of multiple tasks (sequences). The lengthier the activity, the more likely it is that... §  it won’t be completed in a single engagement (=multiple sessions) §  the contextual environment will change (=shifting contexts) §  it can be broken down into a set of granular subtasks
  46. 46. Eventbrite Continuous (Sequenced activity flow)
  47. 47. Continuous design enables us to rethink user flows we might have taken for granted.
  48. 48. How can we expand the Eventbrite example? Which features support user needs, while users progress through time?
  49. 49. 49 pre- event Finding events Exploring event info Registering for an event Choosing sessions Agenda- centered People- centered Sharing event with peers Reviewing attendee list Noting people to meet
  50. 50. Arriving at the venue Checking the event schedule Getting to the event on time §  Transportation §  Directions §  Parking Checking in Getting coffee to start the day Determining who’s here Anyone I already know? Any of the people I noted? People-centered Agenda-centered
  51. 51. During event Checking event schedule Exploring events info Attending sessions §  When, where, and how to get there §  Session and speaker info People-centered Agenda-centered Taking breaks §  Options (cafeterias, roof terrace) §  Time left until breaks §  “break about to end” alerts Attending social events §  What, when, where §  How to get there Making new connections §  Meeting new people, especially those I want to talk with §  Catching up with people I already know §  Exchanging business cards Attending sessions/ social events §  Who’s going? §  Conversation starters (e.g. common interests, background, recent articles published)
  52. 52. post- eventPeople-centered Agenda-centered Organizing event materials §  Slides §  Videos §  Books Posting photos/videos from the event Preparing a review for colleagues Following up with people
  53. 53. The trained eye recognizes a customer journey. :-)
  54. 54. Complementary
  55. 55. Different devices complement each other – either by collab- orating as a connected group, or controlling one another.
  56. 56. 56 Collaboration Devices work as a connected group Control A device controlling another device Must have Scrabble Party Play Hexler TouchOSC Nice to have Companion apps for second screen Companion apps for digital cameras Different devices complement one another – as a connected group or controlling one another. Participating devices are an integral part of the experience. An added device can deepen the UX, but isn’t essential to accomplish the fundamental task.
  57. 57. Scrabble Party Play Collaboration (must have) Photo: flickr.com/photos/lokesh/4649807115
  58. 58. Companion apps for second screen usage Collaboration (nice to have) Photo: de.wikipedia.org/wiki/Datei:Secondscreen_wettendass_Ipad-app.jpg
  59. 59. Hexler TouchOSC Control (must have) Video: youtube.com/watch?v=4v_Eb2j0vZ8
  60. 60. Companion apps for digital cameras Control (nice to have) 60Photo: Wolfgang Freimark
  61. 61. 61 Collaboration Devices work as a connected group Control A device controlling another device Must have Scrabble Party Play Complementary to own software Hexler TouchOSC Complementary to products by other vendors Nice to have Companion apps for second screen Complementary to own service Companion apps for digital cameras Complementary to own hardware Different devices complement one another – as a connected group or controlling one another.
  62. 62. Beyond the core devices
  63. 63. Photo: shutterstock.com/pic-257990591
  64. 64. „It feels like a watch in the physical sense. However it does not feel like a watch conceptually. Horace Dediu asymco.com/2015/04/14/the-watch/
  65. 65. „The question is whether the Watch will quickly leave behind its timekeeping anchor and move into being something completely different. Horace Dediu asymco.com/2015/04/14/the-watch/
  66. 66. Photo: shutterstock.com/pic-257990591 Single-device scenarios §  Information access o  location-unaware o  location-based §  Notifications o  „FYI“, e.g. time-based reminders o  actionable §  Getting physical access §  Navigation §  Special use cases o  Cab hailing o  ... Multi-device scenarios §  Consistent §  Continuous o  Single Activity Flow o  Sequenced Activity Flow §  Complementary o  Collaboration o  Control
  67. 67. Single-device scenarios WebMD YelpKomoot
  68. 68. Babbel OmniFocus Multi-device scenarios Consistent 68Yelp
  69. 69. Multi-device scenarios Yelp Continuous (Single activity flow)
  70. 70. Multi-device scenarios Airberlin Continuous (Sequenced activity flow)
  71. 71. Multi-device scenarios Complementary (Control) Photo: flickr.com/photos/mycutelife/4734441769
  72. 72. Photo: shutterstock.com/pic-257990591 Single-device scenarios §  Information access o  location-unaware o  location-based §  Notifications o  „FYI“, e.g. time-based reminders o  actionable §  Getting physical access §  Navigation §  Special use cases o  Cab hailing o  ... Multi-device scenarios §  Consistent §  Continuous o  Single Activity Flow o  Sequenced Activity Flow §  Complementary o  Collaboration o  Control
  73. 73. Cooperations enable integration of services with „new“ devices (like cars). Or services among each other.
  74. 74. Volvo + Spotify Photo: media.volvocars.com/global/en-gb/media/photos/48255 © Volvo Car Group, Public Affairs, SE-405 31 Gothenburg. Used with permission.
  75. 75. Uber + Spotify 75 Bei der Vernetzung von Services spielen die Geräte eine Nebenrolle. Photo: flickr.com/photos/cote/15788947118
  76. 76. All devices able to connect (via Bluetooth, WiFi, LTE, NFC...) can be part of the Internet of Things.
  77. 77. Smart Keys 77Photo: flickr.com/photos/walkn/3041590472 Bluetooth tags enable findability, e.g. by Elgato or Tile
  78. 78. August Smart Lock Photo: august.com/press.html © August Home, Inc. Used with permission.
  79. 79. Zepp Photo: flickr.com/photos/trysil/5865597031
  80. 80. Deutsche Telekom + Canyon Photo: flickr.com/photos/kevinshine/10082788546
  81. 81. 81
  82. 82. How to
  83. 83. Don‘t start by asking questions like... §  How can our brand be present on device XYZ? §  Responsive Webdesign or Adaptive Templates? §  Mobile first? §  What‘s technically feasible? §  Consistent, Continuous, Complementary? 83
  84. 84. These questions have a place in the design process, but they shouldn‘t be the ones driving the decision making.
  85. 85. Start by asking basic questions §  What are the user‘s needs and goals that this product ecosystem tries to address? §  What are the main flows and use contexts? Then: Which experience approaches can best accomodate these needs within each flow? 85
  86. 86. 86
  87. 87. Think customer journey. 87 pre- event Arriving at the venue During event post- event
  88. 88. „The best multi-device experiences are those that first look at people and what they need rather than focusing on technology and what it can do. Michal Levin
  89. 89. Do what makes sense. Nobody needs Nike+ on a washing machine.
  90. 90. Conclusion
  91. 91. 91 Overview of Michal Levin‘s 3C framework Consistent Continuous Complementary The same content and features are available on multiple devices. Continuous design addresses a user flow that runs along a set of con texts, during which devices “pass the baton” to one another. Different devices complement one another – either by collaborating as a connected group, controlling one another, or both. §  Single Activity Flow §  Sequenced Activity Flow Event example: o  Agenda-centered o  People-centered §  Collaboration o  Must have o  Nice to have §  Control o  Must have o  Nice to have
  92. 92. §  Single-device design is history §  There‘s more than one way to approach multi-device experiences §  Start with user needs o  Do your research o  Think in customer journeys o  Think in use cases §  Know the capabilities and limitations of each device class and platform – both technically and conceptually 92 Take away points
  93. 93. Michal Levin O’Reilly, 2014
  94. 94. Two more chapters cover additional topics. §  Multi-Device Analytics §  Transforming Challenges 94
  95. 95. The book contains food for thought throughout. 21 Design Lessons, e.g.: §  Continuous experience can start offline §  QR supports continuity; AR provides a complementary experience §  The complexity and trade-offs behind the freedom “to do anything” 14 Discussions, e.g.: §  Educating for Continuity §  Designing for Beginner vs. Advanced Users §  The Battery-Life Challenge §  Multi-Device Experiences in the Service of Health 95
  96. 96. Further reading 96 November 2014 May 2015December 2014
  97. 97. Buy Michal‘s book! Read her book! Start with user needs!
  98. 98. :-) Stefan Freimark Senior UX Consultant E-Mail stefan.freimark@aperto.de Slideshare slideshare.net/sfreimark Twitter @freimark Aperto AG – In der Pianofabrik Chausseestr. 5 10115 Berlin www.aperto.de
  99. 99. Backup
  100. 100. 100 slideshare.net/sfreimark/mental-models-nur-folien slideshare.net/chrisdudeberlin/the-experience-is-the- message-creating-unique-airline-brand-experiences mappingexperiences.com Learn more about customer journeys
  101. 101. Image credits
  102. 102. This presentation is licensed under CC BY. You may present it in its entirety, or use parts or ideas for your own talks. Please be aware that the copyright for the template is at Aperto AG. Please be aware that images used within this presentation do not inherit the CC BY license of the presentation. Although some images are licensed under CC BY, others are licensed under CC BY-SA, and some are copyrighted and not free to use. 102 Licenses
  103. 103. Book covers 103 © O’Reilly Media, Inc. Cover designer: Randy Comer oreilly.com/catalog/9781449371241 Cover designer: Ellie Volckhausen oreilly.com/catalog/0636920030676 Cover designer: Ellie Volkhausen oreilly.com/catalog/0636920024651 Cover designer: (unknown) oreilly.com/catalog/0636920031109
  104. 104. Shutterstock pictures 104 © by Shutterstock photographers Dean Drobot www.shutterstock.com/pic-154488353 Licensed by Stefan Freimark Eugenio Marongiu www.shutterstock.com/pic-173451509 Licensed by Stefan Freimark guteksk7 www.shutterstock.com/pic-257990591 Licensed by Stefan Freimark manaemedia www.shutterstock.com/pic-135544436 Licensed by Stefan Freimark nexus 7 www.shutterstock.com/pic-251428303 Licensed by Stefan Freimark Twin Design www.shutterstock.com/pic-206326831 Licensed by Stefan Freimark
  105. 105. Flickr images 105 b Perin J-C www.flickr.com/photos/ 114382574@N05/12221680395 BY 2.0 John Benson www.flickr.com/photos/j_benson/7296569144 BY 2.0 Gabriela Pinto www.flickr.com/photos/ gabrielap93/6074460669 BY 2.0 Alexander Kaiser www.flickr.com/photos/poolie/2433764292 BY 2.0 Lokesh Dhakar www.flickr.com/photos/lokesh/4649807115 BY 2.0 Elmo Love www.flickr.com/photos/mycutelife/4734441769 BY 2.0 License information: www.creativecommons.org/licenses/by/2.0
  106. 106. Flickr images 106 b Michael Coté Screenshot of Uber app www.flickr.com/photos/cote/15788947118 BY 2.0 walknboston www.flickr.com/photos/walkn/3041590472 BY 2.0 Trysil www.flickr.com/photos/trysil/5865597031 BY 2.0 kev-shine flickr.com/photos/kevinshine/10082788546 BY 2.0 License information: www.creativecommons.org/licenses/by/2.0
  107. 107. Flickr images 107 ba smoothgroover22 www.flickr.com/photos/ smoothgroover22/13145117175 BY-SA 2.0 Robert Basic www.flickr.com/photos/robgreen/11211153914 BY-SA 2.0 Quinn Dombrowski www.flickr.com/photos/quinnanya/ 5892760393 BY-SA 2.0 Marketa www.flickr.com/photos/toffee_maky/ 7928636400 BY-SA 2.0 pr_ip Primus Inter Pares http://de.wikipedia.org/wiki/ Datei:Secondscreen_wettendass_Ipad- app.jpg BY-SA 2.0 License information: www.creativecommons.org/licenses/by-sa/2.0
  108. 108. Press images and miscellaneous images 108 © Miscellaneous photographers/artists Unknown photographer Image of Michal Levin provided by Michal Levin. Used with permission. Volvo Car Group, Public Affairs, SE-405 31 Gothenburg media.volvocars.com/global/en-gb/media/ photos/48255 Used with permission. August Home, Inc. www.august.com/press.html Used with permission. Jesse James Garrett www.jjg.net/elements/pdf/elements.pdf
  109. 109. Screenshots 109 Screenshots made by Stefan Freimark, © by respective rights holders Miles & More GmbH www.miles-and-more.com Asklepios Kliniken GmbH www.asklepios.de/hamburg/harburg/ Trello website and app, displaying board of UXcamp Europe planning team trello.com, uxcampeurope.org Omni Development, Inc. (OmniGraffle app) www.omnigroup.com/omnigraffle Reproduced by permission of the Omni Group. Eventbrite website and app, displaying a ticket for UXcamp Europe eventbrite.com, uxcampeurope.org sawrecordings1 www.youtube.com/watch?v=4v_Eb2j0vZ8 Video directed by Terry Church
  110. 110. Screenshots 110 Screenshots made by Stefan Freimark, © by respective rights holders Olympus K.K. Screenshot of companion app „Image share“, made by Wolfgang Freimark www.olympus.com Air Berlin PLC & Co. Luftverkehrs KG www.airberlin.com Smart Fabrics & Wearable Technology 2015 (conference website) www.smartfabricsconference.com
  111. 111. Screenshot of Apple Watch apps 111 Screenshots and press images © by respective rights holders WebMD, LLC. www.webmd.com Publicly available press image. Komoot GmbH www.komoot.de Used with permission. Yelp, Inc. www.yelp.com Used with permission. Lesson Nine GmbH www.babbel.com Used with permission. Omni Development, Inc. www.omnigroup.com Used with permission. Air Berlin PLC & Co. Luftverkehrs KG www.airberlin.com Used with permission.
  112. 112. Photos by Stefan Freimark 112 © Stefan Freimark Stefan Freimark Aperto business card Stefan Freimark Apple Watch at Apple Store Kurfürstendamm Stefan Freimark Amazon Kindle Paperwhite Stefan Freimark iPad mini Retina with Instapaper app icon Stefan Freimark UXcamp Europe 2014, session by Jason Mesut

×