Information on using a tiled menu as a primary method of site navigation

We use a tiled menu as the primary navigation on the homepage of the site. Each tile represents a topic to allow users to browse content in addition to the targeted search facility.

Tiled menu with first tile showing the hover state applied.

Design Theory The use of tiles provides a visual form of navigation, which is particularly useful for creating interest and engaging users on a mainly text-based site. Tiles also act as a content filter, enabling users to browse and select high level topics, progressing to more detailed information in each area.

Each tile is easy to select as it has a large click or tap area, reducing the chances of accidental selection. Due to the layout, tiles are also naturally easier to remember spatially, allowing returning users to remember the location of the content they want to read.

Tiles also allow visual elements to be incorporated such as icons or other design features. In the tiles, we incorporate a bar detail and alter the features of some text in the hover state to indicate selection for users.

Usage Tiles are suited to the use of short text labels which describe topics that content is sorted into. Although tiles enable flexibility for new areas and sections to be added to the menu, the number of tiles should be limited for maximum impact.

Tiles should also be used with hover and active states to visually demonstrate selection and functionality to users. The use of tiles in combination with other types of navigation will also deliver an impression of progression for users.

We use three levels of navigation throughout the site, with filtered content displayed at the fourth level or before - this restriction ensures that users always navigate to content with a maximum of three clicks.

Accessibility All text included on tiles should be readable by assistive technology such as screen readers and tiles must be operable by a keyboard in addition to a mouse.