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!

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: