SlideShare ist ein Scribd-Unternehmen logo
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
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
SETU GMBH
Informationsarchitektur
Produktdaten
Content Management
Intelligente Suchsysteme
Prozessoptimierung
Workflow Automatisierung
SAP Integration
Internationalisierung
1 | MULTISCREEN
2 | BAUKASTEN UND MODULE
3 | MAPPING
MULTISCREEN
WELT
Aus »Multiscreen UX Design« (www.msxbook.com/enbook → ISBN: 978-0128027295)
MULTISCREEN
Gerät / Screen
Nutzungskontext
Nutzer
Strategien
und Beispiele
Aus »Multiscreen UX Design« (www.msxbook.com/enbook → ISBN: 978-0128027295)
»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)
Auswahl an Zielkanälen, Geräten und Touchpoints
Beispiel »New York Times« Artikel
TOUCHPOINTS
fremde
Instapaper Facebook (Desktop)Browser (Safari / iOS)
eigene
iPhone App
Design from the Content out.
Stephen Hay
http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
USER
INHALTE
REGELN UI
SCHNITTSTELLEN
Vier Kernbereiche (+ natürlich der/die User)
BAUKASTEN
UND MODULE
Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
KOMPONENTEBAUSTEIN SEGMENT TYP OBJEKT
1 2 4 53
BausteinLEGO Stoßstange LKW Feuerwehr-LKWFahrerhaus
Korrelation
BAUKASTENPRINZIP
Baustein Subtemplate Inhaltstyp
Zielsystem
Baustein Komponente Segment Typ Objekt
ATOMIC DESIGN
Quelle: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design
Baustein Subtemplate UI Typ
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
KOMPONENTE
BAUSTEIN
KOMPONENTE SEGMENT TYP
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
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/
CONTENT UND
UI MAPPING
INHALTSFLUSS
Quelle: »Die Zukunft von Content (Management)« / www.msxbook.com/ngixup14
INHALTSFLUSS
INPUT VERWALTEN OUTPUT
verschiedenste Quellen verschiedenste KanäleContent Hub
INPUT VERWALTEN OUTPUT
verschiedenste Quellen verschiedenste KanäleContent Hub
INHALTSFLUSS
INHALT STRUKTUR MAPPING
Inhalte aus beliebiger Quelle werden
auf definierte Inhaltsstruktur gemappt.
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.
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.
https://twitter.com/sorenmalling/status/691388259377745920
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.
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
Titel
Bild (mit Caption und Urheber)
DatumAutor(en)
KurztextLangtext
Inhaltsstruktur
Titel
Kurztext
Langtext
Bild
Datum
Autor
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
MAPPING OPTIONEN
A)		 Ein Inhalt 	 →	 unterschiedliche Darstellung
B)		 Verschiedene Inhalte	 →	 identische Darstellung
C)		 Ein Inhalt 	 →	 identische Darstellung
D)		 Verschiedene Inhalte 	 → 	 unterschiedliche Darstellung
Inhaltstyp (Events)
Rubrik
Bild
Titel
Untertitel
Termin
Location
Beschreibung
LARGE MEDIUM
SMALL
LARGE MEDIUM
SMALL
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
Inhalts-Bausteine
Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung
Inhaltstyp (Events)
LARGE
MEDIUM
SMALL
Inhalts-Bausteine
Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung
Inhaltstyp (Events)
LARGE
MEDIUM
SMALL
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
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
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
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
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
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
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
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
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
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
BUCH
SMARTPHONE
KLEID
LEGO
SCHUHE
FERNSEHER
Artikelbezeichnung
Bild
Beschreibung
Autor
Preis
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«
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«
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
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
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
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
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
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
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
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
SETU 3.0: Content Modeling-Software nach dem Baukastenprinzip (Demo Moodscreen)
BESTANDTEILE
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
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
ZIELSYSTEME
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
›	 Strukturierte Inhalte als Bausteine
›	 User Interface Patterns
›	Schnittstellen
›	 Reaktionsfähige Inhalte
›	 Dynamische (Meta) Informationen
›	Benutzerinformationen
›	Nutzungskontext
›	 Geräte und Zielsysteme
›	 Workflows und Schnittstellen
BASICS
AUSBLICK
›	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).
Ein User Interface ist nicht nur visuell!
Input, Output und Interaktion auch via:
›	 Audio / Sprache
›	 Haptik / Berührung
›	Temperatur
›	 Nur Text
›	 ...
GRAPHICAL USER INTERFACE
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/
Information wird als
Temperatur ausgeben.
Baustein
Tado Smart-Thermostat
Heizungssteuerung via Smarthpone-App oder Browser
Informationen werden »nur«
mit Wörtern ausgetauscht.
Conversational User Interfaces und Chatbots
Spracherkennung und Sprachverarbeitung /
Kommunikation über automatische oder persönliche Chats
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.
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
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
DANKE!
Slides:	msxbook.com/CUIMUP16
Artikel:	msxbook.com/CUIMUP16txt
Mail: 	 wolfram.nagel@setusoft.de
Twitter:	@wolframnagel
Website:	wolframnagel.com
SETU:	setusoft.de

