July/August 1997

Content
. . . What makes a good Web site?
. . . Designing for the Web

What makes a good Web site?

Ask a dozen people and you will get a dozen answers to this question, but I believe it can be summed up in one sentence:

A good Web site puts the needs of its users first.

A pretty simple concept, to be sure — but far too many Web sites ignore it. Examples abound of Web sites whose design is based on marketing hype, gratuitous use of bleeding edge technology, slavish adherence to a corporate (or academic) organization chart, graphics standards developed for print, personal ego, and a host of other priorities that have nothing to do with the end-user.

How do you, as a budding webmaster, go about designing a site that puts your users' needs first? Here are a few tips from the experts.

Know your audience

Good Web sites know their users. You can't put users' needs first if you don't know who your users are. You need to know more than the usual socioeconomic factors (age, gender, economic status, occupation, etc.). You need to know their technology as well. How are they connected to the Internet? What browser, and what version of that browser, are they most likely using? What about monitor size, resolution and color support?

A professor designing Web pages for students who access them through a high-speed connection in a campus lab with known equipment has far fewer restrictions than does a county extension office designing pages for the public using unknown browsers and monitors and 28.8 or slower modems. (See the first article "Web user surveys yield interesting results")

Users' basic questions

Good Web sites include the organization's identity on all pages. Surfers have four basic questions when they connect to a Web page: "Where am I? Where do I want to go? Am I on the right path? Am I there yet?" (Bachiochi et al.) We have all seen pages that don't answer even the most important question ("Where am I?"), let alone the other three. Most users rely on Web search engines to find things (Holman), and come into a page directly off a list of search results. They may have no clue where they are unless your page explicitly tells them!

Good Web sites use a consistent layout and locate navigation aids at the top of their pages. A consistent layout builds site identity in the mind of the user. It also helps them visualize your site's structure. Users prefer navigation aids (buttons or text links) at the top of pages (Bachiochi).

If you have a Web site, do your users a favor. Look at each and every page as an outsider and ask yourself the four basic questions listed above.

Content remains king

Good Web sites answer users' questions and problems. Most Web users connect to the Web to find information, not to look at twirling logos. Content should be accurate, timely, concise and easy to find.

Good Web sites are dated and signed. There's a lot of wrong, misleading, incomplete, outdated and undated material on the Web. Reassure your users that the information you have is current by dating it. Reassure them that you stand behind it by putting your and your organization's names to it. Promptly remove outdated information.

Good Web sites use proper spelling and grammar. The Web is rife with poor writing and worse spelling. Bad spelling and grammar detract from users' perception of the validity of your pages and lead them to question your commitment to accuracy and quality. If writing is not your forte, get someone who is good at it to edit or proof your pages for you.

Good Web sites include a contact. Encourage your users to contact you for more information or with comments and suggestions about your site. Include a contact name or title ("webmaster" for example), and at a minimum an e-mail address, and preferably the complete address, phone and fax. Then respond promptly to user inquiries.

Page design

Designing for the Web is very different than designing for print. Unlike the printed page, users control much of a Web page's appearance. They can turn graphics off. They can reduce or enlarge the font size. They can reduce the viewing area. You don't know what size or resolution monitor they have. You don't know what browser they're using, and thus what HTML features they can see. Screen display is poorer than print publications, so high resolution graphics are wasted. It is harder to read text on screen and users are more prone to scan and skip about. You need to consider all of these factors, and more, in Web design.

Good Web sites load quickly. Users are impatient beasts. Most users are willing to wait 10 to 15 seconds for a page to download, but not much more unless it's a page they really want. (When was the last time it took you 10 or 15 seconds to turn a printed page over?) Slow download time is the number one complaint of users.

Good Web sites present their meat in the first one or two screens. Users don't like to scroll. As few as 10 percent of users scroll past what they see on the initial screen (Nielsen, May 1996). Make the top part of your page count. Many users will decide whether to stay or to leave based on what they see when the page first loads.

Good Web sites use special effects only if they add value. This includes large image maps, busy background images, scrolling marquees or text, frames, changing link colors, and animation. Remember your target audience: what adds value for 12-year-olds is different than what adds value for their parents or grandparents. Animation is especially distracting, and frames make navigation cumbersome. Just because you can do it doesn't mean you should.

Working links

On a good Web site, all the links work. Sure, there are days when a remote site might be down or busy, preventing a link from working at any particular moment. But all the links within your site should work all the time. Test links to remote sites regularly to make sure they are still valid, and if they're not, fix them promptly.

Build loyalty

A good Web site is one that users come back to again and again. Bookmarks are used by 83 percent of surfers to revisit favorite sites, according to one survey (Holman). Another reported that 57 percent of users visit the same group of sites regularly. Over half visit a new site based on friends' recommendations.

