home

Homepages are the most valuable real estate in the world - Jakob Nielsen

About Me

Resume
References
History

Writing

Information Science
Web Development
Nielsen in 20 mins.
113 Guidelines
Don't Make Me Think
20 Heuristics for Site Evaluation
Accessibility
Indonesia
Demography

Jakob Nielsen’s 113 Guidelines

These guidelines for homepage design are from "Homepage Usability: 50 websites deconstructed, 2001".

Communicating the Site’s Purpose

1. Show the company name and/or logo in a reasonable size and noticeable location. Average is about 70 pixels width or height.
2. Include a tag line that explicitly summarises what the site or company does.
3. Emphasise what your site does that’s valuable from the user’s point of view, as well as how you differ from key competitors.
4. Emphasise the highest priority tasks so that users have a clear starting point on the homepage.
5. Clearly designate one page per site as the official home page.
6. Don’t use the word “website” to refer to anything but the totality of the company’s web presence.
7. Design the homepage to be clearly different from all other pages on the site.

Communicating Information About Your Company

8. Group corporate information, such as About Us, Investor Relations, Press Room, Employment and other information about the company, in one distinct area.
9. Include a link to an “About Us” section
10. If you want to get press coverage include a “Press Room” or “News Room” link.
11. Don’t separate the web presence from the rest of the company - present a unified face to the customer.
12. Include a “Contact Us” link.
13. If you provide a “feedback” mechanism, specify the purpose of the feedback and who will read it.
14. Don’t include internal company info that should go on the intranet.
15. If you site gathers any customer information include a “Privacy Policy” link
16. Explain how the website makes money if it’s not self-evident.

Content Writing

17. 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. Use the words the customers use.
18. Avoid redundant content. Repeating identical items, such as categories or links, on the homepage in order to emphasize their importance actually reduces their impact. 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.
19. Don’t use clever phrases and marketing lingo.
20. Use consistent capitalisation and other style standards.
21. Don’t label a clearly defined area of the page if the content is sufficiently self-explanatory.
22. Avoid single item categories and single item bullet lists.
23. Use non-breaking spaces between words in phrases that need to go together in order to be scannable and understood.
24. Only include imperative instructions for mandatory tasks.
Don’t give the impression that users need to do something if it is in fact an option only.
25. Spell out abbreviations, initialisms and acronyms and immediately follow them by the abbreviation in the first instance.
26. Avoid exclamation marks.
27. Use all uppercase letters sparingly - as they are not as easy to read.
28. Avoid using spaces and punctuation inappropriately - eg L O B S T E R S would fail in search engines.

Revealing Content Through Examples

29. Use examples to reveal the site’s content, rather than just describing it - eg show the top five headlines rather than simply a link to Breaking News.
30. 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.
31. Provide a link to the broader category next to the specific example.
32. 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.

Archives & Accessing Past Content

33. 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.

Links

34. Differentiate links and make them scannable.
Begin links with the information-carrying word.
35. Don’t use generic instructions such as “Click Here” as a link name.
36. Don’t use generic links, such as “More…” at the end of a list of items. Tell them what they are going to get more of; eg “more news”.
37. Allow link colours to show visited and unvisited states. Reserve the default blue for unvisited links and a lighter less saturated colour for visited links.
38. Don’t use the world “Links” to indicate links. Use the known principle of blue underlines.
39. If the link does more than simply go to other web page (such as linking to a PDF file or launch an audio file) then state explicitly what will happen.

Navigation

40. Locate the primary navigation area in a highly noticeable place. Don’t place anything above a banner - “banner blindness”.
41. Group items in the navigation area so that similar items are next to each other.
42. Don’t provide multiple navigation area for the same type of links.
43. Don’t include an active link to the homepage on the homepage itself.
44. Don’t make-up words for category navigation choices. Use what users will already understand.
45. Link any shopping cart feature from the homepage.
46. Use icons in navigation only if they help users to recognise a class of items immediately (eg video content).

Search

The search feature must be able to be found effortlessly and easily.

47. Place a search input box on the homepage - not just a link.
48. Input boxes should be wide enough to see and edit standard queries. [My Comment: width of input boxes within tables under Netscape 4.x cannot be controlled].
49. Don’t label the Search are - simple use a “Search” button to the right of the box.
50. The home page search should be a “simple” search (unless site is specifically designed for advanced searching).
51. Search on the homepage should search the entire site by default.
52. Don’t offer a feature to “Search the Web” from the site’s search engine function.

Tools and Task Shortcuts

The key is to carefully choose which tasks to feature as tools on the homepage.

53. Offer direct access to high-priority tasks on the homepage (eg zero clicks for book for your flight now on an airline site).
54. Don’t include tools unrelated to tasks users come to your site to do.
55. Don’t provide tools that reproduce browser functionality (eg “make this your home page” or “bookmark this site”).

