Human Factors of WWW design

This is an article on the human factors of WWW page design for a company. It is focused on small companies, but much of the material is applicable to large companies, or possibly to individuals.

Checklist

The following is a checklist for some of the human factors of a Web site, as well as being an overview of this page:

Size of home page

The size of the home page is important and depends on several factors. What kind of connection will people have to your site (14.4k modems or internal Ethernet). How dedicated are they likely to be to accessing your Web site? How much do you want to encourage casual browsing?

Based on my usage, (14.4k modem, casual browsing mode), I would say that small companies should limit their home pages to 20-30K, and that large companies should limit their home pages to 40-50K.

Content of home page

The home page should provide several things: some actual useful content, an overview of the site (if there is more than 1 page), and navigation to most (if not all) of the site, or at least to the major sections of the site.

Some sites have a home page that is merely a menu--either a graphical set of links, or a text set of links. This is fine for users who have a serious interest in the site, but it is not as good for casual browsing.

If instead of just providing links, a home page provides some useful content (for example, current research projects), then there is more reason to go to the home page, rather than just bouncing through it on your way to your destination.

Also, if there is some content on the home page, then casual browsers have the opportunity of picking up more information about the company, even if they are going to a specific place. For example, if you have brief notes about some of your major applications on your home page, then a user who is looking for one product may notice and inquire about additional products. Also, users appreciate downloading 20K of material which includes useful content as well as links, versus downloading 20K of graphical buttons.

Navigation

Make it clear what is a navigation button and what isn't. This is especially true for headers--if something doesn't look clickable, then people won't use it.

Balance your site between depth and breadth. It shouldn't take too many navigations to get to some actual content. On the other hand, you don't want a home page that has direct links to 300 pages--that's too much to easily grasp.

Overview

An overview is important because it helps locate the user in the Web site. One major problem with hypertext/hyperdocuments is getting lost.

History

A Web site should provide history, so that a user can see where they came from, and how to get back easily. This lets them retrace their steps and helps keep the context in mind. There are various ways to do this. One example is the Yahoo index, in which the history information is specified as links at the top of the page: e.g. "Science:Computer Science:AI". One problem with this site is that they do not have alternate paths listed. (For example, if you came through the "Computers and Internet" topic and got to the above page, you would still see "Science:Computer Science:AI").

Consistency

Don't design your web page for a specific screen size. Some sites create their own "horizontal rules" which are designed for a specific screen size. Instead, just use the horizontal rule tag for this situations--it will automatically size to fit the screen.

Another potential problem area is using identical headers on different pages. It is a good idea to have some consistent header, but if a header reflects the name of a specific page, then it should only be used for that page. For example, a company logo would be approriate across all pages, but the name of a specific product should only appear in pages related to that product.

You should include appropriate links in text. For example, if you briefly talk about your products on your home page, then where you mention each product, it should be linked to an appropriate page. However, do not overuse links. Generally, a word should only be linked the first time it appears in a paragraph (unless your paragraphs tend to run 10-12 pages long).

If you have both graphical and text menus on the same page, make the terminology and order the same between them. Otherwise, you will confuse users and make them wonder if the buttons go to the same locations or not.

Put navigation controls in the same locations on different pages-- e.g. on the top, on the bottom.

Reuse

Many browsers cache images and pages on the local drive. Make use of this--don't create a separate set of graphical buttons for each page if the buttons go to the same locations. Also, don't make your 50K home page something that has to be reloaded if the user returns to it during the session.

Problems

I have run into the same problem now at two sites. I was looking for pages which I knew existed at University of Washington in one case, and Sun in another case. In both cases, I had trouble finding the pages which I was looking for, so I went to Yahoo, which is a category-based index to a large number of sites. Using Yahoo, I was able to very easily find the pages which I could not locate directly from the actual sites. The problems in both cases were due to the conceptual mapping from the site to what I was looking for. Both sites are mapped (or were when I was looking at them) directly onto the organizational structure, which is fine if you know where in the organization the information you want belongs. However, if you don't know, then it is not easy to make this mapping and the sites certainly didn't do anything to help. One way to help alleviate this problem is to provide an alternate interface, available from the home page, which has a category-based index. This won't help everyone, but it should make things easier for a large group of people.

Bibliography

This is a very incomplete bibliography--I hope that it will grow, given feedback by readers.

Jakob Nielsen has a page on the design of the internal web at Sun.

He also has a very nice site called alertbox, which is entirely devoted to the human factors of WWW design.

Apple has a human interface section which includes a WWW guide. When browsing their site, I was struck by the problems. They don't (or didn't when I visited them) have a navigation or hierarchical history available. This meant that I couldn't get back from the place I had bookmarked to another interesting location. Also, their style guide makes a good point that you should not design for any specific browser size--someone might be viewing your site on a PDA with a very small screen. However, Apple fell into the other problem. Their style guide occupied approximately half of my browser window. The other half was blank. Now, I do size my browser a bit large, but they shouldn't have sized their content for a small browser.

I have also found two style guides which discuss the human factors of WWW design:

Roger's HTML Style Guide This site was a little slow when I tried to access it--your mileage may vary.

Yale's C/AIM WWW Style Manual I saw two things I would have done differently from a brief look at the site itself--I would have put the name of the site in the largest font, then the name of the section in the next largest font, and the name of the current page in the smallest font. I had trouble figuring out the hierarchy when I looked at it because of its font usage. The other thing I would do is add the location information to the bottom of the page, with the other set of navigation buttons.

Elements of Programming Style is a short page listing some guidelines.