References

• Bachiochi, D., et al. "Usability Studies and Designing Navigational Aids for the World Wide Web." Sixth International World Wide Web Conference. April 1997.
• Clark, Paul. "Systems Magic HTML Style Guide," April 1997.
• December, John, and Mark Ginsberg. HTML 3.2 and CGI Unleashed. Sams.net. 1996.
• Holman, Karen. "Web surveys yield interesting results." OCTnews. Colorado State University Cooperative Extension. May/June 1997.
• Lemay, Laura. Teach Yourself Web Publishing with HTML in a Week. Sams.net. 1995.
• Levine, Rick. "Guide to Web Style," Sun Microsystems. December 1995.
• Lynch, Patrick. "Yale C/AIM Style Guide." Yale University Center for Advanced Instructional Media. January 1997.
• Nielsen, Jakob. "Top Ten Mistakes in Web Design." Alertbox. May 1996.
• Nielsen, Jakob. "Why Frames Suck (Most of the Time)." Alertbox. December 1996.
• Sano, Darrell. Designing large-Scale Web Sites. John Wiley & Sons, Inc. 1996.
• "Ten Web Elements We Love to Hate." PC World. November 1996, p. 112.

~ Karen Holman, OCTnews, June 1997.
Cooperative Extension, Colorado State University.

Designing for the Web

Before you begin creating your Web pages, spend time planning, organizing, and creating a story board of your site. Use yellow sticky notes on a wall to organize your information in a hierarchical manner. By spending the time in the planning stages, problems such as lack of structure, lack of navigational cues, and misplaced or misguided design elements can be worked out before actually putting the pages together. Also, create a plan to make your site efficient and easy to update.

Page Layout

In the beginning stages of designing your site, establish a simple, consistent and predictable page layout plan. Decide on the format of text and graphics you will be using, where the menu bar will go, what icons will link where, what the text for the ALT tags will say, and so on. Then stick to it for all of your pages! This gives your site the consistency and predictability that helps your viewer find information quickly and easily. It will also make it much easier to add new pages and information since the underlying layout and design is already established.

Emphasize the most important information by keeping it in the top four inches of the page as this may be all that is visible on a typical 14" monitor. Make sure the graphics in these four inches aren't so large that they force the title and introductory text down on the page out of sight.

Text

Text is the most important and crucial form of communication on the Web. Readability of the text is the most important function of a Web page. While you cannot control the font, you can make sure the text is large enough, contrasts with background, and that the spacing enhances the layout and clarity. You don't want people to have to work too hard to read your information or they won't bother.

Make sure your information is quick and easy to locate by providing an organization to your pages that gives your viewers regular, repeating patterns of design that are easy to follow. Contrast between the blocks of text, the background, and the white space is the basis of good typography. Don't have one big block of text that will look gray to your viewers. Break up your page so there is enough contrast and division between topics and paragraphs and the background. Paragraph length should be shorter than for paper.

Use upper and lower case lettering. All upper case is more difficult for people to read. And don't make everything bold. Don't center or right justify text either. This requires more effort and time for the viewer to read your page as they will have to search for the next line.

Web pages, since they are viewed on a monitor, are always shown in landscape view rather than portrait. This can result in columns being too wide to easily read. Columns with 60 characters or less per line are easier to read than longer lines.

Text will flow and wrap at whatever width the viewer happens to have the browser window sized to. For columns on the Web, make sure the viewer doesn't have to scroll down to finish the first column and then scroll back up to read the second column.

The length of your document will be determined by what information you want to disseminate. To make it easier to obtain the information, keep the important facts up near the top of the first paragraph. Keep related information on the same Web page. Use white space and horizontal lines to separate major topics. Don't subdivide an idea merely to create smaller pages or sections and don't combine smaller unrelated subjects to create a larger document.

If you expect the viewer to read the information on-line, include no more than one to two screens of information which have logical navigational links at both the beginning and end of the pages. Paragraphs should be shorter than what is written for print. The width of the text column should be kept to what is comfortable to scan with the eyes without moving the head or straining the eyes. Shorten the length of lines of text to about half the normal width of the Web page to help in the reading of your Web pages.

Assume your viewers will print anything longer than a half a page rather than read it on-line. Include a link to a separate file that contains a full-length text version of your information combined into one page. The viewer can then print all the information at one time.

Navigation and Links

Don't count on the browser's back button to take your viewer back to a previous page. Many times it takes the viewer out of your site instead. And don't put too many links within a paragraph. This will take your viewer completely away from your page.

