Designing Good User Experience

This tutorial will show you how to design better UX using simple techniques and some basic concepts. Using an example project, we will work together and use these methods to see first-hand what it means to design UX.

Transcript

1. Designing Good User Experience DjangoCon tutorial July 17th 2016 Žan Anderle
2. Welcome!
3. Thank you! & all DjangoCon Sponsors @adriennefriend
4. About me • Full Stack Developer • Datafy.it • Freelancer • Find me on Twitter - @z_anderle (and @zanderle everywhere else) • zanderle.com
5. Plan for today • Introduction to UX • Storyboards • Need finding • Prototyping • 30 minute break • User Testing • Heuristic Evaluation • User Onboarding • Conclusion
6. Plan for today • Introduction to UX • Storyboards • Need finding • Prototyping • 30 minute break • User Testing • Heuristic Evaluation • User Onboarding • Conclusion
7. About you
8. Any questions so far?
9. User Experience
10. User experience (UX) is how a person feels when interfacing with a system.
13. Empathy
14. Unfortunately, some developers see their users like this:
16. UX is a process It holds great power It is objective
17. Phenomenal is hard Pretty good is easy
18. What are we designing?
19. 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
20. 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)
21. 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)
22. 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 let you help find people you’ve talked to
23. Storyboards
24. 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
25. Storyboards
26. 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)
27. Need Finding
28. 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.
29. Need Finding • Interview • User observation • Survey • Experts • Check out designkit.org/methods
30. 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
31. Prototyping
32. Prototyping
33. Prototyping • Paper prototypes • Wizard of Oz • Wireframes, mockups • Video prototyping
34. Prototyping
35. 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
36. User Testing
37. Heuristic Evaluation
38. Heuristic Evaluation
39. Heuristic evaluation
40. 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
41. User Onboarding
42. 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
43. User Onboarding