Einführung / kompakt
Wolfram Nagel, SETU GmbH
Alle Rechte vorbehalten.
Content Design
und UI Architektur
für Multiscreen-
...
Aus »Multiscreen UX Design« (www.msxbook.com/enbook → ISBN: 978-0128027295)
Multiscreen
›	 Nutzer / Zielgruppe / Kontext
›	 Thema erkennen / Taxonomie
›	 Ausgabekanäle priorisieren
›	 Content Inventory / Inhalt...
User
Inhalte
Regeln UI
Schnittstellen
Vier Kernbereiche (+ natürlich der/die User)
Das Inhaltsmodell definiert
das UI Modell
Inhaltsmodell / Inhaltstyp
↓
Inhaltselemente !
↓
Backend-UI (Formular-Elemente)
...
Baukasten
prinzip
xxx
name (1 day ticket)
price
date of purchase
[...]
TICKET (TYPE)
title
date
description
[...]
EVENT
title
date
body
[......
Baustein Komponente Segment Typ Objekt
Atomic Design
Quelle: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design
Korrelation
BaukastenPrinzip
Modellieren nach dem Baukastenprinzip – vergleichbar mit den Bausteinen des LEGO-Baukastensys...
Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
Baustein
Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
Komponente
Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
Segment
Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
TYP Objekt
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
Baustein
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
Komponente
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
SEGMENT
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
TYP
Objekt
Baustein
Komponente SEGMENT TYP
long text
Mapping Content(structure) ←→ Display (UI )
Titel
Bild (mit Caption und Urheber)
DatumAutor(en)
Kurztext
Inhalts...
Beispiel: Artikel-Titel auf verschiedenen Touchpoints/ Kanälen
Twitter
(tweet only)
desktop
(website)
Instapaper
Website
(Smartphone)
E-Mail
(Sharing)
Facebook
(Sharing)
Facebook
(Timel...
SETU 3.0: Content Modeling-Software nach dem Baukastenprinzip (Demo Moodscreen)
Informationen / Kontakt
Wolfram Nagel / SETU GmbH
Mail: wn@setusoft.de
Twitter: @wolframnagel
Web: www.setusoft.de
Publika...
Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)
Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)
Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)
Nächste SlideShare
Wird geladen in …5
×

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

1.081 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
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.081
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
47
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×