Download - Designing Multi-Device Experiences
Die Autorin Michal Levin Senior UX Designer Google, Palo Alto @michall79
Foto verwendet mit freundlicher Genehmigung von Michal Levin
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
Foto: flickr.com/photos/smoothgroover22/13145117175
7 Mrd. Anzahl der vernetzten Geräte in 2013
Cisco Visual Networking Index: Global Media Data Traffic Forecast
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
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
Immer mehr Geräte bieten immer mehr Möglichkeiten. Und mit den Möglichkeiten steigen die Erwartungen der Nutzer.
1. Consistent
Consistent bedeutet: Die selben Inhalte und Funktionen sind auf mehreren Geräten verfügbar.
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.
2. Continuous
Continuous Design unterstützt Nutzungs-szenarien, bei denen mehrere Geräte über einen Zeitraum hinweg genutzt werden.
Single Activity Sequenced Activity
Foto: flickr.com/photos/toffee_maky/7928636400 Foto: Stefan Freimark
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).
OmniGraffle + OmniPresence Single Activity: Diagramm zeichnen
Foto: omnigroup.com/omnigraffle © The Omni Group. Reproduced by permission of the Omni Group.
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
40
Vor dem Event
Events finden
Details von Events ansehen
Für ein Event registrieren
Age
nda-
zent
rier
t Pe
rson
en-
zent
rier
t
Kollegen über ein Event informieren
Die Teilnehmer-liste ansehen
Teilnehmer notieren, die ich treffen möchte
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
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
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
3. Complementary
Bei Complementary Design ergänzen sich mehrere Geräte – entweder indem sie als Gruppe zusammenarbeiten, oder indem sie sich gegenseitig steuern.
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.
Companion-Apps für Second Screen Collaboration (nice to have)
Foto: de.wikipedia.org/wiki/Datei:Secondscreen_wettendass_Ipad-app.jpg
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.
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
Kooperationen ermöglichen die Integration von Services mit „neuen“ Geräten wie z.B. vernetzten Fahrzeugen.
Volvo + Spotify
Foto: media.volvocars.com/global/en-gb/media/photos/48255 © Volvo Car Group, Public Affairs, SE-405 31 Gothenburg. Used with permission.
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?
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?
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 „
¢ 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
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“.
:-)
Stefan Freimark Creative Director (Konzept)
E-Mail [email protected] Slideshare slideshare.net/sfreimark Twitter @freimark
interactive tools GmbH Agentur für digitale Medien Schönhauser Allee 12 10119 Berlin
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
Buch-Cover © O’Reilly Media, Inc.
80
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
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
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
Flickr-Fotos b
83
Maurizio Pesce www.flickr.com/photos/pestoverde/18634339405 BY 2.0
Lizenz-Information: www.creativecommons.org/licenses/by/2.0
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
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
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
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
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.
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
:-)
Stefan Freimark Creative Director (Konzept)
E-Mail [email protected] Slideshare slideshare.net/sfreimark Twitter @freimark
interactive tools GmbH Agentur für digitale Medien Schönhauser Allee 12 10119 Berlin