Usability Professionals / Mensch und Computer 2015
Stuttgart, 7. September 2015
Referent: Wolfram Nagel, SETU GmbH
Content...
Methoden und Regelwerke für die Konzeption,
Gestaltung und Umsetzung von Layout, Inhalt
und Workflows im Baukasten-Prinzip...
Wolfram Nagel
Head of UX Design (SETU GmbH)
Multiscreen / UI und UX
Autor »Multiscreen Experience Design«
Co-Initiator Des...
Informationsarchitektur
Produktdaten
Content Management
Intelligente Suchsysteme
Prozessoptimierung
Workflow Automatisieru...
1 | Multiscreen
2 | BAukasten
3 | PRozesse
Multiscreen
Welt
Instapaper
Website
(Smartphone)
E-Mail
(Sharing)
Facebook
(Sharing)
Facebook
(Timeline)
Twitter
(Sharing)
Twitter
(mit Sum...
Touchpoints
Browser (Safari / iOS) iPhone App Instapaper Facebook (Desktop)
Touchpoints
Browser (Safari / iOS)
eigene
iPhone App Instapaper Facebook (Desktop)
Touchpoints
Browser (Safari / iOS)
fremde
iPhone App Instapaper Facebook (Desktop)
Überall publizierbare und
Konsistente Inhalte
1)	Knotenpunkt für Inhalte
2)	Zentrales System zur Definition von UI Element...
User
Inhalte
Regeln UI
Schnittstellen
Vier Kernbereiche (+ natürlich der/die User)
Inhalte
›	 Thematische Tendenz / Themenrelevanz
›	Inhaltstypen
›	Inhaltselemente
›	Formular-Elemente für‘s Backend
›	Klass...
User Interface
›	 UI / VD / IxD
›	 Atomic Design Prinzip
›	Frontend-Ausgabe
›	Formular-Elemente im Backend
›	Preview
›	Liv...
Schnittstellen
›	 App als Content-Lieferant
›	 Bereitstellung und Verteilung von Inhalte
›	Informationsaustausch und Synch...
Workflows / REgeln
›	If This Then That Prinzip
›	 Was ändert sich, wann wie warum, wo?
›	 Was soll wann wie wo angezeigt w...
Herausforderungen
›	 App als Content-Lieferant
›	 Strukturierte Inhalte
›	 UI Modelle für Frontend-Ausgabe
›	If This Then ...
Design from the Content out.
Stephen Hay
http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-wo...
Baukasten
prinzip
Quelle: LEGO® bricks: http://cache.lego.com/r/www/r/aboutus/-/media/about%20us/media%20assets%20library/products/lego%20
b...
You cannot create
good experiences
without knowing your
content structure.
Mark Boulton
http://www.markboulton.co.uk/journ...
Inhaltsmodell
xxx
name (1 day ticket)
price
date of purchase
[...]
TICKET (TYPE)
title
date
description
[...]
EVENT
title
...
Aus dem digiparden Business Cookbook (2008)
Aus dem digiparden Business Cookbook (2008)
Rezeptname
Rezeptname
Fußnote
Softlink
Anleitung
Bild
Autor
Rezeptinfos
Zutate...
Atomic Design
Quelle: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design
Atomic Design
Quelle: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design
Baustein Komponente Segment Typ Objekt
Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
BaukastenPrinzip
Modellieren nach dem Baukastenprinzip: Inhalte und User Interface (und auch Workflows) lassen sich modula...
Inhalte und User Interface modellieren nach dem Baukastenprinzip
BaukastenPrinzip
BaukastenPrinzip
BaukastenPrinzip
BaukastenPrinzip
BaukastenPrinzip
Korrelation
BaukastenPrinzip
Das Inhaltsmodell definiert
das UI Modell
Inhaltsmodell / Inhaltstyp
↓
Inhaltselemente !
↓
Backend-UI (Formular-Elemente)
...
Prozesse
und Tools
›	 Nutzer / Zielgruppe / Kontext
›	 Thema erkennen / Taxonomie
›	 Ausgabekanäle und Geräte
›	 Content Inventory / Content ...
›	 Nutzer / Zielgruppe / Kontext
›	 Thema erkennen / Taxonomie
›	 Ausgabekanäle und Geräte
›	 Content Inventory / Content ...
Inhaltsfluss
»Die Zukunft von Content (Management)« Quelle: www.msxbook.com/ngixup14
Zentraler Content Hub
Titel
Bild (mit Caption und Urheber)
Langtext
DatumAutor(en)
Kurztext
Inhalt Struktur Mapping
(im zentralen Content Hub / Beispielhaft)
Titel
Kurztext
Langtext*
Bild
Dokument
Datum
Autor
E-Mai...
Unabhängiges Eingabe-
Interface
›	 Content Mapping
›	 Erfassungs-UI via Strukturdefinition des Inhaltstyps
›	 Ausgabe und ...
SETU 3.0: Content Modeling-Software nach dem Baukastenprinzip (Demo Moodscreen)
Quo vadis Content und UI?
›	 Digitale Inhalt erscheinen überall
›	Zentraler Kontenpunkt für Inhalte
›	 UI und Workflow Def...
Multiscreen Buch
xxx Autoren: W. Nagel / V. Fischer
Verlag / Hrsg.: digiparden (SETU GmbH)
ISBN: 978-3-9815872-0-3
2. Aufl...
Danke!
Slides: www.msxbook.de/wud15
Mail: wolframnagel@setusoft.de
Twitter: @wolframnagel
Private Website: wolframnagel.co...
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)
Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)
Nächste SlideShare
Wird geladen in …5
×

Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)

