STC Usability SIG Newsletter
Usability Interface

Designing High Fidelity Home Pages

By Steven Streight

A high fidelity home page is one that simply and clearly communicates an accurate, complete, and favorable impression of your organization and its products. An effective home page will also display your intimate understanding of, and desire to fully accommodate, the actual needs and interests of users.

The goal of a high fidelity home page is structural clarity accompanied by high usability. "High fidelity" is a term borrowed from the old vinyl phonograph recording industry. The term refers to the extremely faithful reproduction of sound from studio musicians to vinyl record and ultimately to the listener’s ears, with a minimum of distortion or undesirable noise.

This concept transfers nicely to the communication goals of Web sites. Here are seven principles for constructing a high fidelity home page, along with Web sites that do a fairly good job of exemplifying these points.

1. Clarify Identity

Immediately clarify who your organization is and what you seek to accomplish for users with your Web site.

The following sites are good examples of this principle:

• The London Aquarium Web site (www.londonaquarium. co.uk) greets you with a nice logo in the upper left corner and five vertical rectangular photos of unusual sea creatures. The middle photo is animated, with a shark gliding through the water. Soon after arriving at this site, the visitor hears eerie underwater sounds. It is a tidy, simple home page that does a good job of identifying itself and what can be done at the site.
• The Amnesty International Web Site, www.amnesty.org conveys its humanitarian purpose with striking photos, lists of relevant articles, and human rights-oriented news headlines.
• Step into whimsy at the Chessington theme park site (www.chessington.co.uk) that uses an entrance page to ask if you’re a parent or a child. Select "parent" in the open storybook and an adult-oriented home page displays. In keeping with the site’s fantasy identity, a playful, animated dragon gently directs attention to "common questions."

2. Emphasize Credibility

Immediately convey an appropriate image of prestige and authority—through color and design. Certain color combinations, such as orange type on lime background can be disturbing, hard to read, and unprofessional for a conservative business or e-commerce site. Visual impressions should vary depending on the site’s purpose and audience.

Web site credibility is enhanced by upfront contact information, biographical or organizational information, emotional restraint, rational (not exaggerated) statements and claims, authoritative tone of voice, absence of typos, correct language usage, avoid questionable or unseemly ads, and linked references to reputable outside sources. Never "pre-select" options (like pre-checked boxes on a form), disable a browser’s Back button, or do anything that diminishes the user’s control of navigation and function choices.

Be sure to check all your online forms and Web functionalities. Nothing kills credibility and user satisfaction faster than a comment that won’t submit or a properly filled in form that keeps getting rejected.

The following sites are good examples of this principle:

• Multiple aspects of the Consumer Web Watch Web site (www.consumerwebwatch.org) lend credibility to it. To the far left at the top, their logo displays today’s date, mission statement, goal of site, connection with reputable Consumer Reports and Consumers Union, and an acknowledgement of grants from philanthropic organizations.
• The 7th earl of Bradford inspires trustworthiness at this site (www.restaurant-guide.com) when he mentions that he’s a former President of the Master Chefs of Great Britain. Visitors are told that all British dining establishments in this guide are vouched for by the earl’s own experience, by other major dining guides, or by members of the British Guild of Food Writers.

3. Explain Intention

Immediately make it clear the type of Web site it is, for example e-commerce, entertainment, personal, education, government, political, or spiritual. Create specific expectations, and then fulfill them.

The following sites are good examples of this principle:

• You can’t miss the reason for the Weather.com Web site’s existence (www.weather.com). The Weather Channel logo in upper left corner, a Local Weather search box, weather-related heads and subheads, a weather map, and the "What’s On the Weather Channel" image box display a focus on meteorology (atmospheric conditions).
• The consultant at the BJ Fogg PhD Web site (www.bjfogg.com) conveys his purpose and expertise in multiple ways. For example, he has his name and credentials at the top; tabs to "Silicon Valley" and "Stanford University"; a photo of his latest book, Persuasive Technology; a link to his article "Seven Steps to Innovation"; a last updated date; and complete contact information at the page bottom. This brief home page does the job of a giant.

4. Simplify Functionality

Immediately clarify what a user can do at your Web site, how to decide what to do, and how it can best be done.

The following sites are good examples of this principle:

