Making Your Website Sing!


Published on

Engaging users through good usability, design, presentation, and storytelling.

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Making Your Website Sing!

  1. 2. Making Your Website Sing! Engaging users through good usability, design, presentation, and storytelling.
  2. 3. Embolden An award-winning web development, design and online communications strategy firm. <ul><li>Nonprofits and Community Foundations </li></ul><ul><li>Professional Services </li></ul><ul><li>Financial Sector </li></ul>
  3. 4. How many…?
  4. 5. Online communication channels
  5. 6. <ul><li>Do you have a strategic plan or road map? </li></ul><ul><li>Who is your audience? </li></ul><ul><li>What are your goals? </li></ul><ul><li>What is our criteria for success? </li></ul><ul><li>Do you know how you will move people to act? </li></ul><ul><li>Can we measure our success? </li></ul><ul><li>What online channels can we use to meet our goals? </li></ul>Online Communications Strategy
  6. 7. Traffic & Engagement
  7. 8. Engagement is Action <ul><li>To comment, reply, share </li></ul><ul><li>To donate </li></ul><ul><li>To get involved </li></ul><ul><li>To volunteer </li></ul><ul><li>To feel something </li></ul><ul><li>To act </li></ul>Move People!
  8. 9. <ul><li>Usability: The Good, </li></ul><ul><li>The Bad, </li></ul><ul><li>and The Ugly... </li></ul><ul><li>What is Usability? </li></ul>
  9. 10. As defined most succinctly by Usability “refers to how well users can learn and use a product [or a website] to achieve their goals and how satisfied they are with that process.”
  10. 11. Usability is everywhere Via:
  11. 12. Usability is everywhere
  12. 13. Usability: The Bad is The Ugly <ul><li>Fabric Land </li></ul><ul><li>Where do I look? </li></ul><ul><li>What do they want me to do? </li></ul><ul><li>How do I buy? </li></ul><ul><li>I see people, squished people. </li></ul><ul><li>Where are the fabrics? </li></ul><ul><li>Is there a brick & mortar store? </li></ul>
  13. 14. Usability: The Bad is The Ugly <ul><li>Yvette’s Bridal (with sound) </li></ul><ul><li>Where do I look? </li></ul><ul><li>What’s that noise? </li></ul><ul><li>How do I turn it off? </li></ul><ul><li>Why can’t I turn it off? </li></ul><ul><li>Is that an airplane? </li></ul><ul><li>Enter Yvette’s?! Didn’t I do that already? </li></ul><ul><li>Should I enter or check the glamorous models that seem so important? </li></ul><ul><li>This page scrolls on and on, in both directions! </li></ul>
  14. 15. Usability: The Bad is The Ugly How about a news site? HavenWorks
  15. 16. Usability: <ul><li>CFFC </li></ul><ul><li>Remember this style? </li></ul><ul><li>Organized. </li></ul><ul><li>It could be a lot worse. </li></ul><ul><li>It could be a lot better. </li></ul>
  16. 17. <ul><li>Ok. </li></ul><ul><li>But those sites are really old. </li></ul><ul><li>We know better. </li></ul>
  17. 18. Usability: The Bad is The Ugly Can You Tell Who's Site?? <ul><li>Do you know what to do? </li></ul><ul><li>Where to go? </li></ul><ul><li>How to find anything? </li></ul><ul><li>Which video is playing? </li></ul><ul><li>What’s the giant + in footer for? </li></ul>
  18. 19. Usability: Design does not equal good usability <ul><li>Brill Publications </li></ul><ul><li>Highly designed </li></ul><ul><li>Easy on the eye doesn’t equal easy on the brain </li></ul><ul><li>Where to click? </li></ul><ul><li>Difference between riding the lift and quickstart lift? </li></ul><ul><li>Become a member of what? </li></ul><ul><li>Meaningless terms in navigation </li></ul><ul><li>Non-clickable areas </li></ul><ul><li>The Issue: what is it? </li></ul><ul><li>The Issue: too many options </li></ul>
  19. 20. <ul><li>Ok. </li></ul><ul><li>Those were highly designed, but not good usability. </li></ul><ul><li>Again, we know better. </li></ul>
  20. 21. .
  21. 22. Users coming to your site via search are looking to find something or do something . Usability: There’s not much time <ul><li>They’ll visit up to 3 sites. </li></ul><ul><li>25% land on the homepage (and spend 25 seconds) </li></ul><ul><li>75% will land on a page other than the homepage (and spend 47 seconds) </li></ul><ul><li>1:42 on sites where they moved on </li></ul><ul><li>2:34 on final site for a task </li></ul>Source: Nielsen Norman Group Total time on site:
  22. 23. Usability: The Good <ul><li>Apple </li></ul><ul><li>Few choices to make </li></ul><ul><li>Clean and simple navigation </li></ul><ul><li>Scannable </li></ul><ul><li>Organized </li></ul><ul><li>Most important item takes up the most real estate </li></ul><ul><li>Callouts for other features </li></ul><ul><li>Search </li></ul>
  23. 24. Jakob Nielsen: How Little Do Users Read? <ul><li>“ On the average Web page, users have time to read at most 28% </li></ul><ul><li>of the words during an average visit; </li></ul><ul><li>20% is more likely.” </li></ul><ul><li>Based on pages with approximately 600 words. </li></ul><ul><li> </li></ul>
  24. 25. Content is Scannable when it’s easy for the eye and brain to process. <ul><li>fewer words </li></ul><ul><li>headlines, headers, and sub-headers to convey the meaning </li></ul><ul><li>information-laden words at the beginning of paragraphs </li></ul><ul><li>small sections </li></ul><ul><li>use bullets, lists, and related images where possible </li></ul><ul><li>use well-labeled tabs, accordions, and tables where appropriate </li></ul><ul><li>if a lot of text is required, provide a very brief summary at the beginning </li></ul>
  25. 26. Usability: The Good <ul><li>Mint </li></ul><ul><li>Lots of whitespace </li></ul><ul><li>Easy on the eye </li></ul><ul><li>Clear text </li></ul><ul><li>Scannable </li></ul><ul><li>Action-driven navigation </li></ul><ul><li>Informative tagline </li></ul><ul><li>Options and callouts, but not too many </li></ul><ul><li>Preview of what’s inside </li></ul><ul><li>Informative tag line </li></ul>
  26. 27. Jakob Nielsen: The F-Shaped Pattern Not only do we know what users read, we know how they read it. Eyetracking studies show web users scan content in an F-pattern. Alertbox: F-Shaped Pattern Eyetracking Overview
  27. 28. Content Writing: Scan this Page <ul><li>Krug: Chapter Two </li></ul><ul><li>Part of a long text, but highly scannable </li></ul><ul><li>Informative headers </li></ul><ul><li>Short paragraphs </li></ul><ul><li>Bullets and bold text </li></ul><ul><li>Possible to scan and get the meaning of the chapter in a few seconds. </li></ul>
  28. 29. Usability: Key Ingredients
  29. 30. Homepage Content: Just Say No! <ul><li>You are the curator of your site. </li></ul><ul><li>Keep things organized. </li></ul><ul><li>Don’t get wordy. </li></ul><ul><li>Does the new content fit into one of the main buckets on the homepage? If not, it probably belongs elsewhere. </li></ul><ul><li>Work with the homepage design, not against it. </li></ul><ul><li>Learn to say no. </li></ul>
  30. 31. Steve Krug on content: “ People are not going to read very much on your home page; they just want the gist in a short sentence or two.” Common sense web design
  31. 32. Usability: The Good <ul><li>Lance Armstrong Foundation </li></ul><ul><li>Very action-oriented </li></ul><ul><li>Clear calls to action </li></ul><ul><li>Clear navigation </li></ul><ul><li>Chunked content </li></ul><ul><li>Weighted design </li></ul><ul><li>Lots of whitespace </li></ul><ul><li>Could improve link styling </li></ul>
  32. 33. <ul><li>The good. </li></ul>
  33. 34. Usability: The Good <ul><li>CNN – News redux </li></ul><ul><li>Entire page in chunks </li></ul><ul><li>Option to select Edition </li></ul><ul><li>Update timestamp </li></ul><ul><li>User feedback solicited on all pages </li></ul><ul><li>Videos clearly indicated </li></ul><ul><li>Editor’s Choice: sorting options and scroll options </li></ul>
  34. 35. 2007 2009
  35. 36. Usability: The Good <ul><li>The Silk Road Project </li></ul><ul><li>Well-organized </li></ul><ul><li>Clean and simple navigation </li></ul><ul><li>Scannable </li></ul><ul><li>Callouts for other features </li></ul><ul><li>User-controls for slideshow </li></ul><ul><li>Search </li></ul><ul><li>Support for languages </li></ul>
  36. 37. Awareness Test
  37. 38. Usability: The Good <ul><li>Nike </li></ul><ul><li>Search field is giant and clear </li></ul><ul><li>Results sorted and filtered </li></ul><ul><li># of items and pagination </li></ul>
  38. 39. <ul><li>Ford Foundation - Beta </li></ul><ul><li>Video central – but does not autoplay </li></ul><ul><li>User controls are visible </li></ul><ul><li>Scannable & Focused </li></ul><ul><li>Grants & Fellowships navigation has been better-highlighted </li></ul><ul><li>Clean navigation </li></ul><ul><li>Use of color </li></ul><ul><li>Mega Menu </li></ul>Usability: Design can enhance usability
  39. 40. <ul><li>Ford Foundation - Beta </li></ul><ul><li>Mega Menu </li></ul><ul><li>“ Keep the navigation in the same place on every page, so I don't have to go looking for it.” </li></ul><ul><li>Steve Krug </li></ul>Usability: Design can enhance usability
  40. 41. Usability: Design can enhance usability <ul><li>White House </li></ul><ul><li>Before and after the Inauguration </li></ul><ul><li>Jan 20, 2009 </li></ul>
  41. 42. <ul><li>Silverback (Mac UX Testing App) </li></ul><ul><li>Designed </li></ul><ul><li>Scannable & Focused </li></ul><ul><li>Clear actions </li></ul><ul><li>Flow leads the user through the page </li></ul><ul><li>Hits all of the main points </li></ul>Usability: Design can enhance usability
  42. 43. Usability: Design does not equal good usability <ul><li>Donors Choose </li></ul><ul><li>Designed </li></ul><ul><li>Callouts </li></ul><ul><li>Calls to action front and center </li></ul><ul><li>But how do blocks relate to each other? </li></ul><ul><li>What does Donors Choose do? </li></ul><ul><li>Scannable? </li></ul><ul><li>Comments way off to the side </li></ul>
  43. 44. But my page can’t look like Apple; I have a lot of content! What do I put on the homepage?
  44. 45. Usability: The Good <ul><li>W.K.Kellogg Foundation </li></ul><ul><li>Engagement messages with big photos and headlines </li></ul><ul><li>Navigation and user controls </li></ul><ul><li>User-targeted navigation </li></ul><ul><li>Clear visual layout and heirarchy </li></ul><ul><li>Search suggestions (try it!) </li></ul>
  45. 46. I have too much stuff on my site. What do I say and how do I say it?
  46. 47. Janice Redish on Writing Content: <ul><li>People come to websites for the content that they think (or hope) is there. They want information that: </li></ul><ul><li>Answers a question or helps them complete a task </li></ul><ul><li>Is easy to find and easy to understand </li></ul><ul><li>Is accurate, up to date, and credible </li></ul><ul><li>Letting Go of the Words, Chapter One </li></ul>
  47. 48. Janice Redish on Writing Content: <ul><li>Good web writing: </li></ul><ul><li>is like a conversation </li></ul><ul><li>answers people’s questions </li></ul><ul><li>lets people grab and go </li></ul><ul><li>Letting Go of the Words, Chapter One </li></ul>
  48. 49. Content Writing: <ul><li>Mint </li></ul><ul><li>Large, informative headlines and headers </li></ul><ul><li>Bite-size chunks for grab and go </li></ul><ul><li>Answers questions </li></ul><ul><li>Very easy to read </li></ul><ul><li>Callouts </li></ul><ul><li>Tools </li></ul><ul><li>Related Tutorials </li></ul>
  49. 50. Content Writing: <ul><li> </li></ul><ul><li>Large, informative headline </li></ul><ul><li>Bulleted summary – Highlights </li></ul><ul><li>Brief paragraphs </li></ul><ul><li>Usability: related video, related topics, recommendations </li></ul>
  50. 51. Content: Organize & Be Concise <ul><li>The RI Foundation </li></ul><ul><li>Use accordions with tables to present only the information the user needs </li></ul>
  51. 52. <ul><li>Be concise </li></ul><ul><li>Answer questions </li></ul><ul><li>Use short paragraphs for grab and go reading </li></ul><ul><li>Remember the F-Pattern </li></ul><ul><li>Write descriptive headlines and sub-headers using informative keywords </li></ul><ul><li>Summarize </li></ul><ul><li>Avoid marketing-ese and jargon </li></ul>Write Better Content
  52. 53. Storytelling
  53. 54. Storytelling: A picture’s worth a thousand words. NY Times One in 8 Million
  54. 55. Storytelling: A picture’s worth a thousand words. <ul><li>Gates Foundation </li></ul><ul><li>Gates Foundation homepage </li></ul><ul><li>Annual Report </li></ul>
  55. 56. Why tell stories?
  56. 57. What Donors Want <ul><li>Content is the most important consideration when making an online donation. </li></ul><ul><li>Information important to online donors: </li></ul><ul><li>The organization’s mission, goals, objectives, and work. (This is 3.6 times more important as the organization’s presence in the user’s own community.) </li></ul><ul><li>How it uses donations and contributions. </li></ul><ul><li>Alertbox: Donation Usability Study </li></ul><ul><li>March 30, 2009 </li></ul>
  57. 58. <ul><li>Measure! </li></ul>
  58. 59. Usability pays off Source: Nielsen Norman Group, 2009 Metric Average Improvement Sales /Conversion 87% Traffic/Visitors 96% User Productivity 119% Use of Specific Features 223%
  59. 60. Measure it! <ul><li>Google analytics </li></ul><ul><li>Feedburner </li></ul><ul><li>Swix, Scout Labs (social) </li></ul><ul><li> </li></ul><ul><li>ClickTale </li></ul><ul><li>Crazy Egg </li></ul><ul><li>Eyetools </li></ul><ul><li>Loop 11 </li></ul><ul><li>Silverback (mac) </li></ul><ul><li>UserZoom </li></ul><ul><li>Etc. </li></ul>
  60. 61. Gurus & Blog Resources <ul><li>Jakob Nielsen: </li></ul><ul><li>Steve Krug: </li></ul><ul><li>Jesse James Garrett: </li></ul><ul><li> UX Booth </li></ul><ul><li> Bokardo – Social Web Design </li></ul><ul><li>Everyday UX </li></ul><ul><li> UIE Brain Sparks </li></ul><ul><li>Good Experience </li></ul><ul><li>Usability Post </li></ul><ul><li>Boxes and Arrows – IA and Design </li></ul>
  61. 62. References <ul><li>Alertbox: How little do users read? </li></ul><ul><li>Alertbox: Donation Usability Study </li></ul><ul><li>Alertbox: F-Shaped Pattern </li></ul><ul><li>Alertbox: Microcontent </li></ul><ul><li>Alertbox: How to Write for the Web </li></ul><ul><li>Apple </li></ul><ul><li> </li></ul><ul><li>Brill Publications </li></ul><ul><li>Crispin Porter + Bogusky </li></ul><ul><li>Community Foundation of Frederick County </li></ul><ul><li> </li></ul><ul><li>Donors Choose </li></ul><ul><li>Don’t Make Me Think </li></ul><ul><li>Embolden </li></ul><ul><li>Fabric Land </li></ul><ul><li>Ford Foundation </li></ul><ul><li>Ford Foundation Beta </li></ul><ul><li>Gates Foundation </li></ul><ul><li>Google </li></ul><ul><li>Google: 5 Objectives of Website Copy </li></ul><ul><li>HavenWorks </li></ul><ul><li>Kellogg Foundation </li></ul><ul><li>LIVESTRONG </li></ul><ul><li>Mint </li></ul><ul><li>The New York Times </li></ul><ul><li>Nike </li></ul><ul><li>Paul Sherman (photo credit) </li></ul><ul><li>The Rhode Island Foundation </li></ul><ul><li>Janice Redish: Letting Go of the Words </li></ul><ul><li>The Silk Road Project </li></ul><ul><li>Silverback </li></ul><ul><li>Steve Krug: Advanced Common Sense </li></ul><ul><li>Steve Krug Interview </li></ul><ul><li> </li></ul><ul><li> Eyetracking Overview </li></ul><ul><li>White House </li></ul><ul><li>Yvette’s Bridal </li></ul>
  62. 63. Thank you.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.