UX Eye for the JavaScript Guy or Gal

Discussing the UX of JavaScript interfaces, this talk was given at NationJS in Silver Spring, MD

Transcript

1. JOHN ATHAYDE NATION JS OCTOBER 2013 Thursday, October 10, 13
2. Thursday, October 10, 13
3. Thursday, October 10, 13
4. Thursday, October 10, 13
5. Thursday, October 10, 13
6. Thursday, October 10, 13
7. Thursday, October 10, 13
8. Thursday, October 10, 13
9. Thursday, October 10, 13
10. hat is u ? Thursday, October 10, 13
11. http://usabilityfail.com/?p=345 Thursday, October 10, 13
12. Thursday, October 10, 13
13. Thursday, October 10, 13
14. IROQUOIS THEATRE FIRE 600+ PEOPLE DIED PUSHED UP AGAINST THE DOORS 1903 Thursday, October 10, 13
15. Thursday, October 10, 13
16. Thursday, October 10, 13
17. Thursday, October 10, 13
18. Thursday, October 10, 13
19. UI UX IA Thursday, October 10, 13
20. UX? USER EXPERIENCE Thursday, October 10, 13
21. “ the effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments” Thursday, October 10, 13
22. THE PROMPTNESS WITH WHICH USERS LEARN TO USE SOMETHING Thursday, October 10, 13
23. THE EFFICIENCY THEY ATTAIN WHILE MAKING USE OF IT Thursday, October 10, 13
24. HOW EASY IT IS FOR THEM TO REMEMBER HOW TO USE IT Thursday, October 10, 13
25. HOW ERROR-PRONE IT IS Thursday, October 10, 13
26. & THE LEVEL OF SATISFACTION THEY ATTAIN FROM USING IT Thursday, October 10, 13
27. Thursday, October 10, 13
28. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index Thursday, October 10, 13
29. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index Thursday, October 10, 13
30. Thursday, October 10, 13
31. 60fps http://speakerdeck.com/jaffathecake/rendering-without-lumps Thursday, October 10, 13
32. 24 film 29.97 NTSC 25 PAL Thursday, October 10, 13
33. 2:3 PULLDOWN TELECINE Thursday, October 10, 13
34. Thursday, October 10, 13
35. 60fps http://speakerdeck.com/jaffathecake/rendering-without-lumps Thursday, October 10, 13
36. ~16ms http://speakerdeck.com/jaffathecake/rendering-without-lumps Thursday, October 10, 13
37. http://vimeo.com/61342267 Keith Pitt & Mario Visic Thursday, October 10, 13
38. NETWORK LINK CONDITIONER Thursday, October 10, 13
39. PLACE YOUR JA VASCRIPT AT THE END OF THE HTML FILE Thursday, October 10, 13
40. Performant Systems Thursday, October 10, 13
41. <100ms Thursday, October 10, 13
42. Thursday, October 10, 13
43. §508 www.section508.gov Thursday, October 10, 13
44. http://www.flickr.com/photos/scooter811/1475730494/ GOOGLE IS A BLIND USER Thursday, October 10, 13
45. AN ACCESSIBLE WEBSITE BENEFITS ALL USERS NOT JUST THE DISABLED Thursday, October 10, 13
46. ACCESSIBILITY IS A SUBSET OF USABILITY Thursday, October 10, 13
47. A WEBSITE IS NOT USABLE UNLESS IT IS ACCESSIBLE Thursday, October 10, 13
48. USABILITY IMPLIES ACCESSIBILITY BUT THE OPPOSITE IS NOT NECESSARILY TRUE Thursday, October 10, 13
49. BREAKING BROWSER BEhAVIOR B3 Thursday, October 10, 13
50. Thursday, October 10, 13
51. command-shift-left/right Thursday, October 10, 13
52. Thursday, October 10, 13
53. Thursday, October 10, 13
54. Thursday, October 10, 13
55. Thursday, October 10, 13
56. Thursday, October 10, 13
57. Thursday, October 10, 13
58. FAKE USERS TO HELP GUIDE YOU DESIGN PERSONAS Thursday, October 10, 13
59. Thursday, October 10, 13
60. Front Line Consumer Advocate (CA) TITLE Consumer Advocate (CA) ROLE Individual who is the general system user, interacting with customers via phone and email (and eventually chat) to resolve support issues that customers have with LivingSocial, it’s deals, or it’s merchants. JOB TASKS • Answer phone • Create and manage cases • Issue refunds • Resolve customer issues GOALS, FEARS, AND ASPIRATIONS • Meet daily quota (fear of not meeting quota) • Working on projects by accomplishing high close rate • Fear of customer anger especially w/r/t refund policy • Avoiding mandatory overtime by meeting their quotas and closing cases more quickly COMPUTER SKILLS, KNOWLEDGE, AND ABILITIES • Wide range of ability and knowledge. • Needs to be able to use a browser, answer the phone in a professional manner • Able to multi-task and keep critical information correctly in their heads • Ability to get trained on the tools (currently SalesForce, phone system) GROUP SIZE AND INFLUENCE This is currently the largest group at 130 individuals (not including senior CAs but including international users) MEANS OF COMMUNICATION SalesForce chatter, team meetings with team leads, IM/GoogleTalk, email. INTERNAL TOOLS: CSR PERSONAS 3 Athayde Confidential | For internal use only Thursday, October 10, 13
61. WHAT ARE PEOPLE TRYING TO DO? MENTAL MODELS Thursday, October 10, 13
62. Thursday, October 10, 13
63. http://rosenfeldmedia.com/books/mental-models/ Thursday, October 10, 13
64. NO, THE OTHER BUTTON! USER TESTING Thursday, October 10, 13
65. Thursday, October 10, 13
66. Thursday, October 10, 13
67. Thursday, October 10, 13
68. PERCEPTION AGAIN DID I BREAK IT? Thursday, October 10, 13
69. undefined Thursday, October 10, 13
70. RETURN ERRORS THAT MAKE SENSE Thursday, October 10, 13
71. Thursday, October 10, 13
72. “but I hit submit...” Thursday, October 10, 13
73. “I sent you the link, why aren’t you seeing the same thing I am?” Thursday, October 10, 13
74. “Why did reload take me back to the home page?” Thursday, October 10, 13
75. Thursday, October 10, 13
76. Hand Holding Thursday, October 10, 13
77. USE THE RIGHT AMOUNT OF FEEDBACK FOR ACTIONS Thursday, October 10, 13
78. Thursday, October 10, 13
79. Thursday, October 10, 13
80. Thursday, October 10, 13
81. TOUCHABILITY Thursday, October 10, 13
82. Thursday, October 10, 13
83. NETWORK LINK CONDITIONER Thursday, October 10, 13
84. DESTRUCTIVE ACTIONS SHOULD BE HARDER THAN NON- DESTRUCTIVE ACTIONS Thursday, October 10, 13
85. BE LENIENT AND PROVIDE AN EASY WAY TO UNDO Thursday, October 10, 13
86. Thursday, October 10, 13
87. DON’T BE OVEREAGER WITH YOUR VALIDATING Thursday, October 10, 13
88. DON’T STEAL FOCUS (e.g. alert();) Thursday, October 10, 13
89. OPTIMIZE FOR WHAT FEELS FAST REGARDLESS OF WHAT IS FASTER Thursday, October 10, 13
90. DON’T HURT POWER USERS TO HELP NEW USERS (AND VICE-VERSA) Thursday, October 10, 13
91. HOW WE DO THE THINGS WE DO PROCESS Thursday, October 10, 13
92. RESEARCH SHADOWING, BUSINESS ANALYSIS, ETC. Thursday, October 10, 13
93. PERSONAS FAKE PLASTIC PEOPLE Thursday, October 10, 13
94. MENTAL MODEL REQUIREMENTS ARE YOUR FRIEND Thursday, October 10, 13
95. SOLUTION DECISION START WITH PROBLEMS, NOT SOLUTIONS Thursday, October 10, 13
96. Launch Screen promobuilder SALES USER FLOW - iOS APP Merchants/ MSAs New Merchant/ MSA New Insertion Order/Deal New Daily Deal Builder New Instant Deal Builder New Family Deal Builder Merchant Dashboard Show/Edit Insertion Order SEE INSTANT DEAL BUILDER FLOW SCREEN SEE DAILY DEAL BUILDER FLOW SCREEN SEE FAMILY DEAL BUILDER FLOW SCREEN FLOW Thursday, October 10, 13
97. SKETCH PAPER, WHITEBOARD, PEN TABLET Thursday, October 10, 13
98. Thursday, October 10, 13
99. PHOTOCHOP! Thursday, October 10, 13
100. PROTOTYPE RUNNING IN SOME SEMBLANCE OF CODE Thursday, October 10, 13
101. USER TESTING WHAT WORKS / WHAT DOESN’T Thursday, October 10, 13
102. LATHER RINSE REPEAT IT’S A PROCESS, NOT A DESTINATION Thursday, October 10, 13
103. Thursday, October 10, 13
104. APIs Thursday, October 10, 13
105. "If the database architecture is wrong, the code will be wrong. If the code is wrong, the behaviour is wrong. And if the behaviour is wrong, then no javascript can ever solve the real problem." - Bèr 'berkes' Kessels (www.berk.es) Thursday, October 10, 13
106. "Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works." - Steve Jobs http://www.nytimes.com/2003/11/30/magazine/30IPOD.html Thursday, October 10, 13
107. 'AthaydeWilliamsRailsView 25% OFF DISCOUNT CODE at www.pragprog.com/titles/warv @boboroshi @therailsview john@meticulous.com Thursday, October 10, 13