User Experience Design für Entwickler

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/