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

Designing for next steps: A forward moving Web experience

Nick DeNardis
December 09, 2012

Designing for next steps: A forward moving Web experience

Getting a visitor to your website is only half the battle. How do you keep them? A lot of attention is put on the "action" items on a homepage, but it's more likely a visitor is landing on an interior page from a Web search or link. Every visual element, content or cue makes an impression with your visitor and influences what next step they take. The last thing you want to do is leave your visitor at a dead end or continuously force them to use the back button. With each page having a defined next step it gives your visitor a forward moving Web experience.

The idea is more than just bigger and brighter action buttons. No matter how large you make them your visitors are not going to click if they don't care. Your goal is the design an experience to make your visitors care.

Nick DeNardis

December 09, 2012
Tweet

More Decks by Nick DeNardis

Other Decks in Technology

Transcript

  1. @nickdenardis #CASEV

    View Slide

  2. @nickdenardis #CASEV
    Designing for next steps
    (a forward moving Web experience)

    View Slide

  3. @nickdenardis #CASEV
    @nickdenardis

    View Slide

  4. @nickdenardis #CASEV
    Associate Director of Web Communications
    Wayne State University
    hp://wayne.edu/
    Host of EDU Checkup
    hp://educheckup.com/
    Curator of EDU Snippits
    hp://edusnippits.com/

    View Slide

  5. @nickdenardis #CASEV
    Information
    Architecture
    “the art and science of organizing and labeling
    websites, intranets, online communities and
    software to support usability.”
    - Information Architecture Institute

    View Slide

  6. @nickdenardis #CASEV

    View Slide

  7. @nickdenardis #CASEV

    View Slide

  8. @nickdenardis #CASEV

    View Slide

  9. @nickdenardis #CASEV
    User Experience
    “a person's perceptions and responses that
    result from the use or anticipated use of a
    product, system or service"
    - ISO 9241-210

    View Slide

  10. @nickdenardis #CASEV
    Good Design != Good UX

    View Slide

  11. @nickdenardis #CASEV
    “To understand any individual
    screen, you must understand the
    chain of events that led to a user
    going there…”
    ~ Des Traynor

    View Slide

  12. @nickdenardis #CASEV

    View Slide

  13. @nickdenardis #CASEV

    View Slide

  14. @nickdenardis #CASEV
    school.edu/page.asp?id=1245
    or
    go.school.edu/grad-programs

    View Slide

  15. @nickdenardis #CASEV
    Good UX = Good Design

    View Slide

  16. @nickdenardis #CASEV
    1. Junk
    2.
    3.
    4.

    View Slide

  17. @nickdenardis #CASEV
    Care.

    View Slide

  18. @nickdenardis #CASEV
    First Impressions

    View Slide

  19. @nickdenardis #CASEV

    View Slide

  20. @nickdenardis #CASEV

    View Slide

  21. @nickdenardis #CASEV
    Can I trust this page?
    Is the information up to date?
    Can I use this page as a resource
    in the future?
    What do they want me to do on
    this page?

    View Slide

  22. @nickdenardis #CASEV

    View Slide

  23. @nickdenardis #CASEV

    View Slide

  24. @nickdenardis #CASEV

    View Slide

  25. @nickdenardis #CASEV

    View Slide

  26. @nickdenardis #CASEV

    View Slide

  27. @nickdenardis #CASEV

    View Slide

  28. @nickdenardis #CASEV

    View Slide

  29. @nickdenardis #CASEV

    View Slide

  30. @nickdenardis #CASEV

    View Slide

  31. @nickdenardis #CASEV

    View Slide

  32. @nickdenardis #CASEV
    1. Junk
    2. Good
    3.
    4.

    View Slide

  33. @nickdenardis #CASEV
    Test early, test often.

    View Slide

  34. @nickdenardis #CASEV

    View Slide

  35. @nickdenardis #CASEV

    View Slide

  36. @nickdenardis #CASEV

    View Slide

  37. @nickdenardis #CASEV

    View Slide

  38. @nickdenardis #CASEV

    View Slide

  39. @nickdenardis #CASEV

    View Slide

  40. @nickdenardis #CASEV

    View Slide

  41. @nickdenardis #CASEV
    Woopra

    View Slide

  42. @nickdenardis #CASEV
    Silos get in the way of
    your users

    View Slide

  43. @nickdenardis #CASEV

    View Slide

  44. @nickdenardis #CASEV

    View Slide

  45. @nickdenardis #CASEV

    View Slide

  46. @nickdenardis #CASEV

    View Slide

  47. @nickdenardis #CASEV
    <br/>var _gaq = _gaq || [];<br/>_gaq.push(<br/>['_setAccount', 'UA-xxxxxxxx-1'],<br/>['_trackPageview'],<br/>['b._setAccount', 'UA-xxxxxxxx-1'],<br/>['b._trackPageview']<br/>);<br/>(function() {<br/>var ga = document.createElement('script');<br/>ga.type = 'text/javascript'; ga.async = true;<br/>ga.src = ('https:' ==<br/>document.location.protocol ? 'https://ssl' :<br/>'http://www') + '.google-analytics.com/ga.js';<br/>var s = document.getElementsByTagName('script')<br/>[0]; s.parentNode.insertBefore(ga, s);<br/>})();<br/>

    View Slide

  48. @nickdenardis #CASEV

    View Slide

  49. @nickdenardis #CASEV

    View Slide

  50. @nickdenardis #CASEV

    View Slide

  51. @nickdenardis #CASEV

    View Slide

  52. @nickdenardis #CASEV
    1. Junk
    2. Good
    3. Great
    4.

    View Slide

  53. @nickdenardis #CASEV
    Use a human proxy

    View Slide

  54. @nickdenardis #CASEV

    View Slide

  55. @nickdenardis #CASEV

    View Slide

  56. @nickdenardis #CASEV

    View Slide

  57. @nickdenardis #CASEV

    View Slide

  58. @nickdenardis #CASEV
    We have limited time

    View Slide

  59. @nickdenardis #CASEV
    ClickTale

    View Slide

  60. @nickdenardis #CASEV
    People suck at
    reading online

    View Slide

  61. @nickdenardis #CASEV

    View Slide

  62. @nickdenardis #CASEV

    View Slide

  63. @nickdenardis #CASEV

    View Slide

  64. @nickdenardis #CASEV
    1. Junk
    2. Good
    3. Great
    4. Rememberable

    View Slide

  65. @nickdenardis #CASEV
    #littlebigdetails
    http://littlebigdetails.com/

    View Slide

  66. @nickdenardis #CASEV
    Error messages
    matter

    View Slide

  67. @nickdenardis #CASEV

    View Slide

  68. @nickdenardis #CASEV
    Reduce the barrier
    to completion

    View Slide

  69. @nickdenardis #CASEV

    View Slide

  70. @nickdenardis #CASEV

    View Slide

  71. @nickdenardis #CASEV

    View Slide

  72. @nickdenardis #CASEV

    View Slide

  73. @nickdenardis #CASEV

    View Slide

  74. @nickdenardis #CASEV
    Creepy!

    View Slide

  75. @nickdenardis #CASEV
    Details matter
    (pixels don’t)

    View Slide

  76. @nickdenardis #CASEV

    View Slide

  77. @nickdenardis #CASEV

    View Slide

  78. @nickdenardis #CASEV

    View Slide

  79. @nickdenardis #CASEV

    View Slide

  80. @nickdenardis #CASEV

    View Slide

  81. @nickdenardis #CASEV

    View Slide

  82. @nickdenardis #CASEV

    View Slide

  83. @nickdenardis #CASEV

    View Slide

  84. @nickdenardis #CASEV

    View Slide

  85. @nickdenardis #CASEV

    View Slide

  86. @nickdenardis #CASEV
    1. Junk
    Get a baseline understanding of your visitors
    2. Good
    Entice them to get just one step further
    3. Great
    Walk along their journey
    4. Rememberable
    Adding a few #lilebigdetails

    View Slide

  87. @nickdenardis #CASEV
    Resources
    • google.com/analytics
    • slickplan.com
    • intercom.io
    • woopra.com
    • clicktale.com
    • freegeoip.net
    • lilebigdetails.com

    View Slide

  88. @nickdenardis #CASEV
    https://speakerdeck.com/u/nickdenardis
    Thank You

    View Slide

  89. @nickdenardis #CASEV

    View Slide