Wie funktioniert ein System zur Erfassung, Verwaltung, regelbasierten Ausgabe und Darstellung von Informationen in unterschiedlichsten Zielkanälen? Der Artikel zum Thema: http://www.msxbook.com/CUIMUP16txt Zusammenfassung: Inhalte und User Interfaces lassen sich nach einem jeweils ähnlichen Muster modular und strukturiert planen und zusammenbauen — vergleichbar mit den Bausteinen in einem Baukastensystem. Inhalt durchläuft von der Entstehung bis zur Rezeption in verschiedensten Kanälen grundsätzlich drei Stufen: Erfassung, Verwaltung und Ausgabe. An den beiden Übergängen muss jeweils ein Mapping stattfinden. Zum einen müssen Inhalte zur definierten Inhaltsstruktur passen (Inhalt Struktur Mapping). Zum anderen müssen die einzelnen Bausteine der strukturierten Inhalte auf die Ausgabe-Bausteine zur Darstellung in verschiedenen Zielkanälen gemappt werden (UI Mapping). Das Baukasten-Prinzip und die methodische Herangehensweise lassen sich mit Hilfe von intelligenter Software unterstützen. Wolfram Nagel (Head of UX / SETU GmbH) stellt in dem Vortrag hilfreiche und in der Praxis bewährte Prinzipien, Muster, Methoden und Erkenntnisse vor.

1. Wie funktioniert ein System zur Erfassung, Verwaltung,
regelbasierten Ausgabe und Darstellung von
Informationen in unterschiedlichsten Zielkanälen?
Twitter:@wolframnagel#gUPA16
#muc2016
CONTENT UND
UI MAPPING
Usability Professionals / Mensch und Computer 2016
Aachen, 6. September 2016
Wolfram Nagel, SETU GmbH

2. WOLFRAM NAGEL
Head of UX Desgin (SETU GmbH)
Multiscreen / UI und UX
Autor »Multiscreen UX Design«
Co-Initiator Design Methoden Finder
www.designmethodenfinder.de
Twitter:@wolframnagel#gUPA16
#MuC16

3. SETU GMBH
Informationsarchitektur
Produktdaten
Content Management
Intelligente Suchsysteme
Prozessoptimierung
Workflow Automatisierung
SAP Integration
Internationalisierung

4. 1 | MULTISCREEN
2 | BAUKASTEN UND MODULE
3 | MAPPING

5. MULTISCREEN
WELT

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

7. Gerät / Screen
Nutzungskontext
Nutzer
Strategien
und Beispiele
Aus »Multiscreen UX Design« (www.msxbook.com/enbook → ISBN: 978-0128027295)

8. »The Future of Content Management« (Kapitel 6) und »Content Design and UI Architecture« (Kapitel 7)
in: Multiscreen UX Design, Morgan Kaufmann (www.multiscreen-ux-design.com)

9. Auswahl an Zielkanälen, Geräten und Touchpoints
Beispiel »New York Times« Artikel

11. TOUCHPOINTS
fremde
Instapaper Facebook (Desktop)Browser (Safari / iOS)
eigene
iPhone App

12. Design from the Content out.
Stephen Hay
http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

13. USER
INHALTE
REGELN UI
SCHNITTSTELLEN
Vier Kernbereiche (+ natürlich der/die User)

14. BAUKASTEN
UND MODULE

17. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
KOMPONENTEBAUSTEIN SEGMENT TYP OBJEKT

18. 1 2 4 53
BausteinLEGO Stoßstange LKW Feuerwehr-LKWFahrerhaus
Korrelation
BAUKASTENPRINZIP
Baustein Subtemplate Inhaltstyp
Zielsystem

19. Baustein Komponente Segment Typ Objekt
ATOMIC DESIGN
Quelle: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design
Baustein Subtemplate UI Typ

20. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
KOMPONENTE

21. BAUSTEIN
KOMPONENTE SEGMENT TYP

