Case Study - Building a Usable Site

A Website can be both attractive and easy to use. Usability and good looks aren’t mutually exclusive and one doesn’t necessarily have to negate the other.

When I first came into the online world, I knew nothing of technology, design, or usability. But as my site evolved, I realized that my users had particular characteristics — if I wanted to keep them, and attract more visitors, I’d have to make my site work for this audience!

Now, over 5 years later, I have a successful site and a loyal member base that’s growing all the time. How did it happen? Good question. Here’s the story of my success — and the steps I took to make my site attractive and usable to the largest possible number of users from my target audience.

From Small Beginnings…

I was never a technocrat, that’s for sure. I was 35 before I even owned a computer, in the early 90’s. It was second-hand, from a university professor – a venerable old 286 that had been new in 1986 and had a whopping 40 megs of memory. It did just fine running the word-processing program I’d bought it for.

Along with my day job, I bred and raised canaries, and also did some rehab work with abused or unwanted birds of various species. This became my passion. I assembled, edited and published the local canary club’s bulletin, and wrote stories and articles for other clubs, and occasionally for a popular pet bird magazine.

Quite a lot of my spare time was spent teaching new bird owners how to care for their pets; in an attempt to cut down on this time, I wrote a series of basic care and information sheets, that became quite popular among the local clubs and pet stores. Every once in a while I would turn on the computer and write out another info-sheet, or note down a story I couldn’t get out of my mind.

That was the complete extent of my technical know-how.

Enter: The Internet

As 1994 wended its way into 1995, every now and then someone would mention the rapidly growing phenomenon of the Internet to me. Several times I’d been told that I would love the inherent potential for communication, but I pooh-poohed the notion. Me? Why, my ancient little ‘puter couldn’t even run a modem properly!

Then I was given free time at an Internet Cafe as a Christmas present. At first I was positive I’d never be able to use up the entire two hours, but I came away utterly flabbergasted. Even though I’d not been able to find any sites on my favourite topic — canaries — I was hooked. I had no idea how, but I knew I was going to get online as soon as I could manage it. And if I couldn’t find a good canary site, then I was going to learn to build one!

Getting Online

By May 1996 I had a new, almost top-of-the-line 266 Pentium II computer. It was so completely different from my old 286 that it took me almost 6 months to get comfortable enough using it to feel ready to venture online.

I found a world vastly different from the one I had experienced during my original two-hour foray. Many Websites I wanted to visit were difficult to read, or difficult to navigate, or both, especially to a ‘newbie’ such as myself. As my frustration levels grew, I promised myself that my site would be different, so I began to take note of common elements of the few sites I found that were both attractive and easy to use.

This time there were some canary sites to be found, but none fit my ideas of what a great small-bird Website should be. All those years spent (literally) cutting-and-pasting print content to make photo-ready copy for newsletters and club bulletins had given me enough background in page layout to see what many Website masters so obviously did not: that there’s a pattern to the way the eye picks up information when scanning the field of vision.

The exact pattern used by each individual varies depending on that person’s personality, culture, and even their emotional state, but population-wide averages are generally predictable, and page layouts and the colours used should be designed to aid and enhance these movements, not frustrate them (try running a search on the phrase “how eyes scan pages” at your favourite search engine for more on this).

I soon found the ‘build your own free Website’ sites, but rejected Geocities as having too-long, difficult-to-remember urls, and eventually settled at iVillage, where I spent as much of my time as I could over the next two years learning basic HTML and ‘playing’ with Web pages.

User Research — Who Are They?

Long before I felt ready for ‘public’ viewing, people began to find my Website. As a starting point, I’d converted my bird care and information sheets to HTML and posted them. It wasn’t long before I began to get emails asking for more information – this was great, but did I know anything about that? Often I did, and if so, I’d put up a Web page about it.

Soon I had such an influx of email that I had difficulty answering it all, so I used a free bulletin board service offered by a now-defunct Internet company. This way visitors could browse answers to others’ bird questions, and post their own. By answering their questions on the message board, I gave more people access to the information I was sharing, and saved me time, so everyone was pleased.

Without realizing it, I had made the best possible choice; I had made it easy for people to talk to each other as well as me. More importantly, I had made it clear that I wanted to know what they thought, and hear about they wanted to see. I named my new service the Birds Board, little realizing that it would grow to be one of the most popular small bird discussion forums online.

