home > usability > structure > page structure

page structure

There are many different styles of page structure, which often depend on the actual content within the page. As with many aspects of web design, the best results come after practise and experimentation. Use the Internet as a resource - copy ideas you like. But remember to consider usability.

• Home page
• Top of the page navigation
• Navigation panel
• Content area

Remember:

• Reading pattern starts at top left (languages that read from left to right) and zigzags down the page to the bottom right
• The navigation is the most important feature - but should occupy as little space as possible
• Place the most important information at the top - "above the fold" - viewable without scrolling down
  • Use the "inverted pyramid" - start with the conclusion
  • If you place any important information below the fold, some visitors may not see it and go to a different web site, rather than scrolling down.
  • You need to entice visitors to scroll down, but the home page is less likely to achieve this - put longer content on interior pages.
    • Once a visitor has clicked to further information, they are more likely to scroll.
• Vertically and horizontally align items on a page
  • Visitors can read the text quicker
• Important items should appear higher on the page so users can locate them
  quickly
• Put items which are repeated across the web site, such as the logo,
  navigation and search box, in a consistent position on all pages.
  • See the section on consistency
• Ideally shouldn't scroll excessively - split content onto several pages if necessary
• Don't specify a width
  • Should work across range of window sizes
  • Users hate horizontal scrolling
  • If the design dictates a specific width - design to 780 pixels width only
    • Most web users have screen resolutions of 800 pixels width or wider

The text should generally follow the heading sizes and styles set out in the style sheet. If you don't have a style sheet, the HTML text definitions should still be followed and the browser will display the default settings.

home page

Should ideally:

• Be designed differently from sub level pages
• Have no "home" button
• Larger logo at top left / other prominent place
• Tell the user where they are and what the site does
• Highlight new items within the site
• Have navigation into site
• Not have vertical scrolling

top of the page navigation

This should:

• Contain the company logo / name of site - best on the top left
• Links to a small version of a site map (the lid), which takes the user to previous parts of the site
  • This is often refered to as "breadcrumbs" - shows the user where they are in the site hierarchy
  • e.g. Home > Section > Current page
• Include a link to the home page

navigation panel

• Links to other areas of the site
• Coloured table cells / graphics - reinforces branding of the site
• Small as possible, without losing legibility - allow maximum space for the content

content area

The text content of a basic web page should be laid out in the following way: