Upgrade to Pro — share decks privately, control downloads, hide ads and more …

User Experience Design für Entwickler

User Experience Design für Entwickler

Jörg Neumann

May 14, 2024
Tweet

More Decks by Jörg Neumann

Other Decks in Design

Transcript

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

    Machine Learning • Consulting, Coaching, Training KONTAKT • Mail: [email protected] • Twitter: @JoergNeumann • Web: https:/ /www.neogeeks.de
  2. 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! | | | |
  3. 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!
  4. UM WAS ES GEHT • WER IST DER ANWENDER? •

    WAS IST SEINE PRIMÄRE TÄTIGKEIT? • WAS SIND HERAUSFORDERUNGEN? • WAS KÖNNTE IHM HELFEN?
  5. Entwerfen Entwickeln Analysieren VORGEHEN validieren validieren zuhören, beobachten, lernen |

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

    | | | | • • • • • Scope Persona ANALYSE Analyse des Anwenders Analyse der primären Tätigkeit Analyse der Umgebung
  7. DESIGN PRINCIPLES 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
  8. 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
  9. INATTENTIONAL BLINDNESS TEST • Du siehst gleich hintereinander drei Bilder

    mit Tieren • Auf welchem ist ein Schwein abgebildet?
  10. 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
  11. 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
  12. Window Text Text Text Text Text Text Titel Text Text

    Text Text Text Text Text Text Text Text CHROME NAVIGATION DATEN
  13. 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 | >
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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? | >
  21. 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
  22. 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 | >
  23. 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 | >
  24. 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
  25. 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
  26. 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
  27. FAZIT UX DESIGN • UX ist nicht nur ein Thema

    für Designer • Jeder kann UX Design lernen! • UX in den Entwicklungsprozess integrieren DESIGN PRINCIPLES • Ein gutes Verständnis von Design Principles hilft! • Reviews und Tests sind wichtig! ERGEBNIS • Deine Anwender werden dich lieben!
  28. RESSOURCEN OPEN SOURCE COLLECTION OF DESIGN PRINCIPLES • https:/ /principles.design/

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