• Home page functionality of the Mercedes-Benz Web site (www.mercedes-benz.com) is clear and concise at this site. Its clean, uncluttered appearance invites and almost seduces users to enter and interact. Behold the awesome power of simplicity!
• The Usability Net Web site (www.usabilitynet.org) has an excellent table of contents and task options-type home page. By table of contents, I refer to a book-style listing of "chapters" or information items. Task options provide functions that enable a user to perform actions such as register, email the site owner, download reports, or view a Flash presentation. The layout is so straightforward and plain, one almost feels compelled to click on a clearly labeled button.
• The Library of Congress Web site (www.loc.gov) is a delight for web-weary eyes to behold. It uses categorical sub-heads to great advantage. For example, the "Find it..." sub-head provide a list of actions one may take. The "Especially for..." sub-head provides site locations, based on user type, to which one may link. The "Information & Services" sub-head lists the most popular types of information and assistance requests.

5. Enable Independent Navigation (Search Site)

Many users know exactly what they’re looking for and want to search the contents of a Web site on their own. Their expectation is to type key words or phrases and let a site search engine display a list of results.

The web convention for searching is to include a text box at least 30-40 characters wide. White background with black type is best for the text box but not mandatory. Usually the text box has a button labeled "Search" or "Go" to the right of it. Some search functions have no such device and require the user to know that they must press Enter. This is not optimal usability. Provide a button for the user to activate, or at least provide text that instructs users to press Enter to start the search.

In many cases, "Search the Web" or "Advanced Search" is not necessary on a Web site. If users wanted to search the web, they wouldn’t be at your site; they’d be using a search engine Web site.

The following sites are good examples of this principle:

• The Net London Web site (www.netlondon.com) contains a lot of information and provides a site search box right under the logo in the upper left corner. The prominent position of this function deserves praise because it speeds data retrieval for users.
• The National Geographic Web site (www.nationalgeographic.com) is information-rich and complex. Major link categories are Today’s Features, Magazines, TV and Film, Store, Magazine Subscription Offers, and Site Index. To further simplify and expedite the finding of information for users, they wisely put their site search box in the upper right corner, at the top, on the level with their logo. This prominent positioning of the search function enables users to quickly see that they can navigate the site with their own keywords and phrases. With so many possible topics and areas of interest represented by their user base, this policy is to be commended.
• Jacques Derrida Home Page (www.hydra.umn.edu/derrida/) is for fans of the (recently deceased) founder of deconstruction philosophy, Jacques Derrida. The site has two types of search engines, and a site map button.

6. Reveal Registration Benefits

Clarify if the user should consider registering at the site in some way by subscribing, joining a community, becoming a member, logging in, or filling out a form. Site Registration could be required in order to verify age or identity (identity verification is often used to block spambots or malicious users), or to activate special site functionalities. For example, many sites allow all users to view articles, but allow only registered users to post comments, participate in discussion forums, receive newsletters, submit questions to experts, or access site archives.

The following sites are good examples of this principle:

• The Chicago Tribute Web site (www.chicagotribune.com) does this well in the section "Why Are We Asking You to Register?" (link path: Registration > Registration help center > Why register? > Why are we asking you to register?). The Chicago Tribune site explains how they’ll use demographic data. If parties other than users will benefit, frankness boosts a site’s credibility.
• At the Artforum Web site (www.arforum.com), when unregistered users attempt to view an archived article, they are requested to register. Users are told that registration is free, the benefits of registering, and that by registering they are subscribing to the Artforum newsletter. Once a user registers, a message displays "you can now go back to the page that forced you to register." That sounds funny, the "forced you" part. Perhaps they intend it to be humorous. But Artforum does a good job of explaining site registration.

7. Convey Singularity

Make sure the home page looks substantially different from all other pages and from other Web sites. Make it obvious that it’s the main orientation page. Many users use the home page as a site map, while ignoring the actual site map provided. Give your home page special features, functions, information, or effects that cause users to bookmark this page.

The following sites are good examples of this principle:

• The Massachusetts Institute of Technology Web site (www.mit.edu) has a home page that is changed daily by student and public designers. It generally consists of about 50% artistic MIT logo and 50% table of contents navigation, causing the home page to clearly stand out as the primary navigation area and entry point of the site.
• Go to www.scouting.org and, you immediately know it’s the Boy Scouts of America, National Council. The home page has the BSA logo in the upper left corner. The column on the left side shows major site navigation buttons. There are clear links to site sections for members, nonmembers, and other BSA Web sites. It’s easy to distinguish this home page from the rest of the site pages.

Summary

These principles should be enough to get you started developing high fidelity home pages of your own. Just remember, if you believe in your Web site, be sure to deliver it to users with clarity, simplicity, and easy usability. Adherence to these examples will help your Web site achieve its online goals far more effectively.

If you would like to see more examples of high fidelity home pages, I will send my document, More High Fidelity Home Page Examples, to anyone who emails me a request for it. If you are interested in conducting Web usability analysis on your sites, you may also request my essential but hard-to-find Web User Observation Test preparation and evaluation forms. All this material will be happily provided free—with no obligation.