Page layout

Below are examples of conventional web page layouts. These layouts are established by web convention and the general theme should be used wherever possible so that users know where to find things.

Fig. 1 – Home page example layout

Fig. 2 – Content page example layout


The header area is displayed at the top of all pages. It communicates the organisation‘s branding and the purpose of the site.

Usability guidelines

  • Ensure the header area is consistent across all pages of the site.
    Helps users recognise that they are on a page of your site.
  • It may be used to house a limited number of persistent links to commonly used pages or functions such as sitemaps, generic existing customer areas or logon functions. Search is also typically located in the right side of the header.
    Gives users consistent access to common pages or functions.

Common mistakes

  • Making the header too deep forcing users to scroll to get at the content.
  • Cramming too many links into the header area.

Usability guidelines

  • The company logo should sit in the top left part of the header.
    Helps users recognise that they are on a page of your site.
  • The logo should link to the homepage of you site.
    Gives users a consistent way to navigate back to the homepage. Useful if users get lost.

Common mistakes

  • Having the logo on the homepage link to itself causing an unnecessary page refresh.

Main navigation bar

The main navigation bar should sit below the header and contains a row of horizontal tabs which link to the main categories of the site.


Left navigation area

When a main navigation bar is used the left column of the page should contain secondary navigation links. For sites which do not use the main navigation bar the left hand column should be used for the primary navigation.


Page title

Each page should have an H1 page title positioned in the top left of the content area. Correct use of a page title helps the user understand where they are and what to expect from the page‘s contents. Exceptions are the homepage and possibly transactional pages where the communication of the step is managed differently.

Usability guidelines

  • Each page, except the homepage, should have a unique H1 page heading positioned in the top left of the content area.
  • This is a concise description of the page‘s contents and should be closely associated to the link labels that access the page.
    Helps the user identify that they are on the correct page especially in relation to the link they have just clicked.

Common mistakes

  • Having a page header that is inconsistent with the links pointing to that page.

Main content area

The main area for content on the page should be located in the centre column of the page.

Usability guidelines

  • The right column of the page may be used for associated information and promotional material.
    User research has found that typically this is the last area on a web page a user will look and should therefore not display key information.

Common mistakes

  • Having important information on the right hand side.
  • Having too much superfluous content on the right hand side. This makes it harder for users to find what they‘re looking for.

The footer area is located below the content at the bottom of the page.

Usability guidelines

  • Ensure the footer is displayed consistently on every page.
  • Use the footer to display permanent links that relate to general information about the site.
  • Use a horizontal keyline to denote the end of the page.
    Users recognise the footer as the end of the page and will expect there to be links to general information about the company or use of the site.

Fig. 3 – example footer layout


Screen resolution

Usability guidelines

  • Ensure the website can be easily viewed on all relevant device types.
    Websites can be displayed differently on various screen sizes and resolutions.
  • Websites should be designed responsively.
    This will ensure a consistent experience for users irrespective of the device they are using.

Common mistakes

  • Assuming all users have large screens.

Scrolling

Users are prepared to vertically scroll if they believe there is additional useful information further down the page, particularly now that mobile and tablet use is becoming more prevalent.

Usability guidelines

  • Ensure the visual design of the page gives an indication that there is content below what is currently visible on the screen. This could be done with a vertical keyline.
    Helps users recognise that there is more content to view.

Common mistakes

  • Displaying a page which looks complete when there is content below the fold. This often happens with horizontal keylines which suggest the end of the page.
  • Creating pages that require horizontal scrolling. (This should never be used).

Browser title bar

Usability guidelines

  • Ensure each page has an appropriate title that is displayed in the browser top bar as described in the HTML <title> tag.
    Helps users identify the web page being displayed by the browser when the browser is minimised or obscured by other windows (and in bookmarks and browser history).
  • Ensure the title tag contains the page name first and then the company.
    Ensures that pages can be identified when multiple browser pages are minimised. Also, it is unhelpful if screen readers keep repeating the company name when asked to identify minimised windows.

Common mistakes

  • Having the company name at the start of the title tag.

Fig. 4 – example of bad use of the title tag


Favicons

Usability guidelines

  • Ensure each page has a favicon icon.
  • Ensure a proper “.ico” icon format is used.
    The icon is displayed in the browser address bar as well as next to the page name in browser tabs and shortcuts. It helps the user identify the page and its association with the company.

Fig. 5 – example of favicon use


Colours and visual design

Usability guidelines

  • Ensure there is sufficient contrast between text and its background colour or image.
    Many users will have problems discerning content if there is not adequate contrast between the foreground and background colours.

Fig. 6 – example of good colour contrast

Common mistakes

  • Having insufficient colour contrast between foreground text and background colour

Fig. 7 – example of bad colour contrast

More information


Page weight and download speeds

Usability guidelines

  • Optimise pages for fastest possible download times
  • Constantly challenge unnecessary content and images
    More and more devices are now using either a cellular data network, or are sharing a wifi network to access the web. The need for web pages that are quickly downloadable is therefore great, and unnecessary content or large images will only increase download times.

Common mistakes

  • Assuming all of your users will have a fast network.