Content UI Mapping

1. Wie funktioniert ein System zur Erfassung, Verwaltung, regelbasierten Ausgabe und Darstellung von Informationen in unterschiedlichsten Zielkanälen? Twitter:@wolframnagel#gUPA16 #muc2016 CONTENT UND UI MAPPING Usability Professionals / Mensch und Computer 2016 Aachen, 6. September 2016 Wolfram Nagel, SETU GmbH

2. WOLFRAM NAGEL Head of UX Desgin (SETU GmbH) Multiscreen / UI und UX Autor »Multiscreen UX Design« Co-Initiator Design Methoden Finder www.designmethodenfinder.de Twitter:@wolframnagel#gUPA16 #MuC16

3. SETU GMBH Informationsarchitektur Produktdaten Content Management Intelligente Suchsysteme Prozessoptimierung Workflow Automatisierung SAP Integration Internationalisierung

4. 1 | MULTISCREEN 2 | BAUKASTEN UND MODULE 3 | MAPPING

5. MULTISCREEN WELT

6. Aus »Multiscreen UX Design« (www.msxbook.com/enbook → ISBN: 978-0128027295) MULTISCREEN

7. Gerät / Screen Nutzungskontext Nutzer Strategien und Beispiele Aus »Multiscreen UX Design« (www.msxbook.com/enbook → ISBN: 978-0128027295)

8. »The Future of Content Management« (Kapitel 6) und »Content Design and UI Architecture« (Kapitel 7) in: Multiscreen UX Design, Morgan Kaufmann (www.multiscreen-ux-design.com)

9. Auswahl an Zielkanälen, Geräten und Touchpoints Beispiel »New York Times« Artikel

10. TOUCHPOINTS fremde Instapaper Facebook (Desktop)Browser (Safari / iOS) eigene iPhone App

11. Design from the Content out. Stephen Hay http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

12. USER INHALTE REGELN UI SCHNITTSTELLEN Vier Kernbereiche (+ natürlich der/die User)

13. BAUKASTEN UND MODULE

14. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ... KOMPONENTEBAUSTEIN SEGMENT TYP OBJEKT

15. 1 2 4 53 BausteinLEGO Stoßstange LKW Feuerwehr-LKWFahrerhaus Korrelation BAUKASTENPRINZIP Baustein Subtemplate Inhaltstyp Zielsystem

16. Baustein Komponente Segment Typ Objekt ATOMIC DESIGN Quelle: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design Baustein Subtemplate UI Typ

17. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen KOMPONENTE

18. BAUSTEIN KOMPONENTE SEGMENT TYP

19. 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) Inhaltstyp Inhaltselement Gruppe

20. The essence of content design is to create units of content that can address diverse needs successfully. Michael Andrews http://storyneedle.com/what-is-content-design/

21. CONTENT UND UI MAPPING

22. INHALTSFLUSS Quelle: »Die Zukunft von Content (Management)« / www.msxbook.com/ngixup14

23. INHALTSFLUSS INPUT VERWALTEN OUTPUT verschiedenste Quellen verschiedenste KanäleContent Hub

24. INPUT VERWALTEN OUTPUT verschiedenste Quellen verschiedenste KanäleContent Hub INHALTSFLUSS INHALT STRUKTUR MAPPING Inhalte aus beliebiger Quelle werden auf definierte Inhaltsstruktur gemappt.

25. INPUT VERWALTEN OUTPUT verschiedenste Quellen verschiedenste KanäleContent Hub INHALTSFLUSS UI MAPPING Strukturierter Inhalt wird auf die Darstellung in verschiedenen Zielkanälen gemappt. INHALT STRUKTUR MAPPING Inhalte aus beliebiger Quelle werden auf definierte Inhaltsstruktur gemappt.