22. INHALTSMODELL
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
Eigene Darstellung (Quelle: Jonathan Kahn, http://alistapart.com/article/strategic-content-management)
Inhaltstyp
Inhaltselement
Gruppe

23. The essence of
content design is to
create units of content that
can address diverse needs
successfully.
Michael Andrews
http://storyneedle.com/what-is-content-design/

24. CONTENT UND
UI MAPPING

25. INHALTSFLUSS
Quelle: »Die Zukunft von Content (Management)« / www.msxbook.com/ngixup14

26. INHALTSFLUSS
INPUT VERWALTEN OUTPUT
verschiedenste Quellen verschiedenste KanäleContent Hub

27. INPUT VERWALTEN OUTPUT
verschiedenste Quellen verschiedenste KanäleContent Hub
INHALTSFLUSS
INHALT STRUKTUR MAPPING
Inhalte aus beliebiger Quelle werden
auf definierte Inhaltsstruktur gemappt.

28. INPUT VERWALTEN OUTPUT
verschiedenste Quellen verschiedenste KanäleContent Hub
INHALTSFLUSS
UI MAPPING
Strukturierter Inhalt wird auf die
Darstellung in verschiedenen
Zielkanälen gemappt.
INHALT STRUKTUR MAPPING
Inhalte aus beliebiger Quelle werden
auf definierte Inhaltsstruktur gemappt.

29. INPUT VERWALTEN OUTPUT
verschiedenste Quellen verschiedenste KanäleContent Hub
INHALTSFLUSS
(DREISTUFIG)
INHALT STRUKTUR MAPPING
Inhalte aus beliebiger Quelle werden
auf definierte Inhaltsstruktur gemappt.
1 2 3
UI MAPPING
Strukturierter Inhalt wird auf die
Darstellung in verschiedenen
Zielkanälen gemappt.

30. https://twitter.com/sorenmalling/status/691388259377745920

31. INHALT STRUKTUR MAPPING
(IM ZENTRALEN CONTENT HUB / BEISPIELHAFT)
Titel
Kurztext
Langtext*
Bild
Dokument
Datum
Autor
E-Mail
Betreff
-
Mailtext
Anhang
Anhang
Versendedatum
Absender
Evernote
Notiztitel
-
Notiztext
integriert
Verknüpfung
Änderungsdatum
Ersteller
Twitter
-
Tweettext
verlinkter Inhalt
angehängt
verlinkte Datei
Tweetdatum
Account
Facebook
-
Posttext
verlinkter Inhalt
angehängt
verlinkter Datei
Post-Datum
Account
Inhaltselemente entsprechend erfasst über beliebige Input-Kanäle (jeder Kanal fungiert als Quasi-CMS)
*Semantische Strukturierung (z.B. H1, fett, Zitat, Aufzählung, etc.) wird übernommen.

32. INHALT STRUKTUR MAPPING
(IM ZENTRALEN CONTENT HUB / BEISPIELHAFT)
E-Mail
Betreff
-
Mailtext
Anhang
Anhang
Versendedatum
Absender
Evernote
Notiztitel
-
Notiztext
integriert
Verknüpfung
Änderungsdatum
Ersteller
Twitter
-
Tweettext
verlinkter Inhalt
angehängt
verlinkte Datei
Tweetdatum
Account
Facebook
-
Posttext
verlinkter Inhalt
angehängt
verlinkter Datei
Post-Datum
Account
Artikel
Titel
Kurztext
Langtext*
Bild
Dokument
Datum
Autor

33. Titel
Bild (mit Caption und Urheber)
DatumAutor(en)
KurztextLangtext
Inhaltsstruktur
Titel
Kurztext
Langtext
Bild
Datum
Autor

34. VORAUSSETZUNGEN
› Unabhängiges Eingabe-Interface
› Zentraler Content Hub
› Struktur des Inhaltstyps definiert das Back-End-Formular
› Ausgabe und Frontend-Styling davon unabhängig
› Content Structure Preview (Content Wireframe)
› Reihenfolge und Darstellung im Zielsystem (Client)
› Korrelation von Inhalt und Darstellung
› Mapping von Inhalt und Darstellung

35. MAPPING OPTIONEN
A) Ein Inhalt → unterschiedliche Darstellung
B) Verschiedene Inhalte → identische Darstellung
C) Ein Inhalt → identische Darstellung
D) Verschiedene Inhalte → unterschiedliche Darstellung