Weitere ähnliche Inhalte

Andere mochten auch

Crossmedia-Kampagnen im Content-Marketing
Crossmedia-Kampagnen im Content-MarketingCrossmedia-Kampagnen im Content-Marketing
Crossmedia-Kampagnen im Content-Marketing
Claudia Hilker, Ph.D.
 
Maklerkommunikation 2.0 – Vortrag auf der DKM 2012 in Dortmund
Maklerkommunikation 2.0 – Vortrag auf der DKM 2012 in DortmundMaklerkommunikation 2.0 – Vortrag auf der DKM 2012 in Dortmund
Maklerkommunikation 2.0 – Vortrag auf der DKM 2012 in Dortmund
Cybay New Media
 
Werksverzeichnis Hans Martin 1916
Werksverzeichnis Hans Martin 1916Werksverzeichnis Hans Martin 1916
Werksverzeichnis Hans Martin 1916
Hugo E Martin
 
Introducción al desarrollo de videojuegos 2D con Wave Engine
Introducción al desarrollo de videojuegos 2D con Wave EngineIntroducción al desarrollo de videojuegos 2D con Wave Engine
Introducción al desarrollo de videojuegos 2D con Wave Engine
Eduard Tomàs
 
Performance im Fokus
Performance im FokusPerformance im Fokus
Performance im Fokus
Inxmail GmbH
 
Open Source BPM - iteratec Architekturtag
Open Source BPM - iteratec ArchitekturtagOpen Source BPM - iteratec Architekturtag
Open Source BPM - iteratec Architekturtag
camunda services GmbH
 
SMM-SEO.SEM
SMM-SEO.SEMSMM-SEO.SEM
Smart Industry
Smart IndustrySmart Industry
Smart Industry
FutureManagementGroup AG
 
Aula de Risoto
Aula de Risoto Aula de Risoto
Aula de Risoto
marciliodesouza
 
Digital Training (SEO: search engine optimization)
Digital Training (SEO: search engine optimization)Digital Training (SEO: search engine optimization)
Digital Training (SEO: search engine optimization)
Carlos De La Ossa
 
Cloud Computing - Java no Google App Engine
Cloud Computing - Java no Google App EngineCloud Computing - Java no Google App Engine
Cloud Computing - Java no Google App Engine
Frederico Maia Arantes
 
Mehr Wert für Gesellschaft und Unternehmen - Ratgeber für wirkungsvolle Unter...
Mehr Wert für Gesellschaft und Unternehmen - Ratgeber für wirkungsvolle Unter...Mehr Wert für Gesellschaft und Unternehmen - Ratgeber für wirkungsvolle Unter...
Mehr Wert für Gesellschaft und Unternehmen - Ratgeber für wirkungsvolle Unter...
PHINEO gemeinnützige AG
 
Tecnicas SEO
Tecnicas SEOTecnicas SEO
Tecnicas SEO
bluekiu
 
CAP 2: SEO - Técnicas de SEO
CAP 2: SEO - Técnicas de SEOCAP 2: SEO - Técnicas de SEO
CAP 2: SEO - Técnicas de SEO
Gary Briceño
 
Python, Google App Engine e Webapp-CE
Python, Google App Engine e Webapp-CE Python, Google App Engine e Webapp-CE
Python, Google App Engine e Webapp-CE
Renzo Nuccitelli
 
