Content UI Mapping

360 Aufrufe

Veröffentlicht am

Wie funktioniert ein System zur Erfassung, Verwaltung, regelbasierten Ausgabe und Darstellung von Informationen in unterschiedlichsten Zielkanälen?

Der Artikel zum Thema: http://www.msxbook.com/CUIMUP16txt

Zusammenfassung: Inhalte und User Interfaces lassen sich nach einem jeweils ähnlichen Muster modular und strukturiert planen und zusammenbauen — vergleichbar mit den Bausteinen in einem Baukastensystem. Inhalt durchläuft von der Entstehung bis zur Rezeption in verschiedensten Kanälen grundsätzlich drei Stufen: Erfassung, Verwaltung und Ausgabe. An den beiden Übergängen muss jeweils ein Mapping stattfinden. Zum einen müssen Inhalte zur definierten Inhaltsstruktur passen (Inhalt Struktur Mapping). Zum anderen müssen die einzelnen Bausteine der strukturierten Inhalte auf die Ausgabe-Bausteine zur Darstellung in verschiedenen Zielkanälen gemappt werden (UI Mapping). Das Baukasten-Prinzip und die methodische Herangehensweise lassen sich mit Hilfe von intelligenter Software unterstützen. Wolfram Nagel (Head of UX / SETU GmbH) stellt in dem Vortrag hilfreiche und in der Praxis bewährte Prinzipien, Muster, Methoden und Erkenntnisse vor.

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
360
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
100
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Content UI Mapping

  1. 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. 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. 3. SETU GMBH Informationsarchitektur Produktdaten Content Management Intelligente Suchsysteme Prozessoptimierung Workflow Automatisierung SAP Integration Internationalisierung
  4. 4. 1 | MULTISCREEN 2 | BAUKASTEN UND MODULE 3 | MAPPING
  5. 5. MULTISCREEN WELT
  6. 6. Aus »Multiscreen UX Design« (www.msxbook.com/enbook → ISBN: 978-0128027295) MULTISCREEN
  7. 7. Gerät / Screen Nutzungskontext Nutzer Strategien und Beispiele Aus »Multiscreen UX Design« (www.msxbook.com/enbook → ISBN: 978-0128027295)
  8. 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. 9. Auswahl an Zielkanälen, Geräten und Touchpoints Beispiel »New York Times« Artikel
  10. 10. TOUCHPOINTS fremde Instapaper Facebook (Desktop)Browser (Safari / iOS) eigene iPhone App
  11. 11. Design from the Content out. Stephen Hay http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
  12. 12. USER INHALTE REGELN UI SCHNITTSTELLEN Vier Kernbereiche (+ natürlich der/die User)
  13. 13. BAUKASTEN UND MODULE
  14. 14. Bausteine → Stoßstange → Fahrerhaus → »LKW« → Feuerwehr oder Polizei oder ... KOMPONENTEBAUSTEIN SEGMENT TYP OBJEKT
  15. 15. 1 2 4 53 BausteinLEGO Stoßstange LKW Feuerwehr-LKWFahrerhaus Korrelation BAUKASTENPRINZIP Baustein Subtemplate Inhaltstyp Zielsystem
  16. 16. Baustein Komponente Segment Typ Objekt ATOMIC DESIGN Quelle: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design Baustein Subtemplate UI Typ
  17. 17. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen KOMPONENTE
  18. 18. BAUSTEIN KOMPONENTE SEGMENT TYP
  19. 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. 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. 21. CONTENT UND UI MAPPING
  22. 22. INHALTSFLUSS Quelle: »Die Zukunft von Content (Management)« / www.msxbook.com/ngixup14
  23. 23. INHALTSFLUSS INPUT VERWALTEN OUTPUT verschiedenste Quellen verschiedenste KanäleContent Hub
  24. 24. INPUT VERWALTEN OUTPUT verschiedenste Quellen verschiedenste KanäleContent Hub INHALTSFLUSS INHALT STRUKTUR MAPPING Inhalte aus beliebiger Quelle werden auf definierte Inhaltsstruktur gemappt.
  25. 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. 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. 27. https://twitter.com/sorenmalling/status/691388259377745920
  28. 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. 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. 30. Titel Bild (mit Caption und Urheber) DatumAutor(en) KurztextLangtext Inhaltsstruktur Titel Kurztext Langtext Bild Datum Autor
  31. 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. 32. MAPPING OPTIONEN A) Ein Inhalt → unterschiedliche Darstellung B) Verschiedene Inhalte → identische Darstellung C) Ein Inhalt → identische Darstellung D) Verschiedene Inhalte → unterschiedliche Darstellung
  33. 33. Inhaltstyp (Events) Rubrik Bild Titel Untertitel Termin Location Beschreibung
  34. 34. LARGE MEDIUM SMALL
  35. 35. LARGE MEDIUM SMALL
  36. 36. Inhalts-Bausteine Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung Teaser Large Großes Bild | Titel | 4x Kurztext Teaser Medium Kleines Bild | Titel | 5x Kurztext Teaser Small Kein Bild | Titel | 4x Kurztext Inhaltstyp (Events) Unterschiedliche Darstellung LARGE MEDIUM SMALL
  37. 37. Inhalts-Bausteine Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung Inhaltstyp (Events) LARGE MEDIUM SMALL
  38. 38. Inhalts-Bausteine Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung Inhaltstyp (Events) LARGE MEDIUM SMALL
  39. 39. LARGE Bausteine Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung Bausteine Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung Bausteine Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung Inhaltstyp (Events) Inhaltstyp (Events) Inhaltstyp (Events) MEDIUM SMALL
  40. 40. LARGE Bausteine Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung Bausteine Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung Bausteine Rubrik | Bild | Titel | Untertitel | Termin | Location | Beschreibung Inhaltstyp (Events) Inhaltstyp (Events) Inhaltstyp (Events) MEDIUM SMALL Inhalts-Bausteine UI-BausteineMapping
  41. 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. 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
  43. 43. 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
  44. 44. 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. 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. 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. 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. 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. 49. BUCH SMARTPHONE KLEID LEGO SCHUHE FERNSEHER
  50. 50. Artikelbezeichnung Bild Beschreibung Autor Preis
  51. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 61. SETU 3.0: Content Modeling-Software nach dem Baukastenprinzip (Demo Moodscreen)
  62. 62. BESTANDTEILE
  63. 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. 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. 65. ZIELSYSTEME
  66. 66. LARGE Artikel Rubrik | Bild | Titel | Untertitel | Datum | Location | Kurztext Artikel Rubrik | Bild | Titel | Untertitel | Datum | Location | Kurztext Artikel Rubrik | Bild | Titel | Untertitel | Datum | Location | Kurztext Inhaltstyp (Events) Inhaltstyp (Events) Inhaltstyp (Events) MEDIUM SMALL UI MAPPING
  67. 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. 68. AUSBLICK
  69. 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. 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. 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. 72. Information wird als Temperatur ausgeben. Baustein Tado Smart-Thermostat Heizungssteuerung via Smarthpone-App oder Browser
  73. 73. Informationen werden »nur« mit Wörtern ausgetauscht. Conversational User Interfaces und Chatbots Spracherkennung und Sprachverarbeitung / Kommunikation über automatische oder persönliche Chats
  74. 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. 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. 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. 77. DANKE! Slides: msxbook.com/CUIMUP16 Artikel: msxbook.com/CUIMUP16txt Mail: wolfram.nagel@setusoft.de Twitter: @wolframnagel Website: wolframnagel.com SETU: setusoft.de

×