37. Inhaltstyp (Events)
Rubrik
Bild
Titel
Untertitel
Termin
Location
Beschreibung

39. LARGE MEDIUM
SMALL

40. LARGE MEDIUM
SMALL

41. Inhalts-Bausteine
Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung
Teaser Large
Großes Bild | Titel | 4x Kurztext
Teaser Medium
Kleines Bild | Titel | 5x Kurztext
Teaser Small
Kein Bild | Titel | 4x Kurztext
Inhaltstyp (Events)
Unterschiedliche Darstellung
LARGE
MEDIUM
SMALL

42. Inhalts-Bausteine
Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung
Inhaltstyp (Events)
LARGE
MEDIUM
SMALL

43. Inhalts-Bausteine
Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung
Inhaltstyp (Events)
LARGE
MEDIUM
SMALL

44. LARGE
Bausteine
Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung
Bausteine
Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung
Bausteine
Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung
Inhaltstyp (Events)
Inhaltstyp (Events)
Inhaltstyp (Events)
MEDIUM
SMALL

45. LARGE
Bausteine
Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung
Bausteine
Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung
Bausteine
Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung
Inhaltstyp (Events)
Inhaltstyp (Events)
Inhaltstyp (Events)
MEDIUM
SMALL
Inhalts-Bausteine UI-BausteineMapping

46. KORRELATION UND MAPPING
(VERSCHIEDENE INHALTE → EINE DARSTELLUNG)
Artikel
Headline, Datum, Subline, Rubrik, Bild, Autor, ...
Teaser (Artikel)
Event
Titel, Datum, Location, Rubrik, Bild, Uhrzeit, Eintritt,
...
Teaser (Event)
Generische Struktur
Titel, Kurztext, Kurztext, Kurztext, Bild
Teaser Komponente (generisch)
Verschiedene Inhaltstypen
Identische Darstellung
Inhaltstyp Events
Titel
Termin
Location
Rubrik
Bild
Uhrzeit
Eintritt
Inhaltstyp Artikel
Headline
Datum
Subline
Rubrik
Bild
Autor
...
Generische Struktur
Haupttext
Kurztext
Kurztext
Kurztext
Bild

47. KORRELATION UND MAPPING
(VERSCHIEDENE INHALTE → EINE DARSTELLUNG)
Artikel
Headline, Datum, Abstract, Rubrik, Bild, Autor, ...
Teaser (Artikel)
Event
Titel, Termin, Location, Rubrik, Bild, Uhrzeit, Eintritt, ...
Teaser (Event)
Generische Struktur
Haupttext, Kurztext, Kurztext, Kurztext, Bild
Teaser Komponente (generisch)
Verschiedene Inhaltstypen
Identische Darstellung

48. KORRELATION UND MAPPING
(VERSCHIEDENE INHALTE → EINE DARSTELLUNG)
Artikel
Headline, Datum, Abstract, Rubrik, Bild, Autor, ...
Teaser (Artikel)
Event
Titel, Termin, Location, Rubrik, Bild, Uhrzeit, Eintritt, ...
Teaser (Event)
Generische Struktur
Haupttext, Kurztext, Kurztext, Kurztext, Bild
Teaser Komponente (generisch)
Verschiedene Inhaltstypen
Identische Darstellung

49. KORRELATION UND MAPPING
(VERSCHIEDENE INHALTE → EINE DARSTELLUNG)
Artikel
Headline, Datum, Abstract, Rubrik, Bild, Autor, ...
Teaser (Artikel)
Event
Titel, Termin, Location, Rubrik, Bild, Uhrzeit, Eintritt,
...
Teaser (Event)
Generische Struktur
Haupttext, Kurztext, Kurztext, Kurztext, Bild
Teaser Komponente (generisch)
Verschiedene Inhaltstypen
Identische Darstellung

