Key takeaways

  • Build a clear information architecture听to help users find what they need efficiently.
  • Keep site structure wide and shallow听to avoid disorientation and improve navigation.
  • Use umbrella pages听to guide users from general topics to detailed subpages.
  • Apply visual hierarchy听to highlight key content and support easy scanning.
  • Limit related content on deep pages听to avoid distraction and keep focus on the main topic.

Information architecture

Information architecture refers to how听to organize and maintain your content, what the relationships are between each piece of content, and how content is visibly displayed on your website鈥檚 navigation.
illustration structure

The goal of a well-structured website with a good information architecture is that users can efficiently:

  • Find information
  • Identify where information sits within the website
  • Use the website to complete their task

Keep navigation labels short and descriptive. Users should be able to understand where a label will lead them with a quick scan.

The better the information architecture, the better the user experience. This in turn has positive knock-on effects on the content and the business.

Good practices

A wider and flatter structure lets users more efficiently find what they need. The deeper the structure, the higher the likelihood that users may become disoriented.听That is why a structure with a maximum of 3 or 4 levels is recommended.
听

Homepage

Umbrella page

Content page

Page types

Overview of page types, including their definition, purpose, variations, and recommended sections. Please note that this list is not yet exhaustive.

Relevant and related content

Homepage

1st level of hierarchy

illustration 70% to 30%

Umbrella page

2nd/3rd level of hierarchy

illustration 80% to 20%

Content page

Deeper level of hierarchy

illustration 90% to 10%

The page type also determines what kind of content should go on the page, with the information becoming more detailed on pages deeper in the site structure.

A top-level page provides brief, general information, such as a summary of what might be found on a content page.

The content page contains specific, detailed information, which is focused and dense.

Each page will also contain links to related topics, marketing content, or references. This will decrease as the information becomes more detailed.

Good practices

At the content-page level, related content can sometimes be unnecessary, irrelevant, overwhelming, or distracting.听It is best to limit related content to about 10% of the content page.

User relevant info

Related content

How to use umbrella page

  • Include teasers to relevant content.
    The page should offer general topic information and guide users to detailed subtopics using teasers and links.
  • Structure the material for easy scanning.
    Ensure that the teasers for various subtopics are visually separated and that the appropriate links for each are easy to spot.
  • Avoid excessive detail.
    An umbrella page should not have detailed subtopic information. If removing details leaves the page too sparse, create a content page to combine all the information.
  • Include all relevant subtopics.
    Missing subtopics can confuse users, making them restart their search or think a product or service is not offered, leading them to look elsewhere.

Clear page structure and hierarchy

Guide the eye to prioritize design elements by their importance

  • Hierarchy can be implemented through variations in scale, value, color, spacing, placement, and a variety of other signals.听
  • Use highlighting on the one hand, and meaningful and structured headings on the other, to allow easy scanning by the visitor.
  • The goal of a good website structure is to help users quickly and easily find the information they need.
A/B testing insight
Place components higher for better visibility.
Before go live
Reviewing thoroughly before going live is essential.
Descriptive simplified graphic on the topic

How to structure content based on hierarchy

  • Keep visual hierarchy in mind

    Consider visual hierarchy and reading patterns when organizing content on the page.

  • Place important information first

    Put key points in the headline and summary paragraph. Save background and low-importance info for further down the page.

  • Use headings and subheadings

    Help users quickly jump from one idea to the next with the regular use of descriptive headings and subheadings.

  • Play with white space

    Use the spacer configuration to group related elements with narrow margins and set off different sections with larger margins.

UX best practices overview

Fundamentals

Web creation

Practical resources

Get inspired