User Experience Design für Entwickler

32ae0ae04b5c4f1b29ee9e8826823fbc?s=47 Jörg Neumann
February 27, 2020

User Experience Design für Entwickler

32ae0ae04b5c4f1b29ee9e8826823fbc?s=128

Jörg Neumann

February 27, 2020
Tweet

Transcript

  1. JÖRG NEUMANN | ACLUE GmbH USER EXPERIENCE DESIGN FÜR ENTWICKLER

  2. JÖRG NEUMANN THEMEN • Frontend Technologies • Mobile Development •

    Machine Learning • Consulting, Coaching, Training KONTAKT • Mail: joerg.neumann@aclue.de • Twitter: @JoergNeumann • GitHub: https:/ /github.com/JoergNeumann • Blog: www.HeadWriteLine.BlogSpot.com
  3. WAS IST USABILITY?

  4. WAS IST USABILITY?

  5. WAS IST USABILITY?

  6. WAS IST USER EXPERIENCE? Foto: Taylor Herring

  7. UX ENGINEERING

  8. UM WAS ES NICHT GEHT • ES GEHT NICHT UM

    AUSSEHEN! • ES GEHT NICHT UM TECHNOLOGIE! • ES GEHT NICHT UM DESIGNER! • ES GEHT NICHT UM ENTWICKLER! | | | |
  9. ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER!

    ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER! ES GEHT UM DEN ANWENDER!
  10. UM WAS ES GEHT • WER IST DER ANWENDER? •

    WAS IST SEINE PRIMÄRE TÄTIGKEIT? • WAS SIND HERAUSFORDERUNGEN? • WAS KÖNNTE IHM HELFEN?
  11. UX VS. DEVELOPMENT

  12. Entwerfen Entwickeln Analysieren VORGEHEN validieren validieren zuhören, beobachten, lernen |

    > Skizzen, Wireframes, Storyboards | > MVP bauen, | > Gebrachs- tauglichkeit testen
  13. Focus | • | | | | | | |

    | | | | • • • • • Scope Persona ANALYSE Analyse des Anwenders Analyse der primären Tätigkeit Analyse der Umgebung
  14. DESIGN PRINCIPALS

  15. DESIGN PRINCIPALS ALLGEMEINE GESTALTUNGSREGELN • zum visuellen System • kognitive

    und psychologische Effekte • Intuition ZWECK • Besseres Verständnis für die Gestaltung • Nicht alle Regeln können eingehalten werden
  16. DESIGN PRINCIPLES Visual System • Inattentional Blindness • Gestalt Design

    Laws (proximity, similarity, …) Cognitive • Hick’s Law • Forgiveness • Gutenberg Diagram Intuitive • Horror Vacui • Contour Bias • Aesthetics Psychological • Status Quo Bias • Expectation Effects • Unconscious Influence
  17. INATTENTIONAL BLINDNESS TEST • Du siehst gleich hintereinander drei Bilder

    mit Tieren • Auf welchem ist ein Schwein abgebildet?
  18. INATTENTIONAL BLINDNESS

  19. INATTENTIONAL BLINDNESS

  20. INATTENTIONAL BLINDNESS

  21. INATTENTIONAL BLINDNESS • Wie viele Schweine hast Du gesehen? •

    Und wie viele Hasen?
  22. INATTENTIONAL BLINDNESS Wo ist hier der Hase?

  23. HICK‘S LAW

  24. PROXIMITY

  25. PROXIMITY

  26. PROXIMITY My Web App http://www.url.com text Vorname text Nachname text

    text PLZ/Ort text Straße Abstand > > | text Vorname text Nachname text text PLZ/Ort text Straße
  27. CONTOUR BIAS Auf welchem Sessel willst Du sitzen?

  28. My Web App http://www.url.com CONTOUR BIAS Auf welchen Button willst

    Du drücken? Speichern Speichern
  29. STATUS-QUO BIAS „Die meisten Anwender würden ‚Ja‘ sagen“

  30. Konzentration auf das Wesentliche | > Produkte sehen teuer aus

    | > HORROR VACUI
  31. Was wird hier alles verkauft? | > Produkte sehen billig

    aus | >
  32. None
  33. Vertraust Du dieser Bank? | >

  34. None
  35. None
  36. ANWENDUNG

  37. Window File Insert View Format Home Module text text text

    text text text text text text text text text text text text text text text text text text text text text text text text Navigation Daten Status text text text text DATEN CHROME NAVIGATION
  38. Window Text Text Text Text Text Text Titel Text Text

    Text Text Text Text Text Text Text Text CHROME NAVIGATION DATEN
  39. FARBEN Palette von Helligkeiten/ Sättigungen dieser Farbtöne 1 bis max.

    3 Hauptfarbtöne im Interface | >
  40. FARBEN Sehr klares Design. Schnell verständlich Aber: Dekoration und Interaktion

    haben dieselbe Farbe!
  41. FARBEN ÜBERSCHRIFT Erstellen Lorem ipsum dolor sit amet, consetetur sadipscing

    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Abbrechen Erstellen primäres Kommando sekundäres Kommando | > Rahmen/ Header | > Schrift | > Hintergrund | >
  42. LAYERING So schön ist der Königssee Wichtige Information partieller Overlay

    vollständiger Overlay Buchen Schatten- wurf
  43. Wichtiges groß Unwichtiges klein Wichtiges oben Unwichtiges unten

  44. BEISPIELE

  45. My Web App http://www.url.com text Vorname text Nachname text text

    PLZ/Ort text Straße Was ist primär, was sekundär? Was ist das Standard- kommendo? Speichern Verwerfen Löschen Hilfe
  46. My Web App http://www.url.com text Vorname text Nachname text PLZ/Ort

    text Straße sekundäre Kommendos primäre Kommendos Hilfe Löschen Verwerfen Speichern text
  47. My Web App http://www.url.com text Vorname text Nachname text PLZ/Ort

    text Straße Speichern Verwerfen Hilfe Löschen primäre Aktion | > text
  48. My Web App http://www.url.com text Vorname text Nachname text PLZ/Ort

    text Straße Speichern Verwerfen Hilfe Löschen text | | | | | | | | | > > von links nach rechts
  49. My Web App http://www.url.com text Vorname text Nachname text PLZ/Ort

    text Straße Speichern Verwerfen Hilfe Löschen text | | | | | | | > | | > von oben nach unten
  50. My Web App http://www.url.com text Vorname text Nachname text text

    PLZ/Ort text Straße Speichern Verwerfen eine Spalte = leichter lesbar | > Hilfe Löschen
  51. My Web App http://www.url.com text Vorname text Nachname text text

    PLZ/Ort text Straße Speichern Verwerfen Account löschen Hilfe für die Eingabe Sekundäre Kommandos als Link | > Wofür? | >
  52. My Web App http://www.url.com text Vorname text Nachname text text

    PLZ/Ort text Straße Account löschen Hilfe für die Eingabe Runde Formen Speichern
  53. My Web App http://www.url.com Profil anlegen Speichern Hilfe für die

    Eingabe Vorname Nachname Ort PLZ Straße abgesetzter Aktionsbereich Kontext Card Design bildet einen Rahmen für den Kontext | >
  54. My Web App http://www.url.com Profil anlegen Speichern Hilfe für die

    Eingabe Vorname Nachname Ort PLZ Straße Wasserzeichen- text ersetzt Labels | > Direkte Interaktion ersetzt Button | >
  55. My Web App http://www.url.com Profil anlegen Speichern Hilfe für die

    Eingabe Mark Müller Pinneberg 25421 Hauptstraße 4 Kontext- abhängige Kommandos Editier Modus
  56. My Web App http://www.url.com Profil Vorname Nachname Ort PLZ Straße

    Speichern Justin Small Web Developer @justinsmall Ändern Account löschen Kontext- abhängige Kommandos Lese Modus
  57. My Web App http://www.url.com Speichern Verwerfen Löschen Hilfe text Vorname

    text Nachname text text PLZ/Ort text Straße VORHER / NACHHER My Web App http://www.url.com Profil anlegen Speichern Hilfe für die Eingabe Mark Müller Pinneberg 25421 Hauptstraße 4
  58. UI vs. UX Farbe Interaktion Form Typografie Fähigkeit Verhalten |

    >
  59. BEHAVIOR

  60. FAZIT UX DESIGN • UX ist nicht nur ein Thema

    für Designer • Jeder kann UX Design lernen! • UX in den Entwicklungsprozess integrieren DESIGN PRINCIPALS • Ein gutes Verständnis von Design Principals hilft! • Reviews und Tests sind wichtig! ERGEBNIS • Deine Anwender werden dich lieben!
  61. Q & A

  62. RESSOURCEN OPEN SOURCE COLLECTION OF DESIGN PRINCIPLES • https:/ /principles.design/

    GOOGLE MATERIAL COLOR PICKERS • https:/ /materialuicolors.co/ SKETCH2CODE • https:/ /sketch2code.azurewebsites.net/