50. KORRELATION UND MAPPING
(VERSCHIEDENE INHALTE → EINE DARSTELLUNG)
Artikel
Headline, Datum, Subline, Rubrik, Bild, Autor, ...
Teaser (Artikel)
Event
Titel, Datum, Location, Rubrik, Bild, Uhrzeit, Eintritt,
...
Teaser (Event)
Generische Struktur
Titel, Kurztext, Kurztext, Kurztext, Bild
Teaser Komponente (generisch)
Verschiedene Inhaltstypen
Identische Darstellung
Inhaltstyp Events
Titel
Termin
Location
Rubrik
Bild
Uhrzeit
Eintritt
Inhaltstyp Artikel
Headline
Datum
Abstract
Rubrik
Bild
Autor
...
Generische Struktur
Haupttext
Kurztext
Kurztext
Kurztext
Bild

51. METHODEN UND VORGEHENSMODELLE
› Content Modeling
› Atomic Design
› Objektorientierung
› Content and Display Patterns
› Fünfstufiges Baukasten-Prinzip
Methoden, Konzepte und Strategien mit modularem Ansatz. Erläuterungen und Quellen via www.msxbook.com/CUIMUP16txt

52. ITERATION
Grobe Übersicht. Ablauf ist projektabhängig. Phasen überlappen sich, laufen parallel oder wechseln.
› Nutzer / Zielgruppe / Kontext
› Thema erkennen / Taxonomie
› Ausgabekanäle und Geräte
› Content Inventory / Content Design
› Inhaltserfassung (Systeme, User, Quellen)
› Workflows und Schnittstellen
› UI Modelle / Living Styleguide
› Interaktion / Prototyping
› Visual Design und Entwicklung
METHODISCHES VORGEHEN

53. PROZESS
› Content Analyse
› Inhaltstyp(en) und Inhaltsmodell
› Ausprägungen
› Multiscreen / Kanäle / Zielsysteme
› User Interface
› Content UI Mapping
Fokus auf Content, UI und Mapping. Details und Checklisten via www.msxbook.com/en/pjwflw und www.msxbook.com/en/pjphclde

54. BUCH
SMARTPHONE
KLEID
LEGO
SCHUHE
FERNSEHER

55. Artikelbezeichnung
Bild
Beschreibung
Autor
Preis

56. Komponente / Element
Artiktelbezeichnung
Artikelbezeichnung Detail
Beschreibung
Sonderinfo
Bild(er)
Auflage
Erscheinungsdatum
Leseprobe (Blick ins Buch)
Übersetzer
Hörprobe (Audio)
Von / Autor / Hersteller
Markenlabel
Anbieter
Prime / Lieferant
Bewertung
Rezensionen
Varianten
Format / Größe
Preis
Unverbindliche Preisempfehlung
Buch
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
Fernseher
X
X
X
X
X
X
X
X
X
X
X
X
Smartphone
X
X
X
X
X
X
X
X
X
X
LEGO
X
X
X
X
X
X
X
X
X
X
Schuhe
X
X
X
X
X
X
X
X
X
X
Kleid
X
X
X
X
X
X
X
X
X
X
X
Tasse
X
X
X
X
X
X
X
X
X
INHALTSTYP(EN) »AMAZON-PRODUKT«

57. Komponente / Element
Artiktelbezeichnung
Artikelbezeichnung Detail
Beschreibung
Sonderinfo
Bild(er)
Auflage
Erscheinungsdatum
Leseprobe (Blick ins Buch)
Übersetzer
Hörprobe (Audio)
Von / Autor / Hersteller
Markenlabel
Anbieter
Prime / Lieferant
Bewertung
Rezensionen
Varianten
Format / Größe
Preis
Unverbindliche Preisempfehlung
Buch
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
Fernseher
X
X
X
X
X
X
X
X
X
X
X
X
Smartphone
X
X
X
X
X
X
X
X
X
X
LEGO
X
X
X
X
X
X
X
X
X
X
Schuhe
X
X
X
X
X
X
X
X
X
X
Kleid
X
X
X
X
X
X
X
X
X
X
X
Tasse
X
X
X
X
X
X
X
X
X
Subtemplate
Stammdaten
Buch Spezifika
Anbieter und Hersteller
User Generated Content
Abmessungen und Preise
INHALTSTYP(EN) »AMAZON-PRODUKT«

