Creating Cool Web Sites with HTML, XHTML, and CSS- P8

Creating Cool Web Sites with HTML, XHTML, and CSS- P8: This book walks readers through the process of creating a basic Web site from scratch using HMTL, the basis for billions of Web pages, and then jazzing it up with advanced techniques from the author’s award-winning sites. This updated edition features new material that shows readers how to attract visitors to a site and keep them there, including new JavaScript examples and coverage of cascading style sheets and XHTML, technologies that make building successful Web sites even easier...
Nội dung trích xuất từ tài liệu:
Creating Cool Web Sites with HTML, XHTML, and CSS- P8 324 Creating Cool Web Sites with HTML, XHTML, and CSS A key underlying question to determine usability revolves around the target audience for your site and the purpose of your site. If you’re building a portal site to compete with Yahoo and MSN, you may want to include more information on the page than if you’re translating a three-page brochure into a humble Web site for a small-business client. If you’re building a Web site specifically to show off your coding skills, none of this note may apply. But read through this chapter anyway. The sanity you save may be your own! Amount of information presented The first guideline for usability is to always minimize the amount of information presented by showing only what’s necessary to the user. This rule explains why the AOL and MSN home pages are baffling when first visited, why it’s hard to figure out what’s going on at Yahoo!, and why Google, by contrast, is relaxing and easy to use. An example of a site with lots and lots of information that’s still thoughtfully organized to ensure that it’s not overloading the visitor is the U.S. Internal Revenue Service site. Figure 15-1 shows the current page. Figure 15-1: The Internal Revenue Service Web Site—clean, uncluttered, and easy to read.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 15: Thinking about Your Visitors and Your Site’s Usability 325 The site is clean, open, inviting, and has a small number of links off this page so that the user isn’t completely overwhelmed by the choices. Very nice! Compare this with the U.S. Social Security Administration Web site, as shown in Figure 15-2. Here you can see many more choices. The designer seems unable to differentiate between what I call the musts and the wants. The musts are those links that must be on the home page or, for that matter, on the specific page in question, whatever it is. The wants, on the other hand, are those links that would be helpful to have up-front, but are not critical. Remember, the guideline here is to minimize the amount of information presented. Less is more. Figure 15-2: The Social Security Administration Web Site—pretty overwhelming at first glance. To help achieve this minimization, keep these points in mind: • Use concise wording. • Use tables with column headings where appropriate. • Use familiar data formats. • Avoid unnecessary detail. • Use abbreviations appropriately.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 326 Creating Cool Web Sites with HTML, XHTML, and CSS To find out more about enhancing the usability of your Web site, I recommend an note 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 IR ...