Practitioners sometimes merge the concepts of information architecture (IA) and navigation design. While it’s true that these concepts are related and that information architecture informs website navigation design, IA and navigation are not the same. In fact, information architecture spans well beyond website navigation. Nathaniel Davis, in an article for UXmatters entitled “Framing the Practice of Information Architecture,” refers to web navigation as the tip of the iceberg that sits atop the information architecture of the site.

What Is Website Information Architecture?

A website’s (or intranet’s) information architecture has two main components:

  • identification and definition of site content and functionality
  • the underlying organization, structure and nomenclature that define the relationships between a site’s content/functionality

The information architecture (IA) is not part of the on-screen user interface (UI) — rather, IA informs UI. The IA is documented in spreadsheets and diagrams, not in wireframes, comprehensive layouts (known as comps), or prototypes.

powermapper site map
This site map describes the different content pieces on the nngroup.com site and the relationship between them. Blue nodes represent 1st-tier information objects, green nodes are 2nd-tier objects, and yellow are 3rd-tier objects. The children of a node are all placed underneath it.

Even though the IA itself isn’t visible in the UI, it most definitely impacts the User Experience (UX). As we know from the definition of user experience, the total user experience is built up from everything the user encounters. And while users don’t see the structure of the website, they will hopefully get the feeling that content is divided up and connected in ways that match their needs and expectations. Sadly, of course, users leave many sites feeling that the content/functionality was not what they wanted and they experience friction because of poor organization, structure and/or nomenclature.

As an analogy, unless you’re Superman or a radiologist, you won’t see the skeletons when looking at a horse or a chicken, but those skeletons nevertheless make these animals very different creatures. Don’t try to ride the chicken, because the skeleton won’t support you.

The activities undertaken in defining an information architecture involve:

  • Content inventory: Examination of a website to locate and identify existing site content
  • Content audit: Evaluation of content usefulness, accuracy, tone of voice, and overall effectiveness
  • Information grouping: Definition of user-centered relationships between content
  • Taxonomy development: Definition of a standardized naming convention (controlled vocabulary) to apply to all site content
  • Descriptive information creation: Definition of useful metadata that can be utilized to generate “Related Link” lists or other navigation components that aid discovery

What Is Website Navigation?

A website’s navigation is a collection of user interface components. The primary goal of navigation is to help users find information and functionality, and encourage them to take desirable actions. Navigation components include global navigation, local navigation, utility navigation, breadcrumbs, filters, facets, related links, footers, fat footers, and so on.

U.S. Small Business Administration homepage, showing navigation types in the layout
Some examples of navigation components: 1) utility navigation; 2) global navigation; 3) breadcrumb trail; 4) local navigation; 5) related links (in this case, articles and blog posts); 6) fat footer. (www.sba.gov)

For each navigation component, a series of decisions must be made:

  • Usage Priority: How much will users rely on this navigation component? For example, will users primarily navigate the site using local navigation? Or are they likely to more heavily rely on related links?
  • Placement: On which pages should it be present? Where should it be placed within the page layout grid (e.g., top, left, right, bottom)?
  • Pattern: Which navigation design patterns best support findability and discoverability — tabs, megamenus, carousels, accordions, and so on?

Relationship Between IA and Navigation

When designing a new site, can designers ignore the IA and focus only on the navigation? The answer is no: it’s inefficient and even dangerous to do so. Navigation that does not adequately accommodate the full scope of content and functionality of a site can be very costly. For example, let’s assume that a design team decides to use a typical inverted-L style navigation (one top navigation bar and a left rail) because they like the way it looks. An inverted-L can accommodate sites that are no more than 4 tiers deep. Unfortunately, later in the project they conduct a site inventory and discover that many sections of the site will be more than 4 tiers deep. Now they must either go back and design a new navigation structure or try to cram all the content into 4 tiers.

Screenshot of the most-common navigation layout, with main categories along the top and categories inside the chosen topic on the left.
Example of inverted-L navigation (www.suffolk.edu)

Define the IA Before Designing Navigation

When approaching a design or redesign project, it is important to take a look under the hood and start by defining or redefining the IA. The IA doesn’t need to be final before beginning to wireframe and prototype, but a first pass is necessary to get a handle on the volume and complexity of the content. Making navigation component choices based on looks alone can force you to change an ideal IA to something that doesn’t best serve the needs of users or accommodate your content.