58. Komponente / Element
Artiktelbezeichnung
Artikelbezeichnung Detail
Beschreibung
Sonderinfo
Bild(er)
Auflage
Erscheinungsdatum
Leseprobe (Blick ins Buch)
Übersetzer
Hörprobe (Audio)
Von / Autor / Hersteller
Markenlabel
Anbieter
Prime / Lieferant
Bewertung
Rezensionen
Varianten
Format / Größe
Preis
Unverbindliche Preisempfehlung
Buch
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
Fernseher
X
X
X
X
X
X
X
X
X
X
X
X
Smartphone
X
X
X
X
X
X
X
X
X
X
LEGO
X
X
X
X
X
X
X
X
X
X
Schuhe
X
X
X
X
X
X
X
X
X
X
Kleid
X
X
X
X
X
X
X
X
X
X
X
Tasse
X
X
X
X
X
X
X
X
X
Subtemplate
Baustein
Subtemplate
Stammdaten
Buch Spezifika
Anbieter und Hersteller
User Generated Content
Abmessungen und Preise
INHALTSTYP(EN) »AMAZON-PRODUKT«
Inhaltstyp Ausprägungen

59. Komponente / Element
Artiktelbezeichnung
Artikelbezeichnung Detail
Beschreibung
Sonderinfo
Bild(er)
Auflage
Erscheinungsdatum
Leseprobe (Blick ins Buch)
Übersetzer
Hörprobe (Audio)
Von / Autor / Hersteller
Markenlabel
Anbieter
Prime / Lieferant
Bewertung
Rezensionen
Varianten
Format / Größe
Preis
Unverbindliche Preisempfehlung
Fernseher
X
X
X
X
X
X
X
X
X
X
X
X
Smartphone
X
X
X
X
X
X
X
X
X
X
LEGO
X
X
X
X
X
X
X
X
X
X
Schuhe
X
X
X
X
X
X
X
X
X
X
Kleid
X
X
X
X
X
X
X
X
X
X
X
Tasse
X
X
X
X
X
X
X
X
X
Subtemplate
Baustein
Subtemplate
Stammdaten
Buch Spezifika
Anbieter und Hersteller
User Generated Content
Abmessungen und Preise
INHALTSTYP(EN) »AMAZON-PRODUKT«
Inhaltstyp Ausprägungen
Inhaltstyp: Amazon-Produkt › Ausprägung: Buch › Subtemplate: Abmessungen und Preise › Baustein: Preis | Wert: 29,- EUR
Buch
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X

60. INHALTSMODELL
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
title
abstract
description
start time
duration
max. attendee
prior knowledge
[...]
WORKSHOP
variation of
Inhaltstyp
Inhaltstyp
Baustein
Korrelation der Inhaltstypen
Gruppe
Ausprägung

61. Komponente / Element
Titel
Datum
Beschreibung
Kurzbeschreibung
...
...
...
...
...
...
...
Location
...
...
URL
...
...
...
...
...
Event
X
X
X
X
X
X
Venue
X
X
X
X
X
X
X
X
X
Ticket
X
X
X
X
News Item
X
X
X
X
X
X
X
Session
X
X
X
X
X
X
X
X
X
Presentation
X
X
X
X
X
X
X
X
X
X
INHALTSTYPEN FÜR »VERANSTALTUNG«
Workshop
X
X
X
X
X
X
X
X
X
Speaker
X
X
X
X
X
X
X
X
X
Inhaltstyp Variante

