Content und UI Mapping

Wie funktioniert ein System zur Erfassung, Verwaltung, regelbasierten Ausgabe und Darstellung von Informationen in unterschiedlichsten Zielkanälen?

Korrelation und regelbasiertes Mapping von Content und UI

Summary

Content und UI Mapping — “Usability Professionals / Mensch und Computer 2016"

1 | Einleitung

2 | Multiscreen Welt

Aus »Multiscreen UX Design« (www.msxbook.com/enbook, ISBN: 978–0128027295)
MuC/UP 2016: Methoden und Regelwerke für die Konzeption, Gestaltung und Umsetzung von Layout, Inhalt und Workflows im Baukasten-Prinzip. Ergänzend zu den Folien gibt es auch einen erläuternden Artikel.

3 | Modularer Ansatz

3.1 | Konzepte und Strategien

Das Inhaltsmodell (zum Beispiel zum Themenkomplex einer Veranstaltung) beschreibt die Inhaltsstruktur mit Hilfe verschiedener Inhaltstypen, individueller Attribute und deren Beziehung zueinander. Inhaltstypen sind dann zum Beispiel Veranstaltungsort (venue), Ticket, Vortrag (presentation) und Vortragender (speaker). Die Abbildung basiert auf und ist inspiriert von Jonathan Kahn (2010).

3.2 | Methodischer Ansatz und Prozessmodell

Das fünfstufige Baukasten-Prinzip. Inhalte und User Interfaces lassen sich modular strukturiert aufbauen — vergleichbar mit den Bausteinen des LEGO-Baukastensystems. Die fünfte Stufe (konkrete Ausprägung) kommt beim Rezipienten an. (Quelle: Nagel, 2015b)

4 | Content und UI Mapping

4.1 | Dreistufiger Inhaltsfluss

Der Inhaltsfluss lässt sich in drei Stufen beschreiben: Erfassung, Verwaltung und Ausgabe. An den Übergängen muss jeweils ein Mapping stattfinden. Inhalte müssen zur definierten Inhaltsstruktur passen (Inhalt Struktur Mapping). Die einzelnen Bausteine der strukturierten Inhalte müssen auf die Ausgabe-Bausteine zur Darstellung in verschiedenen Zielkanälen gemappt werden (UI Mapping).

4.2 | Die drei Stufen

Stufe 1: Erfassung

Stufe 2: Verwaltung

Stufe 3: Ausgabe

4.3 | Content (Structure) Mapping

Content (Structure) Mapping. Die einzelnen Elemente oder Bausteine des Inhaltstyps können in verschiedenen Kanälen mit unterschiedlichen Eingabe-Interfaces erstellt werden. Die Formular-Bausteine entsprechen den Bausteinen des Inhaltstyps. *Semantische Strukturinformationen wie H1, bold, Zitat können abhängig vom Erfassungs-UI ebenfalls übergeben werden.
Content (Structure) Mapping. Die einzelnen Bausteine des Inhaltstyps werden auf UI Bausteine im Zielsystem gemappt. Das UI Template muss die entsprechenden UI Bausteine bereitstellen, andernfalls können einzelne Inhaltsbausteine in bestimmten Zielsystemen evtl. nicht ausgegeben werden.

4.4 | UI Mapping

Screenshot einer Website (Zielsystem Website, Viewport „Desktop“) mit verschiedenen Teaser Varianten (Large, Small, Mini).
Die Teaser Varianten extrahiert und isoliert von der Website mit den einzelnen UI Bausteinen (bis auf das Bild werden alle exemplarisch vorhandenen Informationen textlich ausgegeben).
Die generischen Teaser Varianten ohne Inhalt mit den einzelnen UI Bausteinen. Der Teaser Small zeigt in diesem Fall die meisten Informationen und verwendet alle Bausteine des Inhaltstyps „Event“).

4.5 | Mapping und Korrelation

Die verschiedenen Inhaltstypen Event und Artikel sind strukturell verschieden aber generisch ähnlich. Insofern lassen sich Bausteine beider Inhaltstypen auf eine generische Teaser-Komponente mappen. Kurz: Verschiedene Inhaltstypen lassen sich gleich darstellen. Das gilt natürlich auch in die andere Richtung: Verschiedene UI Typen lassen sich mit Inhaltsbausteinen desselben Inhaltstyps versorgen.

5 | Content Modeling nach dem Baukasten-Prinzip

5.1 | Content Modeling und systematisches Mapping

5.2 | Workflows und Automatisierung

5.3 | CMMS UI

SETU 3.0 (UI Demo-Moodscreen). Mit dem System lassen sich Inhalte und Workflows modellieren und für die Darstellung und das Mapping in unterschiedlichen Zielsystemen vorbereiten. Mit der Software lässt sich sowohl Content managen als auch diese Inhaltsverwaltung selbst managen (es ist also eine Art “Content Management Management System”).

6 | User Interfaces und Internet of Things

UI nicht nur visuell.

7 | Fazit

Quellen

Über den Autor

Senior UX Designer (@TeamViewer), UI Architect, Multiscreen Evangelist, JTBD Thinker, Author of @msxbook, Initiator of @dmfndr. I love the web, my 👪 and ⚽️🚵‍.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store