"The 1990s computer screen has a resolution approximately 5% to 10% of a printed map," writes Edward Tufte in Envisioning Information. Tufte argues that a computer monitor resolution is so low that we must fill our pages with as much information density as possible. If we don t, visitors to our Web sites will have to click through a maze of pages to reach the content they want. The more pages our site has, the greater the chance we lose our audience. Therefore, push content (data) to the top of a Web site. Push content to the top of a Web page. Don t fill a page with navigation labels that are content free. Use "Fill out a mortgage application in 10 minutes" not "Mortgage Application." The more information we can build into our navigation, the more transparent our content becomes.
Links & Information: Put pivotal content at the top of the page
Though a visitor will scroll, put your pivotal content at the top of the page. You have mere seconds before he or she moves on, so why take chances? To keep visitors on your site, grab them with the big hooks first.
Look at Amazon.com. The first page is packed with short, catchy messages. Though the Amazon audiences are readers, its customers vary. People want fiction or non-fiction; books for children or gifts for grandma; Oprah Winfrey books or Bill Gates books. Visitors to Amazon are diverse: readers, authors, publishers, agents, investors, media, and surfers. To grab the many and keep them, Amazon puts the big carrots at the top: the search engine, best sellers, the gift center, the hot book of the week ("What We re Reading"), and the latest Oprah book.
Jeff Bezos, the founder and CEO of Amazon, has thought hard about his business. He and his staff push new technologies and techniques, never allowing the site to remain static for long. Recently, when Amazon added the sales rank for each of its 1,000,000 best sellers authors, publishers, and readers latched onto the data as a way to value a book in real-time. The top 100 books are updated hourly. The rest are changed on a weekly basis. The sales number is at the top of the page of the book it refers to. Interactive data makes Amazon s Web site more valuable to its customers, giving them incentives to return.
Links & Information: Edit, edit, edit
First drafts and prototypes are full of clutter. We articulate in 14 words what we can say in 7. Instead, focus on cutting unneeded words. Putting up an HTML page is so easy, Web sites can drag with the weight of too many pages and words. If we can cut content by 50%, we can simplify navigation, and our visitors will notice the difference.
If you don t have a bona fide editor nearby, read William Zinsser s book, "On Writing Well." Read the first 92 pages to find the tools to keep your words clean. Wordy words and garbage words keep the reader from finding what he wants. Editing is hard work and good editors are hard to find, which is why many sites are overburdened with verb age. But crisp, clear messages make our Web sites appealing and easier to use.
Links & Information: White space: sometimes it s good, sometimes it s not
Debates rage about white space. Previously, we ve advocated white space for information-based Web sites. In print, white space makes sense, working with the text and pictures to direct the eyes. But on a Web page, white space slows a user s access to information. The fewer words on the page, means more pages across the site. Jarod Spool observed that the more white space a page has, the less successful a user becomes in finding information.
White space is good if you are building a marketing Web site, a place where you want people to slow down and take their time. But, if you want your audience to get the information they want, pack your pages with content. Make every page download count. The more information value you add to a page the better your site will be.
Links & Information: Page size guidelines
Big servers and a speedy Internet make downloads fast, but small HTML pages help, too. Until bandwidth is hundreds of times faster, we can t afford graphic-heavy Web pages.
Keep your pages between 10 and 50K. To achieve fast pages, use few GIFs and JPEGs, and use HTML for navigation. Driven by the limitations of bandwidth, the new design ethic is minimalism.
The AMSCAT research Web site averages 17K per page. Though most pages have a photograph or two, the site has only two basic GIFs per page: The AMS logo (with the AMS global navigation bar) and the AMSCAT star. Everything else the navigation, cell background color, and headers is in HTML. A 17K page loads in 3-5 seconds on a 56K modem.
Page download times in seconds* |
Modem Speed | 10 K page | 20 K page | 30 K page | 50 K page |
ADSL | 1 seconds | 2-3 seconds | 3-4 seconds | 4-6 seconds |
128 K | 2 seconds | 3-4 seconds | 4-6 seconds | 7-9 seconds |
56 K | 2-3 seconds | 4-6 seconds | 6-9 seconds | 10-15 seconds |
28.8 K | 3-5 seconds | 6-10 seconds | 9-15 seconds | 15-25 seconds |
14.4 K | 6-10 seconds | 12-20 seconds | 18-30 seconds | 30-50 seconds |
* Telephone line conditions vary based on the quality of copper phone wires.
56K modems are less than twice as fast as 28.8K modems due to telephone line limitations.
Links & Information: Columns keep text lines short
Newspapers use columns for readability, and Web sites should, too. Long lines are hard to follow, and can cause eye fatigue. Text flows better when it s broken into shorter lengths. Your words will be more energetic. Short lines combined with short words create energy.
Multiple columns allow more content to start at or near the top of a page. Most of us have more than one agenda on a Web page. We want to show our identity (logo), we want to use space for navigation, and we have messages for our visitors. If you can put numerous messages on the first viewable page (590 x 325 pixels), a viewer will click or scroll for more. Take a look at the New York Times Web site (NYTimes.com). The Times separates news stories clearly, yet its columns give the reader many stories to choose from.
Links & Information: Cell coloring "chunks" information
The browsers, Navigator 3 and IE 3 and above, can read table cell background colors. Cell coloring is a powerful tool for "chunking" information. Cell color separates information: the reader scans, seeing immediately each information area. CNET s News.com site uses light yellow cell coloring to highlight news headlines (right column). When a company is mentioned in a News.com article, that company s stock quote is enclosed in a light gray box (embedded in the main column of text).
The AMSCAT research Web site uses cell coloring to separate navigation from the main body of text. In the left column the search functions are isolated from the section navigation by cell coloring (See appendix 1).
There is a danger to cell coloring: misuse of color can make text unreadable and the page unusable. We recommend 4 colors for cell coloring: light blue, light green, light yellow, and light gray. Our knowledge of color is based on biology. Blue and green are the colors of nature; we perceive blue and green as peripheral colors, soothing to the eyes. Green is a calming color and is often used in the waiting rooms of physicians and dentists. Yellow is bright but low density, contrasting well with black text. Gray is a neutral color, that as decorators know, goes with everything. Use light versions of blue, green, yellow, and gray to make text exceptionally readable (see the color table below).
Color | RGB values | HTML color hex | Lab Color | HSB values |
Light yellow | 255, 255, 204 | #FFFFCC | 99, -5, 19 | 60, 20, 100 |
Light green | 204, 255, 204 | #CCFFCC | 96, -19, 15 | 120, 20, 100 |
Light blue | 204, 255, 255 | #CCFFFF | 97, -13, -5 | 180, 20, 100 |
Light gray | 204, 204, 204 | #CCCCCC | 85, 0, 0 | 0, 0, 80 |
Links & Information: Good use of color speeds navigation
Good color design makes an interface a delight to use. Overuse or misuse of color can slow or frustrate a user s attempt to find information. The best Web sites use color sparingly. Use color for photographs and logos, in cell backgrounds to separate information (see above), and occasionally for page layout elements and contextual icons.
Amazon.com uses a simple green and orange color scheme for cell coloring and navigation bars. When needed, small icons and photographs are added to augment the information. Blue hyper links are the only other color areas within the interface.
Links & Information: Content density is good
Bandwidth is scarce and screen real estate is expensive. Work hard to fill every inch of the page. Since visitors don t mind scrolling, a home page will work best if it can link to every page on a site (or one page away from every page on a site). A user benefits because he is only one click away from what he wants whether its reaching his on-line bill or finding the stock quote of his favorite company.
But, a dense page is hard to control. Columns can cascade into each other, and a page can dissolve into clutter. We recommend using good design techniques to keep the information readable and usable. Use graphic design techniques of alignment, balance, and spacing. Aligning items keeps the page organized. Balance is created by using text and pictures together to create interest. Spacing includes the gap between words, between lines of words and around the edges of paragraphs and pictures. To apply these principles well, use an interface designer to build a page that s dense, but appealing.
Links & Information: Choose scrolling over more Web pages
One mantra says that Web pages should be limited to what s viewable, similar to the TV model. But, TV is a fast, fluid video medium, where there are no delays. People watch TV for entertainment, not to access information. The Web is more like a National Geographic map. The reader scans the map and side paragraphs for tidbits of information. If one part of the map does not have it, she scans until she finds what she wants. Web sites are the same: to reduce frustration put more on a page and reduce the number of pages in the site: the fewer the pages, the easier the navigation becomes. A user will scan and click, following the scent of information through to its final destination.
CNN s home page is a superb example of offering hundreds of access points on a page. There are content links throughout the page. A reader is left with the impression that she can reach any topic on the site in one click.
Compare CNN s home page with MSNBC (see appendix 2). The MSNBC home page is attractive, but there are less than 30 click-able items on the page. Only half of the links are content links. It takes many more clicks for a reader to reach the subject she wants. It s not that MSNBC s site is a poor design. But the layout of the information would be more appropriate for a marketing brochure, where elegance is an advantage. MSNBC claims to be a news information site, yet there are few hooks to grab the reader and pull her in.
Links & Information: Content links tell a story
First generation Web sites had category links that led to other category links. When we built Web sites in 1995, we rarely signaled to the user where he was going. Our visitors wandered, had to back track, and more often than not didn't find what they came for.
Today, we give people links that spell out what the visitor will see when he clicks. On the AMSCAT Research Web site, wherever we have links we include a second line of information, an extra piece to add to the link that explains the link. Content links limit the number of visitors going the wrong way.
When do we use content links or category links? If a category is obvious, with no possible hint of confusion, use a category link. Otherwise, use content links to direct your visitor to what he wants. Build links that spell out what he will see when he clicks.
Links & Information: Use 7-12 words in a content link
Jarod Spool wrote "Web Site Usability" based on his research watching users find information. He studied how links were helpful and gathered data observing how successful a user was in finding a pre-determined piece of information. Spool discovered that 7-12 words in a content link is the ideal for helping users be successful in hunting information. Links of 7-12 words are long enough to explain where users will go when they click, but short enough to be simple and clear.
In the AMSCAT Research Web site (see above) we use 2-4 word titles with 3-7 word sub-titles. By following Spool s recommendation, it is easier to scan the second level hierarchy for the right piece of information.
Links & Information: Use redundant links
Every organization creates its own mental boxes. At AMS we have our own lingo and terms for types of information. Since people come to information in many ways, it would be inflexible to phrase information merely one way. There are dozens of ways to say the same thing. For example, think of all the words and acronyms for the process of improving business performance: business process improvement, BPR, Achieving Breakthrough Performance (ABP), Customer Value Management (CVM), Total Quality Management (TQM), First Things First (Stephen Covey), AMS Best Practices. These are just some of the terms to describe improving our business success. By thinking of all the ways to describe information, we can build content links that approach a subject by different means. If we offer 2 or 3 variations, more users will find what they want. All of us relate to what we know. By not assuming what people know, we can expand our information to meet the needs of people who come from a different perspective. Our audience will appreciate our effort to speak to them where they are.
Conclusion
Navigation is hard, navigation is easy
Navigation is hard: we have too much information, and too little time. But if we do clear thinking at the start, if we edit our material, if we use more scrolling and have fewer pages, if we choose content links over category links, if we think of more than one way to label our information our guests will return. Making a fast, usable Web site brings people and goals together. A fast, usable site is valuable. A site that is useful, and that gets the job done is a good site. We can be proud of that.
If you have any questions or comments please call me on 0720390184 or e-mail me on webmaster@webcraft.ws.
Click here to return to the Top.
