Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating Wonderful Web App User Experience

Creating Wonderful Web App User Experience

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

Ee87c6d0fc9130bf15449c6dc50a1962?s=128

Richard Shepherd

May 16, 2012
Tweet

Other Decks in Technology

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!