Designing for next steps - A forward moving Web experience

68
@nickdenardis #heweb12 #mcs5 Designing for next steps (a forward moving Web experience)

description

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.

Transcript of Designing for next steps - A forward moving Web experience

  • 1. Designing for next steps (a forward moving Web experience)@nickdenardis #heweb12 #mcs5
  • 2. @nickdenardis@nickdenardis #heweb12 #mcs5
  • 3. Associate Director of Web Communications Wayne State University hp://wayne.edu/ Host of EDU Checkup hp://educheckup.com/ Curator of EDU Snippits hp://edusnippits.com/@nickdenardis #heweb12 #mcs5
  • 4. Information Architecture the art and science of organizing and labeling websites, intranets, online communities and soware to support usability. - Information Architecture Institute@nickdenardis #heweb12 #mcs5
  • 5. @nickdenardis #heweb12 #mcs5
  • 6. @nickdenardis #heweb12 #mcs5
  • 7. @nickdenardis #heweb12 #mcs5
  • 8. User Experience a persons perceptions and responses that result from the use or anticipated use of a product, system or service" - ISO 9241-210@nickdenardis #heweb12 #mcs5
  • 9. Good Design != Good UX@nickdenardis #heweb12 #mcs5
  • 10. Good UX = Good Design@nickdenardis #heweb12 #mcs5
  • 11. 1. Junk 2. 3. 4.@nickdenardis #heweb12 #mcs5
  • 12. Care.@nickdenardis #heweb12 #mcs5
  • 13. First Impressions@nickdenardis #heweb12 #mcs5
  • 14. 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?@nickdenardis #heweb12 #mcs5
  • 15. @nickdenardis #heweb12 #mcs5
  • 16. @nickdenardis #heweb12 #mcs5
  • 17. @nickdenardis #heweb12 #mcs5
  • 18. @nickdenardis #heweb12 #mcs5
  • 19. @nickdenardis #heweb12 #mcs5
  • 20. 1. Junk 2. Good 3. 4.@nickdenardis #heweb12 #mcs5
  • 21. Test early, test oen.@nickdenardis #heweb12 #mcs5
  • 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. Woopra@nickdenardis #heweb12 #mcs5
  • 30. Silos get in the way of your users@nickdenardis #heweb12 #mcs5
  • 31. @nickdenardis #heweb12 #mcs5
  • 32. @nickdenardis #heweb12 #mcs5
  • 33. @nickdenardis #heweb12 #mcs5
  • 34. @nickdenardis #heweb12 #mcs5
  • 35. @nickdenardis #heweb12 #mcs5
  • 36. 1. Junk 2. Good 3. Great 4.@nickdenardis #heweb12 #mcs5
  • 37. Use a human proxy@nickdenardis #heweb12 #mcs5
  • 38. @nickdenardis #heweb12 #mcs5
  • 39. @nickdenardis #heweb12 #mcs5
  • 40. @nickdenardis #heweb12 #mcs5
  • 41. We have limited time@nickdenardis #heweb12 #mcs5
  • 42. ClickTale@nickdenardis #heweb12 #mcs5
  • 43. @nickdenardis #heweb12 #mcs5
  • 44. People suck at reading online@nickdenardis #heweb12 #mcs5
  • 45. @nickdenardis #heweb12 #mcs5
  • 46. @nickdenardis #heweb12 #mcs5
  • 47. @nickdenardis #heweb12 #mcs5
  • 48. 1. Junk 2. Good 3. Great 4. Rememberable@nickdenardis #heweb12 #mcs5
  • 49. #lilebigdetails hp://lilebigdetails.com/@nickdenardis #heweb12 #mcs5
  • 50. Error messages maer@nickdenardis #heweb12 #mcs5
  • 51. @nickdenardis #heweb12 #mcs5
  • 52. Reduce the barrier to completion@nickdenardis #heweb12 #mcs5
  • 53. @nickdenardis #heweb12 #mcs5
  • 54. @nickdenardis #heweb12 #mcs5
  • 55. @nickdenardis #heweb12 #mcs5
  • 56. @nickdenardis #heweb12 #mcs5
  • 57. @nickdenardis #heweb12 #mcs5
  • 58. Creepy!@nickdenardis #heweb12 #mcs5
  • 59. Details maer (pixels dont)@nickdenardis #heweb12 #mcs5
  • 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. 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 #lilebigdetails@nickdenardis #heweb12 #mcs5
  • 67. Resources google.com/analytics slickplan.com woopra.com clicktale.com lilebigdetails.com@nickdenardis #heweb12 #mcs5
  • 68. ank You hps://speakerdeck.com/u/nickdenardis hp://nickdenardis.com@nickdenardis #heweb12 #mcs5