Visual Hierarchy

Web pages have an implicit flow starting from the 'origin' in the top-left corner.

Things positioned nearer the origin have an implicit superiority over those below them.

Page origin

People in the West read from left to right and from top to bottom. The origin is the point where you start decoding a page - the top-left corner of the screen. Also, because of the way HTML is rendered, the origin is the only point that is always fixed. It will not move, even if the page is resized.

The whole visual hierarchy of a page normally hangs off the origin. Order flows in a 'cascade' from the top-left to the bottom-right. It can go either way (left-to-right and loop, or top-to-bottom and loop).

The origin is the superior point on the web page. An element placed at the origin visually dominates the whole page, because it comes first. Following the cascade down and to the right, an element that sits above or to the left of another element will appear superior.

The homepage of web design house Eonic is very well presented, but the layout feels unnatural, with a top-right bias.

Using the innate visual hierarchy to expose a clear information hierarchy

Following the cascade can make it easy to lay out a page for clear ranking and relationships between elements. Each numbered item refers to diagram below. Note: 'box' doesn't necessarily mean an actual graphical box. It may be a suggested container (see article on containment)

1. The element representing the site belongs near the origin (normally the logo / 'site ID')
2. Some navigation and functions belong to the site, e.g. "Site search", "Login" etc. These should therefore be placed adjacent at site-level (i.e. in the same box as the site ID), but inferior to the site ID because they are part of the site. Note also the conventional site-level navigation at the foot of the page, which must exist outside all other containers, which counters the fact that it is below the other elements on the page.
3. Sections within the site belong below the site ID and all site-level navigation and functions. The identifier (title) for the current section should dominate everything that belongs within the section.
4. Navigation to other sections are peers of (equal to) the current section, so they should be adjacent to it, possibly in the same box.
5. The box immediately beneath (dominated by) the Section ID represents the section, and contains everything that belongs in the section.
6. Navigation around a section (second-level nav) must reside within the section container.
7. The page is part of the section. Any navigation within a page must reside in the page container.

Example of a classic cascade

Diagram shows a classic 'cascade', where each nested element visually exhibits its position in the information hierarchy.

A real-world example

Applying the classic layout above:

• The logo (1) is the nearest element to the origin
• In this example, the only site-level navigation (2) is the 'Log out' link in the login status box beneath the site ID. Because this box is outside the whole box dominated by the 'Community' tab, it is in the same space as the site ID, and is therefore site-level navigation, even though sits physically below the tabs.
• The 1st-level navigation tabs (4) (Community, Chat etc.) are to the right of the site ID (inferior), and slightly below it (reinforces inferiority)
• The site section ID (3) role is done by the active tab (Community).
• The second level navigation (6) is provided by the second row of tabs (home page, blog, gallery). Because these all sit inside the section (5), beneath the section ID ('Community' tab), they are clearly all part of 'Community'.
• The page, identified by its ID/title (7) is clearly a child of the section (5).
• The page title (7) is superior to its content (8).

Following the hierarchy further:

• The text at the top of the page applies to all the images, because it is both above and to the left of them.
• Each picture has a child Caption (property), shown by the caption being to the right and slightly below the image.
• The 'Update' (function) is a child of the Caption, because it's situated to its immediate right, and is also lower.