Vortrag von Wolfram Nagel (digiparden GmbH) zum Thema "Multiscreen Experience Design" auf der Usability Professionals Konferenz 2012 in Konstanz. Die Gerätelandschaft wird immer dynamischer und fragmentierter. Viele Anwender werden zukünftig mehrere verschiedene Endgeräte (gleichzeitig) benutzen. Deshalb müssen Informationen auf möglichst allen (relevanten) Screens und Ausgabekanälen verfügbar sein. Das wiederum bedeutet, dass jedes Projekt generell für mehrere Screens und Ausgabekanäle gedacht und konzipiert werden muss, um dem Anwender eine möglichst „fließende Multiscreen Experience“ zu bieten. Der Vortrag stellt Prinzipien, Muster und Empfehlungen vor, die man bei der Konzeption von Multiscreen Projekten berücksichtigen sollte. Zwei Schwerpunkte des Vortrags sind Content- und Informationsmanagement für verschiedene Screens, sowie Kommunikation und Nutzung von Informationen auf mobilen Endgeräten.

1. Multiscreen Experience Design
(Projektvorstellung von Wolfram Nagel, Usability Professionals, 12.09.2012)
Der Vortrag und das Projekt werden freundlicherweise unterstützt von der digiparden GmbH.

2. Wolfram Nagel
Head of Design / digiparden GmbH
Konzeption, Strategie und Beratung
Co-Initiator Design Methoden Finder
www.designmethodenfinder.de
E-Mail: wn@digiparden.de
Web: http://about.wolframnagel.com
Twitter: @wolframnagel

3. digiparden GmbH
Softwareentwicklung, Content Management,
Beratung, Philosophy of Data, Content Strategy,
Next Generation Information Experience
Web: www.digiparden.de
Twitter: @digiparden

4. Multiscreen
Experience
Design
Konzeption und Strategieentwicklung
von Multiscreen Projekten Twitte
@ w o lf r:
ra m n a
#Mult ge l
i s c re e
#MuC n
Projektvorstellung 2012
#gUPA
Usability Professionals 2012, 12. September 2012 12
Referent: Wolfram Nagel, digiparden GmbH
Eigenständiges Projekt auf Basis der Master-Thesis von W. Nagel und V. Fischer

5. Status quo

6. We are a nation
of multiscreeners.
Most of media time today
is spent in front of a
screen.
Google Studie 2012 (bit.ly/ggl12)

7. Laptop Smartphone
Tablet TV
Digitale Gesellschaft (2012): Zunehmende Gerätefragmentierung und Parallelnutzung. Informationen muss
man zukünftig für verschiedene Screens anbieten. Vier Geräteklassen stehen im Fokus.

8. Herausforderungen
> Fragmentierter Tagesablauf
> Nutzungsverhalten
> Multiscreener*
> Multiscreen Services
* User, die ständig mit irgendeinem Gerät online sind und zwischen mehreren Bildschirmen wechseln.
Nach einer Microsoft-Studie lebten bereits 2010 (!) rund 20 Mio. Multiscreener in Europa (bit.ly/mams2010).

9. Einflussfaktoren
1) Device / Screen
2) Benutzer
3) Nutzungskontext
Drei relevante Faktoren für eine medien- und plattformübergreifende Content Strategy

10. Multiscreen
Experience
VIER SCREENS NUTZER (TYPEN) NUTZUNGSKONTEXT KONZEPTION
UND STRATEGIE
Muster, Empfehlungen und Methoden, die man bei der Konzeption von (Multiscreen) Projekten
berücksichtigen sollte. Das Toolkit besteht aus vier Themenblöcken.

11. Multiscreen
> Eine Multiscreen Anwendung ist mit verschiedenen
Endgeräten nutzbar und somit Cross Device-fähig.
> In einem Multiscreen Szenario werden mehrere
Endgeräte oder Bildschirme (und damit auch
Informationsangebote) gleichzeitig genutzt.
Ausführlich: http://wnagel.posterous.com/multiscreen-definition-wikipedia-entwurf (bit.ly/msxdefblog)

12. Vier Screens

13. Geräteklassen
> Nutzungskontext
> Interaktion
> Haupt-Eingabemethode*
> Durchschnittliche Displaygröße
> Typische Entfernung
* z. B.: Fernbedienung, Gesten, Maus, Tastatur, (Multi-)Touch, Sensoren, Ziffernblock, Minitastatur

14. Entfernung User < – Screen
–>
10 – 30 cm
30 – 50 cm
1m
3m

15. Screens kombinieren
Es gibt verschiedene Möglichkeiten mehrere Endgeräte bzw. Screens miteinander zu kombinieren.
*Die Muster basieren auf den Multiscreen Patterns von Precious Design Studio aus Hamburg.

16. NUTZER (TYPEN)

17. People use any platform
to do anything.
Giles Colborne
http://www.cxpartners.co.uk/cxblog/mobile-app-or-mobile-web/
http://www.cxpartners.co.uk/cxblog/mobile-app-or-mobile-web/

18. NUTZER VERSTEHEN
> Tagesabläufe und Device Touchpoints
> Umfelder, Motive und Bedürfnisse
> Relevante Personas identifizieren
> Device Priorität abschätzen
> Für relevante/wichtigste Geräte gestalten

19. Personas
Die potentiellen Anwender der Digitalen Gesellschaft (archetypische Personas)

20. Die Digitale Gesellschaft
Verteilung der Bevölkerung 2011
(Prozentualer Anteil)
5
21 12
28 7
26
Die Persona-Archetypen basieren auf den Nutzertypen aus der Studie »D21 – Die Digitale Gesellschaft«.
(Quelle: http://www.initiatived21.de/publikationen)

21. Personas der
Digitalen Gesellschaft
> Digitale Außenseiter
> Gelegenheitsnutzer
> Berufsnutzer
> Trendnutzer
> Digitaler Profi
> Digitale Avantgarde
Fokus auf Medienaffinität, Gerätenutzung, Nutzungskontext und Nutzerbedürfnissen

22. Trendnutzer
»Neue Geräte besitze ich meistens
als Erster. Ich weiß auch schon
was mein nächstes Smartphone
wird. Ein Leben ohne Facebook ist
unvorstellbar – alle meine Freunde
sind dort.«
Chris Kulig | 35 Jahre, ledig | Eventmanager, Mittlere Reife und Ausbildung

23. Chris Kulig | Tagesablauf (als Fließtext und Touchpoint-Matrix)

24. Extravanganz Impulsivität Rebellion
Kreativität Risikofreude
Mut Sieg
Individualismus Kampf Macht
Spontanität Ruhm
Spaß Kunst Abwechslung Autonomie
Freiheit Elite
Neugier Durchsetzung
Ehre
Unterhaltung Status Leistung
Humor
Effizienz
Leichtigkeit Fleiß Ehrgeiz
Fantasie Hartnäckigkeit
Funktionalität
Erholung Toleranz
Offenheit Ordnung Logik Präzision
Genuss
Poesie Flexibilität Gerechtigkeit Disziplin
Träumen
Herzlichkeit Gehorsamkeit Moral Pflicht
Entspannung
Sinnlichkeit
Vertrauen Freundschaft Hygiene
Askese
Treue Sauberkeit Sparsamkeit
Familie
Geselligkeit Geborgenheit Verlässlichkeit
Gesundheit
Natur Heimat Tradition Qualität
Nostalgie Sicherheit
Chris Kulig | Motive und Bedürfnisse (Limbic Map: http://www.nymphenburg.de/limbic-map.html)

25. Chris Kulig, Trendnutzer | Wohnung und privates Umfeld

26. Nutzungs-
kontext

27. Nutzungskontext
s
du
Si
o
sm
tu
ati
ng
o
Nutzu
n
Umfeld
Der Nutzungskontext wird neben dem Anwender und dem verwendeten Endgerät durch die Parameter
Nutzungsmodus, Situation und Umfeld beeinflusst.

28. Lean Back Modus
Der Anwender ist vorwiegend entspannt und passiv (temporäre Interaktion / lässt sich berieseln).

29. Öffentlicher Raum
Öffentlicher Raum ist grundsätzlich für jedermann zugänglich und nicht privat.

30. Sonderfall !!!

31. Mobiler
Nutzungs-
kontext

32. http://www.flickr.com/photos/lexnger/4596784697/ (Foto von Alexa Clark)

33. http://www.flickr.com/photos/tomschenkenberg/4393981503/ (Foto von Tom Schenkenberg)

34. http://www.flickr.com/photos/velovotee/5493428527/ (Foto von » velovotee«)

35. Quelle: engadget (http://www.engadget.com/2010/09/29/exclusive-vws-terminal-mode-prototype-has-a-nokia-n97-at-the-h/)

36. Quelle: Handy-Tests (http://www.handy-tests.net/27188-mercedes-benz-neue-a-klasse-mit-siri-unterstuetzung)

37. Verhaltensmuster
> Micro-tasking
> Wiederholend / Statusupdate
> Langeweile / Ablenkung / Freizeit
> Lokal / ortsbezogen
> Dringend
Typische Interaktions- und Verhaltensmuster im mobilen Nutzungskontext
Quellen: Josh Clark (oreil.ly/clarktapworthy) und Google Mobile UX Strategy (bit.ly/googlemobileux)

38. Mobiler Nutzungskontext
> Mobile Situation ≠ mobiler Nutzungskontext
> Unvorhersehbar / kann überall auftreten
> Sonder-Sonderfall »Automotive«
> Unterschiedliche Bedürfnisse
> Voller Funktionsumfang

39. Don‘t cut content or
features just because
people happen to be on
a small screen.
Cennydd Bowles
https://twitter.com/#!/globalmoxie/status/192268677305999361
http://www.cxpartners.co.uk/cxblog/mobile-app-or-mobile-web/

40. Einflussfaktoren
> Screen
> Benutzer
> Nutzungskontext
Drei Faktoren als Basis für Multiscreen Konzepte und Strategien

41. KonzeptION
und strategie

42. Mobile vs Desktop
Verkaufszahlen Smartphones vs. PCs
(Statistik und Prognose)
Smartphones
PCs
2005 2006 2007 2008 2009 2010E 2011E 2012E 2013E
Smartphone Verkaufszahlen überholen PCs. Gleiches gilt für die Internetnutzung.
Zunehmende Bedeutung mobiler Endgeräte. via http://bkaprt.com/mf/4

43. Mobile First
Für das wichtigste Gerät zuerst entwickeln. Kleinster Screen zwingt zur Strukturierung der Informationen.
(Luke Wroblewski: Mobile First, A Book Apart – http://bkaprt.com/mf)

44. Thinking »one eyeball,
one thumb« forces you to
simplify mobile designs.
Luke Wroblewski
Autor von Mobile First

45. SimultanNutzung
sehr häufig
k.A.
oft
gelegentlich
nie
selten
Studie (Dezember 2011): Jeder zweite Fernsehzuschauer surft parallel zum Fernsehen im Internet.
(http://bit.ly/tvonlineparallel2011)

46. Parallele, ergänzende Zusatzinformationen am zweiten Screen.
(http://www.designbynotion.com/metamirror-next-generation-tv)

47. Social TV
User können während dem Fernsehen miteinander kommunizieren und sich über eine Sendung unterhalten
(z.B. Couchfunk, TunedIn). In Social TV-Konzepten wird eine Familiensituation emuliert.

48. Device Shifting
Device Shifting: Beispiel »Apple AirPlay«
(Bildmaterial: Copyright © 2012 Apple Inc.)

49. Device Shifting
> Beliebige Geräte nutzen
> Informationen auf bevorzugtem
Device darstellen
> Passend zum Kontext
> Flexible Informationsaufnahme
(Watch / Read Later)
Die Anzeige von Inhalten oder Informationen wird von einem auf ein anderes Gerät verschoben. Die Darstellung
wird zwischen den beteiligten Screens umgeschaltet.

50. Synchronisation
Dropbox synchronisiert geräteübergreifend Dateien zwischen verschiedenen Rechnern und Benutzern.
Über eine Schnittstelle können auch andere Applikationen den Service nutzen (z.B. iAWriter und Plaintext).

51. Synchronisation
> geräteübergreifende Daten
> Interoperabilität
> Unabhängigkeit von Gerät,
Zeitpunkt und Ort
> Abgleich von Daten(status)
> Cloud Computing / Data Sharing
> Datenschutz
> Connectivity (Funklöcher, etc.)
Informationen und Daten geräteübergreifend synchron und auf dem gleichen Stand halten

52. Fluid Experience
Der Video on Demand Service Netflix sieht geräteübergreifend ähnlich aus und funktioniert auch ähnlich.
Nutzt Erkenntnisse aus TV-Interface (Content = Interface).

53. Fluid Experience
> Interface, Funktion, Interaktion
sollten kohärent sein
> Responsive Design
> Individuelle Geräteeigenschaften
> Native Experience
> Plattform- und markenkonform
> Content Availability
> Content First
Ein Informationsangebot sollte auf jedem Screen ähnlich aussehen und funktioneren (Fluid Experience).
Layouts und (!) Inhalte müssen sich dynamisch und flexibel anpassen (Responsive Design).

54. Smart Content
Open API von npr: »Create Once, Publish Everywhere« (http://bit.ly/nprCOPE)

55. Smart Content
> Strukturierte Informationen
> Granulare Daten
> Content like water
> Zentrale Contentpflege
> Backend / CMS Workflows
> Content Availability
> Open Content, API, Metadata
> Neue Geschäftsmodelle
Je granularer die Inhalte sind, desto flexibler lassen sie sich geräteübergreifend einsetzen und publizieren.

56. Metadata is the new art
direction.
Ethan Resnick, @studip101

57. Mashability
Qwiki und Storify nutzen Schnittstellen anderer Services um verschiedene Inhalte (Text, Bild, Video) zu einem
neuen Informationspaket zu aggregieren.

58. Samsung Smart TV: Apps (tagesschau.de, YouTube, Facebook), Social TV und Web Browser
(http://samsung.de/de/microsites/smarttv)

59. Mashability
> Mashups
> Schnittstellen intelligent nutzen
> Aggregation
> Flexible Inhalte
> Kombinieren und synchronisieren
Plattformunabhängige und flexible Inhalte, Daten und Informationen lassen sich durch Nutzung
entsprechender Schnittstellen zu neuen mehrwertigen Services kombinieren.

60. Communification
Beispiel Nike+ mit iPhone App, Social Network-Integration, eigener Community und Gamification-Elementen.

61. Communification
> Digitale Community als Win-Win
> Kommunikationskanal
> Social Involvement
> User Generated Content
> »liken«, empfehlen, verkaufen
> Geo-Location und -Checkin
> Gamification
Soziale Vernetzung oder eine Community können ein Informationsangebot für dessen Nutzer attraktiver machen.
Anwender können Inhalte erstellen, teilen, bewerten und kommentieren.

62. Emotionality
Instagram iPhone App für Social Foto Sharing: »Ein schneller, schöner und lustiger Weg, Deine Freunde durch
Bilder an Deinem Leben teilhaben zu lassen.« (http://instagram.com)

63. Emotionality
> Psychologie
> Bedürfnisse und Motive
> Informationen emotionalisieren
> Mehrwert bieten
> Alle Touchpoints relevant
> Spielelemente
> Soziale Komponenten
Services sind emotional ansprechender, wenn sie Spaß machen, einen gerätefragmentierten Tagesablauf
unterstützen und eine fließende Multiscreen Experience bieten.

64. Technische Herausforderungen
> Desktop vs Mobile / Web vs Native
> Exakte Erkennung der Geräteklasse
> Media Queries* für optimale Layout-Anpassung
> Interaktion (Hover, Click, Swipe, etc.)
> Unterstützung aktueller Webtechnologien
> Plattform-Eigenheiten
> Effiziente und breitgefächerte Testumgebung
*Responsive Layout Beispiele unter: http://mediaqueri.es

65. Zusammenfassung
> Multiscreen ist Pflicht
> Screens und Kombinationsmöglichkeiten
> Unterschiedliche Nutzungskontexte
> Flexible und dynamische Layouts und (!) Inhalte
> Multiscreen-fähige Daten
> Datensicherheit und -verbindungen
> Passende Content Management Workflows
> Fluid Experience
> Muster oder Toolkit als Hilfestellung

66. Ausblick
> Publikation (Dezember 2012)
> Website / Plattform (in Planung)
> Artikel im Tagungsband
> Noch mehr Endgeräte und Screens
> Internet der Dinge
Mehr Infos: www.multiscreen-experience-design.com

67. A part of Multi-device
strategy is simply
embracing the uncertainty.
Josh Clark
https://twitter.com/#!/globalmoxie/status/192276891913297920

68. Vielen Dank!

69. Informationen
Multiscreen Experience
Projekt von Wolfram Nagel und Valentin Fischer
Web: www.multiscreen-experience-design.com
Wolfram Nagel
Mail: wn@digiparden.de
Web: http://about.wolframnagel.com
Twitter: @wolframnagel
digiparden GmbH
Web: www.digiparden.de
Twitter: @digiparden