The navigational design of your site must be consistent throughout your pages. If viewers click on one icon on a page, it should take them to the same place if they click on the same icon on another page. Icons and navigational text should always be placed in the same place on every page. And don't link to under construction pages until there is something there for your viewer to get.

Links should be placed within the context of a sentence, or be written as stand-alone descriptive phrases. Write about your subject as if there were no links in the text. Try not to construct a sentence around a link phrase such as "click here for more information".

Graphics

When incorporating graphics into your Web site, know the difference between GIF, interlaced GIF, transparent GIF, and JPEG file formats and when to use each. The goal with Web graphics is to have the smallest file size in the appropriate format so the viewer gets the fastest delivery of your page with the best possible image resolution.

Since computer screens are usually smaller than most printed materials, don't spread the horizontal width of your page graphics beyond what viewers with 14 inch monitors can fit on their display screens. Web page graphics shouldn't be more than 535 pixels wide nor more than 320 pixels high.

Make sure all of the graphics are yours and on the same server as your pages. Using graphics referenced from other sites can cause a delay in loading your page. If an image isn't your own original creation or photograph, don't use it on your page without written permission from the creator. This is in violation of copyright.

Backgrounds

Background colors, images and patterns can help the readability and legibility of your pages or they can help you generate some of the ugliest pages on the Web. Type legibility on the computer screen is already compromised by the low resolution of the computer screen. Black text on a white background is considered the best overall for type contrast and legibility while black backgrounds with white text are a lot less legible.

To increase the legibility of your pages, to complement the foreground art, or to signify a change in context from one part of your site to another, change the background colors. Light grays or subtle pastel shades of color typically found in nature make good choices for background or minor elements as they don't interfere with the text. Avoid bold, highly saturated primary colors except in areas of maximum emphasis.

You can also use small GIF or JPEG graphics for a tiled background pattern. Be careful though as this can make your page much larger thus taking longer to download. These backgrounds can also make the page harder to read unless they are carefully designed.

Always test your background on several commonly-used platforms and monitors to be sure the text is easy to read over the background. If any words are unreadable, it can affect your site's image and your viewer may not stay or come back to your page.

Photographs and Illustrations

Use photographs and illustrations in your site in moderation and only if they enhance and are relevant to your message. Unnecessary images have the chance of confusing your message. Using large-sized images for visual appeal only will cause problems in downloading your page.

And make sure the size of any images is as small as you can make it and still have enough resolution to see it clearly. If you use photographs and illustrations in your site, crop them to cut out unnecessary information. This helps to reduce the size of the image file. Resize the images in your graphics program before you bring them into a Web page to avoid problems with them in the various browsers.

It is a good idea to use thumbnails of images on the main Web pages and give the option of a link to a larger full-size version of the photograph or illustration for those able and wanting to see the larger image. Warn the viewer that the link goes to a big graphic. Place a text description next to the picture to explain what it is all about.

Icons, Buttons, Bullets and other Graphics

Keep all icons, buttons and bullets as simple as possible. Use familiar icons so people know what to do with them. But when you use new icons, describe their function and meaning. Don't change the meaning and function of new icons anywhere in your pages or you will confuse and annoy your viewers. Most people won't be spending time to learn the meaning of a lot of different new graphics. So keep them simple. Repeated usage on fewer numbers of graphics helps people to become familiar with what they mean and what to do with them.

Always supply alternate text for graphic navigational buttons for viewers who don't download the graphics.

Colors

Colors will look different on the same Web page when viewed on different browsers, platforms and monitors. Always try to look at your site on different computers, monitors and operating systems to make sure the color comes across as you think it should.

Image maps

Make these areas look like real buttons so people are more likely to click there. Explain any ambiguities and directions for your image map and describe what the viewer must do to follow the link. And always provide text links somewhere else on the page.

Finally...

Finally, test your site on other machines before you announce it to the world. Quick and small changes to your layout could make your site more legible and pleasing on many other browsers. How does your site look with no images? How does your site look on other platforms? Is text wrapping and aligning like you want it to so it is easy to read? Do all the links work? Do viewers have to change the browser window to read each page? Are links and icons consistent? Is the site easy to update?

If you like how your page looks, navigation is easy, and text is completely legible and readable, then use it.

~ Lana K. Johnson

CIT Information is published by Communications and Information Technology - Computing section, Institute of Agriculture and Natural Resources, University of Nebraska-Lincoln. Newsletter articles may be copied and distributed for nonprofit, educational purposes only and the source must be acknowledged. Direct all correspondence to the editor, Pamela K. Peters (E-mail: pkpeters@unlnotes.unl.edu; Phone: 402/472-5630; FAX: 402/472-5639).

The University of Nebraska-Lincoln is an affirmative action - equal opportunity employer.