26. INPUT VERWALTEN OUTPUT verschiedenste Quellen verschiedenste KanäleContent Hub INHALTSFLUSS (DREISTUFIG) INHALT STRUKTUR MAPPING Inhalte aus beliebiger Quelle werden auf definierte Inhaltsstruktur gemappt. 1 2 3 UI MAPPING Strukturierter Inhalt wird auf die Darstellung in verschiedenen Zielkanälen gemappt.

27. https://twitter.com/sorenmalling/status/691388259377745920

28. 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.

29. INHALT STRUKTUR MAPPING (IM ZENTRALEN CONTENT HUB / BEISPIELHAFT) 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 Artikel Titel Kurztext Langtext* Bild Dokument Datum Autor

30. Titel Bild (mit Caption und Urheber) DatumAutor(en) KurztextLangtext Inhaltsstruktur Titel Kurztext Langtext Bild Datum Autor

31. VORAUSSETZUNGEN › Unabhängiges Eingabe-Interface › Zentraler Content Hub › Struktur des Inhaltstyps definiert das Back-End-Formular › Ausgabe und Frontend-Styling davon unabhängig › Content Structure Preview (Content Wireframe) › Reihenfolge und Darstellung im Zielsystem (Client) › Korrelation von Inhalt und Darstellung › Mapping von Inhalt und Darstellung

32. MAPPING OPTIONEN A) Ein Inhalt → unterschiedliche Darstellung B) Verschiedene Inhalte → identische Darstellung C) Ein Inhalt → identische Darstellung D) Verschiedene Inhalte → unterschiedliche Darstellung

33. Inhaltstyp (Events) Rubrik Bild Titel Untertitel Termin Location Beschreibung

34. LARGE MEDIUM SMALL

35. LARGE MEDIUM SMALL

41. KORRELATION UND MAPPING (VERSCHIEDENE INHALTE → EINE DARSTELLUNG) Artikel Headline, Datum, Subline, Rubrik, Bild, Autor, ... Teaser (Artikel) Event Titel, Datum, Location, Rubrik, Bild, Uhrzeit, Eintritt, ... Teaser (Event) Generische Struktur Titel, Kurztext, Kurztext, Kurztext, Bild Teaser Komponente (generisch) Verschiedene Inhaltstypen Identische Darstellung Inhaltstyp Events Titel Termin Location Rubrik Bild Uhrzeit Eintritt Inhaltstyp Artikel Headline Datum Subline Rubrik Bild Autor ... Generische Struktur Haupttext Kurztext Kurztext Kurztext Bild

42. KORRELATION UND MAPPING (VERSCHIEDENE INHALTE → EINE DARSTELLUNG) Artikel Headline, Datum, Abstract, Rubrik, Bild, Autor, ... Teaser (Artikel) Event Titel, Termin, Location, Rubrik, Bild, Uhrzeit, Eintritt, ... Teaser (Event) Generische Struktur Haupttext, Kurztext, Kurztext, Kurztext, Bild Teaser Komponente (generisch) Verschiedene Inhaltstypen Identische Darstellung

45. KORRELATION UND MAPPING (VERSCHIEDENE INHALTE → EINE DARSTELLUNG) Artikel Headline, Datum, Subline, Rubrik, Bild, Autor, ... Teaser (Artikel) Event Titel, Datum, Location, Rubrik, Bild, Uhrzeit, Eintritt, ... Teaser (Event) Generische Struktur Titel, Kurztext, Kurztext, Kurztext, Bild Teaser Komponente (generisch) Verschiedene Inhaltstypen Identische Darstellung Inhaltstyp Events Titel Termin Location Rubrik Bild Uhrzeit Eintritt Inhaltstyp Artikel Headline Datum Abstract Rubrik Bild Autor ... Generische Struktur Haupttext Kurztext Kurztext Kurztext Bild

46. METHODEN UND VORGEHENSMODELLE › Content Modeling › Atomic Design › Objektorientierung › Content and Display Patterns › Fünfstufiges Baukasten-Prinzip Methoden, Konzepte und Strategien mit modularem Ansatz. Erläuterungen und Quellen via www.msxbook.com/CUIMUP16txt

47. ITERATION Grobe Übersicht. Ablauf ist projektabhängig. Phasen überlappen sich, laufen parallel oder wechseln. › 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

48. PROZESS › Content Analyse › Inhaltstyp(en) und Inhaltsmodell › Ausprägungen › Multiscreen / Kanäle / Zielsysteme › User Interface › Content UI Mapping Fokus auf Content, UI und Mapping. Details und Checklisten via www.msxbook.com/en/pjwflw und www.msxbook.com/en/pjphclde

49. BUCH SMARTPHONE KLEID LEGO SCHUHE FERNSEHER

50. Artikelbezeichnung Bild Beschreibung Autor Preis

51. Komponente / Element Artiktelbezeichnung Artikelbezeichnung Detail Beschreibung Sonderinfo Bild(er) Auflage Erscheinungsdatum Leseprobe (Blick ins Buch) Übersetzer Hörprobe (Audio) Von / Autor / Hersteller Markenlabel Anbieter Prime / Lieferant Bewertung Rezensionen Varianten Format / Größe Preis Unverbindliche Preisempfehlung Buch X X X X X X X X X X X X X X X X X Fernseher X X X X X X X X X X X X Smartphone X X X X X X X X X X LEGO X X X X X X X X X X Schuhe X X X X X X X X X X Kleid X X X X X X X X X X X Tasse X X X X X X X X X INHALTSTYP(EN) »AMAZON-PRODUKT«

52. Komponente / Element Artiktelbezeichnung Artikelbezeichnung Detail Beschreibung Sonderinfo Bild(er) Auflage Erscheinungsdatum Leseprobe (Blick ins Buch) Übersetzer Hörprobe (Audio) Von / Autor / Hersteller Markenlabel Anbieter Prime / Lieferant Bewertung Rezensionen Varianten Format / Größe Preis Unverbindliche Preisempfehlung Buch X X X X X X X X X X X X X X X X X Fernseher X X X X X X X X X X X X Smartphone X X X X X X X X X X LEGO X X X X X X X X X X Schuhe X X X X X X X X X X Kleid X X X X X X X X X X X Tasse X X X X X X X X X Subtemplate Stammdaten Buch Spezifika Anbieter und Hersteller User Generated Content Abmessungen und Preise INHALTSTYP(EN) »AMAZON-PRODUKT«

53. Komponente / Element Artiktelbezeichnung Artikelbezeichnung Detail Beschreibung Sonderinfo Bild(er) Auflage Erscheinungsdatum Leseprobe (Blick ins Buch) Übersetzer Hörprobe (Audio) Von / Autor / Hersteller Markenlabel Anbieter Prime / Lieferant Bewertung Rezensionen Varianten Format / Größe Preis Unverbindliche Preisempfehlung Buch X X X X X X X X X X X X X X X X X Fernseher X X X X X X X X X X X X Smartphone X X X X X X X X X X LEGO X X X X X X X X X X Schuhe X X X X X X X X X X Kleid X X X X X X X X X X X Tasse X X X X X X X X X Subtemplate Baustein Subtemplate Stammdaten Buch Spezifika Anbieter und Hersteller User Generated Content Abmessungen und Preise INHALTSTYP(EN) »AMAZON-PRODUKT« Inhaltstyp Ausprägungen

54. Komponente / Element Artiktelbezeichnung Artikelbezeichnung Detail Beschreibung Sonderinfo Bild(er) Auflage Erscheinungsdatum Leseprobe (Blick ins Buch) Übersetzer Hörprobe (Audio) Von / Autor / Hersteller Markenlabel Anbieter Prime / Lieferant Bewertung Rezensionen Varianten Format / Größe Preis Unverbindliche Preisempfehlung Fernseher X X X X X X X X X X X X Smartphone X X X X X X X X X X LEGO X X X X X X X X X X Schuhe X X X X X X X X X X Kleid X X X X X X X X X X X Tasse X X X X X X X X X Subtemplate Baustein Subtemplate Stammdaten Buch Spezifika Anbieter und Hersteller User Generated Content Abmessungen und Preise INHALTSTYP(EN) »AMAZON-PRODUKT« Inhaltstyp Ausprägungen Inhaltstyp: Amazon-Produkt › Ausprägung: Buch › Subtemplate: Abmessungen und Preise › Baustein: Preis | Wert: 29,- EUR Buch X X X X X X X X X X X X X X X X X

