UX isn't just a Buzzword

Slides for a talk I gave at one of ACM@UIUC'S SIGCHI chapter meetings.
This one focuses on introducing engineers to the concepts of good UX, and why+how they should keep it in mind while building software.

Transcript

1. UX ISN’T JUST A BUZZWORD. Achal Varma / @_achalv SIGCHI - ACM@UIUC
2. UX ISN’T JUST A BUZZWORD. Achal Varma / @_achalv SIGCHI - ACM@UIUC
3. UX
4. UX?
5. UX “The overall experience of a person using a
 product such as a website or application, especially
 in terms of how easy or pleasing it is to use.” According to Nielsen & Norman, is…
6. NO SHIT, SHERLOCK. As legit as it sounds, that definition actually doesn’t 
 tell us much. It only just scratches the surface…
7. UX 
 – Design
 – Wireframes
 – Prototypes
 – Features isn’t…
8. UX 
 – Meeting clearly defined expectations
 – Solving problems
 – Response time and performance 
 – Uptime and reliability
 – Interactions
 – Content is…
9. NEEDS AND WANTS Different strokes for different folks?
10. NEEDS AND WANTS 
 – Continued usage
 – Growth
 – Constantly improving product
 – Happy users Developers want…
11. …and world domination
12. NEEDS AND WANTS 
 Users don’t always know what they want, but they’re
 not pleased when they don’t get it.
 Users, on the other hand…
13. NEEDS AND WANTS 
 – Their problem solved
 – What they’re looking for…
 - Quickly: Don’t make ‘em wait
 - Cheaply: Minimum overhead Ultimately, users just want to feel happy and satisfied. Users want…
14. Usable Useful Beautiful
15. EXAMPLES
16. EXAMPLES Twitter Profile Editor – Web
19. EXAMPLES Yahoo Weather - iOS
23. IS UX IMPORTANT?
24. IS UX IMPORTANT? …duh.
25. IS UX IMPORTANT? How important is it, exactly?
26. 
 Evernote $1.1 Billion
 Stripe $1.8 Billion
 Airbnb $2.5 Billion
 Beats $3.2 Billion
 Square $3.3 Billion
 Pinterest $3.8 Billion
 Spotify $4 Billion
 Dropbox $10 Billion
 Facebook $136 Billion
 Apple $490 Billion
27. IS UX IMPORTANT? 
 By default, a customer or a user will have 
 an experience – good, or bad.
 
 Will it be designed, or will you just wing it?
 
 The bottom line.
28. IS UX IMPORTANT? 
 By default, a customer or a user will have 
 an experience – good, or bad.
 
 Will it be designed, or will you just wing it?
 
 Pro Tip – Never wing it. The bottom line.
29. UX 
 – Think hard about the problem you want to solve
 – Gather ideas for your solution
 – Optimize ideas to be useful and usable
 
 – Make stuff look pretty! 
 In a nutshell…
31. UX ON THE WEB.
33. UX ON THE WEB. 
 – Performance
 – Reliability
 – Device size constraints
 – Interactions & Animations
 – Microcopy Things to keep in mind:
34. PERFORMANCE 
 – Actual Perf. vs. Perceived Perf.
 – Limit requests
 – Single Page Applications
 – Cache static resources
 – Load assets async Things to keep in mind:
35. RELIABILITY 
 – Offline states
 – Incorrect input formats
 – Accurate feedback Things to keep in mind:
36. DEVICE SIZE 
 – “Mobile first”
 – Design and implement for the lowest common
 denominator
 – Optimizing for readability
 – Scaling typography and images Things to keep in mind:
37. INTERACTIONS Things to keep in mind:
38. INTERACTIONS 
 – Try and make things feel native Things to keep in mind:
39. INTERACTIONS 
 – Try and make things feel native
 – Add touch states to your buttons Things to keep in mind:
42. INTERACTIONS 
 – Try and make things feel native
 – Add touch states to your buttons Things to keep in mind:
43. INTERACTIONS 
 – Try and make things feel native
 – Add touch states to your buttons
 – Make sure scrolling feels natural and smooth Things to keep in mind:
46. INTERACTIONS 
 – Try and make things feel native
 – Add touch states to your buttons
 – Make sure scrolling feels natural and smooth Things to keep in mind:
47. INTERACTIONS 
 – Try and make things feel native
 – Add touch states to your buttons
 – Make sure scrolling feels natural and smooth
 – If animations are involved, have fallbacks in place Things to keep in mind:
48. INTERACTIONS 
 – Try and make things feel native
 – Add touch states to your buttons
 – Make sure scrolling feels natural and smooth
 – If animations are involved, have fallbacks in place
 – Make use of natural gestures Things to keep in mind:
49. ANIMATIONS Things to keep in mind:
50. ANIMATIONS 
 – Animations should ideally move at 60fps (16ms/f)
 – Take advantage of GPU if available
 – Should add value, and not be a distraction
 – Animate instead of using ‘spinners’
 Things to keep in mind:
58. MICROCOPY 
 – It’s the little things! 
 Some may feel like mini-feature by themselves, but
 they’re worth the effort.
 Just one thing to remember:
65. SO YOU SEE…
66. UX ISN’T JUST A BUZZWORD.
67. THANK YOU! Questions? :D