TDD com Python e App Engine
TDD com Python e App EngineTDD com Python e App Engine
TDD com Python e App Engine
Ricardo Bánffy
 
Como fazer um comentário no Blog
Como fazer um comentário no BlogComo fazer um comentário no Blog
Como fazer um comentário no Blog
marlene_herter
 

Andere mochten auch (19)

Crossmedia-Kampagnen im Content-Marketing
Crossmedia-Kampagnen im Content-MarketingCrossmedia-Kampagnen im Content-Marketing
Crossmedia-Kampagnen im Content-Marketing
 
Maklerkommunikation 2.0 – Vortrag auf der DKM 2012 in Dortmund
Maklerkommunikation 2.0 – Vortrag auf der DKM 2012 in DortmundMaklerkommunikation 2.0 – Vortrag auf der DKM 2012 in Dortmund
Maklerkommunikation 2.0 – Vortrag auf der DKM 2012 in Dortmund
 
Werksverzeichnis Hans Martin 1916
Werksverzeichnis Hans Martin 1916Werksverzeichnis Hans Martin 1916
Werksverzeichnis Hans Martin 1916
 
Introducción al desarrollo de videojuegos 2D con Wave Engine
Introducción al desarrollo de videojuegos 2D con Wave EngineIntroducción al desarrollo de videojuegos 2D con Wave Engine
Introducción al desarrollo de videojuegos 2D con Wave Engine
 
Performance im Fokus
Performance im FokusPerformance im Fokus
Performance im Fokus
 
Open Source BPM - iteratec Architekturtag
Open Source BPM - iteratec ArchitekturtagOpen Source BPM - iteratec Architekturtag
Open Source BPM - iteratec Architekturtag
 
SMM-SEO.SEM
SMM-SEO.SEMSMM-SEO.SEM
SMM-SEO.SEM
 
Smart Industry
Smart IndustrySmart Industry
Smart Industry
 
eind presentatie
eind presentatieeind presentatie
eind presentatie
 
Aula de Risoto
Aula de Risoto Aula de Risoto
Aula de Risoto
 
Digital Training (SEO: search engine optimization)
Digital Training (SEO: search engine optimization)Digital Training (SEO: search engine optimization)
Digital Training (SEO: search engine optimization)
 
Cloud Computing - Java no Google App Engine
Cloud Computing - Java no Google App EngineCloud Computing - Java no Google App Engine
Cloud Computing - Java no Google App Engine
 
Mehr Wert für Gesellschaft und Unternehmen - Ratgeber für wirkungsvolle Unter...
Mehr Wert für Gesellschaft und Unternehmen - Ratgeber für wirkungsvolle Unter...Mehr Wert für Gesellschaft und Unternehmen - Ratgeber für wirkungsvolle Unter...
Mehr Wert für Gesellschaft und Unternehmen - Ratgeber für wirkungsvolle Unter...
 
Tecnicas SEO
Tecnicas SEOTecnicas SEO
Tecnicas SEO
 
CAP 2: SEO - Técnicas de SEO
CAP 2: SEO - Técnicas de SEOCAP 2: SEO - Técnicas de SEO
CAP 2: SEO - Técnicas de SEO
 
20100506 JAX BPMN 2.0 in der Praxis
20100506 JAX BPMN 2.0 in der Praxis20100506 JAX BPMN 2.0 in der Praxis
20100506 JAX BPMN 2.0 in der Praxis
 
Python, Google App Engine e Webapp-CE
Python, Google App Engine e Webapp-CE Python, Google App Engine e Webapp-CE
Python, Google App Engine e Webapp-CE
 
TDD com Python e App Engine
TDD com Python e App EngineTDD com Python e App Engine
TDD com Python e App Engine
 
Como fazer um comentário no Blog
Como fazer um comentário no BlogComo fazer um comentário no Blog
Como fazer um comentário no Blog
 

Ähnlich wie Content UI Mapping

Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
SharepointUGDD
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden BlendMartin Hey
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
.NET User Group Dresden
 
Traumziel MV: Relaunch eines Tourismusportals mit Typo3 Extbase und Fluid
Traumziel MV:  Relaunch eines Tourismusportals mit Typo3 Extbase und FluidTraumziel MV:  Relaunch eines Tourismusportals mit Typo3 Extbase und Fluid
Traumziel MV: Relaunch eines Tourismusportals mit Typo3 Extbase und Fluid
Qbus Werbeagentur
 
