Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)

1.133 Aufrufe

Veröffentlicht am

Multiscreen ist inzwischen digitale Realität und erfordert einen durchgängigen Informationsfluss, einen zentralen Knotenpunkt für Inhalte und ein System zur Definition von UI Elementen. Inhalte und User Interfaces sollten grundsätzlich unabhängig voneinander sein. Es besteht aber eine Korrelation. Inhalt und User Interfaces lassen sich (beginnend mit dem Inhalt) nach einem jeweils ähnlichen Muster modular und strukturiert planen und zusammenbauen – vergleichbar mit den Bausteinen in einem Baukastensystem.

Mehr zu diesem Thema findet sich im (englischen) Buch "Multiscreen UX Design": http://www.msxbook.com/enbook

Die Folien einer ausführlicheren Version von der Usability Professionals Konferenz 2015 gibt es hier: http://de.slideshare.net/wolframnagel/content-design-und-ui-architektur-fr-multiscreenprojekte-usability-professionals-2015

Veröffentlicht in: Design

Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)

  1. 1. Einführung / kompakt Wolfram Nagel, SETU GmbH Alle Rechte vorbehalten. Content Design und UI Architektur für Multiscreen- Projekte
  2. 2. Aus »Multiscreen UX Design« (www.msxbook.com/enbook → ISBN: 978-0128027295) Multiscreen
  3. 3. › Nutzer / Zielgruppe / Kontext › Thema erkennen / Taxonomie › Ausgabekanäle priorisieren › Content Inventory / Inhalt kennen › Inhaltsstruktur definieren › Inhaltserfassung (Systeme, User, Quellen) › Interaktion / Prototyping › UI Modelle / Living Styleguide › Visual Design und Entwicklung Methodisches Vorgehen ITERATION
  4. 4. User Inhalte Regeln UI Schnittstellen Vier Kernbereiche (+ natürlich der/die User)
  5. 5. Das Inhaltsmodell definiert das UI Modell Inhaltsmodell / Inhaltstyp ↓ Inhaltselemente ! ↓ Backend-UI (Formular-Elemente) ↓ Frontend-UI (Wireframe)
  6. 6. Baukasten prinzip
  7. 7. xxx name (1 day ticket) price date of purchase [...] TICKET (TYPE) title date description [...] EVENT title date body [...] NEWS ITEM name photo biography URL company [...] SPEAKER name (e.g. usability) description time [...] SESSION title abstract description start time duration [...] PRESENTATION name address URL [...] VENUE held at featured in valid for about featured in presented by Inhaltsmodell Eigene Darstellung (Quelle: Jonathan Kahn, http://alistapart.com/article/strategic-content-management)
  8. 8. Baustein Komponente Segment Typ Objekt Atomic Design Quelle: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design
  9. 9. Korrelation BaukastenPrinzip Modellieren nach dem Baukastenprinzip – vergleichbar mit den Bausteinen des LEGO-Baukastensystems.
  10. 10. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
  11. 11. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ... Baustein
  12. 12. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ... Komponente
  13. 13. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ... Segment
  14. 14. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ... TYP Objekt
  15. 15. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen Baustein
  16. 16. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen Komponente
  17. 17. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen SEGMENT
  18. 18. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen TYP
  19. 19. Objekt
  20. 20. Baustein Komponente SEGMENT TYP
  21. 21. long text Mapping Content(structure) ←→ Display (UI ) Titel Bild (mit Caption und Urheber) DatumAutor(en) Kurztext Inhaltsstruktur Titel Kurztext Langtext Bild Datum Autor
  22. 22. Beispiel: Artikel-Titel auf verschiedenen Touchpoints/ Kanälen
  23. 23. Twitter (tweet only) desktop (website) Instapaper Website (Smartphone) E-Mail (Sharing) Facebook (Sharing) Facebook (Timeline) Twitter (Sharing) Twitter (mit Summary) Smartwatch (Push Notification) Smartphone WhatsApp (News-Abo) iPhone App Tablet (Video Content) Potentielle Touchpoints/ Kanäle (Auswahl)
  24. 24. SETU 3.0: Content Modeling-Software nach dem Baukastenprinzip (Demo Moodscreen)
  25. 25. Informationen / Kontakt Wolfram Nagel / SETU GmbH Mail: wn@setusoft.de Twitter: @wolframnagel Web: www.setusoft.de Publikation »Multiscreen UX Design« Verlag / Hrsg.: Morgan Kaufmann ISBN: 978-0128027295 www.msxbook.com/enbook URL zu diesen Folien: www.msxbook.com/CDUIAkompakt

×