Designing Multi-Device Experiences

Designing Multi-Device Experiences

Foto: Stefan Freimark

@freimark

Foto: flickr.com/photos/j_benson/7296569144

slideshare.net/sfreimark

Foto: flickr.com/photos/114382574@N05/12221680395

Michal Levin O’Reilly, 2014

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

Warum ist Multi-Device ein Thema?

Foto: flickr.com/photos/gabrielap93/6074460669

Foto: shutterstock.com/pic-154488353




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


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.

Single-Device-Design ist Geschichte. !

Welche Ansätze gibt es für Multi-Device Design?

20

Drei Ansätze für Multi-Device Design

1 Consistent

2 Continuous

3 Complementary

1. Consistent

Consistent bedeutet: Die selben Inhalte und Funktionen sind auf mehreren Geräten verfügbar.

Schweizstrom Full-responsive Website

Miles & More Account-Bereich

Trello Cross-Plattform-Anwendung

Consistent heißt nicht identisch. !

Foto: flickr.com/photos/quinnanya/5892760393

Optimierung für Devices vs.

konsistentes Ökosystem

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

Foto: flickr.com/photos/toffee_maky/7928636400

Single Activity Sequenced Activity

Foto: flickr.com/photos/toffee_maky/7928636400 Foto: Stefan Freimark


Single Activity

Single Activity


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).

Amazon Kindle Single Activity: Lesen


OmniGraffle + OmniPresence Single Activity: Diagramm zeichnen

Foto: omnigroup.com/omnigraffle © The Omni Group. Reproduced by permission of the Omni Group.

Sequenced Activity


Sequenced Activity


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

Eventbrite Continuous (Sequenced activity flow)

Wie könnte das Beispiel von Eventbrite erweitert werden? ?

Welche Features unter-stützen Nutzer (über die Zeit hinweg)? ?

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

Das geübte Auge erkennt eine Customer Journey. ;-)

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.

Scrabble Party Play Collaboration (must have)

Foto: flickr.com/photos/lokesh/4649807115

Companion-Apps für Second Screen Collaboration (nice to have)

Foto: de.wikipedia.org/wiki/Datei:Secondscreen_wettendass_Ipad-app.jpg

Hexler TouchOSC Control (must have)

Video: youtube.com/watch?v=4v_Eb2j0vZ8

Companion-Apps für Digitalkameras Control (nice to have)

50 Foto: Wolfgang Freimark

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.

Was bringt die (nahe) Zukunft?


§  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

OmniFocus

Multi-Device-Szenarien Consistent

Multi-Device-Szenarien Continuous (Single activity flow)

Yelp

Multi-Device-Szenarien Continuous (Sequenced activity flow)

Airberlin

Multi-device scenarios Complementary (Control)

Foto: flickr.com/photos/mycutelife/4734441769

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.

Alle Geräte mit Bluetooth, WLAN, LTE, NFC... können Teil des Internet of Things werden.

Smart Keys Bluetooth-Tags ermöglichen Auffindbarkeit

61 Foto: Stefan Freimark

Sensoren

Foto: flickr.com/photos/warrenski/2650846652

Neues Foto (Sensoren)

Google Jacquard

Foto: flickr.com/photos/pestoverde/18634339405

Wie geht‘s?

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?

Diese Fragen haben ihre Berechtigung im Design-Prozess – aber nicht am Anfang. !

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?

Wie passt das zu Ihren Produkten und Services? ?

Denken Sie in User Journeys!

Vor dem Event Ankunft

Während des

Events

Nach dem Event

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 „

Zusammenfassung

¢  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

Michal Levin O’Reilly, 2014

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“.

Weitere Buchempfehlungen

76

November 2014 May 2015 December 2014

? ? ?

:-)

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

Bildnachweis

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