Creating Wonderful Web App User Experience

Slides from my presentation at the Future of Web Design London 2012.

Transcript

1. Crea ng Wonderful User Experience Web App
2. Hello! I’m Richard @richardshepherd
3. I’m frontend lead
4. I’m a contributor to
6. Why is great user experience important? ?
7. If you make chairs, you’ll want to understand how people sit. If you make user interfaces, then you should understand how people perceive and think.” Ryan Singer, 37 Signals “
8. Hacking the brain
11. Marty Sklar
12. Mickey’s Ten Commandments Of Disney Imagineering
13. #1 Know Your Audience Mickey’s Ten Commandments Of Disney Imagineering
14. #2 Wear Your Guest’s Shoes Mickey’s Ten Commandments Of Disney Imagineering
15. #1 Know your audience
16. Emo onal Memory #1 Know your audience
17. Humanise your applica on #2 Wear your guests shoes
18. http://getpocket.com/ #2 Wear your guests shoes
19. http://www.rdio.com/ #2 Wear your guests shoes
20. http://simplehoney.com/ #1 Know your audience
21. http://simplehoney.com/ #1 Know your audience
22. http://simplehoney.com/ #1 Know your audience
23. #3 Organise the Flow of People And Ideas Mickey’s Ten Commandments Of Disney Imagineering
24. Everything we do is a form of storytelling” Mark Rollins – Creative Director, Iconologic Creative Mornings “ #3 Organise the Flow of People and Ideas
25. What’s Your Story? ? #3 Organise the Flow of People and Ideas
26. #3 Organise the Flow of People and Ideas
27. #3 Organise the Flow of People and Ideas http://mailchimp.com/ http://wufoo.com/ #3 Organise the Flow of People and Ideas
28. #3 Organise the Flow of People and Ideas http://mailchimp.com/ http://www.surveymonkey.com/ #3 Organise the Flow of People and Ideas
29. http://aarronwalter.com/ #3 Organise the Flow of People and Ideas
30. #4 Create a ‘Wienie’ Mickey’s Ten Commandments Of Disney Imagineering
31. #5 Communicate with visual Literacy Mickey’s Ten Commandments Of Disney Imagineering
32. http://www.alistapart.com/… #5 Communicate with Visual Literacy
33. Don Norman #5 Communicate with Visual Literacy
34. Attractive things make people feel good, which in turn makes them think more creatively. How does that make something easier to use? Simple, by making it easier for people to find solutions to the problems they encounter.” Don Norman “ #5 Communicate with Visual Literacy
35. Depth vs. Breadth Processing #5 Communicate with Visual Literacy
36. Depth First “Where me keys? Where me phone?” #5 Communicate with Visual Literacy
37. #5 Communicate with Visual Literacy http://www.basecamp.com/…
38. #5 Communicate with Visual Literacy http://www.basecamp.com/…
39. Breadth First A hit of dopamine #5 Communicate with Visual Literacy
40. #5 Communicate with Visual Literacy http://plus.google.com/
41. #6 Avoid Overload Create Turn ons Mickey’s Ten Commandments Of Disney Imagineering
42. #7 Tell One Story at a Time Mickey’s Ten Commandments Of Disney Imagineering
43. http://www.lingscars.com/ #7 Tell One Story at the Time #7 Tell One Story at a Time http://www.lingscars.com/
44. The Paradox of Choice #7 Tell One Story at a Time
45. Barry Schwartz #7 Tell One Story at a Time
46. #7 Tell One Story at a Time http://www.flickr.com/
47. http://www.lingscars.com/ #7 Tell One Story at the Time #7 Tell One Story at a Time http://www.ebookers.com/
48. http://www.lingscars.com/ #7 Tell One Story at the Time #7 Tell One Story at a Time http://www.skyscanner.net/
49. Crea ng Turn Ons No. Not that kind. #6 Avoid Overload, Create Turn Ons
50. http://www.vouchercodes.co.uk #6 Avoid Overload, Create Turn Ons
51. http://www.kickstarter.com #6 Avoid Overload, Create Turn Ons
52. http://www.mailchimp.com #6 Avoid Overload, Create Turn Ons
53. #8 Avoid Contradic ons, Maintain Iden ty Mickey’s Ten Commandments Of Disney Imagineering
54. Beyond The Browser Maintaining your identity #8 Avoid Contradic ons, Maintain Iden ty
55. http://www.mrporter.com/ #8 Avoid Contradic ons, Maintain Iden ty
56. #8 Avoid Contradic ons, Maintain Iden ty
57. #8 Avoid Contradic ons, Maintain Iden ty
58. #9 For every ounce of treatment, provide a tonne of treat Mickey’s Ten Commandments Of Disney Imagineering
59. Give a li le #9 For every ounce of treatment, provide a tonne of treat
60. #9 For every ounce of treatment, provide a tonne of treat http://www.codecademy.com/
61. #9 For every ounce of treatment, provide a tonne of treat http://www.codecademy.com/
62. #10 Keep It up! Mickey’s Ten Commandments Of Disney Imagineering
63. Ask for feedback #10 Keep It Up!
64. User Experience and Business Experience #10 Keep It Up!
65. UX is not part of the process. It is the process. #10 Keep It Up!
66. The killer feature is making calls.” Steve Jobs – iPhone launch “ #10 Keep It Up!
67. Ques on Everything #10 Keep It Up!
68. Knowing when any technique is appropriate — and when it isn’t — marks a pragmatic, measured approach to designing for the web, and that’s a perspective I really treasure...” Ethan Marcotte “ #10 Keep It Up!
69. Why is great user experience important?
70. Aim for excellence Final thought...
71. OmooHQ.com/fowd Beta Pass... Exclusive
72. Thank You. Now, go be Awesome :) @richardshepherd Keep in touch!