While many of these guidelines can apply to web design in general, they are especially critical to follow when designing your homepage, because the stakes are so high. Your homepage is often your first — and possibly your last — chance to attract and retain each customer, rather like the front page of a newspaper. One of the biggest values of a newspaper's front page is the priority given to top news items. All homepages would benefit from being treated like a front page of a major newspaper, with editors who determine the high-priority content and ensure continuity and style consistency.
Even small changes to homepages can have drastic effects. Consider the homepage for The New York Times. If you kept all design and writing exactly the same on this site but decided to show only local New York content on the homepage and link to all national and international news, it would inexorably alter the entire site. On closer examination, this change doesn't seem small at all.
While we encourage you to use these guidelines as a checklist when designing your homepage, recognize that they are written in an abbreviated manner here. You'll need to look at the individual site examples to see these guidelines used properly or, more often, overlooked. This is an extensively illustrated book, and it is only in the context of a visual example that you can fully appreciate the negative impact of ignoring these guidelines.
All said, these are just guidelines, not axioms. For all sites, there are surely exceptions. However, we've developed these guidelines from our combined 14 years of experience, running user tests on homepages and observing what makes them pass or fail user scrutiny. Although you can greatly improve the usability of your homepage by following these guidelines, you also need to involve your own users in the process through methods such as field studies and usability testing and incorporate iterative feedback into your development cycle. If you make a decision not to follow a guideline, do so based on customer information in the context of your homepage.
What's Not in These Guidelines
In an effort to limit the focus specifically to homepage guidelines, there are several important issues we do not address. Most of these topics deserve a level of detail that we feel is best left to separate books and reports, many of which exist already and are listed here.
Determining Homepage Content
One of the most important design decisions for any homepage is determining what content merits homepage coverage. We don't address this issue in these guidelines because it depends on each site's users and tasks, as well as the company's business goals. Unfortunately, many companies' corporate politics drive homepage design more than users' needs do. Often many departments are lobbying for homepage real estate, and the best lobbyists win. We encourage you to champion users' needs as the key factor in design decisions and to involve users throughout your design process.
There are several usability methods that can identify and prioritize users' needs based on real data and observation. This is not the place to go into details about user testing, task analysis, field studies, or usability engineering methodology and process in general. These topics each require their own book, and indeed several such books have been written and continue to be written. We maintain a set of web pages at http://www.nngroup.com/books, with references and links to those books that we recommend the most at any given time.
General Web Design
We have limited our guidelines to those that are critical for successful homepage usability, although many would improve the usability of other web pages as well. Similarly, many, if not most, of the guidelines for the design of general web pages, web content, and web navigation would increase the usability of homepages. After all, a homepage is a web page, and thus homepage designers should consider all of the guidelines for web usability, not just those that are specific to homepages. For detailed information on general web design, see our other book, Prioritizing Web Usability.
Vertical Industry Segments
We don't address special design considerations for vertical industry segments, such as homepages for software companies, conferences, or dentists. For every industry or type of company, there will be many detailed guidelines that address the ways customers of such companies expect to interact with websites and the best ways to serve those users' needs.
We cannot provide a set of generic vertical guidelines. That would be a contradiction in terms. The only way to generate vertical design guidelines is to study each industry's users and their tasks. Our preferred approach for doing so is the comparative usability test, which generalizes findings across a broad variety of sites within a given vertical segment. This is not the place for a discussion of how to run a comparative study; instead we refer you to a report that details the methodology used to derive hundreds of guidelines for e-commerce usability from several rounds of testing of multiple such websites. This methodology report is available from http://nngroup.com/reports/ecommerce-user-research-methodology/.
While some of our individual site reviews point out major design issues that would impede people using assistive technology, accessibility is too large a topic to do due diligence in these guidelines. We refer you instead to our detailed guidelines for accessibility at http://www.NNgroup.com/reports/ usability-guidelines-accessible-web-design .
While we point out a few guidelines for serving international users in this book, we refer you to our detailed guidelines at http://www.NNgroup.com/reports/ecommerce-us-international-purchasers .
See also " International User Interfaces" by Elisa del Galdo and Jakob Nielsen.
The following sections contain our 113 guidelines for ensuring homepage usability. The guidelines are categorized by topic area, and most give examples from the homepage reviews, which you can find in alphabetical order in the full Homepage Usability: 50 Websites Deconstructed book.
These guidelines were written in 2001, and the examples refer to the design of various homepages that year. Despite the age, the guidelines have held up well — something that's usually true for usability guidelines which don't change much over time.
For an update, we present the newest usability guidelines and fresher examples from more recent user testing in the full-day tutorial on Fundamental Guidelines for Web Usability at the annual Usability Week conference.
The conference also has full-day training courses on the Principles of Interface Design and The Human Mind and Usability: How Your Customers Think for a broader perspective on why certain user interfaces work better than others, as well as more specialized topics like Information Architecture (IA) and mobile usability.
Communicating the Site's Purpose
Imagine how disorienting it would be to walk into a store and not be able to tell immediately what services or goods were available there. The same is true of your homepage. It must communicate in one short glance where users are, what your company does, and what users can do at your site. If your site misses the mark here, it's nearly impossible to recover. Why should users do anything at a site if they can't figure out what there is to do there? And yet in countless user studies, we've seen users staring right at the homepage, unable to satisfactorily answer the question "What is the purpose of this site?" In order to communicate well, homepages must give appropriate emphasis to both branding and high-priority tasks. The homepage must also have a memorable and distinct look, so that users can recognize it as their starting place when coming from any other part of the site.
- Show the company name and/or logo in a reasonable size and noticeable location. This identity area doesn't need to be huge, but it should be larger and more prominent than the items around it so it gets first attention when users enter the site. The upper-left corner is usually the best placement for languages that read from left to right.
Include a tag line that explicitly summarizes what the site or company does. Tag lines should be brief, simple, and to the point. For example, Global Sources' tag line, "Product and Trade Information for Volume Buyers," is a good, straightforward summary of what the site offers (we did, however, offer minor suggestions for improvement in the homepage review). Vague or jargonistic tag lines only confuse users, or worse, make them mistrust the site, especially if users perceive them as marketing hype. For example, Ford's tag line, "Striving to Make the World a Better Place," while pluckily optimistic, doesn't describe Ford's automotive business in any way.
Tag lines might not be necessary when the company name itself explains what the company does, such as the Federal Highway Administration, or if the company is extremely famous, such as Microsoft. If your company has many sites or services, the tag line for the main company homepage should summarize what the company is all about, and the subsites should have their own tag lines explaining the purpose of that particular site or service.
- Emphasize what your site does that's valuable from the user's point of view, as well as how you differ from key competitors. The tag line is a great place to do this, if you can do it succinctly. For example, Wal-Mart frequently differentiates itself from competitors in advertising media by claiming that it offers the lowest prices, but doesn't say so anywhere on its homepage except for a brief mention in the title bar. A simple tag line that stated this differentiator would give users unfamiliar with the company an instant sense of what the site can offer them.
- Emphasize the highest priority tasks so that users have a clear starting point on the homepage. Give these tasks a prominent location, such as the upper-middle of the page, and don't give them a lot of visual competition. In other words, if you emphasize everything, nothing gets focus. Keep the number of core tasks small (1–4) and the area around them clear. For example, a financial news website, like CNNfn, should devote prime real estate to high-priority tasks like checking a stock quote, getting the current summary of the major U.S. stock markets, and getting a summary of the current financial news headlines. The most challenging, yet most critical, aspect of this guideline is actually determining what the highest priority tasks are from the user's perspective. You must have a deep understanding of your users' needs, which is best acquired by studying your users in the context in which they will use your website before you begin the homepage design.
- Clearly designate one page per site as the official homepage. Within the site, restrict the use of the terms "Home" and "Home Page" to refer to this one main homepage and use a different term for the front pages of departments or subsites. Users should never face multiple "Home" buttons or links that go to different places. Of course, if your company is a conglomerate, the main homepage will likely link to other separate sites that have a clear identity and unique homepage apart from the parent company. For example, Philip Morris has a separate homepage for Miller Brewing Company (a subsidiary) that is linked to from the Philip Morris homepage.
On your main company website, don't use the word "website" to refer to anything but the totality of the company's web presence. Specifically, don't use it to refer to subsites or departments. Using "website" to refer to parts of the site separates, rather than unites, your company's total offerings and it can confuse users, who naturally think that a different website means that they are going to a different company. For example, Ford's homepage uses an icon to mark links to external websites. However, Ford only uses this icon next to the link for its dealer finder, making it seem like it isn't part of the company. From the user's' perspective, of course, getting information about the cars and getting information about where to buy the cars are all parts of the same task.
If you offer web applications or services on separate websites, some users might go straight to a service website without going through the corporate homepage. It's fine to refer to those subsites as websites on the specific sites themselves, but from the corporate homepage it's better to present them as major categories. This portrays them as part of your total offering, rather than separate from it. For example, the Philip Morris website lists its subsidiaries, such as Kraft Foods International Inc., as part of its "Family of Companies," but doesn't label them as websites.
- Design the homepage to be clearly different from all the other pages on the site. Either use a slightly different visual design (that still fits with the look and feel of the site) or have a prominent location designator in the navigational apparatus. This visual distinction and navigational signposting ensures that users can recognize their starting point when they return from exploring a new part of the site.
Communicating Information About Your Company
In addition to the homepage tag line, all business websites need to provide a clear way to find information about the company, no matter how big or small the company is, or how simple or complex the range of products or services are. People like to know with whom they are doing business, and details about the company give credibility to the site. For some websites, such as those for large conglomerates, getting company information might be the sole reason that users come to the site. Yet even for sites that deliver a simple web service, many users still want to know who is behind the service.
These guidelines also apply to government sites and to sites for many other types of not-for-profit organizations, although some of the details may vary. For example, a government agency would not need an Investor Relations link. It is a common mistake, especially on government homepages, to play up the wrong kinds of information about the agency. People need to be able to find out how the organization is structured and who runs it, but they do not need to have an interface that's designed to emphasize internal bureaucratic structure or one that promotes the current minister or department head at the expense of granting citizens fast access to the services and information they need.
- Group corporate information, such as About Us, Investor Relations, Press Room, Employment and other information about the company, in one distinct area. This grouping gives people who want the information a clear and memorable place to go. It also helps users who don't care about this information by separating it from the rest of the homepage content. (See also our separate reports with much more detailed guidelines on "About Us", IR, and PR.)
- Include a homepage link to an "About Us" section that gives users an overview about the company and links to any relevant details about your products, services, company values, business proposition, management team, and so forth. The recommended name for this link is "About <name of company>." (See also our separate report with 50 design guidelines for the "About Us" section of a website.)
- If you want to get press coverage for your company, include a "Press Room" or "News Room" link on your homepage. Journalists appreciate and rely on sections like these when trying to cover a particular company. For more information on optimizing web design for press relations, see http://www.nngroup.com/reports/pr-websites .
- Present a unified face to the customer, in which the website is one of the touchpoints rather than an entity unto itself. Don't separate your web presence from the rest of your company by referring to "Company.com" as different from "Company." Your customers should feel they are dealing with one indivisible, consistent company. It is important, however, to make distinctions between web-only services and services listed on the site that are available only through a different medium. For example, a television station might offer webcasts that are available only on the website as well as list information for programs that are available only on television. Users need to understand where to go for which service.
- Include a "Contact Us" link on the homepage that goes to a page with all contact information for your company. If you want to encourage site visitors to contact your company directly, instead of seeking information on the website first, include contact information such as the primary address, phone number, and email directly on the homepage.
- If you provide a "feedback" mechanism, specify the purpose of the link and whether it will be read by customer service or the webmaster, and so forth.
- Don't include internal company information (which is targeted for employees and should go on the intranet) on the public website. Not only does this internal information clutter the public website, it can actually be misleading if users think that internal policies are directed toward them. For example, Slusser's homepage links to its company's internal policy for computer resources, including guidelines for appropriate web usage, which could worry some users that Slusser's knows more about their web surfing habits than is actually the case. Job postings are an example of largely company-focused content that might be beneficial on both intranet and public sites, however, because they are chiefly targeted at potential employees, not current ones.
- Explain how the website makes money if it's not self-evident. If users cannot easily discover a business model (such as selling stuff or carrying advertising), their trust in the site will be lowered because they will fear that it has some hidden way of "getting" at them. People know that there is no such thing as a free lunch
Effective content writing is one of the most critical aspects of all web design. Most users scan online content, rather than carefully reading, so you must optimize content for scannability and craft it to convey maximum information in few words. Although this is a general web guideline, we're offering content writing guidelines here that are especially important for homepages, where you must work hardest to capture and hold your users' interest, and where you often have the least amount of space to represent the greatest number of topics.
A skilled editor is an essential part of effective content creation. The editor should not only set style standards but must also ensure that the site follows them consistently. The editor should develop or revise content specifically for web use — it's not enough to repurpose content from other mediums and post it to the homepage. Of course, the design team must also involve real users in this process, both when gathering initial requirements and when revising the design as the site evolves.
Use customer-focused language. Label sections and categories according to the value they hold for the customer, not according to what they do for your company. For example, on a heating oil site, what should you call a category of home energy tips?
On www.jamesdevaney.com, it's called "Consumer Information." This company-focused phrase is based solely on how the fuel company values this customer (as a consumer, not a business). Instead, think of how the customer would view the information, such as "Home Energy Tips." Ask customers what they look for when they need such information. Use the words they use.
- Avoid redundant content. Repeating identical items, such as categories or links, on the homepage in order to emphasize their importance actually reduces their impact. Redundant items also clutter the page; all items lose impact because they are competing with so many elements. In order to feature something prominently, feature it clearly in one place. On the other hand, redundant content can help people if you repeat items that belong in multiple categories or you include links to the same page but offer synonyms that represent words your users use to describe the content.
- Don't use clever phrases and marketing lingo that make people work too hard to figure out what you're saying. For example, the "Dream, Plan, & Go" category on Travelocity might sound catchy to a marketing person, but it's not as straightforward as "Vacation Planning." Every time you make users ponder the meaning behind vague and cutesy phrases, you risk alienating or losing them altogether. Users quickly lose patience when they must click on a link just to figure out what it means. This isn't to say that homepage text should be bland, but it must be informative and should be unambiguous.
- Use consistent capitalization and other style standards. Otherwise users read meaning into things when they shouldn't. For example, if some items in a list follow sentence-style capitalization, but one item uses initial uppercase letters, the inconsistency gives that one item undue emphasis over the other items. Usually this kind of inconsistency happens not by design, but because the content comes from different sources and isn't appropriately edited for consistency. Although these small mistakes might seem nitpicky, they can cause users to feel that the site is unprofessional or untrustworthy. We also advise against the popular style of using all lowercase letters for titles, categories, and other links. Not only is it not as scannable as mixed case, but also invariably you'll need to break with the style standard for a proper name, which will look inconsistent.
- Don't label a clearly defined area of the page if the content is sufficiently self-explanatory. For example, it is usually not necessary to label the main news headline of the day because the size and placement indicate its role. Similarly, if you have a boxed area where you feature a product, it's probably not necessary to give it a generic title such as "Featured Product." Titles often are meaningless space wasters.
- Avoid single-item categories and single-item bulleted lists. It's overkill to categorize one item, and things that don't fit into existing categories can signify a need to rewrite or reorganize the content. See Asia Cuisine for an example.
- Use non-breaking spaces between words in phrases that need to go together in order to be scannable and understood. ( ) Most homepages use multicolumn layouts, and text must fit into narrow spaces. Because there are many possibilities for where text breaks depending on the user's screen resolution, monitor size, window size, browser version, and so forth, forcing certain phrases to stay together can maintain the integrity and logic of the content.
- Only use imperative language such as "Enter a City or Zip Code" for mandatory tasks, or qualify the statement appropriately. For example, you might say, "To See Your Local Weather, Enter a City or Zip Code." People are naturally drawn to text that tells them what to do on a site, especially if it is next to a recognized widget, such as an input box or a dropdown menu, and often dutifully follow instructions because they think that they must do what the instructions say.
- Spell out abbreviations, initialisms, and acronyms, and immediately follow them by the abbreviation, in the first instance. This is helpful for all users, especially for anyone using a screen reader. For example, the Federal Highway Administration's homepage refers several times to the "MUTCD" but fails to explain on the homepage that this is short for "Manual on Uniform Traffic Control Devices." Abbreviations that have become widely used words, such as DVD, are exceptions to this guideline. Especially avoid using unexplained abbreviations as navigation links.
- Avoid exclamation marks. Exclamation marks don't belong in professional writing, and they especially don't belong on a homepage. Exclamation marks look chaotic and loud — don't yell at users. If you break this guideline once, you're likely to start breaking it all over the homepage, because all items on the homepage should be of high importance.
- Use all uppercase letters sparingly or not at all as a formatting style. All uppercase words are not as easy to read as mixed case words, and they can make the page look busy and loud. For example, "PSYCHOLOGY OF WORDS" is not as readable as "Psychology of Words."
- Avoid using spaces and punctuation inappropriately, for emphasis. For example, L O B S T E R S or L.O.B.S.T.E.R.S. might look interesting to you but would foil a user who was searching for "lobsters." Unusual punctuation also reduces scannability and would be annoying to visually impaired users whose audio browsers spell out the word instead of reading it as a word.
Revealing Content Through Examples
Showing examples of your site's content on the homepage helps users in many ways. First, example content can help instantly communicate what the site is all about, so users know whether they are on the right site for their needs. Second, examples can reveal the breadth of products or content offered at your site. Third, specifics are more interesting than generalities. You stand a better chance of piquing user interest if you provide something concrete to read or look at instead of just abstract category names. Last, and probably most important, examples can help users successfully navigate, because they show what lies beneath the abstract category names. Examples help differentiate categories, saving users from clicking through categories just to see what's there.
- Use examples to reveal the site's content, rather than just describing it. Well-chosen examples of content can convey much more than words alone. For instance, a category called "Breaking News" with a description that says "Get All of Today's Top Stories Here" is not nearly as interesting or informative as showing the top five news headlines, followed by a link to all breaking news. Or, on an e-commerce site, a simple category called "Sale Items" is not as compelling as seeing a few actual products that are on sale, complete with their prices. Often it takes more words and space to describe a category than it does to show some of that category's contents and link to more information. In brick-and-mortar stores, customers rely on examples to orient themselves and find the items they need. Similarly, homepages should show small pictures of the products or other content in each department, so users can do a quick visual sweep to see if they are in the right place. Examples also help users who don't read your site's language very well.
- For each example, have a link that goes directly to the detailed page for that example, rather than to a general category page of which that item is a part. Don't put the burden on the user to find the item they're interested in once again on the second page. For instance, if your homepage features news coverage of a film festival, and you show a photo and caption for a specific film, those items should link directly to information about that particular film, not a general page for the festival. The exception is examples that are so short and self-contained that there is no more information about them deeper within the site.
- Provide a link to the broader category next to the specific example. If you prominently feature a single product, service, or article on the homepage, make sure that the rest of the page clearly communicates the full breadth of products, services, or content supported by the site (unless you are a one-product company), because people sometimes believe that the main feature is all there is. For example, if a job-listing site prominently features three listings in the medical industry with no adjacent link to "Listings in Other Industries," users might easily think that the site lists jobs only for medical personnel.
- Make sure it's obvious which links lead to follow-up information about each example and which links lead to general information about the category as a whole. Do this both by wording and placement of the links. The link for the example should be directly next to the information about the example, while the link to the category should be offset with a small amount of whitespace. For example, if Amazon.com features a specific mystery novel on its homepage, it should have a link at the end of the description of the novel to "Complete Description and Reviews," as well as a link a bit lower in the section to "Complete Listing of Mystery Novels."
Archives and Accessing Past Content
Often, you have users who return to your site often or new users who are interested in what you've done before they found you. It's helpful to include archives to content that has recently moved off the homepage.
- Make it easy to access anything that has been recently featured on your homepage, for example, in the last two weeks or month, by providing a list of recent features as well as putting recent items into the permanent archives. If you rotate content of featured stories or products, make sure to include a link to the other featured stories or products. If the featured story will be moved to another URL after it rotates off the homepage, make a link to the URL for the permanent location right away so people can bookmark the permanent link instead of the temporary link.
Links are obviously not unique to homepages, but because homepages serve as the portal to the site and thus tend to have more links than typical site pages, following design guidelines for homepage links is especially crucial to user success.
- Differentiate links and make them scannable. Begin links with the information-carrying word, because users often scan through the first word or two of links to compare them. Keep links as specific and brief as possible. Don't include obvious or redundant information in every link — adding non-differentiating words makes users work harder to find the important words. For example, if you list press releases for your company and every one of them begins with the company name, it's difficult to quickly get the gist of each press release by scanning through the list. Or, if the proper names of your subsidiaries include the company name, such as "FedEx Express," "FedEx Ground," "FedEx Home Delivery," listing them as such presents users with a column of identical words ("FedEx"), and they must read through all of the links carefully to glean the difference.
- Don't use generic instructions, such as "Click Here" as a link name. Instead, use meaningful text in the link names to tell users what they'll get when they click. This helps users to quickly differentiate between links when they are scanning through them. For example, instead of saying "Click Here for Layette Items" just say "Layette Items."
- Don't use generic links, such as "More…" at the end of a list of items. Instead, tell users specifically what they will get more of, such as "More New Fiction" or "Archived Book Reviews." Generic "More…" links are especially problematic when the page has several of them, since users can't easily differentiate between them when scanning the page.
- Allow link colors to show visited and unvisited states. Reserve blue for unvisited links and use a clearly discernable and less saturated color for visited links. Although some sites are now using gray for visited links, we recommend against doing so because it is difficult to read and has been widely used in user interfaces to mean that something is unavailable. Similarly, it is unhelpful to use black for visited links when the text color is black, because it can cause people to have trouble finding the links they visited before.
- Don't use the word "Links" to indicate links on the page. Show that things are links by underlining them and coloring them blue. Never name a category "Links" by itself — this is akin to labeling a category of information "Words" in a print medium. Name the category after what the links are pointing to.
- If a link does anything other than go to another web page, such as linking to a PDF file or launching an audio or video player, email message, or another application, make sure the link explicitly indicates what will happen. For example, CNNfn uses icons quite effectively to indicate audio and video files as such. Being thrust into a new medium without warning is startling for any user, but is especially agonizing for users with slow connections, who often have to wait for the new application to load just so they can exit out of it. Worse, in a limited memory situation, launching a helper application or memory-intensive plug-in can crash the browser or computer.
Because the primary purpose of a homepage is to facilitate navigation elsewhere on the site, it's critical that users be able to find the appropriate navigation area effortlessly, differentiate between the choices, and have a good sense of what lies beneath the links. Users should not have to click on things just to find out what they are. The navigation area should also reveal the most important content of the site so that users have a good sense of what's there by looking at the top-level categories.
- Locate the primary navigation area in a highly noticeable place, preferably directly adjacent to the main body of the page. Avoid putting any top horizontal navigation (primary or otherwise) above graphical treatments such as horizontal rules or banner areas — users often ignore anything within or above a rectangular shape at the top of the screen. We call this behavior "banner blindness," and we have seen it in numerous tests. See Microsoft's top navigation area, which begins with "All Products" for an example of navigation that many users will likely miss.
- Group items in the navigation area so that similar items are next to each other. Grouping helps users differentiate among similar or related categories and see the breadth of products or content you offer. For example, group product categories for prescription medications and over-the-counter medications. Similarly, on an e-commerce site, all items related to shopping, such as the shopping cart, account information, and customer service should be in the same area.
- Don't provide multiple navigation areas for the same type of links. Groups that are too similar can fragment and complicate the interface, making the user work too hard to create order and meaning.
- Don't include an active link to the homepage on the homepage. For example, if you include a "Home" link as part of your regular navigation bar, it shouldn't be clickable on the homepage. If you use components, create a special component that is used only on the homepage with an inactive Home link. If it's clickable, some users will inevitably click it and wonder if the page has indeed changed. Similarly, if you link your logo to the homepage from other pages on the site, the logo shouldn't be clickable from the homepage. All other pages on the site do need a link to the homepage.
- Don't use made-up words for category navigation choices. Categories need to be immediately differentiable from each other — if users don't understand your made-up terminology, it will be impossible for them to differentiate categories. For example, although Accenture uses the made-up word "uCommerce" for its flavor of e-commerce, they appropriately use the more familiar term "eCommerce" in the navigation bar. On the other hand, Disney's mysteriously named "Zeether" category will likely give both kids and adults an undesirable pause in the navigation area.
- If you have a shopping cart feature on your site, include a link to it on the homepage. This allows users to immediately see what they've selected, without having to navigate through any product screens or go through checkout before they are ready to do so. This is especially important if your site saves shopping cart selections from prior visits.
- Use icons in navigation only if they help users to recognize a class of items immediately , such as new items, sale items, or video content. Don't use icons when simple text links are clearly differentiable from each other, such as in category names. If you find that you need to ponder to come up with an icon for navigation, chances are it's not going to be easily recognizable or intuitive for users. For example, the icons for "Links" and "Forum" on Asia Cuisine don't help to further explain these categories or make them more immediately recognizable; they just clutter the page.
Search is one of the most important elements of the homepage, and it's essential that users be able to find it easily and use it effortlessly. Our recommendations for the homepage treatment of search are fairly straightforward: make it visible, make it wide, and keep it simple. Of course, the real power of search is all in the implementation. For a much larger set of in-depth search guidelines, see http://nngroup.com/reports/ecommerce-ux-search-including-faceted-search .
- Give users an input box on the homepage to enter search queries, instead of just giving them a link to a search page. Users now expect and look for an input box with a button next to it — if they don't see it, they often assume the site doesn't have a search feature. Try to find search on Boeing's, Coles', or Southwest's homepages, for examples of how difficult it is without input boxes as the visual cue to search.
- Input boxes should be wide enough for users to see and edit standard queries on the site. Allow enough space for at least 30 characters in the font size used by most of the users.
- Don't label the search area with a heading; instead use a "Search" button to the right of the box. This design is preferred because it is the simplest. "Go" is also acceptable as the action button for search, but requires that you label the area "Search." Place search at the top of the main body of the page, but below any banner area. This gives people the greatest chance of finding search when they need it. Even if you follow the other guidelines for search, it doesn't help if you place it in a low-priority position on the page. See ExxonMobil for an example of a poorly placed search input box.
- Unless advanced searches are the norm on your site, provide simple search on the homepage, with a link to advanced search or search tips if you have them. If you have advanced search, but it is used infrequently, don't include a link to it on the homepage. Instead, offer users the option to do an advanced search when you present the search results.
- Search on the homepage should search the entire site by default. Never hide search scope from users if you narrow their search in any way. Users nearly always assume that they've searched the entire site, unless you tell them otherwise, and assume the site doesn't have what they're looking for if they don't find it with search.
- Don't offer a feature to "Search the Web" from the site's search function. Users will use their favorite search engine to do that, and this option makes search more complex and error prone.
Tools and Task Shortcuts
Homepage tools, or shortcuts to certain tasks, can be a great way to give prominence to popular features of your site and meet your users' needs more quickly. The key is to choose carefully which tasks to feature as tools on the homepage.
- Offer users direct access to high-priority tasks on the homepage. These homepage tools should let users enter any required data directly on the homepage. If possible, consider giving users zero-click access to the answers, meaning that the homepage displays the most-needed information automatically. This kind of feature is typically possible only for sites that recognize the user and personalize the page to display information that user is likely to request as a first task, such as "Current Balance of Your Bank Account: $xx." More commonly, you can offer users one-click access to the answers, meaning that you load a separate page to display the results. For example, the Travelocity "Book Your Flight Now" feature is an effective one-click tool, which allows users to enter criteria for a desired flight directly on the homepage and then see the results on a separate page.
- Don't include tools unrelated to tasks users come to your site to do. Some sites seem compelled to include tools simply because they are available, not because they are appropriate. For example, you don't need to offer users a tool to get their weather forecast if you have a non-news or non-weather site, such as James Devaney Fuel Company. Tools are one of the first things users look at on homepages because they often contain input boxes and dropdown menus, which users recognize and are attracted to, so don't show them unless they are truly essential and facilitate top-priority tasks.
- Don't provide tools that reproduce browser functionality , such as setting a page as the browser's default starting page or bookmarking the site.
Graphics and Animation
When you use graphics to purposefully illustrate content, you can greatly enhance a homepage. On the other hand, graphics can weigh down the design in visual clutter and slow download times, so it's important to use them judiciously and edit them for the Web. Similarly, animation with a purpose can enhance online content — but it typically is best suited for more complex content than appears at the homepage level.
- Use graphics to show real content, not just to decorate your homepage. For example, use photos of identifiable people who have a connection to the content as opposed to models or generic stock photos. People are naturally drawn to pictures, so gratuitous graphics can distract users from critical content.
- Label graphics and photos if their meaning is not clear from the context of the story they accompany. If the level of specificity between the picture and the story differ, it's a good idea to label the picture. For example, if you have a story about a film festival and show a still photo from one of the films, label it to clarify both what it is and how it relates to the more general category. On the other hand, if you're using a picture in an iconic way to help users quickly identify what a story is about when scanning the page, you probably don't need to label it. For example, if you use a close-up of a medicine bottle with pills in it next to an article on a new drug approved by the FDA, you don't need to label it. It's usually a good idea to label any photos of people — it doesn't hurt people who recognize the person and can help people who can't match the face with the name.
- Edit photos and diagrams appropriately for the display size. Overly detailed photos and drawings don't convey information and look cluttered. It's often unhelpful just to shrink a big photo — it's usually better to crop it. See ESPN for examples of well-cropped photos; see CNNfn's photo of the market floor for an example of a poorly cropped photo.
- Avoid watermark graphics (background images with text on top of them) . They add clutter and often decrease visibility. If the graphic is interesting and relevant, users won't be able to see it clearly; if it's not, it's unnecessary. Often, watermark graphics are purely decorative and add no value. For example, Ford's busy watermark graphic nearly disguises the only car photo.
- Don't use animation for the sole purpose of drawing attention to an item on the homepage. Animation rarely has a place on the homepage because it distracts from other elements. Animation requires a user's attention and should be shown by itself, whereas homepages have multiple elements requiring attention. For example, animation could be very helpful to show how to do a procedure that is easier seen than described, like swaddling a baby, but it wouldn't be appropriate to show it on a homepage, where it would draw attention from all other elements on the page.
- Never animate critical elements of the page, such as the logo, tag line, or main headline. Not only do users tend to ignore animated areas because they look like ads, they're also difficult to read. Animation tends to have a hypnotic effect on viewers, so even if you get people to stare at animated elements, they're less likely to absorb and retain the information than if they'd seen it in a simpler format. For example, Asia Cuisine's logo is difficult to read because it is still only for a few seconds at a time — the rest of the time (no joke) it is being drawn onto the screen by a lobster.
- Let users choose whether they want to see an animated intro to your site — don't make it the default. If you do ever automatically launch an animation without the user's request, provide an easy and noticeable way to turn it off.
Graphic design most often hurts usability when it's used as a starting point for the homepage design, rather than as a final step to draw appropriate focus to a customer-centered interaction design. Graphic design should help lend a sense of priority to the interaction design by drawing the user's attention to the most important elements on the page.
- Limit font styles and other text formatting, such as sizes, colors, and so forth on the page because over-designed text can actually detract from the meaning of the words. If text elements look too much like graphics, users tend to overlook them, mistaking them for ads.
- Use high-contrast text and background colors so that type is as legible as possible.
- Avoid horizontal scrolling at 1024x768. Horizontal scrolling invariably causes usability issues — the biggest being that users don't notice the scrollbar and miss seeing content that is scrolled off of the screen.
- The most critical page elements should be visible "above the fold" (in the first screen of content, without scrolling) at the most prevalent window size (1024x768 as of 2009). If you have critical content that appears "below the fold" (requiring that the user scroll down), add visual clues so users know it is there. For example, don't include large amounts of whitespace between items that are above and below the fold — it's better if the items are closer together, since even seeing the top of a line gives users a good hint that there is more content below the visible portion of the screen. (See research on the distribution of users' attention at the top of the page vs. further down.)
- Use a liquid layout so the homepage size adjusts to different screen resolutions.
- Use logos judiciously. Aside from the logo for the site, use other logos only if your users know them well and you want to draw users' attention to them. Don't use a logo just because one exists for a particular product or program. For example, many government agencies design logos for each new initiative or program. Keep such logos for internal use — users don't need to see all of them. See the Coles image on this page for an example of how logos can clog up the interface.
UI widgets, such as dropdown menus, selection lists, and text boxes, invariably draw users' attention. As we recommend you do with any graphical addition to your homepage, use them sparingly and only when they are necessary for the task.
- Never use widgets for parts of the screen that you don't want people to click. Make sure widgets are clickable. For example, if you use graphical bullets next to text, make them clickable as well as the text. In countless studies, we've seen users carefully try to click bullets, and if they're not clickable, they assume the whole line isn't a link, even when the bullet text is clickable.
- Avoid using multiple text entry boxes on the homepage, especially in the upper part of the page where people tend to look for the search feature. Users sometimes confuse text entry boxes with search boxes, and often type search queries in the wrong place. This is especially problematic if you don't offer an input box for search but do have input boxes for other features. See Victoria's Secret and PBS for examples.
- Use dropdown menus sparingly, especially if the items in them are not self-explanatory. Users are attracted to them, and they're often the least effective navigation devices. If you have very few items in a dropdown list, it's often better to list them directly on the homepage. Similarly, avoid long dropdowns — they are difficult for users to operate effectively, and users often struggle to differentiate between the items in the list. It's often better to take users to a separate page for the selection, where you can explain the different items or at least organize them into more meaningful categories than a single list.
Each homepage needs a simple, straightforward window title (determined by the TITLE tag of each HTML document). Although many people might not notice window titles while they are using websites, titles play a critical role in bookmarking and finding the site with search engines. When users bookmark a site, the window title becomes the default bookmark name, so the title should begin with the word that users will most likely associate with the site when they are scanning through a bookmark list. Similarly, search engines display the window title in search results and use it to determine relevancy to the search terms, so the title must be scannable and identifiable in long results lists. In order to be scannable, window titles should convey the most information possible in the fewest words.
- Begin the window title with the information-carrying word — usually the company name. Users scan, rather than read, text on screens, so if you don't catch them with the first word, you risk losing their attention. If you start the window title with anything but the most important word, the company name gets lost in bookmark lists and search results. For example, many window titles begin with "Welcome" or "Homepage," which might look okay in isolation, but convey no differentiating site information in the first word. Similarly, if your company name begins with an article, such as "the" or "a," don't include the article in the window title. For example, the window title for "The New York Times" should be "New York Times."
- Don't include the top-level domain name, such as ".com" in the window title unless it is actually part of the company name, such as "Amazon.com." Suffixes such as ".com" add an unnecessary word to the window title and create an artificial distinction between a company's presence on and off the Web. Users already know that they are on the Web when they go to a website, so they don't need the ".com" to tell them so.
- Don't include "homepage" in the title. This adds verbiage without value. As long as you have a simple URL for the homepage of the site, it's not necessary to specify the homepage as such in the window title. Of course, each page in your site should have a unique window title, so that no other page can be confused with the homepage in history lists and bookmarks.
- Include a short description of the site in the window title. This description is especially important for sites that are not yet widely known, so users can easily remember or understand what the site's purpose is if they've previously bookmarked it or get it as a search result. Consider using the tag line for the site, if you have one, but only if it is short, meaningful, and in straightforward language instead of vague marketese. For example, Slusser's window title, "Slusser's Commercial Landscaping and Heavy Highway," works well because it lists the company name first, followed by an understandable description (although we suggest moving "Landscaping" to the end).
- Limit window titles to no more than seven or eight words and fewer than 64 total characters. Longer titles are less scannable, especially in bookmark lists, and will not display correctly in many applications. See JobMagic's window title for an example of an overly long, truncated window title.
It's critical to keep homepage URLs as simple and memorable as possible. Users not only need to be able to remember the URLs for sites they've visited, but they also need to be able to succeed quickly when they are guessing a company's domain name, as people often must do. Once users locate a website, a simple homepage URL helps them quickly understand that they are in the right place, whereas complex URLs can make them wonder if they're indeed on the correct page.
- Homepages for commercial websites should have the URL http://www.company.com (or an equivalent for your country or non-commercial top-level domain) . Do not append complex codes or even "index.html" after the domain name. It is especially startling when users enter a simple URL and get to a site, only to have the URL they typed replaced by a long, scary-looking URL. Make sure your site responds to both "www.company.com" and "company.com."
- For any website that has an identity closely connected to a specific country other than the United States, use that country's top-level domain. A country-specific domain is appropriate either for localized sites that feature a particular country's language and/or content, or for sites that are differentiated because they are located in that country. If the site also has customers outside of its country, and especially if it has customers in the United States, it's good to also register the name with ".com" as the top-level domain. For example, Asia Cuisine is a Singapore-based company, but it appeals to an international audience. Users can reach the site by either the Singapore URL, http://www.asiacuisine.com.sg or http://www.asiacuisine.com.
- If available, register domain names for alternative spellings, abbreviations, or common misspellings of the site name. This is especially true if you have any punctuation in the company name, such as Wal-Mart, or names made from several words, such as Victoria's Secret. Both of these sites allow for common misspellings — you can reach Wal-Mart's website at http://www.wal-mart.com or http://www.walmart.com and Victoria's Secret through http://www.victoriassecret.com or http://www.victoriasecret.com.
- If you have alternative domain name spellings, choose one as the authorized version and redirect users to it from all the other spellings. Use this correct spelling in all instances on the site and in any offline promotions.
News and Press Releases
In order for news stories and press releases to be effective on your homepage, you need to craft effective headlines and decks (the summary of the story below the headline). This applies to either the company news that you show on your homepage, or any news that your site delivers as content. Headlines and decks should actually give users information, rather than merely trying to tantalize them into clicking through to the real information. It's just as important to help users know when not to click something, if they're truly not interested. You can only get so many wasted clicks from users before they give up.
- Headlines should be succinct, yet descriptive, to give maximum information in as few words as possible. For example, the headline "Ben Affleck Recovering" gives more information in fewer words than "Doctors Report on Ben Affleck's Progress," which promises content in the article that follows, but doesn't really tell users anything. Headlines should relate to the deck below them, rather than to the whole story that follows.
- Write and edit specific summaries for press releases and news stories that you feature on your homepage. Don't just repurpose the first paragraph of the full article, which was likely not written to be a standalone piece. Give users content in the deck — don't just describe the content that follows. Trying to hold out on the details in order to entice users to click through can backfire; generalities aren't as captivating as specifics. For example, "Getting more sleep and spending time with loved ones are two of the five ways you can increase your life span by five years, says Surgeon General Satcher" is more intriguing and informative than "Surgeon general describes ways that people can increase their life span."
- Link headlines, rather than the deck, to the full news story. If your headline style doesn't have a perceived affordance for clickability, such as blue underlined text, include a "Full Story" link at the end of the deck. A perceived affordance is what you think you can do with a UI element based on looking at it. For example, the pseudo-3D appearance of a button suggests that you can click it. For more information about the use of affordances in user interface design, see Don Norman's classic book The Design of Everyday Things (Currency/Doubleday: New York, NY, 1990).
- As long as all news stories on the homepage occurred within the week, there's no need to list the date and time in the deck of each story, unless it is truly a breaking news item that has frequent updates. The time and date at the top of the homepage are enough to show a user that content is current. For example, Red Herring uses a good deal of space unnecessarily listing dates that all occur within the same week. It is essential, however, to list the date prominently on the page for the full article, because articles can be found and cached (for example by search engines) much later in time, and old content can be mistaken for current news unless items are dated with a full date, including the year. For the same reason, articles should not refer to relative times, such as "today" or "next week."
See also our separate (free) 287-page report Designing Websites to Maximize Press Relations: Guidelines from Usability Studies with Journalists for more information about online PR and newsrooms.
Popup Windows and Staging Pages
In general, it's best to show site content immediately. Intermediary screens are rarely necessary and keep users from getting to the main site content. What may be amusing once is often extremely annoying the 3rd or 30th time. Worse, the intermediate pages might confuse some users into not recognizing the "real" homepage.
- Take users to your "real" homepage when they type your main URL or click a link to your site. Splash screens must die. An exception: If your site has material that is inappropriate for minors or that is likely to offend some users, it is appropriate to have a splash screen warning about the content.
- Avoid popup windows. Extra windows keep users from getting to your site content, and even if such windows contain valuable information, users are likely to dismiss them immediately as ads. Instead, put critical information in a highly noticeable area of the homepage. The other drawback to popup windows is that they go away — once the user gets rid of them, they're gone, so users often can't find the information again even if they want to. It's better to design your homepage to give high priority to critical content.
- Don't use routing pages for users to choose their geographical location unless you have versions of your site in many different languages, with no single dominant language. If you have very few language choices, it's best to provide homepage links to those languages in the native language. If you have a dominant language for your site with multiple other languages, take users directly to the homepage in that language, and include a single link to "International Versions of Site." It's best not to use dropdown menus for this purpose because they're difficult for users to navigate when long, and they often don't show users all the options at once.
Warning: users have grown savvier about ads on websites. Users have learned to ignore ads. Unfortunately, they often also ignore anything resembling an ad or next to an ad. If you use advertising from outside companies, you must ensure that you preserve the integrity of your content. The cost of lost customers might quickly outweigh the benefits of advertising revenue.
- Keep ads for outside companies on the periphery of the page. Never place ads next to high-priority items; they will cause such items to be ignored. Especially avoid placing any important items above an ad, because users will often exhibit banner blindness, ignoring anything above the banner area.
- Keep external ads (ads for companies other than your own) as small and discreet as possible relative to your core homepage content. When you have users evaluate your homepage, ask them to tell you the first three things that come to mind when they open the page. If any of the three comments are about ads, the ads are attracting too much attention.
- If you place ads outside the standard banner area at the top of the page, label them as advertising so that users don't confuse them with your site's content. See CNNfn for an example of how to label an advertisement in the middle of the page, and see USA Today for an example of how easily an unlabeled ad in the middle of the page can look like actual content.
- Avoid using ad conventions to showcase regular features of the site. The more you make content look like an ad, the less likely users will read it. For example, GE describes its acquisition of Honeywell on the homepage in a box that looks very much like an ad, rather than a press release or news item.
Many sites seem compelled to include welcome messages on their homepages. Cheerful "welcomes" on homepages are nostalgic remnants of the early days of the Web, when getting to one of the few available sites was a feat worth acknowledging.
- Don't literally welcome users to your site. Before you give up prime homepage real estate to a salutation, consider using it for a tag line instead. The best welcome you can give users is a concrete definition of what they can do on the site and a clear starting point from which to begin. An exception to this guideline is the more appropriate use of "welcome" in a phrase that confirms that the site has recognized a registered user.
Communicating Technical Problems and Handling Emergencies
Unfortunately, sometimes you encounter problems on your site or your company is affected by an emergency. It's important to update your homepage with relevant information that your users need.
- If the website is down or important parts of the website are not operational, show it clearly on the homepage. Provide an estimate of how long it will take to correct the problem — not just "Try again later," but "We expect that we'll be ready to serve you again at 4:00 p.m. Eastern time." Inform the user about alternatives that might be available while the website is down, for example, "Our customer service department is ready to serve you at 1-800-456-7890." Reserve such messages for critical information that already exists on your site — don't give users "under construction" messages for parts of the site that are yet to come or are getting a redesign.
- Have a plan for handling critical content on your website in the event of an emergency. In an actual emergency, there won't be time to come up with alternative versions of your homepage. For example, prepare an alternative homepage design that has a main feature area to notify users of the emergency, as well as a simplified navigation scheme that offers a few cross-references and a way to get back to your site's regular homepage. Emergencies are often characterized by flash crowds in which many times the normal number of users want to get information about the emergency. To serve this increased load, the alternative design should be more lightweight than the normal design: fewer graphics and other embedded objects, simplified HTML, and no dynamically computed elements.
Users come to your site for content. Avoid cluttering your homepage with useless credits or telling users how great your site is.
- Don't waste space crediting the search engine, design firm, favorite browser company, or the technology behind the scenes. Users really don't care, and each item you add to a page adds to its overall complexity and steals focus from the actual content. If these items are links to other sites, they can also cause users to get lost on those sites when looking for something on yours. For technology-oriented sites, it might be appropriate to include a "How We Run This Website" section under "About Us," but keep the specifics off the homepage.
- Exercise restraint in displaying awards won by your website. Most users don't really care that you have been appointed "Hot Site of the Day" by somebody. At the same time, awards, recognition, and favorable reviews from independent authorities can be one way to enhance credibility. Awards for the quality of products or services are usually more helpful in building trust than awards for "cool design" or other aspects of the website itself. Thus, awards for customer-oriented issues may be mentioned on the homepage, whereas awards for the web team's efforts should be relegated to an "About This Site" area. In either case, don't let awards overstay their welcome. Featuring a stale award from last year undermines credibility since it communicates that you haven't done anything good lately (except if it's included in a history section).
Page Reload and Refresh
When users reload or refresh your homepage, changes can be jarring. Try to keep the transition as smooth as possible and maintain continuity with their previous experience of your page.
- Don't automatically refresh the homepage to push updates to users. Automatic reloading feels intrusive — it's like pulling the rug out from under your users, particularly if they are using a part of the page that disappears or changes position during the refresh. For example, NewsNow automatically updates the page every five minutes, which means many of the headlines move off of the homepage and get replaced by new ones. This forced reloading can also lead to technical problems for users on dialup connections, whose computers might try to dial up at unexpected times (such as when the user is on the telephone on a line shared by a modem), or when the previous version of the page is replaced with an error message stating that the page could not be loaded. On slow connections you're taking up the user's bandwidth and time without asking if it's okay. For site features that require real-time updates, like sports scores, chat rooms, and stock tickers, consider providing a tool that enables users to get a live data feed. Such tools might potentially utilize an audio signal to attract the user's attention in case of breaking news. If you do so, it will be important to exercise restraint and only "ring the bell" for something truly important, as determined by an editorial decision or by a user-defined alert preference setting.
- When doing a refresh, update only content that has actually changed, such as news updates. For example, don't rotate through a set of photos, because users will waste their time trying to figure out what has happened and why the change has happened instead of focusing on useful tasks. Meaningless change is especially bad when sites randomly rotate through content — users waste time trying to figure out the pattern when there is none.
Homepage customization can work well if it gives users value without requiring much or any setup effort from them. If it is possible to make intelligent and relevant recommendations based on a user's past behavior on your site, or if you can offer users specialized content based on criteria such as their geographical location, then users might indeed benefit.
- If your homepage has areas that will provide customized information once you know something about the user, don't provide a generic version of the content to first-time users — craft different content for that space. For example, if you have a customized welcome message that shows a registered user's name, don't display any of the text if you don't know the user's name. See MotherNature's homepage for an example of how silly such welcomes look when you don't have user information yet. Generic welcomes are akin to Dear Sir letters — they don't make anyone feel special. Similarly, don't offer users recommendations that purport to be tailored just for them, when in fact they are generic for all users. So, if you have a UK site that has an area for local weather, don't choose a city, such as London, for your users — if you don't know their city, offer users an area to enter it and a rationale for doing so. For example, "Enter Your City Name or Postal Code to See Your Local Weather Report."
- Don't offer users features to customize the basic look of the homepage UI, such as color schemes. It's better to focus resources on coming up with the best design that will be the most readable for the greatest number of users. You should respect users' browser preferences, however, such as font size, by using relative rather than absolute sizes.
Gathering Customer Data
Many websites, including several of the ones in this book, begin asking for user data, such as email addresses, right on the homepage. Most do not explain why users should give up their privacy. In general, many web users, even experienced ones, are justifiably wary about giving away their personal information because they know now that fulfilling these requests often results in unsolicited commercial email and clogged inboxes.
- Don't provide plain links to registration on the homepage; instead explain (or at least link to) the customer benefits of registration. For example, Amazon explains the benefit by simply saying "Sign in to get recommendation." Users don't come to sites to register, but they might do so if the reasons are compelling enough. Thankfully, more websites seem to be allowing users to explore the site without mandatory registration — none of the sites in this book required users to register. Yet many sites offer homepage links to registration without any explanation of why users might want to do so.
The best thing you can do at the homepage level to foster a community of users is to reveal what resources the site has to bring people together. Of course, the deeper issue is whether a user community is appropriate for your site, but if so, it's good to give people specific examples of what they can get from community features you provide.
- If you support user communities with chat or other discussion features, don't show generic links to them. Instead list actual discussion topics and provide any schedules on the homepage.
- Don't offer a "Guestbook" sign in for business sites. Guestbooks make a site look amateurish and give no customer benefit. Sites that cater to clubs or subcultures, where users might enjoy some benefit from just getting their names in the book or seeing who else visited the site are excepted from this guideline.
Dates and Times
Users need to know that information they see on your homepage is current, but they don't necessarily need to see dates and times next to each item. When you do show dates and times, it's important to format them so that all users will be able to translate them to their local time.
- Show dates and times for time-sensitive information only, such as news items, live chats, stock quotes, and so forth. Don't show dates and times on e-commerce or other transaction sites that don't have time-sensitive material. It's not necessary to show the day of the week, but if you do, only do so if it is from the current week.
- Show users the time that content was last updated, not the computer-generated current time. Clearly indicate this distinction, with a phrase such as "Updated <date, time>."
- Include the time zone you are using whenever you reference a time. If your site has international users, show the time in the most common time zone, as well as relative to GMT, for example, 9:00 a.m. EDT or (GMT –4). Any localized homepages should show that location's local time, as well as the time relative to GMT.
- Use standard abbreviations, such as p.m. or P.M. Don't abbreviate further, such as "p."
- Spell out the month, or use month abbreviations, not numbers. Jan. 2, 2003 is much less ambiguous than 01/02/03, which could mean either the 2nd of January, or the 1st of February, since many countries conventionally mention the date, rather than the month, first.
Stock Quotes and Displaying Numbers
Because many homepages include stock quotes now, we've included a few guidelines to make them more readable and understandable. Although you can display stock quotes and numbers on any web page (and use these guidelines to optimize their display), it's especially important to follow these guidelines when displaying such information on the homepage, where even minute optimizations can reduce distracting clutter.
- Give the percentage of change, not just the points gained or lost in stock quotes.
- Spell out stock abbreviations unless the abbreviation is completely clear, such as "IBM." Many stock symbols are unintuitive, such as "C" for Citigroup, or "HWP" for Hewlett Packard ("HP" is taken by Helmerich & Payne).
- Use a thousands separator appropriate to your locale for numbers that have five or more digits. For example, in the United States, fifty-three thousand should be written "53,000."
- Align decimal points when showing columns of numbers. This makes it much easier for users to compare or mentally add and subtract numbers.
See also our separate report with 103 design guidelines for the Usability of the Investor Relations (IR) Area of Corporate Websites.
Homepage Design Conventions
In addition to the guidelines presented in this chapter, the next chapter (in the Homepage Usability book) presents design conventions that have evolved and are continuing to evolve on the Web based on our analysis of the homepages in this book. The chapter ends with our "Recommended Homepage Design" (page 52), which we suggest that you use, along with the guidelines in this chapter, to evaluate your existing homepage design and inform future designs.