Uploaded on

Slides from our May 27, 2009 webinar. …

Slides from our May 27, 2009 webinar.

Your organization's website is a very important part of your brand on the Internet. It's where current and new supporters go to learn about what you do, find out how to get involved, and donate!

CanadaHelps' latest webinar aims to help you improve your website's usability. This entails creating a more user-friendly, organized, and compelling home on the World Wide Web. We'll provide tips for success, case studies, and much more!

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
817
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
57
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Websites 101 May 20, 2009 For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 2. Reminders You can hear us, but we can’t hear you Type questions in the Questions box Presentation slides will be available on Slideshare Turn up your volume For the best webinar experience, close all other applications. For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 3. Today’s Presenters • Carlo Bataclan Communications Intern • Kirstin Beardsley Communications & Marketing Coordinator For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 4. CanadaHelps.org What is CanadaHelps? A public charitable foundation that provides accessible and affordable online technology to both donors and charities. For Charities A cost-effective means of raising funds online. For Donors A one-stop-shop for giving. CanadaHelps is a charity helping charities. For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 5. Webinar Agenda 1. What is Web Usability and Why is it important? 2. Principles of Web Usability 3. Usability Testing 4. Website Critique 5. Web Stats 6. Resources 7. Q&A For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 6. WHAT IS WEB USABILITY? WHY IS IT IMPORTANT?
  • 7. Web Usability • Web usability refers to ease of use and visual design of your website • The focus is on your users For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 8. Focus on Your Users • What are “users”? o Anyone who uses your website for anything • Users tend to be impatient and in a hurry • This reflects on how they use your website • They scan content and don’t really read everything they come across For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 9. Why is it Important? • Good websites… – Are liked – Won’t drive people away – Won’t be distracting – Convey more information – Will be more compelling – Makes contributing easier – Will be visited again For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 10. Return on Investment for Nonprofits • More engagement from users • Increase credibility • Get more media coverage • Gain more support for your cause • Increase donations For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 11. PRINCIPLES OF USABILITY For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 12. Present Your Information in a Clear and Concise Way • Through appearance, functionality and content For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 13. Make Text Easy to Read Can you read this? How about this one? cAn yOu rEalLy rEaD tHiS?? This is more like it. • Use a standard font and proper size • Use proper contrast • Use proper caps • Best readability is dark on light (like black on white) For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 14. Whitespace • Empty space • Too many things may look intimidating For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 15. Follow Website Conventions Banner Navigation Navigation Content Body Contact & Misc Information • There are patterns that have become conventions For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 16. Follow Website Conventions Banner Navigation Navigation Content Body Contact and Misc. Information For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 17. Content • Web writing is concise • Keep paragraphs short and use bullet points • Bold important points, but sparingly For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 18. Speed • Make your pages load quickly • Limit use of large pictures • Interactive media can slow connection For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 19. Make navigating easy for users • Give the correct choices to the users (make section names self-explanatory) • Avoid too much scrolling For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 20. Self-Explanatory Choices Culinary Delights Cuisine Options Food Menu Menu Career Services Employment Opportunities Job Openings Jobs Organization Information More Information About Us About Us Give Us Your Time Volunteer Opportunities Volunteer • Don’t use ambiguous headings • Give your visitors clear choices For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 21. Avoid Too Much Scrolling • Keep it narrow • Sideways scrolling is uncommon For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 22. Page Organization Nice Heading Picture Here is where the content would go. It’s a nice place isn’t it? Neat and organized content is easy to read. Cool! • A separate page for each section • Headlines are key • Pictures to compliment topic For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 23. Breadcrumb Navigation • Give visitors a clue of where they are • Makes it easier to backtrack For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 24. Remove Ambiguity Regarding the Consequences of an Action • Make it easy to go back to the home page • Make mistakes easy to recover from For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 25. The Back Button • “Back” is one of the most used browser functions • Make sure that it doesn’t break your website when it’s used For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 26. Visual Consistency • First glance is most memorable • Keep visuals consistent • Reinforce their sense of security For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 27. Put the most important things in the right places • Have a clear description of what you do • Show your Donate Now button prominently • Complete contact information For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 28. • Homepage should show your most important parts • Put your Donate Now button “above the fold” • Make it easy for your supporters to give!
  • 29. Show What You Do Clearly • Easy to see and understand • Make it easy to remember! For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 30. Make it Easy to Contact You Banner Navigation Navigation Content Body Contact Information • Not necessary to be on the homepage • But have it easy to find For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 31. Show How People Can Get Involved • Donate to your cause • Volunteer their time or skills • Share your story with their network • Make your calls to action very prominent For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 32. USABILITY TESTING For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 33. Testing Questions 1. Is it obvious what this site is about? 2. Is it easy to find what I need? 3. Are the most important things visible when I arrive? For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 34. DIY Usability Testing Step 1: Find Testers • Find 3-5 people who have some time (30 minutes, tops) to have a look at your website • Testers should not already be familiar with your site (no staff, Board or regular volunteers) • Testers should be representative of your usual website users For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 35. DIY Usability Testing Step 2: Using your site • Ask testers to comment as they navigate your site (to give you insight about their choices) • Ask testers to accomplish your main calls of action  Sign up for your newsletter  Click your Donate Now! Button  Find and apply for volunteer opportunities  Other ways they can get involved (buy tickets, buy products, join a group etc…)  Find general information about your organization’s mission and mandate  Contact your organization For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 36. DIY Usability Testing Step 3: Observe • Take note of: – How long each step takes to complete – Tester confusion at any point – Frustration – Ease of use • Work with your web team to have the main issues and frustrations address • … repeat your usability testing whenever you make major changes to your site For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 37. Survey Your Users • Make a checklist that rates your website • Free online surveys (www.surveymonkey.com) • Put a link on your site • Put it in your newsletter • Try to get everyone to do it For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 38. Check Out Other Charity Websites • See what they are doing right (or wrong) • May give some insight and inspiration For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 39. Thank you all for volunteering your websites! WEBSITE CRITIQUE For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 40. Original CIELAP Website For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 41. Modified CIELAP Website Now clickable Picture and shortened summary More prominent with shorter names Added a picture Donate Now! Button Trimmed content For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 42. Original True North Website For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 43. Modified True North Website Donate Now! button Moved what the organization is about and spaced them out for easier reading Resized Image to align with the homepage and also to load more quickly Fixed Section For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 44. WEB STATS For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 45. Why Are Web Stats Important? 1. Understand your users 2. Know what people do on your site 3. Provides tangible feedback about your site 4. Leaves the guessing out of what works For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 46. Looking At Web Stats • Web stats can be confusing • Knowing where and what to look for helps • Here’s what you can take a look at now For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 47. Visitors • Gain insights about the visitors of your website 1. Unique visitors 2. First time vs. repeat visitors 3. Visitor loyalty 4. Length of visit 5. Browsers 6. Geographic profile & language For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 48. Content • Top content • Top landing pages • Top exit pages For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 49. Traffic Sources • Direct traffic: typed your address in a browser • Referring sites: – Know your top referring sites – Are your ads working? • Search Engines – Keywords For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 50. Google Analytics • Free service • Comprehensive feature set • Go to http://www.google.com/analytics/ For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 51. If you want to learn more RESOURCES For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 52. Don’t Make Me Think by Steve Krug • Very popular • Easy to read • Great content • Lots of examples • Great section on Do- It-Yourself Usability Testing and Resources For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 53. Books Don’t Make Me Think by Steve Krug Prioritizing Web Usability by Jakob Nielsen and Hoa Loranger The (Usable) Web Style Guide by Patrick Lynch and Sarah Horton For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 54. Websites • Usability.gov – A great resource for building usable websites • www.useit.com - Jakob Nielsen’s site on web usability • www.usabilityinstitute.com – A great free resource by Jack Belis (Free website survival checklist here) • Eyetrack III – A great website on eyetracking (Summary of findings by the Direct Creative Blog here). For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 55. ABOUT MYCHARITYCONNECTS For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 56. www.mycharityconnects.org Next Webinar • Free online resources • Information about technology “Donations of Securities” • Demos • More webinars! June 3 2PM – 3PM (ET)
  • 57. www.mycharityconnects.org/conference JUNE 8 – 9 | MaRS CENTRE, TORONTO • Two-day “Bachelor’s level” learning opportunity for fundraisers and marketers in the charitable/non-profit sector • Learn about online technology, Web 2.0, social media tools, “Philanthropy 2.0” • Gain decision-making tips • Learn about best practices and new ideas • Acquire a greater sense of return on investment
  • 58. www.mycharityconnects.org/conference JUNE 8 – 9 | MaRS CENTRE, TORONTO • 25 workshops to choose from, including topics like: • Everything Google: Alerts, Adwords & Analytics • Volunteering 2.0: How to Attract, Hire and Manage Online Volunteers • E-Advocacy: Click for Change • How Tweet It Is: Creating a Following on Twitter • Switching Gears: Adapting to Technology Changes • Getting Your Board on Board • And much more! • Registration fee includes: • Admission to 4 keynote sessions and 5 workshops • 2 breakfasts, 2 lunches • Conference materials • Conference swag bag
  • 59. Question and Answer You can hear us, but we can’t hear you Ask questions in Questions box Ask away! For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441
  • 60. Thank you for attending! Slides will be up on: www.slideshare.net/MyCharityConnects Check out www.mycharityconnects.org for resources! Register for the conference at: mycharityconnects.eventbrite.com Questions, feedback, comments? Email Amy at: amyh@canadahelps.org Thanks to: