Designing Good User Experience

DjangoCon Europe 2017 workshop on how to get better at UX as a developer

Transcript

1. Designing Good User Experience DjangoCon Europe workshop April 6th 2017 Žan Anderle Resources at github.com/zanderle/designing-good-ux
2. Welcome!
3. About me • Full Stack Developer • Freelancer • Find me on Twitter - @z_anderle (and @zanderle everywhere else) • zanderle.com
4. Plan for today • Introduction to UX • Storyboards • Need finding • Prototyping • User Testing • Heuristic Evaluation • User Onboarding • Conclusion
5. Plan for today • Introduction to UX • Storyboards • Need finding • Prototyping • User Testing • Heuristic Evaluation • User Onboarding • Conclusion
6. About you
7. Any questions so far?
8. User Experience
9. User experience (UX) is how a person feels when interfacing with a system.
12. Empathy
13. Unfortunately, some developers see their users like this:
15. UX is a process It holds great power It is objective
16. Phenomenal is hard Pretty good is easy
17. What are we designing?
18. Your own idea • An idea, an itch, whatever! • It can be a reimagining of something already existing • It can be related to any field • It can be an app, a website, a device
19. DjangoCon note-taking app • Conferences are overwhelming • Hard to keep track of what you’ve heard & where you’ve heard it • An app that would help you in getting the most out of the conference, even after it’s over (for later reference)
20. DjangoCon tweeting app • People love to tweet during DjangoCon • A lot of people & a lot is happening = a lot gets lost • An app that would curate tweets (maybe split them to which talks they belong to, or something else)
21. DjangoCon meet • During DjangoCon you meet a lot of new people • You might have forgotten to exchange information but would like to stay in touch • An app that would help you find people you’ve talked to
22. Storyboards
23. Storyboards • A sketch or an overview of what your app/product wishes to accomplish • Presents a problem and a possible solution (but nothing specific!) • It should be simple & fast
24. Storyboards
25. Storyboard • Create 2 storyboards (each with 4-8 frames) • They should present a different point of view (different solutions) • They should clearly show a setting, present the problem and end with the solution to the problem • Don’t include any actual implementation details (we’ll do that later)
26. Need Finding
27. Need Finding • You have to know what the problem is, before trying to solve it • The more you know about it, the better you’ll be at tackling it • Know your user, their environment, thoughts, background, goals, etc.
28. Need Finding • Interview • User observation • Survey • Experts • Check out designkit.org/methods
29. Need Finding • Prepare 5-8 meaningful questions • Learn about the other person’s goals and motivation • Be mindful of your questions (will they produce a meaningful answer) • Prepare a task for a user to perform • Think about what you want to learn • Don’t overthink it - you’ll get a lot of information anyway! Interview User observation
30. Prototyping
31. Prototyping • Paper prototypes • Wizard of Oz • Wireframes, mockups • Video prototyping
32. Prototyping
33. Prototyping • Create a paper prototype for your app. It should be about the same size as an actual thing • Cut out different parts (dropdown menus, modals, etc.) to use them interactively • If it’s too much content, create only a few screens • Prototype should be able to “respond” to some of the user’s interactions • In the end, test it with someone
34. User Testing
35. Heuristic Evaluation
36. Heuristic Evaluation
37. Heuristic Evaluation • Pick a site/app/process (booking tickets is a good idea) and do a heuristic evaluation of it • Write down your findings (screenshot, what heuristic was violated, and severity) • We will quickly compare results
38. User Onboarding
39. User Onboarding • How fast can a new user become a power user • Will the process be smooth or will most users quit before they even get to the important parts of your app
40. User Onboarding