55. INHALTSMODELL 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 title abstract description start time duration max. attendee prior knowledge [...] WORKSHOP variation of Inhaltstyp Inhaltstyp Baustein Korrelation der Inhaltstypen Gruppe Ausprägung

56. Komponente / Element Titel Datum Beschreibung Kurzbeschreibung ... ... ... ... ... ... ... Location ... ... URL ... ... ... ... ... Event X X X X X X Venue X X X X X X X X X Ticket X X X X News Item X X X X X X X Session X X X X X X X X X Presentation X X X X X X X X X X INHALTSTYPEN FÜR »VERANSTALTUNG« Workshop X X X X X X X X X Speaker X X X X X X X X X Inhaltstyp Variante

57. Komponente / Element Headline Kurztext Langtext (Haupttext) Alternativer Kurztext Twitter-/ Teasertext (140 Zeichen) Beschreibung / Erläuterung Logo Hauptbild Bildergalerie Alternativbild Originalbild Video Audio Dokument Erstellungsdatum Letzte Änderung(en) Autor Quellen Direktlink News-ID Web X X X X X X X X X X X X App X X X X X X X X X X X X X Smartwatch X X X X X TV X X X X X X X X X X E-Mail X X X X X X X Twitter X X X X X X X Facebook X X X X X X X X ZIELSYSTEME FÜR »NYT NEWS« Subtemplate Texte Media Metadaten

58. Komponente / Element Headline Kurztext Langtext (Haupttext) Alternativer Kurztext Twitter-/ Teasertext (140 Zeichen) Beschreibung / Erläuterung Logo Hauptbild Bildergalerie Alternativbild Originalbild Video Audio Dokument Erstellungsdatum Letzte Änderung(en) Autor Quellen Direktlink News-ID Web X X X X X X X X X X X X App X X X X X X X X X X X X X Smartwatch X X X X X TV X X X X X X X X X X E-Mail X X X X X X X Twitter X X X X X X X Facebook X X X X X X X X ZIELSYSTEME FÜR »NYT NEWS« Subtemplate Texte Media Metadaten Baustein Subtemplate Inhaltstyp Zielsysteme

59. Komponente / Element Headline Kurztext Langtext (Haupttext) Alternativer Kurztext Twitter-/ Teasertext (140 Zeichen) Beschreibung / Erläuterung Logo Hauptbild Bildergalerie Alternativbild Originalbild Video Audio Dokument Erstellungsdatum Letzte Änderung(en) Autor Quellen Direktlink News-ID Web X X X X X X X X X X X X App X X X X X X X X X X X X X Smartwatch X X X X X TV X X X X X X X X X X E-Mail X X X X X X X Twitter X X X X X X X Facebook X X X X X X X X ZIELSYSTEME FÜR »NYT NEWS« Subtemplate Texte Media Metadaten Baustein Subtemplate Inhaltstyp Zielsysteme

60. Artikel-Headline Baukastenprinzip Beispiel-ID: CT001.V001.ST001.B001 »HTML-Marker« für Mapping in Zielsystem-Template Content → UI Artikel › BreakingNews › Texte › Headline Inhaltstyp: Artikel › Ausprägung: BreakingNews › Subtemplate: Texte › Baustein: Headline

61. SETU 3.0: Content Modeling-Software nach dem Baukastenprinzip (Demo Moodscreen)

62. BESTANDTEILE

