326
Creating Cool Web Sites with HTML, XHTML, and CSS
note
To find out more about enhancing the usability of your Web site, I recommend an excellent book on human-computer interaction: A Guide to Usability, edited by Jenny Preece (Addison-Wesley).
Organize information on the page Another common mistake made on Web sites is the lack of any coherent organization. By organizing links and material, you significantly help the user find what he seeks. Although the Social Security page in Figure 15-2 has too much information, it is nonetheless a fine example of how grouping information can help make a Web page more usable. Notice the four key areas on the site entitled: Retirement and Medicare, Disability and SSI, Widows, widowers and other survivors, and Get help with your situation. What I also really like about this page is that everything is written in an active manner; it’s engaging, and it refers to me, the visitor. It doesn’t say “get help with a life situation,” it says “get help with your situation.” How can you ensure that your information is grouped appropriately? Here are some ideas: • Use color coding (I get back to color usage shortly). • Highlight elements using foreground or background colors. • Add graphical borders or other dividers to visually cluster elements. • Use different size text and different typefaces. The last idea is very important for good Web page design, in my opinion. I’m always surprised how infrequently sites use different size type effectively. Consider the IRS site back in Figure 15-1 for a moment. Notice how the word contents, is large and how the headlines are larger than the text underneath. Also notice the use of a graphical divider to organize information: the horizontal rule above and below the featured article titled, Undeliverable Refunds Looking for Taxpayers. By contrast, the Social Security site, by over loading its page with too much information, fails to take advantage of type sizes and ends up with links lost in a sea of words, almost all in blue.
note
For reference purposes, the IRS Web page has 31 links on it, whereas the SSA Web page has 79 links.
Standardize the screen layout Screen layout can really make or break a site design, whether it’s complex or simple. The idea is that if you teach people to look in a certain place on your page for a specific type of information, make sure that it’s always in that place on all pages on the site. Consider Figure 15-3, the Firstgov.gov home page.