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

[DE] Usability für Programmierer

[DE] Usability für Programmierer

2015/11 WebCon Aachen

Fabian Schmengler

November 14, 2015
Tweet

More Decks by Fabian Schmengler

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. 29.10.2015
    integer_net GmbH 4

    View full-size slide

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

    View full-size slide

  6. 29.10.2015
    Aussagekräftige Fehlermeldungen
    integer_net GmbH 6

    View full-size slide

  7. 29.10.2015
    Reaktionszeit
    integer_net GmbH 7

    View full-size slide

  8. 29.10.2015
    Feature Creep vermeiden
    integer_net GmbH 8

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  13. 29.10.2015
    Affordances
    integer_net GmbH 13

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

  24. 29.10.2015
    Lesetipps
    integer_net GmbH 24

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide