Skip to content | Change text size
 

Page layout

On a web page, the most important elements should appear on the first screenful of information. As people set their monitors to different screen resolutions, the amount of information seen on the first screen varies. Browser toolbars also take up space. It is safe to assume that about 300 pixels will fit within the first screenful. Use this space to provide users with a clear indication of the page contents.

Don't overdo the navigation

On content pages content, not navigation, should be the primary focus. Resist overdoing navigation on these pages. Site designers may be interested in navigation, but users are interested in content and see navigation only as a means to an end.

Navigation should dominate on navigation pages (e.g. home and section home pages). See website navigation.

Create a visual hierarchy

Place images and text on pages in a way that creates a clear visual hierarchy. Creating a visual hierarchy helps to:

  • show importance or priority of elements on the page
  • show relationships between elements
  • aid scanning and comprehension

Show importance or priority

  • Place important elements nearer the top of the page
  • Make important elements bigger, bolder
  • Use whitespace around important elements to make them stand out

Show relationships

  • Use positioning to show relationships:
    • grouping items together or placing them in proximity to each other shows similarity or a family relationship
    • placing items independently shows there is no relationship
    • nesting items under another item shows a child/parent relationship
  • Presentation styles can also show relationships:
    • items presented with the same colour, size, orientation or font style indicate their similarity

Aid scanning and comprehension

  • Create contrast between page elements:
    • use headings and sub-headings
    • break text into short paragraphs
    • use bulleted lists
    • highlight (bold) key words or phrases
  • Use images, charts, graphs and/or tables to present or support complex information
  • Use left alignment for headings, sub-headings and text
  • Don't use all uppercase, always use sentence case

Consider page length

It is important to keep page length in mind when designing pages.

  • Use the first screenful of information to provide a clear indication of the page content.
  • Keep home pages and section home pages as short as possible.
  • Content pages can be longer if the page is well-structured with meaningful headings and sub-headings.

Avoid the use of named anchors

Named anchors provide navigation within a web page rather than around a website. Except in the case of the skip link, avoid using named anchors. They are often used in the belief they help users move around a long page, however:

  • users know how to scroll up and down a page
  • users are willing to scroll
  • if your page is well-structured with accurate and useful headings and sub-headings, users will be confident about scrolling to find information.

Named anchors may cause problems with users:

  • People expect links to take them to a new page.

Because named anchors and links appear the same when users click a link they expect to go to a new page. They can become confused/frustrated or think the link is broken when the same page reloads.

  • Named anchors break the back button.

Users often use the back button to navigate a site. If the user has clicked a named anchor they have to click the back button twice. Clicking the back button once will just reload the page they are presently looking at. This may cause confusion or frustration and may lead them to conclude that the browser back button is broken.

Aim for fast page download times

Despite the availability of faster download speeds there are still many users with slower connections. For example, off-campus students in rural areas may only have access to dialup modems. People accessing the web via their mobile phone may also have a very slow connection:

  • throughput of the server
  • the server's connection to the internet
  • the user's connection to the internet
  • bottlenecks in internet traffic
  • browser display speeds
  • size of page and page components.

Apart from the last two, web authors cannot do anything to improve page loading time.

Browser display speeds

Complex tables and frames can slow down display speeds, so:

  • avoid the use of frames
  • avoid nested tables
  • break larger tables up into smaller tables
  • avoid placing large media objects inside table cells; the table won't display until all the contents have downloaded.

Page size

Page size can be measured by adding up the size of all the page components (HTML file, images, stylesheets, etc).

  • Aim for home pages and section home pages no bigger than 40kb.
  • Keep other pages as small as possible.

Netmechanic's load time report measures page size.

See also

Resources

Books

These are available from the Monash University Library.

  • Jakob Nielsen, Designing Web Usability: The Practice of Simplicity
  • Steve Krug, Don't Make Me Think