[DE] Usability für Programmierer

2015/11 WebCon Aachen

Transcript

1. 29.10.2015
   Usability für Programmierer
   14.11.2015
   integer_net GmbH 1
   

   View Slide

2. 29.10.2015
   Fabian Schmengler
   integer_net GmbH 2
   Dipl.-Informatiker
   Backend-Entwicklung
   eCommerce Beratung
   DevOps
   

   View Slide

3. 29.10.2015
   UX? Brauchen wir Entwickler das?
   • Wie sehen eure firmeninternen Anwendungen
   aus?
   integer_net GmbH 3
   

   View Slide

4. 29.10.2015
   integer_net GmbH 4
   

   View Slide

5. 29.10.2015
   UNSERE VERANTWORTUNG
   UX ist nicht nur Optik und Frontend!
   integer_net GmbH 5
   

   View Slide

6. 29.10.2015
   Aussagekräftige Fehlermeldungen
   integer_net GmbH 6
   

   View Slide

7. 29.10.2015
   Reaktionszeit
   integer_net GmbH 7
   

   View Slide

8. 29.10.2015
   Feature Creep vermeiden
   integer_net GmbH 8
   

   View Slide

9. 29.10.2015
   Abläufe – Beispiel „Undo“
   • Wie oft vermisst man
   diesen Button?
   • Menschen machen
   Fehler!
   integer_net GmbH 9
   

   View Slide

10. 29.10.2015
    PRINZIPIEN INTERAKTIVEN DESIGNS
    Nützliches und Wissenswertes
    integer_net GmbH 10
    

    View Slide

11. 29.10.2015
    Feedback
    integer_net GmbH 11
    “0.1 second is about the limit for having the
    user feel that the system is reacting
    instantaneously, meaning that no special
    feedback is necessary except to display the
    result.”
    – Jakob Nielsen 1993, Usability Engineering
    

    View Slide

12. 29.10.2015
    Feedback
    • Nicht vergessen: DISPLAY THE RESULT!
    integer_net GmbH 12
    

    View Slide

13. 29.10.2015
    Affordances
    integer_net GmbH 13
    

    View Slide

14. 29.10.2015
    Constraints
    • http://www.formget.co
    m/enable-disable-
    button-jquery/
    integer_net GmbH 14
    

    View Slide

15. 29.10.2015
    Miller‘s Magic Number
    integer_net GmbH 15
    7 ± 2 Informationseinheiten
    … beträgt die Kapazität unseres Kurzzeitgedächtnis.
    

    View Slide

16. 29.10.2015
    CODE USABILITY
    Now for something completely different…?
    integer_net GmbH 16
    

    View Slide

17. 29.10.2015
    Neue Perspektive
    • Code = User Interface
    • Andere Programmierer = User
    • Du in 6 Monaten = Anderer Programmierer
    integer_net GmbH 17
    

    View Slide

18. 29.10.2015
    OOP Constraints & Affordances
    • Wählt Methoden-Sichtbarkeit mit Bedacht
    – protected methods afford overriding
    – private methods constrain from overriding
    • Das selbe bei final für Klassen und Methoden
    – http://ocramius.github.io/blog/when-to-declare-classes-final/
    integer_net GmbH 18
    

    View Slide

19. 29.10.2015
    OOP Constraints & Affordances
    • Interfaces = Affordances
    • Typed parameters = Constraints
    integer_net GmbH 19
    

    View Slide

20. 29.10.2015
    Affordances: Namen
    “There are only two hard things in Computer
    Science: cache invalidation and naming things.”
    – Phil Karlton
    Welche Benutzung suggerieren diese Namen?
    integer_net GmbH 20
    

    View Slide

21. 29.10.2015
    Selbsterklärender Code
    1. Niemand liest Bedienungsanleitungen
    2. Gute User Interfaces sind selbsterklärend
    3. Guter Code ist selbsterklärend
    integer_net GmbH 21
    

    View Slide

22. 29.10.2015
    Apropos Kommentare
    • Schlecht: WAS
    • Gut: WARUM
    integer_net GmbH 22
    

    View Slide

23. 29.10.2015
    Miller‘s Magic Number
    • Zyklomatische Komplexität
    • Tiefe der Vererbungshierarchie
    • Anzahl Parameter
    • Anzahl Attribute
    integer_net GmbH 23
    5
    

    View Slide

24. 29.10.2015
    Lesetipps
    integer_net GmbH 24
    

    View Slide

25. 29.10.2015
    Resümee in 140 Zeichen
    • In Code und in UI:
    – Verhindere Fehlbedienung,
    – Mache vorgesehene Bedienung offensichtlich,
    – Vermeide Komplexität
    • @fschmengler #webcon2015
    integer_net GmbH 25
    

    View Slide

26. 29.10.2015
    integer_net GmbH
    Trierer Straße 791, Aachen
    Web: www.integer-net.de
    Twitter: @fschmengler
    Email: fs@integer-net.de
    Kontakt
    26
    

    View Slide

27. 29.10.2015
    BildQuellen
    1. One click UI:
    http://www.usabilityinstitute.com/morsels/mor
    sels.htm (Original unbekannt)
    2. Comic: http://www.mrlovenstein.com
    3. Undo button: tech4google.blogspot.com
    4. Toggle buttons:
    https://dribbble.com/shots/757243-Toggle-
    Buttons
    5. Toggle buttons:
    https://commons.wikimedia.org/wiki/File:Scool
    _023.jpg
    integer_net GmbH 27
    

    View Slide