Software Architecture Design Patterns der COMLINE Cloud Service Platform - CSP
Software Architecture Design Patterns der COMLINE Cloud Service Platform - CSPSoftware Architecture Design Patterns der COMLINE Cloud Service Platform - CSP
Software Architecture Design Patterns der COMLINE Cloud Service Platform - CSP
Christian Guenther
 
IA Konferenz 2009
IA Konferenz 2009IA Konferenz 2009
IA Konferenz 2009
Jutta Korn
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
Peter Rozek
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
Luka Peters
 
Echtzeit virtualisierung von twitter & co.
Echtzeit virtualisierung von twitter & co.Echtzeit virtualisierung von twitter & co.
Echtzeit virtualisierung von twitter & co.
Stefan Witwicki
 
Fachkurs Online Content Management, FHNW
Fachkurs Online Content Management, FHNWFachkurs Online Content Management, FHNW
Fachkurs Online Content Management, FHNW
k-webs GmbH - Internet Consulting
 
ASOCEU GERMANY/AUSTRIA - Lesson 4 - Creative formats and presentation
ASOCEU GERMANY/AUSTRIA - Lesson 4 - Creative formats and presentationASOCEU GERMANY/AUSTRIA - Lesson 4 - Creative formats and presentation
ASOCEU GERMANY/AUSTRIA - Lesson 4 - Creative formats and presentation
A Scuola di OpenCoesione
 
Digitale Kuratierungstechnologien – Beispiele aus ausgewählten Branchen
Digitale Kuratierungstechnologien – Beispiele aus ausgewählten BranchenDigitale Kuratierungstechnologien – Beispiele aus ausgewählten Branchen
Digitale Kuratierungstechnologien – Beispiele aus ausgewählten Branchen
Georg Rehm
 
Dissertationsverteidigung "Autonome Topic Maps"
Dissertationsverteidigung "Autonome Topic Maps"Dissertationsverteidigung "Autonome Topic Maps"
Dissertationsverteidigung "Autonome Topic Maps"
Lutz Maicher
 
Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)
Stefan Freimark
 

Ähnlich wie Content UI Mapping (15)

Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
 
Traumziel MV: Relaunch eines Tourismusportals mit Typo3 Extbase und Fluid
Traumziel MV:  Relaunch eines Tourismusportals mit Typo3 Extbase und FluidTraumziel MV:  Relaunch eines Tourismusportals mit Typo3 Extbase und Fluid
Traumziel MV: Relaunch eines Tourismusportals mit Typo3 Extbase und Fluid
 
Software Architecture Design Patterns der COMLINE Cloud Service Platform - CSP
Software Architecture Design Patterns der COMLINE Cloud Service Platform - CSPSoftware Architecture Design Patterns der COMLINE Cloud Service Platform - CSP
Software Architecture Design Patterns der COMLINE Cloud Service Platform - CSP
 
IA Konferenz 2009
IA Konferenz 2009IA Konferenz 2009
IA Konferenz 2009
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
 
Echtzeit virtualisierung von twitter & co.
Echtzeit virtualisierung von twitter & co.Echtzeit virtualisierung von twitter & co.
Echtzeit virtualisierung von twitter & co.
 
Fachkurs Online Content Management, FHNW
Fachkurs Online Content Management, FHNWFachkurs Online Content Management, FHNW
Fachkurs Online Content Management, FHNW
 
ASOCEU GERMANY/AUSTRIA - Lesson 4 - Creative formats and presentation
ASOCEU GERMANY/AUSTRIA - Lesson 4 - Creative formats and presentationASOCEU GERMANY/AUSTRIA - Lesson 4 - Creative formats and presentation
ASOCEU GERMANY/AUSTRIA - Lesson 4 - Creative formats and presentation
 
Digitale Kuratierungstechnologien – Beispiele aus ausgewählten Branchen
Digitale Kuratierungstechnologien – Beispiele aus ausgewählten BranchenDigitale Kuratierungstechnologien – Beispiele aus ausgewählten Branchen
Digitale Kuratierungstechnologien – Beispiele aus ausgewählten Branchen
 
