Websites 101

Websites 101 May 20, 2009 For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441

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

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

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

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

WHAT IS WEB USABILITY? WHY IS IT IMPORTANT?

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

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

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

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

PRINCIPLES OF USABILITY For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441

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

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

Whitespace • Empty space • Too many things may look intimidating For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441

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

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

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

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

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

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

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

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

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

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

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

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

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

• Homepage should show your most important parts • Put your Donate Now button “above the fold” • Make it easy for your supporters to give!

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

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

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

USABILITY TESTING For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441

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

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

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

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

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

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

Thank you all for volunteering your websites! WEBSITE CRITIQUE For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441

Original CIELAP Website For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441

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

Original True North Website For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441

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

WEB STATS For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441

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

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

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

Content • Top content • Top landing pages • Top exit pages For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441

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

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

If you want to learn more RESOURCES For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441

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

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

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

ABOUT MYCHARITYCONNECTS For audio, turn on your speakers, or Call 516 453 0014; Code 514-274-441

www.mycharityconnects.org Next Webinar • Free online resources • Information about technology “Donations of Securities” • Demos • More webinars! June 3 2PM – 3PM (ET)

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

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

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

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:

Websites 101

by CanadaHelps / MyCharityConnects

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 8

Statistics

Websites 101 Presentation Transcript

http://www.slideshare.net	5
http://monorganismebranche.org	2
http://mycharityconnects.org	1