Creating Wonderful Web App User Experience

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

5. None

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

9. None
10. None

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!