It was about that time that I decided to begin using the free ‘Site Meter’ service to count visitors ( www.sitemeter.com ). I chose this service mainly because of the quality of the statistical reports, which focused on unique visitors and page views, rather than ‘hits’. I found it particularly interesting to note that the percentage of visitors to my Website using WebTV was, on average, roughly three times higher than the reported norm for most Websites.

That led me to begin to post simple surveys. This is an always-useful means to gather information, but with online surveys, it’s important to remember that unless you offer your visitors some incentive to take your survey (eg. a chance to win a prize), you’ll only receive responses from those who care enough to respond (so they can’t really be taken to reflect the attitudes of your visitors on the whole). Still, even these kinds of surveys can provide some very useful data.

I found to my great interest that a full half of my visitors were middle-aged or more, and that most had several birds, with over 20% of respondents having thirty birds or more. The biggest surprise was finding that a whopping 98% preferred to find relevant advertising when they visited a bird-oriented Website — a fact which may have had something to do with the fact that they also reported spending an average of $20 — $40 a month on food and supplies for their birds.

Compatibility and Display — How Does it Look?

Some of the comments posted on my new bulletin board made me realize that my site looked quite different to people using other set-ups than mine, and I began to do some research into how different browsers and operating systems would display my Web pages. Eventually I found that it was possible to design each Web page so it would display reasonably similarly, no matter what it was viewed with.

Once I knew what I needed to do, I could settle down and, so to speak, get my hands dirty. First, I went through the entire site and tried to see that each page displayed properly, no matter what it was viewed on. To do this I:

tested all my pages at various resolutions, from 640 x 480, to 1024 x 728, and everything in between. Big surprises here! I highly recommend that all Webmasters maintain an up-close and personal familiarity with how their sites display under different conditions. Content may be king – but without Display, it’s nowhere.
checked the view in Internet Explorer, Netscape, and Opera at each resolution with graphics on, and graphics off, and then checked using the free WebTV simulator available from www.webtv.com
began to pester my friends who use Macs (as I have a PC but not a Mac), being sure that they knew that I wanted honesty, and not politeness. I even found a few people with Web access on their handhelds, and bugged them to visit my site, and tell me what they could (and could not) see and access.

Once that was all over, it was back to the drawing board, repeating the reviews as necessary. This process is on-going, so don’t ever expect it to end. You may find plateaus along the way, but at the rate the Web grows and changes, you can expect to find lots to learn for some time yet.

The new bulletin board also proved useful in another way I hadn’t expected – I could ask people how they found the site to use, and what kinds of improvements it needed. This is an important feature lacking in many Websites, and often deliberately – it can be a lot of work to answer comments and implement suggestions! Still, it needs to be done, as without ongoing feedback, eventually you’ll be dead in the water.

Gradually, I began to assemble a clear picture of how to go about producing the results I wanted so that everybody could access my Website.

Applying The Lessons

These are a few of the specifics I found to have the most impact on my visitors’ ability to find and view the information I was trying to make available to them:

Correct Tag Syntax

This a necessity, not an option; in some browsers, a missing quote mark or closing tag can prevent the entire page’s contents from appearing. This is easily done by opening the files in Arachnophilia or a similar HTML editing utility.

I like Arachnophilia for two reasons: ethically, because it’s careware, not shareware; and practically, because it will highlight markup tags and tag errors, making it simple, easy, and quick to spot and fix mistakes.

Clear Alt Tags

A descriptive alt tag must be present for all images that have anything to do with your content (though you don’t need to label transparent image spacers and such). Filling in the alt tags may sound like picking nits to you, but it can make a huge difference to a lot of people – and depending on who your target audience is, that could be more people than you might guess.

In my case, I knew roughly half my target audience (people who keep pet birds) were middle-aged or more, and that many others were likely to have slow dial-up connections. This meant a significant percentage of my Web traffic could be using text or other alternative browsers, or might have images turned off to speed download times.

I knew from hands-on experience that another group of visitors would include handicapped people. Canaries are fairly easy to care for, and their song is wonderfully lifting to the spirits, making them a favourite pet of people who can’t care for a cat or dog for whatever reason.

Proper Use of Colour

