User Experience - Good code is not the only thing

Warum eine gute User Experience ein wichtiges Feature ist und wie man sie im Projekt erreicht.

Was ist User Experience (UX)
Warum ist eine gute UX ein Feature
Welche Methoden unterstützen eine gute UX
Welche Tools sind geeignet

Transcript

1. www.eyeworkers.de
   
   
   Torsten Koch
   
   
   SenchaDay 2022 München
   User Experience
   

   View Slide

2. Agenda
   • Was ist User Experience (UX)
   • Warum ist eine gute UX ein Feature
   • Welche Methoden unterstützen eine gute UX
   • Welche Tools sind geeignet
   eyeworkers.de
   

   View Slide

3. Was ist UX überhaupt
   eyeworkers.de
   

   View Slide

4. Meine Anwendung
   mag mich nicht!
   eyeworkers.de
   Aber warum?
   

   View Slide

5. eyeworkers.de
   Features
   Features
   Features
   Unlogisch
   Langsam Langsam
   Langsam
   Langsam
   Features
   Kompliziert
   Kompliziert
   Kompliziert
   Kompliziert
   klickklickklick
   klickklickklick
   Ungewohnt
   Ungewohnt
   

   View Slide

6. eyeworkers.de
   UX
   ist kein Design!
   ist verstehen!
   ist optimieren!
   ist fokussieren!
   

   View Slide

7. eyeworkers.de
   ist die Erfüllung
   der Erwartungshaltung
   der Anwender
   UX
   

   View Slide

8. Warum ist gute UX ein
   Feature?
   eyeworkers.de
   

   View Slide

9. Weil gute UX den Unterschied zwischen
   Erfolg und Misserfolg ausmachen kann!
   eyeworkers.de
   

   View Slide

10. eyeworkers.de
    • Zufriedene Nutzer haben weniger 

    Frust und eine positivere Einstellung zur Anwendung
    • Kosten sparen

    durch weniger Schulung und Dokumentation
    • Höhere E
    ffi
    zienz 

    durch weniger Eingabefehler und höhere Motivation der Nutzer
    • Positive Außenwirkung
    

    View Slide

11. Gute UX bringt mehr Erfolg als eine
    Menge von Einzelfeatures!
    eyeworkers.de
    Fokus Features Fokus UX
    

    View Slide

12. UX ist nicht nur visuell
    eyeworkers.de
    Fokus ist die gesamte UX
    

    View Slide

13. Methoden
    User Centered Design
    eyeworkers.de
    

    View Slide

14. eyeworkers.de
    Entwicklung aus Sicht der Anwender
    Der Anwender,
    seine Klickwege,
    seine Anforderungen,
    sind gleichberechtigt mit
    fachlichen und technischen Vorgaben
    

    View Slide

15. Erfahrungen und Skills
    Geräte und Umgebungen
    Motivation und Einstiege
    Viele Personen - viel Feedback
    eyeworkers.de
    Personas als Abbild der Anwender
    

    View Slide

16. eyeworkers.de
    Unterteilung in geschlossene Arbeitsabläufe
    Projekt
    Ablauf A Ablauf B Ablauf C Ablauf …
    

    View Slide

17. > Fachlichkeit
    > Anforderungen
    > Technik
    > Den Anwender an Bord
    holen
    > User Journeys
    > Click-Dummies
    > Anwender testing
    eyeworkers.de
    Fachlichkeit
    Technik
    Schnittstellen
    Maximale Features
    Endanwender an Bord holen
    Minimale Features
    Anregungen abseits Fachlichkeit
    Prototyping
    A/B Screens
    Featureset testen (must have)
    Fachlich/Technisch prüfen
    Optimieren
    Anwendertests
    Optimieren
    Finalisieren
    

    View Slide

18. Methoden
    Design Sprint
    eyeworkers.de
    

    View Slide

19. eyeworkers.de
    Fokussierte Entwicklung im kleinen Team
    Fachlichkeit
    Technik
    Anwender
    Features
    Personas
    Strategie
    Ideen
    Varianten
    Min/Max
    Entscheidung
    für eine Idee
    Mockup
    Prototype
    Testen
    Erwartung erfüllt?
    Gut/Schlecht
    

    View Slide

20. eyeworkers.de
    Auf das Team kommt es an
    Motiviert
    Heterogen (fachlich, technisch, Anwender)
    Fokussiert (Aufgabe und Zielstellung muss allen klar sein)
    Realistisch (die Aufgabe und Zielstellung muss in den Designsprint passen)
    O
    ff
    en (Ideen müssen o
    ff
    en besprochen werden)
    Kritisch (zu sich selbst und zum Team
    Klein (nur ein kleines Team kann e
    ff
    ektiv arbeiten)
    

    View Slide

21. eyeworkers.de
    Unterteilung in geschlossene Arbeitsabläufe
    Projekt
    Ablauf A Ablauf B Ablauf C Ablauf …
    

    View Slide

22. Geeignete Tools
    eyeworkers.de
    

    View Slide

23. Die User Journey als Methode zum
    Verstehen und Optimieren
    eyeworkers.de
    

    View Slide

24. MARIO DELAROCA
    Eins.eg Interaktion
    Erfolg
    Fehler
    Ende
    Ein Fachprozess Ein Interaktionsprozess
    eyeworkers.de
    

    View Slide

25. Vom Kleinsten zum Größten
    Atomic Design als Hilfsmittel
    eyeworkers.de
    

    View Slide

26. eyeworkers.de
    

    View Slide

27. Prototypen bauen, testen, verwerfen,
    verbessern, testen …
    eyeworkers.de
    

    View Slide

28. eyeworkers.de
    sketch.com
    Native Applikation (nur Mac)
    Gemeinsames Arbeiten an einem Projekt
    Viele gra
    fi
    sche Möglichkeiten
    Klickdummys in Cloud oder nativ
    

    View Slide

29. Figma
    fi
    gma.com
    Web Applikation
    Gemeinsames Arbeiten an einem Projekt
    Sehr interaktiv
    Umfangreiche Exportfunktionen
    eyeworkers.de
    

    View Slide

30. Das wars!
    eyeworkers.de
    

    View Slide