62. Komponente / Element
Headline
Kurztext
Langtext (Haupttext)
Alternativer Kurztext
Twitter-/ Teasertext (140 Zeichen)
Beschreibung / Erläuterung
Logo
Hauptbild
Bildergalerie
Alternativbild
Originalbild
Video
Audio
Dokument
Erstellungsdatum
Letzte Änderung(en)
Autor
Quellen
Direktlink
News-ID
Web
X
X
X
X
X
X
X
X
X
X
X
X
App
X
X
X
X
X
X
X
X
X
X
X
X
X
Smartwatch
X
X
X
X
X
TV
X
X
X
X
X
X
X
X
X
X
E-Mail
X
X
X
X
X
X
X
Twitter
X
X
X
X
X
X
X
Facebook
X
X
X
X
X
X
X
X
ZIELSYSTEME FÜR »NYT NEWS«
Subtemplate
Texte
Media
Metadaten

63. Komponente / Element
Headline
Kurztext
Langtext (Haupttext)
Alternativer Kurztext
Twitter-/ Teasertext (140 Zeichen)
Beschreibung / Erläuterung
Logo
Hauptbild
Bildergalerie
Alternativbild
Originalbild
Video
Audio
Dokument
Erstellungsdatum
Letzte Änderung(en)
Autor
Quellen
Direktlink
News-ID
Web
X
X
X
X
X
X
X
X
X
X
X
X
App
X
X
X
X
X
X
X
X
X
X
X
X
X
Smartwatch
X
X
X
X
X
TV
X
X
X
X
X
X
X
X
X
X
E-Mail
X
X
X
X
X
X
X
Twitter
X
X
X
X
X
X
X
Facebook
X
X
X
X
X
X
X
X
ZIELSYSTEME FÜR »NYT NEWS«
Subtemplate
Texte
Media
Metadaten
Baustein
Subtemplate
Inhaltstyp Zielsysteme

64. Komponente / Element
Headline
Kurztext
Langtext (Haupttext)
Alternativer Kurztext
Twitter-/ Teasertext (140 Zeichen)
Beschreibung / Erläuterung
Logo
Hauptbild
Bildergalerie
Alternativbild
Originalbild
Video
Audio
Dokument
Erstellungsdatum
Letzte Änderung(en)
Autor
Quellen
Direktlink
News-ID
Web
X
X
X
X
X
X
X
X
X
X
X
X
App
X
X
X
X
X
X
X
X
X
X
X
X
X
Smartwatch
X
X
X
X
X
TV
X
X
X
X
X
X
X
X
X
X
E-Mail
X
X
X
X
X
X
X
Twitter
X
X
X
X
X
X
X
Facebook
X
X
X
X
X
X
X
X
ZIELSYSTEME FÜR »NYT NEWS«
Subtemplate
Texte
Media
Metadaten
Baustein
Subtemplate
Inhaltstyp Zielsysteme

65. Artikel-Headline
Baukastenprinzip Beispiel-ID: CT001.V001.ST001.B001
»HTML-Marker« für Mapping in Zielsystem-Template
Content → UI
Artikel › BreakingNews › Texte › Headline
Inhaltstyp: Artikel ›
Ausprägung: BreakingNews ›
Subtemplate: Texte ›
Baustein: Headline

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

67. BESTANDTEILE

68. Komponente / Element
Artiktelbezeichnung
Artikelbezeichnung Detail
Beschreibung
Sonderinfo
Bild(er)
Auflage
Erscheinungsdatum
Leseprobe (Blick ins Buch)
Übersetzer
Hörprobe (Audio)
Von / Autor / Hersteller
Markenlabel
Anbieter
Prime / Lieferant
Bewertung
Rezensionen
Varianten
Format / Größe
Preis
Unverbindliche Preisempfehlung
Buch
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
Fernseher
X
X
X
X
X
X
X
X
X
X
X
X
Smartphone
X
X
X
X
X
X
X
X
X
X
LEGO
X
X
X
X
X
X
X
X
X
X
Schuhe
X
X
X
X
X
X
X
X
X
X
Kleid
X
X
X
X
X
X
X
X
X
X
X
Tasse
X
X
X
X
X
X
X
X
X
Subtemplate
Stammdaten
Buch Spezifika
Anbieter und Hersteller
User Generated Content
Abmessungen und Preise
INHALTSTYP
Baustein
Subtemplate
Inhaltstyp Ausprägungen

