Homepage
Homepage
The homepage is the most important page on any web or mobile site, getting more page views than any other page. Of course, users don’t always enter a website from the homepage. A website is like a house in which every single window is also a door people may follow links from search engines and other websites that reach deep inside your site. However, one of the first actions these users will take after arriving at a new web or mobile site is to go to the homepage. Deep linking is very useful, but it doesn’t give users the overview of a site that they can get from the homepage‑if the homepage design follows strong usability guidelines, that is.
Other aspects of web usability are important as well but the homepage is the most important page on your site and we should feel it warrants extra attention and its own focus.
In the initial years of commercial web projects, we user advocates were kept busy fighting against design excess and fashion‑driven sites that contradicted everything we knew about user behavior. Our first battle was to defeat the horrible, user‑hostile designs promoted by glamour agencies and people who wanted to make the Web into television. We have partly won this battle, but we have not yet succeeded in making the Web into a truly usable environment that supports users’ goals and maximizes companies’ returns on investments. Stopping bad design doesn’t guarantee good design; it just eliminates the worst flops that nobody would be using anyway.
-
Communicating the Site’s Purposes
- Show the company name and/or logo in a reasonable and noticeable location
- Include a tag line that explicitly summarises what he site or company does
- Emphasise what your site does that’s valuable from the user’s point of view, as well as how you differ from key competition
- Emphasise the highest priority tasks so that users have a clear starting point on the homepage
- Clearly designate one page per site as the official home site
- On your main company website, don’t use the word “website” to refer to anything but the totality of the company’s web presence
- Design the homepage to be clearly different from all the other pages on the site
-
Communicating information about your company
- Group corporate information, such as About Us, Investor Relations, Press Room, Employment and other information about the company, in one distinct area
- 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
- If you want to get press coverage for your company, include a “Press Room” or “News Room” link on your homepage
- Present a unified face to the customer, in which the website is one of the touch-points rather than an entity unto itself
- Include a “Contact Us” link on the homepage that goes to a page with all contact information for your company
- 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
-
Content Writing
- 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
- Avoid redundant content
- Don’t use clever phrases and marketing lingo that make people work too hard to figure out what you’re saying
- Use consistent capitalisation and other style standards
- Don’t label a clearly defined area of the page if the content is sufficiently self-explanatory
- Avoid single-item categories and single-item bulleted lists
- Use non-breaking spaces between words in phrases that need to go together in order to be scannable and understood
- Only use imperative language such as “Enter a City or Post Code” for mandatory tasks, or qualify the statement appropriately
- Spell out abbreviations, initialisms, and acronyms, and immediately follow them by the abbreviation, in the first instance
- Avoid exclamation marks
- Use all uppercase letters sparingly or not at all as a formatting style
- Avoid using spaces and punctuation inappropriately, for emphasis
-
Revealing Content through Examples
- Use examples to reveal the site’s content, rather than just describing it
- 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
- Provide a link to the broader category next to the specific example
- 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 and Accessing past Content
- 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 feature as well as putting recent items into the permanent archives
-
Links
- Differentiate links and make them scannable
- Don’t use generic instructions, such as “Click Here” as a link name
- Don’t use generic links, such as “More…” at the end of a list of items
- Allow link colours to show visited and unvisited states
- Don’t use the word “Links” to indicate links on the page. Show that things are links on the page. Show that things are links by underlining them and colouring them in blue
- 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
-
Navigation
- Locate the primary navigation area in a highly noticeable place, preferably directly adjacent to the main body of the page
- Group items in the navigation area so that similar items are next to each other
- Don’t provide multiple navigation areas for the same type of links
- Don’t include an active link to the homepage on 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
- If you have a shopping cart feature on your site, include a link to it on the homepage
- Use icons in navigation only if they help users to recognise a class of items immediately, such as new items, sale items, or video content
-
Search
- Give users an input box on the homepage to enter search queries, instead of just giving them a link to a search page
- Input boxes should be wide enough for users to see and edit standard queries on the site
- Don’t label the search area with a heading; instead use a “Search” button to the right of the box
- Unless advances 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
- Search on the homepage should search the entire site by default
- Don’t offer a feature to “Search the Web” from the site’s search function
-
Tools and task shortcuts
- Offer users direct access to high-priority tasks on the homepage
- Don’t include tools unrelated to tasks users come to your site to do
- Don’t provide tools that reproduce browser functionality, such as setting a page as the browser’s default starting page or book-marking the site
-
Graphics and animations
- Use graphics to show real content, not just to decorate your homepage
- Label graphics and photos if their meaning is not clear from the context of the story they accompany
- Edit photos and diagrams appropriately for the display size
- Avoid watermark graphics (background images with text on top of them)
- 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
- Never animate critical elements of the page, such as the logo, tag line, or main headline
- Let users choose whether they want to see an animated intro to your site – don’t make it the default
-
Graphics
- Limit font styles and other text formatting, such as sizes, colours, and so forth on the page because over-designed text can actually detract from the meaning of the words
- Use high-contrast text and background colours so that type is as legible as possible
- 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 (800×600 at the of this writing)
- Use a liquid layout so the homepage size adjusts to the different screen resolutions
- Use logos judiciously
-
UI Widgets
- Never use widgets for part of the screen that you don’t want people to click
- Avoid multiple text entry boxes on the homepage, especially in the upper part of the page where people tend to look for the search feature
- Use drop-down menus sparingly, especially if the items in them are not self-explanatory
-
Window Titles
- Begin the window with the information-carrying word – usually the company name
- 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”
- Don’t include “homepage” in the title. This adds verbiage without value
- Include a short description of the site in the window title
- Limit window titles to no more than seven or eight words and fewer than 64 title characters
-
Window Titles
- Begin the window with the information-carrying word – usually the company name
- 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”
- Don’t include “homepage” in the title. This adds verbiage without value
- Include a short description of the site in the window title
- Limit window titles to no more than seven or eight words and fewer than 64 title characters
-
URL’s
- Homepages for commercial websites should have the URL http:/www.company.com (or an equivalent for your country or non-commercial top-level domain)
- 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
- If available, register domain names for alternative spellings, abbreviations, or common misspellings of the site name
- If you have alternative domain name spellings, choose one as the authorised version and redirect users to it from all other spellings
-
News and press releases
- Headlines should be succinct, yet descriptive, to give maximum information in as few words as possible
- Write and edit specific summaries for press releases and news stories that you feature on your homepage
- Link headlines, rather than the deck, to the full news story
- 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
-
Pop-up windows and staging pages
- Take users to your “real” homepage when they type your main URL or click a link to your website
- Avoid popup windows
- 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
-
Advertising
- Keeps ads for outside companies on the periphery of the page
- Keep external ads (ads for companies other than your own) as small and discreet as possible relative to your core homepage content
- 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
- Avoid using ad conventions to showcase regular features of the site
-
Welcomes
- 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
-
Communicating technical problems and handling emergencies
- If the website is down or important parts of the website are not operational, show it clearly on the homepage
- Have a plan for handling critical content on your website in the event of an emergency
-
Credits
- Don’t waste space crediting the search engine, design firm, favourite browser company, or the technology behind the scenes.
- Exercise restraint in displaying awards won by your website.
-
Page reload and refresh
- Don’t automatically refresh the homepage to push updates to users.
- When doing a refresh, update only content that has actually changed, such as news updates
-
Page reload and refresh
- Don’t automatically refresh the homepage to push updates to users.
- When doing a refresh, update only content that has actually changed, such as news updates
-
Customisation
- 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 first0time users – craft different content for that space
- Don’t offer users features to customise the basic look of the homepage UI, such as colour schemes.
-
Gathering customer data
- Don’t provide plain links to registration on the homepage; instead explain (or at least link) the customer benefits of registration.
- Explain the benefits and frequency of publication to users before asking them for their email address.
-
Fostering Community
- If you support user communities with chat or other discussion features, don’t show generic links to them.
- Don’t offer a “Guest-book” sign in for business sites.
-
Dates and Times
- Show dates and times for time-sensitive information only, such news items, live chats, stock quotes, and so forth
- Show users the time that content was last updated, not the computer-generated current time
- Use standard abbreviations, such as p.m. or P.M.
- Spell out the month or use month abbreviations not numbers