Graphics and Animation

Use graphics judiciously. Animation is best for explaining complex processes - not usually a homepage function.

56. Don’t use graphics for decoration, but to show real content.
57. Label graphics and photos if their meaning is not clear.
58. Edit photos and diagrams for the appropriate display size. It is often better to crop rather than to shrink and image.
59. Avoid watermark graphics - ie background images with text on top.
60. Don’t use graphics to solely draw attention to an item on the homepage.
61. Never animate critical elements of the page, such as the logo, tag line or main headline.
62. If there is an animated introduction - let users choose to skip it.

Graphic Design

Graphic design should not be the starting point, but a final step to draw appropriate focus to a customer-centred interaction design.

63. Limit the number of font styles, sizes and colours used.
64. Use high-contrast text/background colours to maximise legibility.
65. Fit all content into a 800x600 browser window, as this in currently standard screen size - avoid horizontal scrolling.
66. The most critical page elements should be visible “above the fold” - ie without vertical scrolling on an 800x600 window.
67. Use a liquid layout so the homepage size adjusts to different screen resolutions.
68. Use logos judiciously.

User Interface Widgets

…such as dropdown menus, selection lists and text boxes.

69. Never use widgets if you don’t want people to click them (eg make bullets next to text links clickable as well as the text links).
70. Avoid multiple text entry boxes (eg for passwords) in the area where people expect to see “Search” input text boxes.
71. Use drop-down menus sparingly, especially if the items are not self-explanatory (and thus need more detailing than can fit in the drop-down menu).

Window Titles

This the html TITLE element which appears at the top of the browser window.

72. Begin the window title with the information-carrying word -usually the company name - because users scan rather than read these.
73. Don’t include top-level domain names (eg com.) in the title (unless com. is part of the company’s name).
74. Don’t include the term “homepage” in the title.
75. Include a short description of the site in the window title.
76. Limit titles to seven or eight words or 64 characters.

URLS

77. Homepages for commercial sites should follow this convention: /li>
78. A country-specific site should use that country’s domain code.
79. Try to register domain names for alternative spelling, abbreviations, or common misspellings.
80. Following 79, redirect all alternatives to the “authorised” domain name.

News and Press Releases

81. Headlines should give maximum information in as few words as possible.
82. Write self-contained summaries of news items for the front page - not just the start of the article following by “more…”
83. Link the headline to the full story.
84. A time and date at the top is enough to indicate that news is current - no need to put a time and date against all stories.

Popup Windows and Staging Pages

85. Splash pages must die! Take users direct to the “real” homepage.
86. Avoid popup windows. Users think they’re ads; and when they “go away” they are hard to find again.
87. Only route users to choose their geographical location if this relates to different languages used on the site.

Advertising

88. Keep ads for outside companies on the periphery of the page.
89. Keep these as small and discreet as possible.
90. If you place ads outside the standard banner area at the top of the page - then label them as ads.
91. Avoid using ad conventions to showcase regular features of the site.

Welcomes

92. Don’t literally welcome users to the site.
If you must - then place it in the tag line.

Communication Technical Problems and Handling Emergencies

93. If parts of the website are down or unavailable show it clearly on the homepage.
94. Have a plan for handling critical content on your website in the event of an emergency.

Credits

95. Don’t waste space crediting the search engine, design firm etc.
96. Exercise restraint in displaying awards won by your website.

Page Load and Refresh

97. Don’t automatically refresh the homepage to push updates to users.
98. When doing a refresh, update only content that has actually changes, such as news updates.

Customisation

99. If your homepage has areas that will provide customised information once you know something about the user, don’t provide a generic version of the content to first-time users.
100. Don’t offer users features to customise the basic look of the homepage user interface, such as colour schemes.

Gathering Customer Data

101. Don’t just provide a link to registration - explain the benefits first.
102. Before asking for email addresses - explain the benefits and frequency of your newsletters or publications.

Fostering Community

103. If you have chat or forums don’t just link to that area but list actual discussion topics and provide any schedules on the homepage.
104. Don’t offer a “Guestbook” sign-in for business sites.

Dates and Times

105. Show dates and times only for time-sensitive information.
106. Show users the time that content was last updated - not the computer-generated current time.
107. Include your time zone (relative to GMT) whenever you reference a time.
108. Use standard abbreviations, such as p.m.
109. Spell out the month or use month abbreviations (not 01/03/2003).

Stock Quotes and Displaying Numbers

110. Give the percentage of change, not just the points gained or lost.
111. Spell out stock abbreviations where necessary.
112. Use a thousands separator.
113. Align decimal points in columns.