Content Design und UI Architektur für Multiscreen-Projekte

Methoden und Regelwerke für die Konzeption, Gestaltung und Umsetzung von Layout, Inhalt und Workflows im Baukasten-Prinzip

Digitale Inhalte können heute überall erscheinen. Wir nutzen täglich digitale Services auf verschiedensten Geräten und Medien. Informationen fließen in alle Kanäle. Multiscreen ist inzwischen digitale Realität geworden. Um ein einheitliches Nutzungserlebnis zu erschaffen, benötigt es einen durchgängigen Informationsfluss. Voraussetzung dafür sind ein zentraler Knotenpunkt für Inhalte, ein System zur Definition von UI Elementen und Regeln wann welche Inhalte in welcher Kombination wo und wie angezeigt werden. Damit dies technisch gelöst werden kann, ist es erforderlich Inhalte, User Interfaces und Workflows nach einem jeweils ähnlichen Muster modular und strukturiert zu planen und aufzubauen — vergleichbar mit den Bausteinen in einem Baukastensystem.

Content Modeling und Atomic Design sind vergleichbar mit dem LEGO-System. Inhalte und User Interfaces lassen sich flexibel aus einzelnen Bausteinen zu unterschiedlichen Objekten zusammensetzen.
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015): Methoden und Regelwerke für die Konzeption, Gestaltung und Umsetzung von Layout, Inhalt und Workflows im Baukasten-Prinzip.

Einleitung

Viele Content-Angebote (z.B. einzelne Artikel der New York Times oder des Spiegel) werden heute häufiger in anderen Kanälen (z.B. auf Twitter oder in Flipboard) als der originären Website wahrgenommen. Eine Inhalts-Schnittstelle (Content API) gibt alle Infos ab und der Empfänger oder darstellende Kanal entscheidet, welche Inhaltselemente er verwendet. Die visuelle Ausgestaltung ist dann durch die Styling-Definitionen der Ziel- und Fremdplattformen vorgegeben.

Unterschiedlichste Touchpoints auf denen ein Inhalt potentiell dargestellt werden soll (Beispiel New York Times): Websites, App, verschiedene Screens, Social Media, Fremdkanäle, etc.

Next Generation Information Experience in einer Multiscreen-Welt

Das Internet ist integraler Bestandteil unseres Lebens, digitale Informationen werden selbstverständlich auf verschiedensten Geräten, genutzt. Wir leben in einer Multiscreen-Welt. Informationen werden auf verschiedensten Geräten erstellt und konsumiert.

Aus »Multiscreen UX Design« (ISBN: 978–0128027295)
Next Generation Information Experience (Nagel, 2014a). Zentraler Content Hub. Drei Phasen im Informationsfluss: Erfassen, Verwalten und Nutzen von Inhalten (dann ggf. kommentieren, ändern, ergänzen = erneutes Erfassen)

Eine unabhängige Methode für eine ungewisse Zukunft

Mein nachfolgender Ansatz ist nicht grundsätzlich neu. Es geht mir unter anderem um das Grundprinzip und eine einheitliche allgemein verständliche Sprache und um disziplinübergreifende Begriffe, die von allen Stakeholdern verstanden werden (Projektmanager, Kunden, Entwickler, Konzepter, Gestalter). Der Grundgedanke ist es, alles (ähnlich) atomar bzw. nach dem Baukastenprinzip zu zerlegen bzw. zusammenzusetzen und generisch zu denken. Vor allem vor dem Hintergrund, dass wir gar nicht ahnen können, für welche zukünftigen Kanäle wir zum aktuellen Zeitpunkt Inhalte und User Interfaces entwerfen (Frost, 2015).

Vier Kernbereiche

Um Inhalte, Interfaces und Prozesse flexibel, strukturiert und modular zu planen und umzusetzen, sind im Projektverlauf (neben der Berücksichtigung der Nutzer und derern Bedürfnisse) grundsätzlich vier Kernbereiche zu betrachten: Inhalte, UI, Workflows und Schnittstellen.

Im Projektverlauf sind (neben dem Nutzer und dessen Bedürfnissen) vier Kernbereiche zu betrachten: Inhalte, User Interface, Workflows und Schnittstellen. Man beginnt beim Nutzer und den Inhalten.

Informationen (Daten/Content)

Entsprechend der thematischen Tendenz (Taxonomie, “Unit”, Domäne) gibt es Inhaltselemente für verschiedene Inhaltstypen. Dazu die entsprechenden Formular-Elemente für das “Backend-Frontend”, um die Eingabemaske für die Inhaltsobjekte zu bauen (vorausgesetzt die Inhalte werden in einem eigenen Content Management System erfasst). Ein Inhaltstyp besteht aus verschiedenen Inhaltselementen. Die semantische Bedeutung beeinflusst die Struktur des Inhaltstyps, dessen Klassifikation und entsprechende Kategorien.

Interface/UI

Zum User Interface gehören in dem Fall auch Visual Design, Interaction Design. Die UI-Elemente werden nach dem Atomic Design Prinzip aufgebaut. Sie sind relevant für die Frontend-Ausgabe, für die Formular-Elemente im Backend und für die (Preview-) Darstellung der Inhalte im Backend. Visual Design und individuelles Styling wird über einen „Living Styleguide“ beschrieben, der stets aktuell gehalten wird. Das UI und die UI-Elemente für das Backend werden generisch vorbereitet. Die UI-Elemente und Bibliotheken können sukzessive ergänzt werden.

Prozesse und Workflows (Regeln)

Sie definieren — nach dem „If This Then That“-Prinzip — wie Inhalte zusammenhängen oder sich ändern können, wenn ein Ereignis eintritt oder eine Veränderung stattfindet. Es handelt sich dabei um die Definition einer regelbasierten Interaktion zweier Objekte untereinander.

Schnittstellen

Das Konzept der originären App mit eigenständigem Inhalt wird abgelöst vom Konzept der App als ein Content-Lieferant. Dieser stellt (in kleine Einheiten zerlegte) Inhalte über eine Schnittstelle anderen Diensten zur Verfügung (Schätzle, 2015a) — innerhalb der Inhalts-Bausteine im Content Hub und von und zu anderen Applikation, um die Inhalte/Daten auszutauschen bzw. zu synchronisieren.

Baukastenprinzip. Modularer Ansatz: Atomic Design und Content Modeling

Struktur und Modularität

Apps und Websites sind zukünftig weniger autarke Einheiten, sondern eher aus unterschiedlichsten Modulen bestehende Systeme. Dieser Aspekt wird vor allem wichtiger, wenn sich Smart Watches im Windschatten der Apple Watch stärker verbreiten.

Inhaltsmodell (eigene Darstellung / Quelle und Inspiration via Jonathan Kahn, http://alistapart.com/article/strategic-content-management)

Vorbild: Atomic Design und LEGO

Das Ziel der von mir vorgestellten Baukasten-Überlegungen ist es alle Elemente ähnlich zu strukturieren und dafür ein gemeinsames verständliches und allgemeingültiges Wording für alle Projektbeteiligten zu finden, weil die Metapher „Atom“ unter Umständen schwer vermittelbar oder irritierend sein könnte.

UI und Content Inventory (und Audit)

Um zu wissen mit welchen visuellen und inhaltlichen Bausteinen es man in einem Projekt zu tun hat, empfiehlt es sich in einer frühen Projektphase eine Analyse der bestehenden und zukünftig zu verwendenden Elemente durchzuführen. Mit einem Content Inventory (oder Audit) wird untersucht, welche Arten von Inhalt aus welchem Themenbereich verwendet werden und wie diese Inhalte und Inhaltsmodelle strukturiert sind (Baldwin, 2010). Welche Inhaltselemente sind erforderlich, um mit dem zu publizierenden Inhalt alle aktuell bekannten und ggf. zukünftig relevanten Kanäle mit adäquatem Inhalt zu versorgen. Entsprechend ähnlich untersucht und definiert man mit einem UI Inventory welche UI Elemente in einem Projekt verwendet werden (sollen) (Frost, 2013b). Nach der Inventur folgt das Modellieren der Bestandteile.

Inventur: Zuerst einen Überblick verschaffen über die vorhandenen Bausteine, dann die benötigten und relevanten Bausteine systematisch zusammensetzen (gilt sowohl für LEGO als auch für User Interface Design und die Strukturierung von Inhalt).

Modellieren nach dem Baukastenprinzip

Wenn die Inhalte und deren potentielle strukturelle und visuelle Ausprägung bekannt sind, kann man sich an das Modellieren von Inhaltstypen und UI Typen machen. Diese Typen werden stufenweise aufgebaut, beginnend mit dem kleinstmöglichen Bauteil.

Inhalte und User Interface lassen sich modular strukturiert aufbauen — vergleichbar mit den Bausteinen des LEGO-Baukastensystems. Die fünfte Stufe (konkrete Ausprägung) kommt beim Rezipienten an.

Generisches 5-Stufiges Baukasten-Model (Matrix)

Die einzelnen (atomaren) Elemente bzw. Bausteine bauen aufeinander auf und lassen sich flexibel zu einem Model zusammensetzen. Jedes Model lässt sich 5-stufig aufbauen. Vom kleinstmöglichen Element über das generische Template bis zum realen, einmaligen Objekt (individuelles Unikat).

  • Molekül = Komponente oder Modul
  • Organismus = Segment
  • Template oder Typ (generisch)
  • Instanz oder Objekt (konkret)

Korrelation zwischen Inhalt und UI

Es besteht eine Korrelation der Elemente in Atomic Design und Content Modeling, das bedeutet zwischen den einzelnen Inhaltselementen und deren Darstellung im Zielkanal oder verwendeten Medium des Rezipienten. Wenn ich Inhalt modelliere, definiere ich damit quasi indirekt auch gleich das zugehörige UI-Element in generischer Form (Wireframe-artig / ohne Visual Design). Wenn man den Inhaltstyp definiert, legt man außerdem indirekt automatisch auch die entsprechenden Formular-Feld-Typen für das Eingabe-Interface fest. Mit dem Eingabe-Interface werden die Inhalte erfasst. Im besten Fall (für den Erfasser) können das sehr beliebige bzw. die von ihm bevorzugten Systeme sein. Die erfassten Inhalts-Elemente müssen bei unterschiedlichen Systemen zur Struktur des Inhaltstyps passen, damit sie auf diesen gemappt werden können.

Das Content Model definiert das (Backend) UI (Model)

Henne-Ei: Zuerst der Inhalt, dann das UI.
Die Inhaltsmodelle werden nach dem Baukastenprinzip zusammengebaut. Sie bestehen aus kleinsten (atomaren) Elementen, die sich zu kompletten generischen Inhaltstypen zusammensetzen lassen, auf deren Basis wiederum die konkreten Ausprägungen gebildet werden.

Das Inhaltsmodell definiert das UI-Modell: Wenn die inhaltliche Struktur feststeht, ist auch bekannt welche (relevanten) Bausteine im User Interface darzustellen sind.

Universalität und Verständlichkeit

Ich möchte den Bezug zwischen den verschiedenen strategischen und konzeptionellen Disziplinen im Bereich Inhalt und UI herstellen. Alles baut auf dem Baukastenprinzip auf und ist miteinander verknüpft. Spätestens beim Rezipieren der Informationen stehen UI und Inhalt in direktem Zusammenhang. Der Nutzer konsumiert Inhalt und UI nämlich in kombinierter Form. Die Korrelation besteht außerdem auch zwischen UI, Inhalt und Workflows. Schnittstellen bilden die Brücke beispielsweise um Inhalte zu synchronisieren oder zwischen Systemen auszutauschen.

Prozesse und Tools

Wenn man den atomaren Ansatz wählt und nach und nach mit den aufeinander aufbauenden kleinsten Elementen — den Atomen — beginnt, erhält man erst spät im Projektverlauf vorzeigbare Seiten. Voraussetzung dafür ist, dass Moodboards, Scribbles oder Photoshop-Screens, die die Visual Design Richtung andeuten und aus meiner Sicht immer noch eine Berechtigung haben, zur Abstimmung anfangs ausreichen. Je weiter das Projekt fortgeschritten ist, desto mehr amortisieren sich die anfangs höheren Aufwände zum Projektstart (Schätzle, 2015b).

Methodisches Vorgehen

Die Disziplinen UI und Content Modeling, Visual Design und Multiscreen Konzeption werden sich zukünftig noch stärker überschneiden. Projekte werden komplexer, alle Disziplinen und Themenbereiche müssen zur richtigen Zeit berücksichtigt und bearbeitet werden.

Projektverlauf (grobe Übersicht). Der Ablauf ist projektabhängig, Phasen überlappen sich laufen parallel oder wechseln.

Zentraler Content (Management) Hub

Das Konzept basiert auf der bereits erwähnten Vierteilung der Projektbestandteile Inhalt, UI, Workflows und Schnittstellen. Der Content Editor (also der Nutzer der Software) steht dabei im Vordergrund. Die Datenstruktur für das Backend wird entsprechend der Inhaltsmodelle definiert. Das Editor Interface besteht aus einem auf der Datenstruktur basierenden Formular. Im zentralen Content Hub können die Inhalte konsolidiert abgelegt und verwaltet werden.

Dreistufiger Inhaltsfluss: Inhalte entstehen in verschiedenen Quellen, werden im zentralen Content Hub verwaltet und werden in verschiedenen Kanälen ausgegeben (an den Übergängen findet jeweils ein Mapping statt).

Eine Modeling-Software passend zum Baukastenprinzip.

SETU als Tool für zukunftsfähigen Inhalt

Basierend auf den vorgestellten Ideen haben wir bei der SETU GmbH ein Konzept für einen solchen „Content Management Hub“ entwickelt, das wir unser nächstes SETU (3.0)-Release einfließen lassen. Damit lassen sich Content Management Apps für verschiedene Themenschwerpunkte realisieren.

SETU 3.0 (UI Demo-Moodscreen). Mit dem System lassen sich Inhalte modellieren, strukturieren und für die flexible Kombination und Ausgabe in unterschiedlichen User Interfaces vorbereiten.

Quo vadis Inhalt und Interface?

Für die Zukunft empfiehlt es sich Informationen in jeglicher Ausprägung baukastenartig zu planen und zu erfassen, um mit den richtigen Tools möglichst ohne große Zusatzaufwände Informationen auf allen erdenklichen Kanälen publizieren zu können. Die passenden Prinzipien, Methoden und Prozesse sollten verständlich beschrieben, etabliert und angewandt werden. Aus dieser Überzeugung heraus zerlege ich möglichst alle Projektbestandteile in generische Einzelteile, die sich später wieder leicht zusammensetzen lassen. Ganz ähnlich wie man das von LEGO kennt.

Methoden und Regelwerke für die Konzeption, Gestaltung und Umsetzung von Layout, Inhalt und Workflows im Baukasten-Prinzip.

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 ⚽️🚵‍.

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