Modeling navigation

As powerful as Contentful is in delivering content to different platforms, websites are still huge (both in size and importance). Understanding how best to model your content to fit your website is massively important.

The problems, such as they are, arise from the fact that developers often want to return navigation in a single API call, and editors want to be able to see their information architecture reflected in their content hierarchies within Contentful. If we treat website navigation solely as "... a visual representation of an information architecture, to help users navigate around the website," (Wikipedia) that’ll go some way to helping us think about approaches to navigation that will hopefully not annoy your editors (too much).

Although navigation acts as a representation of the IA of a website, it doesn’t ultimately need to be this (although that is one technique). It could be simply represented as a set of labels and hyperlinks. More complex navigation systems may also require these label/hyperlink combinations to have a representation of hierarchy (maybe a parent or a child) and then a navigation element could be accessed from multiple places and be repeated. Pages may exist but the owner may not want them listed on the navigation or a separate section of the website might need its own navigation. The mobile version might have its own navigation, or different languages might want their own types of navigation. Some navigation could have a sub menu, some might not...

Let’s just say it could get complicated. If we work out how we could think about approaching modeling navigation in some generic ways, most of the above scenarios should be covered, and we get a content model that is a joy to use by both developers and editors.

As with any content modeling exercise, starting with a full understanding of your content and working from there goes a long way to being efficient in your decision making process. Working on paper, with sticky notes or on a whiteboard first can also help save time in the long run, as your mental model can change as new information is gathered. I would also recommend that the modeling exercise is done cross-functionally with a team of designers, developers, and editors (at the very least).

It is recommended that, if you haven’t already, you read up on Topics and Assemblies first.

What is navigation modeling?

Navigation modeling is the process of designing and planning a navigation system for a website. The navigation model helps determine how content will be organized and presented to users. A navigation model is important because it helps you organize your website's content in a way that makes sense to your users. If your website's content is not organized properly, users will have difficulty finding what they're looking for in the same way as someone might have difficulty referencing a large text without a table of contents. This can lead to frustration and eventually cause them to leave your site altogether. When designing navigation nodes, there are three key factors you need to consider:

  • The structure of your website's full text
  • How users interact with your site
  • The desired user experience

The structure of your website's content includes the hierarchy of your pages and the relationships between them. This is called hierarchical website navigation. The way users interact with your site includes how they navigate through your content and what actions they take while on your site. The desired user experience is the overall feeling you want your users to have when using your site. Do you want them to feel informed, empowered, or entertained? These are important questions to ask yourself when designing your site.

Why make a navigation model?

Creating a navigation model isn't just beneficial for your end-user, it's also beneficial to your company's bottom line. Generally speaking, if you can assemble a perfect content navigation model, you can better guide prospective customers down your sales funnel and boost the usability of your product.

This makes streamlining the customer journey much simpler and provides a great opportunity to boost your website's conversions.

Types of website navigation

Website navigation is a more extensive topic than it seems. There are three main types of website navigation: hierarchical navigation, global navigation, and local website navigation. Let's discuss each type below:

Hierarchical website navigation

Hierarchical navigation is the most common type of website navigation. It's also sometimes called "tree-like navigation" because it mirrors how content is organized in a file system.

Hierarchical navigation starts with a home page and branches out from there. Each subsequent page has a narrower focus than the one before it. This type of navigation is easy to understand and use because it mirrors how we naturally think about organizing information.

Global navigation

Global navigation is similar to hierarchical navigation in that it also starts with a home page and branches out from there. However, global navigation includes links to all pages on the site on every single page. This type of navigation is beneficial because it allows users to access any page on the site from anywhere on the site. However, it can also be overwhelming for users if there are too many links.

Local website navigation

Local navigation is specific to a single page on a website. It includes links that allow users to navigate within the content of that particular page. This type of navigation is common in long-form articles and blog posts. This allows users to quickly jump to the section of the page they're interested in without having to scroll through all of the content.

Ways of structuring navigation models

There are four ways you can structure your navigation modules:

  1. Sequential navigation
  2. Random navigation
  3. Linear navigation
  4. Hierarchical navigation

Find a more detailed explanation of each navigation structure below:

Sequential navigation

Sequential navigation is also sometimes called "wizard navigation." It's a type of navigation where users must complete one task before moving on to the next.

This type of navigation is common on ecommerce sites during the checkout process. This forces users to complete tasks in a specific order, which is useful for these types of websites.

Random navigation

Random navigation is similar to sequential navigation because it also requires users to complete one task before moving on to the next. However, with random navigation, the order in which tasks are completed is not predetermined.

This type of navigation is common on sites that have a lot of content, such as news sites and social media sites. This is a great option for consumers as it allows them to consume content in any order that they choose rather than consuming content on autopilot.

Linear navigation

Linear navigation is a type of navigation where users can access any page on the site from any other page on the site. This type of navigation is common on blog posts, tutorials, and long-form articles.

This is an ideal model because it allows users to jump to any section of the content they're interested in without having to scroll through all of the content.

Hierarchical navigation

Hierarchical navigation is a type of navigation where each subsequent page has a narrower focus than the one before it. This type of navigation is also common on ecommerce sites.

This is advantageous because it allows users to drill down into a specific category of products without having to scroll through all of the products on the site.

Below are some more ways you can structure your content navigation model:

Conclusion

Creating a navigation model simply depends on how well you understand your target audience, sales funnel, and your industry's customer journey. Consulting with stakeholders from your sales and marketing teams will ultimately help you deliver a suitable content navigation model for your digital product.

Contentful makes it easy to arrange your navigation model without the headache. Sign up for a free Contentful account or request a demo to see how our product can simplify the entire process.

Frequently asked questions (FAQs)

Q. What are the types of website navigation? The different types of website navigation are hierarchical navigation, global navigation, and local website navigation.

Q. What is a navigation diagram? A navigation diagram is a digital mockup of how a product’s navigation will look once the final design is complete.

Q. What is navigation hierarchy? Navigation hierarchy is a model where content types are assembled by parent and child. Top-level pages called parents are more extensive. Support pages are called children and complement the parent pages.

Don't miss the latest

Get updates in your inbox
Discover how to build better digital experiences with Contentful.
add-circle arrow-right remove style-two-pin-marker subtract-circle