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

Web Usability - "It's Not Rocket Surgery"

Web Usability - "It's Not Rocket Surgery"

Slides from a Web Usability talk to a Digital Marketing course.

In this talk I introduce basic web design concepts, and Steve Krug's simple rules to achieve a great usability in your website. I also introduce Usability Testing, metrics, A/B Testing and conversion funnels.


Roberto Machado

July 20, 2013

More Decks by Roberto Machado

Other Decks in Design


  1. “It’s not rocket surgery” Web Usability Roberto Machado

  2. Roberto Machado @rmdgb roberto@groupbuddies.com

  3. None
  4. None
  5. None
  6. None
  7. “It’s not rocket surgery” Web Usability Roberto Machado

  8. Steve Krug

  9. Krug’s 1st law: “Don’t Make Me Think”

  10. None
  11. The Bad http://www.mrbottles.com/ http://www.jamilin.com/ http://www.designz23.com/portfolio.html

  12. None
  13. The Good http://www.amazon.com/ http://www.apple.com/ https://www.google.pt/

  14. None
  15. How we surf the web?

  16. Scanning!

  17. None
  18. http://groupbuddies.com https://coachmeapps.com/ https://www.roundabet.com/ TASK:

  19. Usually people just muddle through!

  20. http://kinhr.com https://www.blossom.io/ https://trello.com/ TASK:

  21. Design 101 Designing Pages For Scanning, Not Reading

  22. Create a clear visual hierarchy

  23. None
  24. Conventions are your friends

  25. Break up pages into clearly defined areas

  26. Make it obvious what’s clickable

  27. Keep the noise down

  28. Krug’s 2sd law: “It doesn’t matter how many times I

    have to click, as long as each click is a mindless, unambiguous choice”
  29. Nr of clicks matter, but...

  30. Krug’s 3rd law: “Get rid of half words on each

    page, then get rid of what’s left”
  31. Omit needless words

  32. It reduces the noise level of the page It makes

    the useful content more prominent It makes the pages shorter Omit needless words
  33. Happy Talk Must Die

  34. Instructions Must Die

  35. Designing Navigation “People won’t use your Web site if they

    can’t find their way around it”
  36. Scene from a mall

  37. Web Navigation 101

  38. You’re usually trying to find something You decide whether to

    ask first or browse first Web Navigation 101
  39. No sense of scale No sense of direction No sense

    of location The Unbearable lightness of browsing
  40. It gives you something to hold on It tells us

    what’s here It tells us how to use the site It gives us confidence in the people who built it The overlooked purposes of navigation
  41. “You are here”

  42. Tabs

  43. They’re self-evident They’re hard to miss They’re slick They suggest

    a physical space Tabs
  44. Designing The Home Page “The first step in recovery is

    admitting that the Home page is beyond your control”
  45. Site identity and mission

  46. Site Hierarchy

  47. Search

  48. Shortcuts

  49. Registration

  50. Tagline

  51. Designing A Landing Page built with one specific goal in

  52. Simple is Best

  53. A Clear Call to Action is Vital

  54. Clear and Concise Copy

  55. Only Ask for the Vitals

  56. Pay Attention to the Fold

  57. None
  58. None
  59. Testing Landing Pages “You must do this!!!”

  60. A/B Testing

  61. https://www.optimizely.com/ http://visualwebsiteoptimizer.com/ http://vanity.labnotes.org/ http://unbounce.com/ http://www.hubspot.com/ Tools:

  62. Metrics “build - measure -learn”

  63. AARRR Metrics

  64. Acquisition: users come to site from various channels Activation: users

    enjoy 1st visit: "happy” experience Retention: users come back, visit site multiple times Referral: users like product enough to refer others Revenue: users conduct some monetization behavior AARRR Metrics
  65. Conversion Funnel

  66. http://www.google.com/analytics/ https://mixpanel.com/ https://www.kissmetrics.com/ Tools:

  67. Usability Testing “Keeping testing simple - so you do enough

    of it”
  68. Recurring

  69. One morning/month

  70. Recruit people, not domain experts (80/20)

  71. This must be like a therapy session

  72. Religious Debates Why most web design arguments about usability are

    a wast of time
  73. “Everybody likes ____.”

  74. The myth of the average user

  75. Thanks!

  76. www.groupbuddies.com roberto@groupbuddies.com

  77. “It’s not rocket surgery” Web Usability Roberto Machado

  78. Resources: Don’t Make Me Think, Steve Krug Undercover User Experience

    Design, Cennydd Bowles Lean Analytics, Alistair Croll Rocket Surgery Made Easy, Steve Krug
  79. And More: http://www.uxbooth.com/articles/10-usability-lessons-from- steve-krug%E2%80%99s-dont-make-me-think/ http://blog.hubspot.com/blog/tabid/6307/bid/12070/3- Unique-Ways-to-Gain-Trust-on-Landing-Pages.aspx http://www.smashingmagazine.com/2010/06/24/the- ultimate-guide-to-a-b-testing/