Appendix A. Designing for Usability
Although there is a certain amount of artistic freedom when creating a website, there are also well-established “best practices” among professional web designers. Have you ever visited a webpage that was hard to navigate, difficult to understand, or just plain ugly? A good web designer can look at these pages and offer suggestions for improvement.
In this guide, you’ll learn some techniques for making your website as usable as possible. By making your website easy and fun for your visitors to navigate, you increase the time people will spend at your site and the number of times they will return.
Note
Want a laugh or two along with your learning? Visit “Vincent Flanders’s Web Pages That Suck” at http://www.webpagesthatsuck.com. This site contains hundreds of examples of what not to do on your site!
Understanding Usability
Usability refers to the experience visitors have when they view your website. It includes these qualities, summarized from Usability.gov (a U.S. Government guide to web usability):
Ease of learning How quickly do people understand how the site navigation works? Can people who have never before seen the interface learn it well enough to find their way around without a steep learning curve?
Ease of use After people have figured out how to navigate the site, how easy is it for them to actually find the information they need? A highly usable site puts information at the visitors’ fingertips, with flexible and powerful searching and browsing tools.
Memorability How much will a typical repeat visitor remember about your site? A highly usable site sticks in visitors’ minds.
Error-handling How often do visitors make mistakes in navigating your site, and how easy is it for them to get back on track? A highly usable site provides helpful error messages when problems occur, complete with hyperlinks that help users do what they intended.
Subjective satisfaction How much do people enjoy visiting your site? A highly usable site is just fun to explore.
Tip
For more in-depth exploration of these usability issues, see http://www.usability.gov/basics.
Usability is extremely important in generating loyal, repeat visitors to your site. An advertising campaign can drive visitors to your site initially, but if the site is not easy to use, most of them will never return. According to website design expert Jakob Nielson:
Studies of user behavior on the Web find a low tolerance for difficult designs or slow sites. People don’t want to wait. And they don’t want to learn how to use a home page. There’s no such thing as a training class or a manual for a website. People have to be able to grasp the functioning of the site immediately after scanning the home page—for a few seconds at most.
Planning for Usability
Usability planning should begin before you create the first page of your website because your answers to key questions about purpose and audience will shape the overall organization and layout of your site.
First of all, why do you want a website? What do you hope to achieve with it? A website designed for selling products online will probably look very different from one that is mostly for sharing information. Clarifying your goals before you begin designing your site makes it easier to define and create the site you want. For example, the goal of the Margie’s Travel site (the website featured in the examples in this book) was to provide information about tours and destinations and to encourage people to sign up for the company’s guided tours.
Try to make your goals specific and tie them to your business or organization’s objectives. Margie’s Travel’s goals might have been, for example, to reduce phone calls from customers wanting general information about tours, to make people feel more confident about traveling in foreign countries, and to encourage customers to dream about the vacations they would like to take.
Next, what audience are you targeting? “Everyone” is a poor answer to that question. You can’t please everyone, and if you try, you’ll end up pleasing no one. A store that sells live plants, for example, might be specifically interested in people who live near one of its brick-and-mortar stores. With that audience in mind, the company might want to provide local maps showing their stores’ locations, directions from major highways, and printable coupons. Think about the characteristics of the people you are targeting and what they are looking for in a website. For example, a plant store’s customers might turn to the website to get information about a specific problem they are having; making troubleshooting information easy to find would attract customers and keep them interested in the site.
Sketching the Site Organization
The next step is to sketch out a chart showing how users will access content, starting with your home page (start page) at the top. Any pages that will be directly accessible from the home page will display at the first level and pages that are subordinate to those will display at lower levels.
Here are some tips for planning the site organization:
Decide what links will be in the navigation bar Arrange the links in order of importance from top to bottom (or left to right). The home page should always be the topmost or leftmost link on the navigation bar.
Decide what content you will deliver on each page Eliminate any pages that visitors won’t want or that don’t deliver information that supports your business or organization’s goal for the site.
Plan ways to reduce the number of clicks the average user needs to make One way to do this is to put a direct link on the home page to the most popular content.
Designing a Consistent Page Template
For ease of navigation, the entire site should have a consistent layout, with common elements such as the navigation bar and the page title in the same place on each page. The simplest way to accomplish this is to create a template page and then base all other pages upon it. Your template page can use tables, frames, or divisions for layout.
Here are some tips for the layout of your template page:
Place a masthead across the top of the page containing your organization’s logo and name.
Place the navigation bar at the right, left, or top of the page. Left and top bars are the most common, but many usability experts say that a navigation bar at the right is actually more intuitive for a visitor to use.
If you have a very information-rich site, consider having multiple navigation barsone at the top of the page to include the overall main categories and one at the left or right with a longer list of subcategories.
Make the navigation bar stand out somehow. It can be a different color, have a different background, or be surrounded by a box, for example.
Place a text-only navigation bar at the bottom of the page so people do not need to scroll back up to the top again to navigate to other pages.
If you decide to use frames, be very careful. It is very easy to create a frameset in which a frame is too small and cuts off the content placed within it. Ensure that each frame is adequately sized not only for the default content it starts with, but for every page that might appear in each frame throughout the user’s entire visit to your site.
When possible, make the page size flexible (for example, by leaving one table column or one vertical division to fill the remaining space in the window). If you are specifying a fixed width for the page content, make it no more than 800 pixels wide. That way, even people with low-resolution screens will be able to view it without scrolling.
Select colors that reflect the content and identity of the site. Reds and yellows build excitement; blues and greens are calming. Body text should be dark letters on a light-colored background.
Tailor color choices to your target audience. Researcher Natalia Khouw reports, for example, that men prefer blue and orange; women prefer yellow and red. Young people like bright primary colors; people middle-aged and older like subdued colors such as silver, gray-blue, and pale yellow.
Select a simple, readable font as the default, such as Arial (Helvetica, Sans Serif), at a size that’s adequate for your audience.
Designing the Content of Individual Pages
After creating the template that will form the structure of each page, start thinking about the unique content for the individual pages. Here are some tips for creating effective webpages:
Use short sentences (20 words or fewer) and short paragraphs (five sentences or fewer).
Ensure that there is some vertical space between each paragraph. By default the <p> tag leaves a good amount of space, but some people remove or lessen the vertical space by modifying the style.
Whenever possible, break up information into bulleted or numbered lists for easier skimming. (Isn’t it easier to find information in this bulleted list you’re now reading than if it were in plain paragraph form?)
Match the page’s length to its purpose. Pages that summarize or provide navigation should be short; pages that provide detailed information on a subject can be as long as needed.
Keep articles on one page. Do not split up the text of an article onto multiple pages just because a page seems long. Visitors who want to print the article will find it much easier to do so if it is all on one page, and they will appreciate not having to click a link to see the rest of the article.
Break up long articles by using many descriptive headings. If the article is longer than a few pages, include bookmark hyperlinks at the top of the page that point to the major headings.
If content goes more than one level deep on your site, use to help users find their way back to where they came from. Breadcrumbs are a trail of hyperlinks that enable the user to back up one or more levels in the structure, like this:
Home > Jazz > John Coltrane
Limit the size of the graphics files you use on a page so that the page doesn’t take a long time to download on a slow connection. The total file size of all the graphics on a page should ideally not exceed 30 KB. If you need to show larger, higher-resolution graphics, consider using thumbnails.
Look for ways of reducing unused space. On a page that has a great deal of empty space at the right, for example, consider adding a text box containing information. One way to do this is to use a division with absolute positioning.
Performing Usability Testing
Big businesses spend big money on usability testing for their products and websites, but you can test your small business or hobby site much more simply and economically.
Friends and relatives make good usability testers. Sit down next to someone who has never seen your website before, and ask him to start exploring and commenting on whatever he notices. Don’t explain anything—let him discover it. Pay attention to what catches his interest and what doesn’t. Does he view the pages in the order you expected? How much time does he spend on each page? Are there any pages that he doesn’t visit or can’t find? Run through this process with as many people as you can round up; the more information the better! Then make changes to your site based on what you learn, and try another round of testing.