Multiscreen ist inzwischen digitale Realität und erfordert einen durchgängigen Informationsfluss, einen zentralen Knotenpunkt für Inhalte und ein System zur Definition von UI Elementen. Inhalte und User Interfaces sollten grundsätzlich unabhängig voneinander sein. Es besteht aber eine Korrelation. Inhalt und User Interfaces lassen sich (beginnend mit dem Inhalt) nach einem jeweils ähnlichen Muster modular und strukturiert planen und zusammenbauen – vergleichbar mit den Bausteinen in einem Baukastensystem. Mehr zu diesem Thema findet sich im (englischen) Buch "Multiscreen UX Design": http://www.msxbook.com/enbook Die Folien einer ausführlicheren Version von der Usability Professionals Konferenz 2015 gibt es hier: http://de.slideshare.net/wolframnagel/content-design-und-ui-architektur-fr-multiscreenprojekte-usability-professionals-2015

1. Einführung / kompakt
Wolfram Nagel, SETU GmbH
Alle Rechte vorbehalten.
Content Design
und UI Architektur
für Multiscreen-
Projekte

2. Aus »Multiscreen UX Design« (www.msxbook.com/enbook → ISBN: 978-0128027295)
Multiscreen

3. › Nutzer / Zielgruppe / Kontext
› Thema erkennen / Taxonomie
› Ausgabekanäle priorisieren
› Content Inventory / Inhalt kennen
› Inhaltsstruktur definieren
› Inhaltserfassung (Systeme, User, Quellen)
› Interaktion / Prototyping
› UI Modelle / Living Styleguide
› Visual Design und Entwicklung
Methodisches Vorgehen
ITERATION

4. User
Inhalte
Regeln UI
Schnittstellen
Vier Kernbereiche (+ natürlich der/die User)

5. Das Inhaltsmodell definiert
das UI Modell
Inhaltsmodell / Inhaltstyp
↓
Inhaltselemente !
↓
Backend-UI (Formular-Elemente)
↓
Frontend-UI (Wireframe)

6. Baukasten
prinzip

10. xxx
name (1 day ticket)
price
date of purchase
[...]
TICKET (TYPE)
title
date
description
[...]
EVENT
title
date
body
[...]
NEWS ITEM
name
photo
biography
URL
company
[...]
SPEAKER
name (e.g. usability)
description
time
[...]
SESSION
title
abstract
description
start time
duration
[...]
PRESENTATION
name
address
URL
[...]
VENUE
held at
featured in
valid for about
featured in presented by
Inhaltsmodell
Eigene Darstellung (Quelle: Jonathan Kahn, http://alistapart.com/article/strategic-content-management)

11. Baustein Komponente Segment Typ Objekt
Atomic Design
Quelle: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design

12. Korrelation
BaukastenPrinzip
Modellieren nach dem Baukastenprinzip – vergleichbar mit den Bausteinen des LEGO-Baukastensystems.

13. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...

14. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
Baustein

15. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
Komponente

16. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
Segment

17. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
TYP Objekt

18. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
Baustein

19. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
Komponente

20. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
SEGMENT

21. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
TYP

22. Objekt

23. Baustein
Komponente SEGMENT TYP

24. long text
Mapping Content(structure) ←→ Display (UI )
Titel
Bild (mit Caption und Urheber)
DatumAutor(en)
Kurztext
Inhaltsstruktur
Titel
Kurztext
Langtext
Bild
Datum
Autor

25. Beispiel: Artikel-Titel auf verschiedenen Touchpoints/ Kanälen

26. Twitter
(tweet only)
desktop
(website)
Instapaper
Website
(Smartphone)
E-Mail
(Sharing)
Facebook
(Sharing)
Facebook
(Timeline)
Twitter
(Sharing)
Twitter
(mit Summary)
Smartwatch
(Push Notification)
Smartphone
WhatsApp
(News-Abo)
iPhone App
Tablet
(Video Content)
Potentielle Touchpoints/ Kanäle (Auswahl)

27. SETU 3.0: Content Modeling-Software nach dem Baukastenprinzip (Demo Moodscreen)

28. Informationen / Kontakt
Wolfram Nagel / SETU GmbH
Mail: wn@setusoft.de
Twitter: @wolframnagel
Web: www.setusoft.de
Publikation »Multiscreen UX Design«
Verlag / Hrsg.: Morgan Kaufmann
ISBN: 978-0128027295
www.msxbook.com/enbook
URL zu diesen Folien:
www.msxbook.com/CDUIAkompakt