Designing Multi-Device Experiences

2.042 Aufrufe

Veröffentlicht am

Vor 10 Jahren war ein PC im Haushalt normal, heute geht der Trend zum Dritt-Device: PC, Smartphone, Tablet. Und in Unternehmen wird BYOD selbstverständlich.
Mit den Möglichkeiten steigen auch die Erwartungen: Ihre Kunden erwarten, dass sie mit mehreren Geräten auf Inhalte und Funktionen zugreifen können. Responsive Webdesign ist da nur ein erster Schritt. Unternehmen die darüber hinausgehen, haben die Nase vorn. Stefan Freimark stellt in seinem Vortrag das 3C-Modell von Michal Levin vor: Consistent, Continuous und Complementary sind hilfreiche Blickwinkel, um über Multi-Device Experiences zu sprechen, um sie zu konzipieren und um sie umzusetzen.

Veröffentlicht in: Internet
3 Kommentare
7 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
2.042
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
122
Aktionen
Geteilt
0
Downloads
50
Kommentare
3
Gefällt mir
7
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Designing Multi-Device Experiences

  1. 1. Designing Multi-Device Experiences
  2. 2. Foto: Stefan Freimark
  3. 3. @freimark Foto: flickr.com/photos/j_benson/7296569144
  4. 4. slideshare.net/sfreimark Foto: flickr.com/photos/114382574@N05/12221680395
  5. 5. Michal Levin O’Reilly, 2014
  6. 6. Die Autorin Michal Levin Senior UX Designer Google, Palo Alto @michall79 Foto verwendet mit freundlicher Genehmigung von Michal Levin
  7. 7. Themen Warum ist Multi-Device ein Thema? Welche Ansätze gibt es für Multi-Device Design? Was bringt die (nahe) Zukunft? Wie geht‘s? Foto: flickr.com/photos/rvoegtli/8327407578
  8. 8. Warum ist Multi-Device ein Thema?
  9. 9. Foto: flickr.com/photos/gabrielap93/6074460669
  10. 10. Foto: shutterstock.com/pic-154488353
  11. 11. Foto: shutterstock.com/pic-173451509
  12. 12. Foto: shutterstock.com/pic-135544436
  13. 13. Foto: Stefan Freimark
  14. 14. Foto: flickr.com/photos/smoothgroover22/13145117175 7 Mrd. Anzahl der vernetzten Geräte in 2013 Cisco Visual Networking Index: Global Media Data Traffic Forecast
  15. 15. Foto: flickr.com/photos/smoothgroover22/13145117175 24 Mrd. Anzahl der vernetzten Geräte in 2020 (Schätzung) Cisco Visual Networking Index: Global Media Data Traffic Forecast
  16. 16. Foto: shutterstock.com/pic-206326831 90% von 1.611 Umfrageteilnehmern nutzen mehr als ein Gerät um eine Aufgabe zu erledigen The New Multi-screen World: Understanding Cross-platform Consumer Behavior Google, August 2012 http://services.google.com/fh/files/ misc/multiscreenworld_final.pdf
  17. 17. Immer mehr Geräte bieten immer mehr Möglichkeiten. Und mit den Möglichkeiten steigen die Erwartungen der Nutzer.
  18. 18. Single-Device-Design ist Geschichte.
  19. 19. Welche Ansätze gibt es für Multi-Device Design?
  20. 20. 20 Drei Ansätze für Multi-Device Design 1 Consistent 2 Continuous 3 Complementary
  21. 21. 1. Consistent Consistent bedeutet: Die selben Inhalte und Funktionen sind auf mehreren Geräten verfügbar.
  22. 22. Schweizstrom Full-responsive Website
  23. 23. Miles & More Account-Bereich
  24. 24. Trello Cross-Plattform-Anwendung
  25. 25. Consistent heißt nicht identisch.
  26. 26. Foto: flickr.com/photos/quinnanya/5892760393 OptimierungfürDevices vs. konsistentesÖkosystem
  27. 27. 27 Im Kern sollte die Nutzungserfahrung über verschiedene Geräte hinweg konsistent sein. Konsistente Kern- Funktionalitäten Das MVP sollte über mehrere Geräte hinweg identisch sein. Feature-Parität: Features sollten auf so vielen Geräten wie möglich verfügbar sein und so ähnlich wie möglich funktionieren. Konsistente Inhalte Content-Parität: Alle Inhalte sollten auf allen Geräten verfügbar sein. Die IA sollte möglichst identisch sein. Konsistentes “Look & Feel“ Eine gemeinsame visuelle Sprache unterstützt Wiedererkennung und Orientierung über mehrere Geräte hinweg.
  28. 28. 2. Continuous Continuous Design unterstützt Nutzungs- szenarien, bei denen mehrere Geräte über einen Zeitraum hinweg genutzt werden.
  29. 29. Single Activity Foto: flickr.com/photos/toffee_maky/7928636400
  30. 30. Single Activity Sequenced Activity Foto: flickr.com/photos/toffee_maky/7928636400 Foto: Stefan Freimark
  31. 31. Foto: flickr.com/photos/toffee_maky/7928636400 Single Activity
  32. 32. Single Activity Foto: flickr.com/photos/toffee_maky/7928636400 Beispiele: Ein Buch lesen, einen Film sehen, an einem Dokument schreiben. Solche Aktivitäten erstrecken sich typischerweise über einen längeren Zeitraum und können in verschiedenen Kontexten stattfinden (die Umgebung ändert sich, die Aktivität bleibt jedoch die selbe).
  33. 33. Amazon Kindle Single Activity: Lesen Foto: Stefan Freimark
  34. 34. OmniGraffle + OmniPresence Single Activity: Diagramm zeichnen Foto: omnigroup.com/omnigraffle © The Omni Group. Reproduced by permission of the Omni Group.
  35. 35. Sequenced Activity Foto: Stefan Freimark
  36. 36. Sequenced Activity Foto: Stefan Freimark Manche Aktivitäten bestehen aus mehreren Schritten (sequences). Je länger die Aktivität, desto wahrscheinlicher... ¡  wird sie nicht in einem Rutsch erledigt (=mehrere Sessions) ¡  ändert sich die Umgebung (=wechselnde Kontexte) ¡  kann sie in kleinere Untertätigkeiten aufgeteilt werden
  37. 37. Eventbrite Continuous (Sequenced activity flow)
  38. 38. Wie könnte das Beispiel von Eventbrite erweitert werden?
  39. 39. Welche Features unter- stützen Nutzer (über die Zeit hinweg)?
  40. 40. 40 Vor dem Event Events finden Details von Events ansehen Für ein Event registrieren Agenda- zentriert Personen- zentriert Kollegen über ein Event informieren Die Teilnehmer- liste ansehen Teilnehmer notieren, die ich treffen möchte
  41. 41. Ankunft Sessions aus dem Session-Plan auswählen Rechtzeitig ankommen §  Wegbeschreibung §  ÖPNV-Haltestellen in der Nähe §  Parkplätze Einchecken Herausfinden, wer schon da ist Leute, die ich kenne? Leute, die ich mir notiert habe? Personen-zentriert Agenda-zentriert
  42. 42. Während des Events Sessions aus dem Session-Plan auswählen An Sessions teilnehmen §  Titel und Inhalt §  Infos zum Referenten Pausen machen §  Optionen (Cafeteria, Dachterrasse) §  Zeit bis zur Pause §  “Pause bald zu Ende”-Hinweis An Abendveranstaltung teilnehmen §  Was, wann, wo §  Wegbeschreibung Neue Kontakte knüpfen §  Neue Leute treffen (v.a. die, mit denen ich sprechen möchte) §  Bekannte wiedersehen §  Kontaktdaten austauschen An Sessions oder sozialen Events teilnehmen §  Wer geht hin? §  Eisbrecher (z.B. gemeinsame Interessen, Hintergrundinfos zu Sprechern) Personen-zentriert Agenda-zentriert
  43. 43. Nach dem Event Materialien des Events nachbereiten §  Mitschriften §  Sketchnotes §  Folien §  Videos Fotos/Videos des Events posten Eine Rückschau für die Kollegen vorbereiten Mit Teilnehmern in Kontakt bleiben Personen-zentriert Agenda-zentriert
  44. 44. Das geübte Auge erkennt eine Customer Journey. ;-)
  45. 45. 3. Complementary Bei Complementary Design ergänzen sich mehrere Geräte – entweder indem sie als Gruppe zusammenarbeiten, oder indem sie sich gegenseitig steuern.
  46. 46. 46 Collaboration Geräte arbeiten als miteinander verbundene Gruppe Control Ein Gerät kontrolliert ein anderes Gerät (oder mehrere) Must have Scrabble Party Play Hexler TouchOSC Nice to have Companion-Apps für Second Screen Companion-Apps für Digitalkameras Mehrere Geräte können sich gegenseitig ergänzen (sie sind zueinander komplementär). Die teilnehmenden Geräte ermöglichen erst die Nutzungserfahrung. Ein weiteres Gerät kann die UX verbessern, ist aber für die eigentliche Tätigkeit nicht erforderlich.
  47. 47. Scrabble Party Play Collaboration (must have) Foto: flickr.com/photos/lokesh/4649807115
  48. 48. Companion-Apps für Second Screen Collaboration (nice to have) Foto: de.wikipedia.org/wiki/Datei:Secondscreen_wettendass_Ipad-app.jpg
  49. 49. Hexler TouchOSC Control (must have) Video: youtube.com/watch?v=4v_Eb2j0vZ8
  50. 50. Companion-Apps für Digitalkameras Control (nice to have) 50Foto: Wolfgang Freimark
  51. 51. 51 Collaboration Geräte arbeiten als miteinander verbundene Gruppe Control Ein Gerät kontrolliert ein anderes Gerät (oder mehrere) Must have Scrabble Party Play Komplementär zu eigener Software Hexler TouchOSC Komplementär zu Soft-/Hardware von anderen Herstellern Nice to have Companion-Apps für Second Screen Komplementär zu eigenem Service Companion-Apps für Digitalkameras Komplementär zu eigener Hardware „Complementary“ kann auch auf andere Weise verstanden werden.
  52. 52. Was bringt die (nahe) Zukunft?
  53. 53. Foto: shutterstock.com/pic-257990591 §  Zugang zu Informationen o  location-unaware o  location-based §  Notifications/Hinweise o  „FYI“, z.B. terminbasierte Hinweise §  Authentifizierung für physischen Zugang §  Navigation §  Spezielle Anwendungsfälle o  Taxi rufen o  ... §  Consistent §  Continuous o  Single Activity Flow o  Sequenced Activity Flow §  Complementary o  Collaboration o  Control Single-Device-Szenarien Multi-Device-Szenarien
  54. 54. OmniFocus Multi-Device-Szenarien Consistent
  55. 55. Multi-Device-Szenarien Continuous (Single activity flow) Yelp
  56. 56. Multi-Device-Szenarien Continuous (Sequenced activity flow) Airberlin
  57. 57. Multi-device scenarios Complementary (Control) Foto: flickr.com/photos/mycutelife/4734441769
  58. 58. Kooperationen ermöglichen die Integration von Services mit „neuen“ Geräten wie z.B. vernetzten Fahrzeugen.
  59. 59. Volvo + Spotify Foto: media.volvocars.com/global/en-gb/media/photos/48255 © Volvo Car Group, Public Affairs, SE-405 31 Gothenburg. Used with permission.
  60. 60. Alle Geräte mit Bluetooth, WLAN, LTE, NFC... können Teil des Internet of Things werden.
  61. 61. Smart Keys Bluetooth-Tags ermöglichen Auffindbarkeit 61Foto: Stefan Freimark
  62. 62. Sensoren Foto: flickr.com/photos/warrenski/2650846652
  63. 63. Google Jacquard Foto: flickr.com/photos/pestoverde/18634339405
  64. 64. Wie geht‘s?
  65. 65. Einige Fragen sollten NICHT zu Beginn gestellt werden. ¢  Wie kann unsere Marke auf dem Gerät XYZ präsent sein? ¢  Responsive Webdesign oder adaptive Templates? ¢  Mobile First? ¢  Was ist technisch machbar? ¢  Consistent, Continuous, Complementary?
  66. 66. Diese Fragen haben ihre Berechtigung im Design- Prozess – aber nicht am Anfang.
  67. 67. Beginnen Sie mit grundlegenden Fragen. ¢  Welche Nutzerbedürfnisse sollen durch das Produkt- Ökosystem bedient werden? ¢  Welches sind die wichtigsten Nutzungsszenarien und Usecases? Danach: Welche der drei Ansätze können diese Bedürfnisse am besten bedienen?
  68. 68. Wie passt das zu Ihren Produkten und Services?
  69. 69. Denken Sie in User Journeys! Vor dem Event Ankunft Während des Events Nach dem Event
  70. 70. 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 „
  71. 71. Zusammenfassung
  72. 72. ¢  Single-Device-Design ist Geschichte. ¢  Es gibt mehr als einen Ansatz zur Gestaltung von Multi- Device-Experiences ¢  Beginnen Sie mit den Nutzerbedürfnissen ¢  Machen Sie sich mit den Möglichkeiten und Beschränkungen jeder Geräteklasse und Plattform vertraut (sowohl technisch als auch konzeptionell) 73 Take away points
  73. 73. Michal Levin O’Reilly, 2014
  74. 74. 21 Design Lessons, z.B.: ¢  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, z.B.: ¢  Educating for Continuity ¢  Designing for Beginner vs. Advanced Users ¢  The Battery-Life Challenge ¢  Multi-Device Experiences in the Service of Health Das Buch enthält jede Menge „Food for thought“.
  75. 75. Weitere Buchempfehlungen 76 November 2014 May 2015December 2014
  76. 76. :-) Stefan Freimark Creative Director (Konzept) E-Mail stefan.freimark@interactive-tools.de Slideshare slideshare.net/sfreimark Twitter @freimark interactive tools GmbH Agentur für digitale Medien Schönhauser Allee 12 10119 Berlin
  77. 77. Bildnachweis
  78. 78. Diese Präsentation ist als CC-BY 4.0 lizenziert. Sie können sie sowohl in ihrer Gesamtheit verwenden, als auch Teile oder Ideen daraus für eigene Vorträge nutzen. Bitte beachten Sie, dass die Bilder in dieser Präsentation nicht die CC-BY- Lizenz der Präsentation erben. Auch wenn manche Bilder unter CC-BY lizenziert sind, gilt für manche Bilder die CC-BY-SA-Lizenz. Einige Bilder sind urheberrechtlich geschützt und dürfen nicht frei verwendet werden. 79 Lizenzen
  79. 79. Buch-Cover © O’Reilly Media, Inc. Cover-Designer: Randy Comer oreilly.com/catalog/0636920027089 Cover-Designer: Ellie Volckhausen oreilly.com/catalog/0636920030676 Cover-Designer: Ellie Volkhausen oreilly.com/catalog/0636920024651 Cover-Designer: Ellie Volckhausen oreilly.com/catalog/0636920031109
  80. 80. Shutterstock-Fotos © bei den jeweiligen Fotografen 81 Dean Drobot www.shutterstock.com/pic-154488353 Lizenziert von Stefan Freimark Eugenio Marongiu www.shutterstock.com/pic-173451509 Lizenziert von Stefan Freimark guteksk7 www.shutterstock.com/pic-257990591 Lizenziert von Stefan Freimark manaemedia www.shutterstock.com/pic-135544436 Lizenziert von Stefan Freimark nexus 7 www.shutterstock.com/pic-251428303 Lizenziert von Stefan Freimark Twin Design www.shutterstock.com/pic-206326831 Lizenziert von Stefan Freimark 81
  81. 81. Flickr-Fotos b 82 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 Lokesh Dhakar www.flickr.com/photos/lokesh/4649807115 BY 2.0 Lizenz-Information: www.creativecommons.org/licenses/by/2.0 Rosmarie Voegtli www.flickr.com/photos/rvoegtli/8327407578 BY 2.0 Elmo Love www.flickr.com/photos/mycutelife/ 4734441769 BY 2.0
  82. 82. Flickr-Fotos b 83 Maurizio Pesce www.flickr.com/photos/pestoverde/ 18634339405 BY 2.0 Lizenz-Information: www.creativecommons.org/licenses/by/2.0
  83. 83. Flickr-Fotos ba 84 smoothgroover22 www.flickr.com/photos/ smoothgroover22/13145117175 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 Warren Rohner www.flickr.com/photos/warrenski/ 2650846652 BY-SA 2.0 Lizenz-Information: www.creativecommons.org/licenses/by-sa/2.0
  84. 84. Pressebilder und verschiedene Bilder © 85 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
  85. 85. Screenshots Screenshots angefertigt von Stefan Freimark © bei den jeweiligen Rechteinhabern 86 Miles & More GmbH www.miles-and-more.com EBLD Schweiz Strom GmbH www.schweizstrom.de Trello-Wwebsite und App, mit Anzeige des Boards des UXcamp Europe Planungsteams trello.com, uxcampeurope.org Omni Development, Inc. (OmniGraffle app) www.omnigroup.com/omnigraffle Eventbrite website and app, mit Anzeige eines Tickets für das UXcamp Europe eventbrite.com, uxcampeurope.org sawrecordings1 www.youtube.com/watch?v=4v_Eb2j0vZ8 Video directed by Terry Church
  86. 86. Screenshots Screenshots angefertigt von Stefan Freimark © bei den jeweiligen Rechteinhabern 87 Olympus K.K. Screenshot der Companion-App „Image share“, angefertigt von Wolfgang Freimark www.olympus.com Air Berlin PLC & Co. Luftverkehrs KG www.airberlin.com
  87. 87. Screenshot of Apple Watch apps Screenshots und Pressebilder: © bei den jeweiligen Rechteinhabern 88 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.
  88. 88. Fotos von Stefan Freimark © Stefan Freimark 89 Stefan Freimark interactive tools Visitenkarte Stefan Freimark Apple Watch im Apple Store Kurfürstendamm Stefan Freimark Amazon Kindle Paperwhite Stefan Freimark UXcamp Europe 2014, Session vonJason Mesut Stefan Freimark Bluetooth-Tag „Tile“ als Schlüsselanhänger
  89. 89. :-) Stefan Freimark Creative Director (Konzept) E-Mail stefan.freimark@interactive-tools.de Slideshare slideshare.net/sfreimark Twitter @freimark interactive tools GmbH Agentur für digitale Medien Schönhauser Allee 12 10119 Berlin

×