63. Komponente / Element Artiktelbezeichnung Artikelbezeichnung Detail Beschreibung Sonderinfo Bild(er) Auflage Erscheinungsdatum Leseprobe (Blick ins Buch) Übersetzer Hörprobe (Audio) Von / Autor / Hersteller Markenlabel Anbieter Prime / Lieferant Bewertung Rezensionen Varianten Format / Größe Preis Unverbindliche Preisempfehlung Buch X X X X X X X X X X X X X X X X X Fernseher X X X X X X X X X X X X Smartphone X X X X X X X X X X LEGO X X X X X X X X X X Schuhe X X X X X X X X X X Kleid X X X X X X X X X X X Tasse X X X X X X X X X Subtemplate Stammdaten Buch Spezifika Anbieter und Hersteller User Generated Content Abmessungen und Preise INHALTSTYP Baustein Subtemplate Inhaltstyp Ausprägungen

64. INHALTSMODELL 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 title abstract description start time duration max. attendee prior knowledge [...] WORKSHOP variation of Inhaltstyp Baustein Gruppe Ausprägung

65. ZIELSYSTEME

67. › Strukturierte Inhalte als Bausteine › User Interface Patterns › Schnittstellen › Reaktionsfähige Inhalte › Dynamische (Meta) Informationen › Benutzerinformationen › Nutzungskontext › Geräte und Zielsysteme › Workflows und Schnittstellen BASICS

68. AUSBLICK

69. › Fließtext › Liste › Tabelle › Chart / Schaubild / Infografik › Interaktiv / Applikation › ... VISUELLE DARSTELLUNG VON INHALT Darstellungsart basiert u.a. auf Zielsystem, Nutzungskontext, Metainformationen (zur Laufzeit), sowie Informationen über den Benutzer (Profil, bisheriges Verhalten, Vorwissen, Interessen, Intention, Bedürfnisse).

70. Ein User Interface ist nicht nur visuell! Input, Output und Interaktion auch via: › Audio / Sprache › Haptik / Berührung › Temperatur › Nur Text › ... GRAPHICAL USER INTERFACE

71. Information wird in Sprache übersetzt. Apple CarPlay und Siri Mit freundlicher Genehmigung von Zac Hall (9to5mac) und Ted Kritsonis (mobilesyrup) https://9to5mac.com/2015/09/22/ios-9-carplay-walkthrough / http://mobilesyrup.com/2015/10/19/apple-carplay-review/

72. Information wird als Temperatur ausgeben. Baustein Tado Smart-Thermostat Heizungssteuerung via Smarthpone-App oder Browser

73. Informationen werden »nur« mit Wörtern ausgetauscht. Conversational User Interfaces und Chatbots Spracherkennung und Sprachverarbeitung / Kommunikation über automatische oder persönliche Chats

74. Gedanke: Damit Informationen zukünftig auf allen erdenklichen Kanälen koheränt ausgegeben werden können, muss man bei UI Styleguides, Inhaltsmodellen und beim Mapping das Internet der Dinge und alle anderen Interface Ausprägungen auch mitberücksichtigen.

75. FAZIT › Content und UI nach Baukastensystem aufbauen › Korrelation und Mapping › Zukünftige UI bedenken › Bewährte Methoden kombinieren › Prozesse mittels Software unterstützen › Workflows und Automatisierung

76. MULTISCREEN BÜCHER Multiscreen UX Design (2015) Verlag / Hrsg.: Morgan Kaufmann ISBN: 978-0128027295 Multiscreen Experience Design (2013) Verlag / Hrsg.: digiparden (SETU GmbH) ISBN: 978-3-9815872-0-3 www.multiscreen-ux-design.com

77. DANKE! Slides: msxbook.com/CUIMUP16 Artikel: msxbook.com/CUIMUP16txt Mail: wolfram.nagel@setusoft.de Twitter: @wolframnagel Website: wolframnagel.com SETU: setusoft.de