Using colours that work well together is not only a good idea, but should be considered essential. We’ve all seen them – those Web pages that feature colour combinations that send chills up your spine. If you’re like me, you can’t get away from such a site fast enough! Remember, too, that up to 10% of the general population has red-green colour blindness. These people have trouble differentiating between these colours, so don’t try to contrast red and green – it might not be noticed.

In my opinion the Web-safe color charts are indispensable for correctly formatting pages to display similarly on different systems. Of course, you could just stick to black and white – but that’s incredibly unattractive, and sets people’s teeth on edge too; so in a way, not using colour can be as detrimental to your end results as the incorrect use of colour.

Test and test and test again, until you find colour combinations that work well together, and are easy to view for everybody.

Optimize Images

If there’s one rule on Web page accessibility that webmasters seem to love to break, it’s image size. If you can’t get the detail you like in a file size that will download in 15 seconds or less for a person using a 28.8 k modem, then either use a smaller image, or find something with a smaller file size to use instead. A resolution higher than 96 d.p.i. (dots per inch) is wasted on the Web, and usually images can be ‘optimized’ (that is, their file size reduced) without affecting their appearance much when viewed by a normal Web browser.

Many graphics programs have built-in optimizer utilities, or you can use one of the many free services such as the one at www.spinwave.com.

Save the high-resolution stuff for your local machine – be kind to your visitors, and always optimize the pictures you post on your Website.

Readable Fonts

Always specify alternate fonts, especially if you want to use a fancy font as your primary! If the person viewing your Webpage does not have that font on their machine, and you haven’t specified alternate fonts, they will not be able to read your message. List two or three commonly found fonts such as Arial, Times New Roman, or Helvetica as your alternates – better your page be readable, if not quite so pretty, than gorgeous but blank of text!

In the same vein, use the fancier fonts to accent plainer text, not to replace it. Eyestrain is already a large enough factor in many Web surfers’ lives, and they will not thank you if you add to it.

Fixed-Pixel Table Widths Vs Percentages

Until all the various *ML standards settle down and choose their common ground, tables will remain the best way to control your page layouts. Setting tables to percentage widths rather than fixed-pixel widths allows them to expand or shrink to fit the viewer’s screen as needed.

After a while, you begin to get a feel for what you can do with this, and realize it’s not as limited as you first thought. It’s possible, with a little experimentation, to design pages that will view similarly in a low-resolution Web TV screen, or a high-resolution screen set at 1024 x 768 pixels or more. And yes, it’s still possible to keep the content interesting.

Link Varieties

One of the most important details of all is to provide multiple means for visitors to navigate your site. I’ve heard over and over again from Webmasters with a wide variety of background experiences that this is redundant and unnecessary. What they forget to include in their statement, is that it’s not necessary for them.

Examine that statement a little more closely, and you have the reason multiple links are so useful: your Website is not for you, but for your visitors! Different people think differently, and it is only polite to attempt to accommodate your visitors in the way that they are the most comfortable with.

Put it this way, if you prefer: some people will notice and click on text links, while others will look for and spot the graphic link every time. People used to using one kind of link will look for it and may miss other types of links. But if you make both types of links available, everybody will be able to get around easily, without having to think twice about it.

Stay In Touch

An oft-forgotten detail in the maintenance of a good relationship with your site visitors is to keep them up to date on breaking news in your field, along with Website events and updates. Probably the easiest way to do this is to start an email list.

You have two basic choices – you can begin a newsletter (also known as an Announcement List), or you can establish a more interactive list (called a Discussion List). This second type of list allows members to post questions to the entire list, so that every member gets a copy and can answer (or not) publicly (on-list) or privately (off-list), as they prefer.

Announcement lists are far easier to manage, but are less interactive, while discussion lists are a lot more work to maintain and oversee, and can be troublesome if a ‘flame’ session occurs (which, sooner or later, they always do).

Personally, I took a chapter from Chris Pirillo’s book, “Poor Richard’s Email Publishing” and started an ezine. ‘Flock Talk’ will be ending its second year at the end of August, and is currently growing at an average rate of over 7 new subscribers a day, with an unsubscribe rate of less than .5%. This may not sound like much – but it’s better than average for a Web zine, and those numbers can add up fast!

One thing that’s essential to remember if you’re going to commit yourself to publishing, online or off, is this: if you set a schedule, it’s imperative that you keep it! Delays of a few hours will sometimes be unavoidable, but delays of a day or more are unacceptable and must not be allowed to occur. If you allow them to, you will find that your reputation for reliability will begin to slide in a hurry. Remember: bad news travels ten times faster than good news!