2.036 Aufrufe

Veröffentlicht am

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.

Das Thema wurde in ähnlicher Form auch auf dem World Usability Day in München präsentiert. Die Folien hier wurden am 13.11.2015 aktualisiert.

Mehr zu diesem Content Design und UI Architektur und allgemein zum Thema Multiscreen findet sich auch in meinem neuen (englischen) Buch "Multiscreen UX Design": http://www.msxbook.com/enbook

Veröffentlicht in: Design
0 Kommentare
4 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.036
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
270
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Content Design und UI Architektur für Multiscreen-Projekte (Usability Professionals 2015)

  1. 1. Usability Professionals / Mensch und Computer 2015 Stuttgart, 7. September 2015 Referent: Wolfram Nagel, SETU GmbH Content Design und UI Architektur für Multiscreen- Projekte
  2. 2. Methoden und Regelwerke für die Konzeption, Gestaltung und Umsetzung von Layout, Inhalt und Workflows im Baukasten-Prinzip Usability Professionals / Mensch und Computer 2015 Stuttgart, 7. September 2015 Referent: Wolfram Nagel, SETU GmbH Content Design und UI Architektur Twitter:@wolframnagel#gUPA15 #MuC15
  3. 3. Wolfram Nagel Head of UX Design (SETU GmbH) Multiscreen / UI und UX Autor »Multiscreen Experience Design« Co-Initiator Design Methoden Finder www.designmethodenfinder.de Twitter:@wolframnagel#gUPA15 #MuC15
  4. 4. Informationsarchitektur Produktdaten Content Management Intelligente Suchsysteme Prozessoptimierung Workflow Automatisierung SAP Integration Internationalisierung SETU GmbH
  5. 5. 1 | Multiscreen 2 | BAukasten 3 | PRozesse
  6. 6. Multiscreen Welt
  7. 7. Instapaper Website (Smartphone) E-Mail (Sharing) Facebook (Sharing) Facebook (Timeline) Twitter (Sharing) Twitter (mit Summary) Twitter (Tweet only) Smartwatch (Push Notification) Smartphone WhatsApp (News-Abo) iPhone App Desktop (Website) Tablet (Video Content)
  8. 8. Touchpoints Browser (Safari / iOS) iPhone App Instapaper Facebook (Desktop)
  9. 9. Touchpoints Browser (Safari / iOS) eigene iPhone App Instapaper Facebook (Desktop)
  10. 10. Touchpoints Browser (Safari / iOS) fremde iPhone App Instapaper Facebook (Desktop)
  11. 11. Überall publizierbare und Konsistente Inhalte 1) Knotenpunkt für Inhalte 2) Zentrales System zur Definition von UI Elementen 3) Schnittstellen 4) Workflows / Regeln Voraussetzungen, um Inhalte in vielen Kanälen konsistent publizieren zu können.
  12. 12. User Inhalte Regeln UI Schnittstellen Vier Kernbereiche (+ natürlich der/die User)
  13. 13. Inhalte › Thematische Tendenz / Themenrelevanz › Inhaltstypen › Inhaltselemente › Formular-Elemente für‘s Backend › Klassifikation › Kategorien
  14. 14. User Interface › UI / VD / IxD › Atomic Design Prinzip › Frontend-Ausgabe › Formular-Elemente im Backend › Preview › Living Styleguide / Pattern Bibliothek › Design System
  15. 15. Schnittstellen › App als Content-Lieferant › Bereitstellung und Verteilung von Inhalte › Informationsaustausch und Synchronisation › Atomare Inhalts-Bausteine
  16. 16. Workflows / REgeln › If This Then That Prinzip › Was ändert sich, wann wie warum, wo? › Was soll wann wie wo angezeigt werden? › Trigger › Regelbasierte Interaktion zweier Objekte untereinander.
  17. 17. Herausforderungen › App als Content-Lieferant › Strukturierte Inhalte › UI Modelle für Frontend-Ausgabe › If This Then That Prinzip › Bereitstellung und Verteilung von Inhalten › Atomare Inhaltsbausteine
  18. 18. Design from the Content out. Stephen Hay http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
  19. 19. Baukasten prinzip
  20. 20. Quelle: LEGO® bricks: http://cache.lego.com/r/www/r/aboutus/-/media/about%20us/media%20assets%20library/products/lego%20 bricks/720_lego_bricksloose.jpg?l.r2=-1799651218 LEGO Bausteine
  21. 21. You cannot create good experiences without knowing your content structure. Mark Boulton http://www.markboulton.co.uk/journal/structure-first-content-always
  22. 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)
  23. 23. Aus dem digiparden Business Cookbook (2008)
  24. 24. Aus dem digiparden Business Cookbook (2008) Rezeptname Rezeptname Fußnote Softlink Anleitung Bild Autor Rezeptinfos Zutaten Kategorie
  25. 25. Atomic Design Quelle: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design
  26. 26. Atomic Design Quelle: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design Baustein Komponente Segment Typ Objekt
  27. 27. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
  28. 28. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
  29. 29. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
  30. 30. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
  31. 31. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ...
  32. 32. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen
  33. 33. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen
  34. 34. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen
  35. 35. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen
  36. 36. BaukastenPrinzip Modellieren nach dem Baukastenprinzip: Inhalte und User Interface (und auch Workflows) lassen sich modular strukturiert aufbauen – vergleichbar mit den Bausteinen des LEGO-Baukastensystems.
  37. 37. Inhalte und User Interface modellieren nach dem Baukastenprinzip BaukastenPrinzip
  38. 38. BaukastenPrinzip
  39. 39. BaukastenPrinzip
  40. 40. BaukastenPrinzip
  41. 41. BaukastenPrinzip
  42. 42. Korrelation BaukastenPrinzip
  43. 43. Das Inhaltsmodell definiert das UI Modell Inhaltsmodell / Inhaltstyp ↓ Inhaltselemente ! ↓ Backend-UI (Formular-Elemente) ↓ Frontend-UI (Wireframe)
  44. 44. Prozesse und Tools
  45. 45. › 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
  46. 46. › 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 ITERATION Grobe Übersicht. Ablauf ist projektabhängig. Phasen überlappen sich, laufen parallel oder wechseln.
  47. 47. Inhaltsfluss »Die Zukunft von Content (Management)« Quelle: www.msxbook.com/ngixup14
  48. 48. Zentraler Content Hub
  49. 49. Titel Bild (mit Caption und Urheber) Langtext DatumAutor(en) Kurztext
  50. 50. 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.
  51. 51. Unabhängiges Eingabe- Interface › Content Mapping › Erfassungs-UI via Strukturdefinition des Inhaltstyps › Ausgabe und Frontend-Styling davon unabhängig › Content Structure Preview (Content Wireframe) › Reihenfolge und Darstellung im Client
  52. 52. SETU 3.0: Content Modeling-Software nach dem Baukastenprinzip (Demo Moodscreen)
  53. 53. Quo vadis Content und UI? › Digitale Inhalt erscheinen überall › Zentraler Kontenpunkt für Inhalte › UI und Workflow Definition › Flexibilität durch Baukastenprinzip › Zukunftsfähige Methoden, Tools und Prozesse
  54. 54. Multiscreen Buch xxx Autoren: W. Nagel / V. Fischer Verlag / Hrsg.: digiparden (SETU GmbH) ISBN: 978-3-9815872-0-3 2. Auflage (deutsch), Juli 2013 284 Seiten Preis: EUR 39,90 (auch als E-Book erhältlich) www.multiscreen-experience-design.com/buch Englische Neuauflage Dez. 2015
  55. 55. Danke! Slides: www.msxbook.de/wud15 Mail: wolframnagel@setusoft.de Twitter: @wolframnagel Private Website: wolframnagel.com SETU Software: setusoft.de

×