$30 off During Our Annual Pro Sale. View Details »

Wir müssen über Code sprechen

Benjamin Rabe
January 13, 2020

Wir müssen über Code sprechen

“Designers don’t need to learn to code. However, designers that learn to code will be the ones leading us to better user experiences.” - Jared Spool

Als UX Designer*innen befassen wir uns mit einer zunehmend größeren Bandbreite an Prototyping- und Design-Tools. Oft ist kann es aber auch effizient sein, Design-Entscheidungen direkt im Browser sichtbar zu machen. Dazu muss Design und Entwicklung auf Code-Ebene miteinander sprechen. Und das ist nicht immer leicht.

Wie kann man also die Kommunikation zwischen Designer*in und Entwickler*in verbessern? Welche Bedürfnisse haben die jeweiligen Rollen? Wir wollen dazu unsere Erfahrungen als ‘codende’ UX-Designer bei mindmatters mit Euch teilen, und Chancen und Schwierigkeiten diskutieren.

Benjamin Rabe

January 13, 2020
Tweet

Other Decks in Design

Transcript

  1. Wir müssen
    über Code
    sprechen

    View Slide

  2. View Slide

  3. Benjamin
    UX & Dev
    Meike
    Dev & UX

    View Slide

  4. UX
    bei mindmatters

    View Slide

  5. “Without Development, Design is
    useless.
    Without Design, Development is
    unusable. “
    https://blog.codecarrot.net/how-to-bridge-the-gap-between-design-and-development/

    View Slide

  6. UX und Dev:
    …sind beides kreative Domänen
    …beide wollen Probleme lösen.
    …und zwar das gleiche Problem.

    View Slide

  7. Warum fällt die Kommunikation dann oft
    so schwer?

    View Slide

  8. Decision Mood vs Design Mood
    Ein Blick auf die Stimmungen, die beide
    Rollen zur Problemlösung einnehmen
    Managing as Designing Richard j. Boland, Jr. and Fred Collopy

    View Slide

  9. Decision Mood

    View Slide

  10. Design Mood
    Design Mood
    https://99designs.de/blog/kreatives-denken/moodboard-erstellen/

    View Slide

  11. Im Decision Mood
    bin ich exklusiv
    Ich finde die Lösung durch
    Ausschluss möglichst vieler Faktoren
    Im Design Mood
    bin ich inklusiv
    Ich finde die Lösung auf Basis
    möglichst vieler Faktoren

    View Slide

  12. Wie ermöglichen wir dann eine bessere
    Kommunikation?

    View Slide

  13. “The knowledge in our memory
    needs to be externalized to
    create shared artefacts that can
    talk back to us and that can
    serve the purpose of negotiating
    between team members.”
    – (Arias et al., 2000)
    http://doi.acm.org/10.1145/344949.345015

    View Slide

  14. Code als weiteres
    Shared Artifact / Boundary Object?

    View Slide

  15. “Designers don’t need to learn to code.
    However, designers that learn to code
    will be the ones leading us to better user
    experiences.” – Jared Spool

    View Slide

  16. View Slide

  17. Wo liegt jetzt der Sweet Spot?

    View Slide

  18. Research

    View Slide

  19. Themenfelder
    Verständnis & Kommunikation
    Effizienz
    Effektivität
    Visuelle Konsistenz
    Fragen
    Specialist vs Generalist?
    Wie finde ich die Zeit?
    Wie schaffe ich Veränderung?
    Wie weit möchte ich gehen?

    View Slide

  20. Wer coded von euch?
    HTML, CSS, JavaScript…
    Wer hat “Reibungseffekte” bei der
    Zusammenarbeit mit der Entwicklung?
    Wer möchte gerne mehr Code verstehen /
    selber schreiben?

    View Slide

  21. Kommunikation
    Breakdowns
    https://hal.inria.fr/hal-01614250/document

    View Slide

  22. Welche Methoden helfen uns, diese
    Breakdowns zu minimieren?

    View Slide

  23. Brücken bauen
    Technik/Tool Grenzen beseitigen
    Journey Maps und andere Design
    Artefakte an die Wand bringen

    View Slide

  24. Empathie bei
    Entwickler*innen
    ermöglichen
    gemeinsames (Dev/UX) User Research
    Live (!) Teilnahme an Usability Tests
    Design Studio und Charette
    Research Ergebnisse gemeinsam
    auswerten

    View Slide

  25. Neugier bei Technik
    Themen leben
    Pairing Dev/Ux und UX/UX
    Embedded UX, an allen Meetings
    teilnehmen
    Zusammen mit den Entwicklern an einem
    Tisch sitzen
    UX/Frontend-Dev Praktiker Gruppe

    View Slide

  26. Welche Tools helfen uns, Breakdowns zu
    minimieren?

    View Slide

  27. Browser
    Coding

    View Slide

  28. Pattern
    Libraries

    View Slide

  29. Shared
    Designs

    View Slide

  30. Und
    SCRUM?

    View Slide

  31. Designing
    through
    making

    View Slide

  32. Neugierig geworden?
    [email protected]
    mindmatters.de

    View Slide