User Experience Design für Entwickler

Transcript

1. JÖRG NEUMANN | NeoGeeks 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@neogeeks.de • Twitter: @JoergNeumann • Web: https:/ /www.neogeeks.de
3. WAS IST USABILITY?
4. WAS IST USABILITY?
5. WAS IST USABILITY?
6. WAS IST USER EXPERIENCE? Foto: Taylor Herring
7. UX ENGINEERING
8. DIETER RAMS
9. 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! | | | |
10. 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!
11. UM WAS ES GEHT • WER IST DER ANWENDER? • WAS IST SEINE PRIMÄRE TÄTIGKEIT? • WAS SIND HERAUSFORDERUNGEN? • WAS KÖNNTE IHM HELFEN?
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 PRINCIPLES
15. 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
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 | >
33. Vertraust Du dieser Bank? | >
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 PRINCIPLES • Ein gutes Verständnis von Design Principles 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/