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