Dissertationsverteidigung "Autonome Topic Maps"
Dissertationsverteidigung "Autonome Topic Maps"Dissertationsverteidigung "Autonome Topic Maps"
Dissertationsverteidigung "Autonome Topic Maps"
 
Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)
 
2010 09 29 10-00 seffen engeser
2010 09 29 10-00 seffen engeser2010 09 29 10-00 seffen engeser
2010 09 29 10-00 seffen engeser
 

Mehr von Wolfram Nagel

Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)
Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)
Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)
Wolfram Nagel
 
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)
Wolfram Nagel
 
Content Design and UI Architecture for Multiscreen-projects
Content Design and UI Architecture for Multiscreen-projectsContent Design and UI Architecture for Multiscreen-projects
Content Design and UI Architecture for Multiscreen-projects
Wolfram Nagel
 
Multiscreen UX Design - Developing for a multitude of devices
Multiscreen UX Design - Developing for a multitude of devices Multiscreen UX Design - Developing for a multitude of devices
Multiscreen UX Design - Developing for a multitude of devices
Wolfram Nagel
 
Multiscreen UX Design - Developing for a multitude of devices (summary)
Multiscreen UX Design - Developing for a multitude of devices (summary) Multiscreen UX Design - Developing for a multitude of devices (summary)
Multiscreen UX Design - Developing for a multitude of devices (summary)
Wolfram Nagel
 
Content Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-MappingContent Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-Mapping
Wolfram Nagel
 
Content Design and UI Architecture for Multiscreen Projects (compact)
Content Design and UI Architecture for Multiscreen Projects (compact)Content Design and UI Architecture for Multiscreen Projects (compact)
Content Design and UI Architecture for Multiscreen Projects (compact)
Wolfram Nagel
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Wolfram Nagel
 
Multiscreen Experience (Jan 2012, IxDA Berlin)
Multiscreen Experience (Jan 2012, IxDA Berlin)Multiscreen Experience (Jan 2012, IxDA Berlin)
Multiscreen Experience (Jan 2012, IxDA Berlin)
Wolfram Nagel
 
Multiscreen Experience (in 90 Sekunden)
Multiscreen Experience (in 90 Sekunden)Multiscreen Experience (in 90 Sekunden)
Multiscreen Experience (in 90 Sekunden)
Wolfram Nagel
 
Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...
Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...
Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...
Wolfram Nagel
 

Mehr von Wolfram Nagel (11)

Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)
Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)
Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)
 
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)
 
Content Design and UI Architecture for Multiscreen-projects
Content Design and UI Architecture for Multiscreen-projectsContent Design and UI Architecture for Multiscreen-projects
Content Design and UI Architecture for Multiscreen-projects
 
Multiscreen UX Design - Developing for a multitude of devices
Multiscreen UX Design - Developing for a multitude of devices Multiscreen UX Design - Developing for a multitude of devices
Multiscreen UX Design - Developing for a multitude of devices
 
Multiscreen UX Design - Developing for a multitude of devices (summary)
Multiscreen UX Design - Developing for a multitude of devices (summary) Multiscreen UX Design - Developing for a multitude of devices (summary)
Multiscreen UX Design - Developing for a multitude of devices (summary)
 
Content Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-MappingContent Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-Mapping
 
Content Design and UI Architecture for Multiscreen Projects (compact)
Content Design and UI Architecture for Multiscreen Projects (compact)Content Design and UI Architecture for Multiscreen Projects (compact)
Content Design and UI Architecture for Multiscreen Projects (compact)
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
 
Multiscreen Experience (Jan 2012, IxDA Berlin)
Multiscreen Experience (Jan 2012, IxDA Berlin)Multiscreen Experience (Jan 2012, IxDA Berlin)
Multiscreen Experience (Jan 2012, IxDA Berlin)
 
Multiscreen Experience (in 90 Sekunden)
Multiscreen Experience (in 90 Sekunden)Multiscreen Experience (in 90 Sekunden)
Multiscreen Experience (in 90 Sekunden)
 
Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...
Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...
Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...
 

Content UI Mapping

  • 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
  • 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
  • 10.
  • 12. Design from the Content out. Stephen Hay http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
  • 15.
  • 16.
  • 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
  • 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/
  • 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.
  • 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
  • 36.
  • 38.
  • 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
  • 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)
  • 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
  • 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
  • 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