Live Testing

Once you’re reasonably happy with your Website, its time for the real acid test.

There are several utilities that will test your Website for you, and by all means do take advantage of them – the more feedback the better, when it comes to building an easy-to-use site.

But nothing beats the real thing. If you really want to know how your Website impacts its visitors, go straight to a visitor to find out. I don’t mean to ask for feedback on your site, though – we’ve already been over that. No, this is the final stage to testing; for a lack of a better term I tend to call it ‘live’ testing.

Go out and hire somebody – preferably somebody you don’t know, who’s interested in the subject your site focuses on. Pay them to sit down and spend a fixed amount of time looking over your Website. Arrange to be present, but other than giving them the primary url before the session begins, don’t interact with them at all, until after they have finished browsing through your site.

Sit behind them and a little to the side, so you can easily see what they do. Take notes on what they do at your Website, and how they do it. Note down what order they view the pages in, how long they tend to spend on which pages, what content is read, and what is just skimmed. If you sell any products, have them make a purchase. Take especial note of any actions that appear to leave them confused or frustrated – these are signs that your Website usability in that area needs immediate attention.

Once their visit is over, interview them, or even better, present them with a feedback form for them to complete – people tend to be a little more honest on paper or by email than they may be comfortable with when face-to-face. Ask that all questions be answered with as many specifics as possible, and be sure to leave them plenty of space to enter comments.

Here’ a list of simple questions I often ask:

What was your general overall impression when arriving at the site?
What did you think of the appearance of the site?
What did you think of the content?
Did you find it easy to find information you were interested in?
Were you able to easily access all the information you wanted?
What did you like about the Website?
What did you dislike about the Website?
What kind of improvements do you think the site needs?
Do you like the Website’s use of colour?
How do the colours used on the Website make you feel? (I can guarantee that you will be surprised at some of the answers to this question)
Do you think you will visit this Website again? Why or why not?

Once you have repeated this ‘trial-by-fire’ with a few different people, you will probably begin to see a pattern emerge. You may be surprised at some of what you are told, and might feel that some is irrelevant. It may be – but if everybody tends to bring up the same point, then it is wise to pay attention to what they are saying – maybe they’re noticing something you’ve missed.

My Usability Checklist

Here are the steps I used to evolve my site to one that’s usable and meets the needs of my audience.

1. Take care to use:

correct tag syntax,
image alt tags,
optimized images, and
colours that work well together and view similarly under different OSs.

2. Offer both text and graphic links, and always specify alternate as well as primary fonts.

3. Check that your Web pages display similarly at screen resolutions from small to large, and in different browsers. One easy way to do this is to see that tables are set to percentage widths rather than fixed-pixel widths.

4. Pay attention to your Website visitors:

Ask what they think of your offerings, and listen seriously to their suggestions.
Use surveys and feedback from email, web forms or message boards to learn who your visitors are, and what they are looking for when they visit your site.
Be sure to keep asking what improvements they would like to see!

5. Keep in touch with users through an email list once you’ve established a relationship with them. Make sure you:

keep them posted on seasonal or breaking news in your field
inform them of all new website developments and offerings
let them see that you are trying to offer what they’ve asked to find

6. Never stop testing, and never expect your site to be ‘finished’: by definition, a good Website is an ever-changing, growing, evolving entity.

7. Take advantage of the mutability of the Internet, using it to enhance your Website’s evolution in order to keep visitors happy and coming back for more.

Looking Ahead

As 2002 rolls on its way, I’m sure we see yet more amazing innovations come to light, as technology advances in leaps and bounds. Yet it is also true that the more things change, the more things stay the same. If there is one area in which that saying can claim to be paramount, it’s the field of human nature. Peoples’ ideas may change – but they themselves seldom do.

Learn to understand your Website visitors well enough, and you will learn to understand both what they want, and how you can best go about offering it to them in a manner they will enjoy. Keep them happy and not only will they continue to come back for more, they will start to bring their friends.

Above all, never stop testing, and never expect your site to be ‘finished’; by definition, a good Website is an ever-changing, growing, evolving entity. A good Webmaster learns to take advantage of the mutability of the Internet, using it to enhance her or his site’s evolution in order to keep visitors happy and coming back for more.