Designing for next steps - A forward moving Web experience

9a168ca8182274f100cc89ea5db64708?s=47 Nick DeNardis
October 08, 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. Your goal is the design an experience to make your visitors care. This session will walk through real life examples to identify common pitfalls and successful approaches, provide techniques to objectively look at your communications from your audience’s point of view and highlight tools to measure and track success of your communications.

9a168ca8182274f100cc89ea5db64708?s=128

Nick DeNardis

October 08, 2012
Tweet

Transcript

  1. @nickdenardis #heweb12 #mcs5 Designing for next steps (a forward moving

    Web experience)
  2. @nickdenardis #heweb12 #mcs5 @nickdenardis

  3. @nickdenardis #heweb12 #mcs5 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/
  4. @nickdenardis #heweb12 #mcs5 Information Architecture “the art and science of

    organizing and labeling websites, intranets, online communities and soware to support usability.” - Information Architecture Institute
  5. @nickdenardis #heweb12 #mcs5

  6. @nickdenardis #heweb12 #mcs5

  7. @nickdenardis #heweb12 #mcs5

  8. @nickdenardis #heweb12 #mcs5 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
  9. @nickdenardis #heweb12 #mcs5 Good Design != Good UX

  10. @nickdenardis #heweb12 #mcs5 Good UX = Good Design

  11. @nickdenardis #heweb12 #mcs5 1. Junk 2. 3. 4.

  12. @nickdenardis #heweb12 #mcs5 Care.

  13. @nickdenardis #heweb12 #mcs5 First Impressions

  14. @nickdenardis #heweb12 #mcs5 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?
  15. @nickdenardis #heweb12 #mcs5

  16. @nickdenardis #heweb12 #mcs5

  17. @nickdenardis #heweb12 #mcs5

  18. @nickdenardis #heweb12 #mcs5

  19. @nickdenardis #heweb12 #mcs5

  20. @nickdenardis #heweb12 #mcs5 1. Junk 2. Good 3. 4.

  21. @nickdenardis #heweb12 #mcs5 Test early, test oen.

  22. @nickdenardis #heweb12 #mcs5

  23. @nickdenardis #heweb12 #mcs5

  24. @nickdenardis #heweb12 #mcs5

  25. @nickdenardis #heweb12 #mcs5

  26. @nickdenardis #heweb12 #mcs5

  27. @nickdenardis #heweb12 #mcs5

  28. @nickdenardis #heweb12 #mcs5

  29. @nickdenardis #heweb12 #mcs5 Woopra

  30. @nickdenardis #heweb12 #mcs5 Silos get in the way of your

    users
  31. @nickdenardis #heweb12 #mcs5

  32. @nickdenardis #heweb12 #mcs5

  33. @nickdenardis #heweb12 #mcs5 <script type="text/javascript"> var _gaq = _gaq ||

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

  35. @nickdenardis #heweb12 #mcs5

  36. @nickdenardis #heweb12 #mcs5 1. Junk 2. Good 3. Great 4.

  37. @nickdenardis #heweb12 #mcs5 Use a human proxy

  38. @nickdenardis #heweb12 #mcs5

  39. @nickdenardis #heweb12 #mcs5

  40. @nickdenardis #heweb12 #mcs5

  41. @nickdenardis #heweb12 #mcs5 We have limited time

  42. @nickdenardis #heweb12 #mcs5 ClickTale

  43. @nickdenardis #heweb12 #mcs5

  44. @nickdenardis #heweb12 #mcs5 People suck at reading online

  45. @nickdenardis #heweb12 #mcs5

  46. @nickdenardis #heweb12 #mcs5

  47. @nickdenardis #heweb12 #mcs5

  48. @nickdenardis #heweb12 #mcs5 1. Junk 2. Good 3. Great 4.

    Rememberable
  49. @nickdenardis #heweb12 #mcs5 #lilebigdetails hp://lilebigdetails.com/

  50. @nickdenardis #heweb12 #mcs5 Error messages maer

  51. @nickdenardis #heweb12 #mcs5

  52. @nickdenardis #heweb12 #mcs5 Reduce the barrier to completion

  53. @nickdenardis #heweb12 #mcs5

  54. @nickdenardis #heweb12 #mcs5

  55. @nickdenardis #heweb12 #mcs5

  56. @nickdenardis #heweb12 #mcs5

  57. @nickdenardis #heweb12 #mcs5

  58. @nickdenardis #heweb12 #mcs5 Creepy!

  59. @nickdenardis #heweb12 #mcs5 Details maer (pixels don’t)

  60. @nickdenardis #heweb12 #mcs5

  61. @nickdenardis #heweb12 #mcs5

  62. @nickdenardis #heweb12 #mcs5

  63. @nickdenardis #heweb12 #mcs5

  64. @nickdenardis #heweb12 #mcs5

  65. @nickdenardis #heweb12 #mcs5

  66. @nickdenardis #heweb12 #mcs5 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
  67. @nickdenardis #heweb12 #mcs5 Resources • google.com/analytics • slickplan.com • woopra.com

    • clicktale.com • lilebigdetails.com
  68. @nickdenardis #heweb12 #mcs5 hps://speakerdeck.com/u/nickdenardis hp://nickdenardis.com ank You