69. INHALTSMODELL
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
title
abstract
description
start time
duration
max. attendee
prior knowledge
[...]
WORKSHOP
variation of
Inhaltstyp
Baustein
Gruppe
Ausprägung

70. ZIELSYSTEME

71. LARGE
Artikel
Rubrik | Bild | Titel | Untertitel | Datum | Location | Kurztext
Artikel
Rubrik | Bild | Titel | Untertitel | Datum | Location | Kurztext
Artikel
Rubrik | Bild | Titel | Untertitel | Datum | Location | Kurztext
Inhaltstyp (Events)
Inhaltstyp (Events)
Inhaltstyp (Events)
MEDIUM
SMALL
UI MAPPING

72. › Strukturierte Inhalte als Bausteine
› User Interface Patterns
› Schnittstellen
› Reaktionsfähige Inhalte
› Dynamische (Meta) Informationen
› Benutzerinformationen
› Nutzungskontext
› Geräte und Zielsysteme
› Workflows und Schnittstellen
BASICS

73. AUSBLICK

74. › Fließtext
› Liste
› Tabelle
› Chart / Schaubild / Infografik
› Interaktiv / Applikation
› ...
VISUELLE DARSTELLUNG VON INHALT
Darstellungsart basiert u.a. auf Zielsystem, Nutzungskontext, Metainformationen (zur Laufzeit), sowie Informationen über den Benutzer
(Profil, bisheriges Verhalten, Vorwissen, Interessen, Intention, Bedürfnisse).

75. Ein User Interface ist nicht nur visuell!
Input, Output und Interaktion auch via:
› Audio / Sprache
› Haptik / Berührung
› Temperatur
› Nur Text
› ...
GRAPHICAL USER INTERFACE

76. Information wird in
Sprache übersetzt.
Apple CarPlay und Siri
Mit freundlicher Genehmigung von Zac Hall (9to5mac) und Ted Kritsonis (mobilesyrup)
https://9to5mac.com/2015/09/22/ios-9-carplay-walkthrough / http://mobilesyrup.com/2015/10/19/apple-carplay-review/

77. Information wird als
Temperatur ausgeben.
Baustein
Tado Smart-Thermostat
Heizungssteuerung via Smarthpone-App oder Browser

78. Informationen werden »nur«
mit Wörtern ausgetauscht.
Conversational User Interfaces und Chatbots
Spracherkennung und Sprachverarbeitung /
Kommunikation über automatische oder persönliche Chats

79. Gedanke:
Damit Informationen zukünftig auf allen erdenklichen
Kanälen koheränt ausgegeben werden können, muss
man bei UI Styleguides, Inhaltsmodellen und beim
Mapping das Internet der Dinge und alle anderen
Interface Ausprägungen auch mitberücksichtigen.

80. FAZIT
› Content und UI nach Baukastensystem aufbauen
› Korrelation und Mapping
› Zukünftige UI bedenken
› Bewährte Methoden kombinieren
› Prozesse mittels Software unterstützen
› Workflows und Automatisierung

81. MULTISCREEN BÜCHER
Multiscreen UX Design (2015)
Verlag / Hrsg.: Morgan Kaufmann
ISBN: 978-0128027295
Multiscreen Experience Design (2013)
Verlag / Hrsg.: digiparden (SETU GmbH)
ISBN: 978-3-9815872-0-3
www.multiscreen-ux-design.com

82. DANKE!
Slides: msxbook.com/CUIMUP16
Artikel: msxbook.com/CUIMUP16txt
Mail: wolfram.nagel@setusoft.de
Twitter: @wolframnagel
Website: wolframnagel.com
SETU: setusoft.de