✎ Technique: Consistent layout

Consistency is one of the cornerstones of good usability. Although it is possible in advanced CMSs to create radically different page layouts according to content type, it's important that areas outside of the page’s content area remain consistent across the site for wayfinding purposes. This can be controlled through carefully designing and implementing page templates.


Imagine that your page layout consists of a navigation area placed at the top of the page, a sidebar for supplementary content on the right, and a larger main content on the left:

Page layout represented by labeled boxes with navigation at the top, with main content (left) and sidebar (right) underneath.

Naturally, the contents within "main content" should vary between pages. In some cases, the supplemental information may change too. However, the navigation should remain consistent across pages. Think of the navigation region as a tool: On any page, the user may want to use this tool, so they'll expect to find it where they left it.

Bad example

Page layout as above but with navigation missing

In this iteration of the original layout, the navigation has been removed. Not only does this remove the user’s primary means to traverse the site, but the radical change in layout might lead them to believe that they've gone to a different website altogether.

Bad example

A page layout where the sidebar has been moved to the left of the main content

In this example, the sidebar has been moved from the right to the left of the main content. Despite all the same information still being present, this rearrangement is likely to be jarring. In the early stages of wireframing, an optimal page layout, centered on the main content, should be decided on and respected throughout the site.

When creating page content, use a consistent layout across pages. For example, if you place links to page sections at the top of one page, make sure you do the same for similar pages.