Home > Web Design Hints > Usability

Usability Guidelines for Non-Profit Web Sites


My Purpose: I wrote this for the local unit Web Wranglers of the Backcountry Horsemen of America, based on my 10 years of experience with church web sites. Most of the points are valid for most non-profit organizations, equine or not. My target audience is the new, volunteer web master for the local chapter of a non-profit organization.

Your Purpose: Your web site should tell members what events you have planned and how to call or write to the proper person. It should tell non-members what your organization does. It should be clear, clean and easy to navigate. It should work just like most other web pages. You don't have to be different to be above average.

Disclaimer: I'm not the world's best web designer. There are sites which break many of my rules and are stunning. See a list. Again, this is a list for new, inexperienced, volunteer web masters.

This page has these sections:

You may also like a second page, Why you need a Web Committee.


Colors

Use a color scheme people expect and are familiar with; light background, dark text. If you must use a tiled picture as a background, use your photo editor to fade it down so it doesn't distract.

Make your text links underlined and blue. Make visited links purple. This is dull, but it is what people expect. They are not going to want to run their mouse along every word on the page to see if it is a link. So, making your text links black but adding a fancy java applet to make them change size and color when someone hovers over them is annoying.

Since your links are underlined and blue, no other text should be underlined or blue. This makes it clear, even to a quadriplegic reading your site with a stick held between his teeth, what is a link and what isn't.

Your plain text and your link text should both have a pleasing and clear contrast with the background. That means your plain text should be black or brown and your background should be white, light yellow, light brown or light gray; not light red, light green or light blue.
See some examples.

Use the same color scheme on every page. This reassures people they haven't wandered into another web site by mistake.

Use a small, attractive graphic and some sort of consistent heading on every interior page. The ideal graphic is some detail cropped from a big graphic on your home page. The ideal heading gives your organizations's name and the name of the page. ("BCHC Mid Valley Unit - Links"). Some of your visitors will enter your site via the home page. Others will enter it via a search engine, going directly to an interior page. (80% of my church site's visitors enter via an interior page.) You want all of your pages to be attractive, and you want your visitors to know who you are. You don't need to use a half-screen graphic from the home page on every interior page.


Page Layout

Put your name, address and an e-mail contact at the bottom of every page. If you can, have a contact telephone number also and two e-mail addresses; one for questions about the organization, one for questions about the web site. Putting it at the bottom saves people from having to scroll past it every time they go to a new page.

Have a navigation bar on every page. The navigation bar doesn't have to have every page in the site; just the main ones and, of course, home.

If a page is not on the navigation bar, put "Bread crumbs" at the top. These are a series of links that show the visitor where the page fits. For instance, on a page of pictures from the work party at Buck Lake, the breadcrumbs

Home > Activities > Work Day at Buck Lake

tells the visitor you have a page named "Activities", and it is likely to have other pages from other activities. Note again these will be links on your pages; they are not here. I made them blue and underlined, though.


Content

Your site must have a home page. It might have a page for:


Pictures

Pictures liven up a web site. You should get permission from the people in them, especially if you have their names in the caption. Sooner or later you will get a member who hasn't quite lost those 40 pounds she keeps trying to lose, and does not want her picture or name posted. Ask first.

Resize your pictures properly. If you upload a picture as an 8x10 but tell the browser to present it as a 4x6, two bad things happen. First, the hapless visitor has to wait while his machine downloads 2.5 megabytes, then wait some more while it tries to shrink them. The wait can be maddening on a dial-up modem. Second, 8x10 is a 4:5 ratio, while 4x6 is a 2:3 ratio, so your subjects are going to look like they were in a fun house mirror.

Front Page and some other web page editing tools are notorious for letting you specify any picture size you like, then uploading the full-size picture. Look at your HTML. The "img src" tag will have a height and width. Make sure they match the dimensions of your picture. If they don't, use your photo editor to crop and/or resize the picture properly.
See some examples.


Lists, and when to use them

If you have several small points to make, a list is often clearer and simpler than short paragraphs. There are two kinds of lists, ordered and not. Ordered are usually numbered, unordered bulleted. Here is a bit of trivia for you:
Use an ordered list when sequence is important. For example, on a bottle of shampoo:
  1. Lather
  2. Rinse
  3. Repeat
Use an unordered list when the sequence is not important. For example, three of my favorite things are:
  • Children's laughter
  • Chocolate
  • Daffodils


Courtesy

We should be courteous to our visitors. Here are some ways:

Warnings:
If a link goes to a page that is over 100KB or is PDF instead of HTML, put a little warning:

Pictures from Buck Lake Work Party (512 KB)
Print off our Membership Application (47 KB, PDF)


This warns people with slow connections they will have a wait, and people without Acrobat that they won't be able to read the page.
(Note I broke my own rule; the underlined phrases above are not links, even though they are blue and underlined. They are examples.)

Dates:
Make your dates long and clear. Today, for instance, if you have JavaScript enabled, is:

Put in the day of the week so that if your event is on a Tuesday and someone plays bridge every Tuesday, she will know she can't attend. Put in the year to reassure the visitor that your calendar page is up to date. If push comes to shove, it is better she see that your calendar page is a year out of date than she show up to an event that happened last year.

Text Size:
In MS IE, click on View > Text Size > Largest | Smallest.
In Firefox, click on View > Text Size > Zoom In | Zoom Out.
If your text size doesn't change, you are insulting people who use glasses. Some web page editing tools will use a fixed text size if you are not careful.

Page Titles:
If you've ever read a woman's magazine while you were waiting in the checkout line in a grocery store, you'll know how frustrating it is when the teaser blurbs on the cover have nothing to do with the article titles in the table of contents. Make sure the word you use for a page link in the navigation bar appears in large letters at the top of the corresponding page. This tells the visitor he hasn't clicked on the wrong link, and your links are accurate.

PDF:
Use PDF sparingly; ideally, only for pages that have to be printed off, signed and sent in by snail mail. The worse case I can think of is a PDF newsletter "printed" on legal-sized paper, 8.5 x 14, 6 lines per inch, for 84 lines, in three columns. Here comes a visitor whose screen is so small, or eyes so bad, he can only see 20 lines at a time. Is he really going to scroll down 4 times to read column 1, back up, 4 more times to read column 2, back up, 4 more times to read column 3? Maybe, but chances are unless it is step-by-step instructions on how to hack into the web cam at the University of Denmark's Women's Gymnasium's shower room, you will have lost him at scroll 3.


Testing

Spell check and proof read. The two are not the same. A spell checker will not always tell you if you use the "write" word in the wrong context, even though it did pass the spell checker. Typos make you look like a dufus. You can open an HTML file with "Word", if your web editor doesn't have a spell checker. Have someone else proof read, someone who is not as familiar with your work as you are. If you can't find anyone, read your pages from the bottom up, one sentence at a time.

If you use a PC, find someone with a Mac to look at the site, and vice versa.

Look at the site in MS IE and Firefox. You can have both on your machine, or you can ask a friend to look at it.

Use the w3.org Validation Service to test each page, at least once. Check the ones you modify frequently once in a while, too.

Check all your links at least once every six months.

Change your resolution and look at all the pages. Telling the web visitor to change his resolution is futile and insulting. It may not be as pretty at 800x600 as it is at 1024x768, and the visitor may have to scroll horizontally, but it should be legible.


If all this advice seemed reasonable, you may also like a second page about volunteer web masters for non-profits, Why you need a Web Committee.
I also have a page specifically for Church Web Design.



This is a page in my site's section on Web Design. The section has a page for:
Student Web Site suggestions
Church Web Site suggestions
HTML colors and Hexadecimal numbers
Usability suggestions for any non-profit organization with a volunteer web master.
You might also like the essay, My Adventures as a UU Web Master, a talk I gave to my church about being their web master.



Sections of my web site:

Home | Christmas Letters | Genealogy | Homilies | Misc. Essays | Peace Corps | Web Design

Problems, comments or complaints? Need an opinion? Send E-mail to:
This page updated: June 21, 2014