Vorstellung des Projekts "Multiscreen Experience" beim Season Opening der IxDA Berlin am 11. Januar 2012. Die Gerätelandschaft wird immer dynamischer und fragmentierter. Generell muss zukünftig jedes Projekt für mehrere Screens und Ausgabekanäle gedacht und konzipiert werden. Wolfram stellt in dem Vortrag Prinzipien, Muster und Empfehlungen vor (es sind keine Patentrezepte!), die Hilfestellung bei der Konzeption von Multiscreen Projekten bieten sollen. Er beschreibt die Kombinationsmöglichkeiten der verschiedenen Screens, empfiehlt unterschiedliche konzeptionelle Ansätze, beschreiben die potentiellen Anwender und geht auf die Parameter für den Nutzungskontext ein. In dem Vortrag stellt er sowohl die Entstehung des Projekts als auch neue Ansätze und Muster vor.

1. Medien- und plattformübergreifendes
Informationsmanagement
für die Digitale Gesellschaft
Projektvorstellung
Season Opening IxDA Berlin, 11. Januar 2012
Referent: Wolfram Nagel, Master of Arts (M.A.)
Das Projekt basiert auf der Master-Thesis von W. Nagel und V. Fischer

2. Wolfram nagel
Designer (UX/CC) / 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: @johnokraut

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

4. Projektmotivation
> Beschäftigung mit dem Thema* seit 2005
> Geräte- und ortsunabhängige Workflows
> Informationsmanagement
> Mobile Devices (anfangs PDA und Feature Phone)
> Software as a Service, Web-Applikationen
> Diplomarbeit 2006
> Master-Thesis 2011
* Die Begriffe »Multi Device« und »Multiscreen« haben sich zwischen 2009 und 2010 etabliert.

5. Diplomarbeit 2006: Mobile Daten auf dem PDA

6. Diplomarbeit 2006: »Multiscreen« Workflow und (mehr oder weniger) geräteunabhängige Daten

7. Digitale Gesellschaft (2012): Zunehmende Gerätefragmentierung und Parallelnutzung

8. Informationen muss man zukünftig für verschiedene Screens anbieten. Vier Geräteklassen stehen im Fokus.

9. multiscreen
exPerience
MULTISCREEN KONZEPT MUSTER PERSONAS NUTZUNGSKONTEXT
MUSTER DER DIGITALEN
GESELLSCHAFT
Prinzipien, Muster und Empfehlungen für das Informationsmanagement in der Digitalen Gesellschaft. Das
Toolkit besteht aus vier Themenblöcken und wird im Folgenden auszugsweise vorgestellt.

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

11. Multiscreen
Muster

12. Muster Aufbau
Problemstellung
Lösungsvorschläge
Beispiele

13. Multiscreen Muster
> Coherence
> Synchronisation
> Screen Sharing
> Device Shifting
> Complementarity
> Simultaneity
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.

14. multiscreen muster
> Coherence
> synchronisation
> Screen Sharing
> Device Shifting
> Complementarity
> Simultaneity
Informationen werden geräteübergreifend stets synchron und damit auf dem aktuellen und gleichen Stand
gehalten.

15. synchronisation
Dropbox ist ein Netzwerk-Dateisystem zur Synchronisation von Dateien zwischen verschiedenen Rechnern
und Benutzern. Über eine Schnittstelle können auch andere Applikationen den Service nutzen.

16. > Synchrone Datenhaltung
> Unabhängigkeit von Gerät, Zeitpunkt und Ort
> Abgleich und Aktualisierung von Daten(status)
> Informationen geräteübergreifend verfügbar
> Cloud Computing
> Data Sharing
Synchronisation

17. Multiscreen Muster
> Coherence
> Synchronisation
> Screen Sharing
> Device Shifting
> Complementarity
> Simultaneity
Die Anzeige von Inhalten oder Informationen wird von einem auf ein anderes Gerät verschoben. Die Darstellung
wird zwischen den beteiligten Screens umgeschaltet.

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

19. > Anwender kann beliebige Geräte nutzen
> Informationen auf bevorzugtem Device darstellen
> Passend zum Kontext
> Flexible Informationsaufnahme (für später
bookmarken)
Device Shifting

20. Multiscreen Muster
> Coherence
> Synchronisation
> Screen Sharing
> Device Shifting
> Complementarity
> Simultaneity
Verschiedene Endgeräte oder Informationsangebote werden parallel genutzt. Die Informationen können
sich gegenseitig ergänzen.

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

22. Internet und TV parallel
sehr häufig
k.A.
oft
gelegentlich
nie
selten
Studie (Dezember 2011): Jeder zweite Fernsehzuschauer surft parallel zum Fernsehen im Internet.
(Quelle: DigitalBarometer: IP Deutschland, TNS Emnid und W&V – http://bit.ly/tvonlineparallel2011)

23. Simultaneity
> Über 50% der TV Nutzer in Deutschland surfen
während des Fernsehens im Internet.
> Second Screen
> Social TV (z. B. Couchfunk, TunedIn)

24. > Mehrere Geräte parallel nutzen
> Zusatzinformationen auf »Second Screen«
> Mobile App mit Zusatzfunktion
> Microblogging, Chat oder Ticker als
Parallel-Stream
Simultaneity

25. Konzept
Muster

26. Konzept Muster
> Mobile First
> Adaptability
> Fluidity
> Seamless Interaction
> Context Relevance
> Extensibility
> Storyfication
> Gamification
> Communification
Empfehlungen, Herangehensweisen und Methoden, die man bei der Konzeption von (Multiscreen) Projekten
berücksichtigen sollte.

27. Konzept Muster
> Mobile First
> Adaptability
> Fluidity
> Seamless Interaction
> Context Relevance
> Extensibility
> Storyfication
> Gamification
> Communification
Aufgrund der zunehmenden Bedeutung mobiler Endgeräte zuerst für das wichtigste Gerät entwickeln.
(Luke Wroblewski: Mobile First, A Book Apart – http://bkaprt.com/mf)

28. Mobile First
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.
via http://bkaprt.com/mf/4

29. mobile first
Für das wichtigste Gerät zuerst entwickeln. Kleinster Screen zwingt zur Strukturierung der Informationen.
Beispiel »Southwest Airlines«

30. » Thinking ›one eyeball, one thumb‹ forces you
to simplify mobile designs... «
Luke Wroblewski

31. > Wichtigstes Gerät zuerst
> Bessere Strukturierung der Informationen
> Möglichkeiten mobiler Geräte für
Innovation nutzen
Mobile First

32. Konzept Muster
> Mobile First
> Adaptability
> Fluidity
> Seamless Interaction
> Context Relevance
> Extensibility
> Storyfication
> Gamification
> Communification
Layouts und Inhalte müssen sich dynamisch und flexibel an die jeweiligen Eigenschaften der verschiedenen
Endgeräte anpassen (Stichwort: Responsive Webdesign).

33. Adaptability
Beispiel: Website von Spoiled Milk (Responsive Layout), http://spoiledmilk.dk

34. > Flexible und dynamische Layouts
(Responsive Webdesign)
> Verschiedene Geräteeigenschaften
> Content Availability
> Website oder Native App?
Adaptability

35. Konzept Muster
> Mobile First
> Adaptability
> Fluidity
> Seamless Interaction
> Context Relevance
> Extensibility
> Storyfication
> Gamification
> Communification
Soziale Vernetzung oder eine Community können ein Informationsangebot für dessen Nutzer attraktiver
machen. Anwender können Inhalte erstellen, teilen, bewerten und kommentieren.

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

37. > Digitale Community als Win-Win
> Feedback- und Kommunikationskanal
> Social Involvement und User Generated Content
> Content »liken«, empfehlen, verkaufen
> Geo-Location und Geo-Checkin
> Gamification
Communification

38. 3 neue Muster

39. NEU
Smart Content
> Content First
> User Generated Content
> Fragmentierung (granulare Daten)
> Backend, das alle Interfaces bedienen kann
> Content like water
> Erinnernswerter Content/Link
> Bessere CMS Workflows
> Open Content, API, Metadata und Mashups
Je eleganter und granularer die zu publizierenden Inhalte, Daten und Informationen sind, desto flexibler
lassen sie sich geräteübergreifend einsetzen, aufbereiten und darstellen.

40. » Metadata is the new art direction. «
Ethan Resnick, @studip101

41. NEU
Mashability
> Flexible Inhalte
> Schnittstellen intelligent nutzen
> Aggregation statt proprietärer Lösung
> Clever kombinieren und synchronisieren
> Herausforderung für Journalismus und Verlage
> Mashups
Plattformunabhängige und flexible Inhalte, Daten und Informationen lassen sich durch Nutzung
entsprechender Schnittstellen zu neuen mehrwertigen Services kombinieren.

42. Qwiki ist ein Mashup aus Suchmaschine, Lexikon und Videoportal, das über entsprechende Schnittstellen
Informationen aus unterschiedlichen Quellen zu einem neuen Informationspaket aggregiert (qwiki.com).

43. about.me ist eine Plattform, auf der man Informationen von verschiedenen Online-Profilen, sozialen
Netzwerken und Websites zu einem einseitigen (one-page) Nutzerprofil zusammenführen kann.

44. Mit Storify lassen sich Informationen von beliebigen Internetseiten und sozialen Netzwerken (z.B. Tweets,
Statusmeldungen, Fotos oder Videos) zu einer neuen Geschichte kombinieren (http://www.storify.com).

45. iAWriter und Plaintext nutzen Dropbox als Schnittstelle zur Speicherung und Synchronisation von Textdateien.

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

47. NEU
Emotionality
> Psychologie (Bedürfnisse und Motive)
> Informationen emotionalisieren
> Mehrwert über verschiedene Endgeräte und
Touchpoints bieten
> Informationen immer und überall verfügbar
> Smarte und kontextrelevante Funktionen
> Spielelemente und soziale Komponenten
Services sind emotional ansprechender, wenn sie Spass machen, einen gerätefragmentierten Tagesablauf
unterstützen und eine fließende Multiscreen Experience bieten. (Quellen: Dave McClure und Nancy Birkhölzer)

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

49. Personas
der Digitalen
Gesellschaft

50. Personas
Die potentiellen Anwender der Digitalen Gesellschaft – beschrieben und illustriert in acht archetypischen
Personas. Sie können und sollen den jeweiligen Projektanforderungen angepasst werden.

51. Die Digitale Gesellschaft
Verteilung der Bevölkerung 2010
(Prozentualer Anteil)
Die Persona-Archetypen basieren auf den sechs Nutzertypen aus der Studie »D21 – Die Digitale Gesellschaft«.
(Quelle: http://www.initiatived21.de/publikationen)

52. Personas Der
Digitalen gesellschaft
> Digitale Außenseiter
> Gelegenheitsnutzer
> Berufsnutzer
> Trendnutzer
> Digitaler Profi
> Digitale Avantgarde
Der Fokus der Beschreibungen liegt auf Medienaffinität, Gerätenutzung, Nutzungskontext und den
Nutzerbedürfnissen – ergänzt durch Profilzeichnungen und Illustrationen zum privaten Umfeld.

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

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

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

56. Chris Kulig | Wohnung und privates Umfeld

57. > Tagesabläufe und Device Touchpoints
> Umfelder, Motive und Bedürfnisse
> Abgleich mit Research (größte Überschneidung)
> Relevante Personas identifizieren
> Devicepriorität abschätzen
> Für alle (relevanten) Geräte gestalten
Personas

58. Nutzungs-
kontext

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

60. Lean Back Modus
Der Anwender ist vorwiegend entspannt und passiv (temporäre Interaktion / lässt sich berieseln).
Die Interaktion mit dem Device ist sporadisch, temporär und nicht dauerhaft.

61. Öffentlicher Raum
Öffentlicher Raum ist grundsätzlich für jedermann zugänglich. Jeder kann an der Situation partizipieren.
Sie ist nicht privat.

62. Sonderfall !!!

63. Mobiler
Nutzungs-
kontext

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

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

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

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

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

69. Mobiler Nutzungskontext
> Mobile Situation vs. mobiler Nutzungskontext
> Unvorhersehbar / kann überall auftreten
> Sonder-Sonderfall »Automotive«
> Smart Native (»always-on« und »instant-on«)
> Unterschiedliche Bedürfnisse
> Voller Funktionsumfang
> Grundbedürfnis »untethered information«

70. » The ability to access, consume, share, and
create information from anywhere, anytime
– untethered from a keyboard or mouse – is
a latent human need that mobile technology
has only just begun to solve. «
Rachel Hinman, Nokia Research Center
http://uxmag.com/articles/peanut-butter-in-denver

71. > Nutzungskontext ist sehr unterschiedlich.
> Welche Informationen sind relevant?
> Gerätespezifische Eigenschaften nutzen
> Mobil kann immer und überall sein.
Nutzungskontext

72. > Gerätefragmentierung als Herausforderung
> Anpassungsfähigkeit von Inhalt und Informationen
> Anwender Partizipation
> Informationsangebot aufwerten
> Kohärenter Service und »Fluid Experience«
> Toolkit als Hilfestellung

73. » The need to consider and think about more
than one screen, or device, or platform is
becoming common sense. «
Christophe Stoll, precious Designstudio
http://precious-forever.com/2011/09/30/weeknote-305/

74. > Potentiell ist jedes Projekt für mehrere Screens
> Grundlage für weiterführende Diskussionen
> Publikation (in Arbeit)
> Website / Plattform (in Planung)

75. » Der deutsche Markt ist reif für konvergente
Multiscreen-Angebote. «
PresseEcho.de am 29.04.2011 zu einer Studie von »Mücke, Sturm & Company«
www.presseecho.de/de/multiscreen-auf-mobilen-endgeraeten-erfolgsbringer-fuer-tv-und-vod-anbieter.html

76. Vielen Dank!

77. informationen
multiscreen experience
Projekt von Wolfram Nagel und Valentin Fischer
Web: www.multiscreen-experience.com
Wolfram nagel
Mail: wn@digiparden.de
Web: http://about.wolframnagel.com
Twitter: @johnokraut
digiparden gmbh
Web: www.digiparden.de
Twitter: @digiparden

78. Ihr habt Ideen, Tipps oder Lust an dem Projekt mitzuarbeiten?
Wir freuen uns über jegliche Art von Feedback, Interesse und
konstruktiver Kritik.
Einfach eine E-Mail an Wolfram Nagel senden:
wn@digiparden.de