A guide to Homepage design


Below is a guide to how a homepage should be created based on a book by Jacob Nielsen called 'Homepage Usability'. All those artists out there, who don't want to follow a particular guideline, take care. Know when to follow rules and when to bend them.

Screen Real Estate

Web pages should be dominated by content of interest to the user.

Task 1: Work out the site usage

  • Make a screen grab of a homepage that you like.
  • Resize it in photoshop so that it is 800 x 600 pixels- draw boxes with a low opacity fill to represent the following:
    • Content of interest - green fill
    • Navigation - brown fill
    • Unused / Other - leave white
  • Calculate the pixels used for each category and work out the % for each. (use Excel)
  • You should be aiming for around 50-80% for content and below 20% for navigation

example

 

The latest and the greatest

Be careful with using the latest technology. With an upgrade speed of about 1% a week, it will be a year before the majority of users will be able to access your fancy new site and around 2 years before it will be the norm. Even after FCS (first customer shipment) of a product, it will normally have some bugs in it. Let somebody else make the mistakes and keep your life simple.

A lot of people have never upgraded their browser.

Task 2

  1. Use the guidelines below and 'mark' your page against these criteria. (out of 50)
    You can use this form to record your results.

 

Communicating the Site's Purpose

  1. Show the company name and or logo in a reasonable size and noticeable location - usually upper left around 68 pixels high (recommended 80 x 68 pixels)
  2. Emphasize what your site does that's valuable.
  3. Emphasize the highest priority tasks so that users have a clear starting point on the homepage
  4. Design the homepage to be clearly different from all the other pages on the site

Content Writing

  1. Avoid repeated items or links
  2. Spell check
  3. Don't require users to read long continuous blocks of text - use very short paragraphs, subheadings and bulleted lists. People don't read much of the web content, they actually skim through it. (one survey by Nielson claimed 79% of users were scanning rather than reading)
  4. Use links to split up long information into multiple pages - divide into categories - don't split up the same continuous argument.
  5. Use simple language
  6. Users often only read the first sentence of each paragraph - so 'one idea per paragraph'
  7. Use consistent capitalization and other style standards - or people will read meaning into things when they shouldn't - some items will be unintentionally emphasised. (see repetition)
  8. Don't label a clearly defined area of the page if the content is sufficiently self-explanatory- For example, there is no need to use the title 'main news heading' because the size and placement itself should indicate it's role
  9. Avoid single-item categories and single item bulleted lists
  10. Avoid exclamation marks!
  11. Use all uppercase letters sparingly or not at all as a formatting style

Revealing Content Through Examples

16. Use examples to reveal site content rather than just describing it

Archives and Accessing Past Content

17. Make sure that it it is easy to access anything that has been recently featured on your homepage - include a list of recent features and a link to an archive

Links

  1. Begin links with the information-carrying word. Keep the links as specific and brief as possible
  2. Don't use instructions, such as 'click here' as a link name - instead use meaningful text in the link itself.
  3. Don't use links with 'more' at the end of an item, instead tell users specifically what they will get more of i.e. more new fiction
  4. Allow link colours to show visited and unvisited states (74% in the survey did this)
  5. Don't use the word 'links' to indicate links on the page - show links as blue underlined text
  6. If the link does anything other than go to a new page, such as open an audio file or pdf, make sure that it is very clear what will happen.
  7. Make sure the main navigation area is highly noticeable - four main types are: left-hand rail, tabs (Amazon), across the top, categories in the middle (yahoo!)
  8. Group like items next to each other in navigation area (see proximity)
  9. Don't include an active link to the homepage on the homepage
  10. Only use pictures in navigation if they are obvious!

Search

  1. One of the most important elements - give users an input box on the homepage. (we cannot do this in our sites)

Graphics and Multimedia

  1. Use to show real content, not just decoration - should have a direct connection with your site
  2. Label graphics if their meaning is not clear from the context of the story
  3. Edit for the display size
  4. Be careful if you use animation, it can distract from other elements - only use if vital to your site
  5. Never animate critical elements - such as headlines

Graphic Design

  1. Limit font styles and other text formatting - Do not use more than two font styles (see repetition)
  2. Use high contrast text and background colours so that type is as legible as possible
  3. Avoid boxes with horizontal scrolling - they can look good, however, there are major usability issues
  4. Make sure you will not need to scroll to see the main content when at a resolution of 800 x 600 (known as keeping content 'above the fold')
  5. Use a liquid layout, so that the homepage size adjusts to different screen resolutions - that works from anything between 620 - 1024 pixels
  6. Be careful with using too many other company's logos - they can clog up your site
  7. As a rule of thumb, allocate between 5 and 15% of the homepage to images - more is possible, but make sure they are vital and do not slow your site down beyond effective use
  8. No Frames

Window titles - found in the header

  1. Begin the title with an information-carrying word So that it will bookmark alphabetically the company name is usually used without an, a, the etc.
  2. Don't use homepage in the title
  3. Use a short description of the site in the title
  4. Limit to no more than 7 or 8 words and fewer than 64 characters

Popup Windows

  1. Avoid them

Dates and Times

  1. Show the date the page was updated last
  2. Spell out the month don't just use numbers

Download time

  1. Maximum of 10 seconds for the homepage to load - around 30k is best for Viet Nam. A maximum would be 50k (this will change as bandwidth increases). 10s is around the limit for keeping user's attention focused

What do you think of the page?

50. Is it any good!