Discuss

Web Navigation

How to Tell Web Navigation and Information Architecture Apart

By | Blog, Social Media, Web Design, Web Store | No Comments

People in web design and development know that navigation design and information architecture (IA) concepts go hand in hand. In particular, IA is used to feed information towards usable navigation design.

Still, they are not the same. In fact, the reach of information architecture goes far beyond website navigation, which has been described as being only the tip of the iceberg that rests atop the site’s information architecture.

Information Architecture Defined

A site’s information architecture consists of two major components.

  1. The identification and definition of the site’s content and its functionality
  2. The basic organisation, structure, and classifications that define the connections between a site’s content and functionality

When you view a website, you’re not really seeing its information architecture (IA). Instead, IA informs the user interface, the part of the site you interact with. The IA is documented in diagrams and spreadsheets, not in prototypes, comprehensive layouts, or wireframes.

example of an information architecture site map

Here is an example of an information architecture site map by the Nielsen/Norman Group’s (NN/g) website. The blue nodes show tier-one information objects, while green nodes show tier-two objects, and tier-three objects are shown in yellow. 

While IA itself may not be visible to users, it definitely has a crucial impact on the site’s User Experience (UX), defined as the totality of everything the user encounters while on a website. However, users will feel  the structure of the site, depending on how its content is divided and connected in ways that meet their needs.

Website Navigation Defined

A website’s navigation is comprised of several user interface components. Navigation is designed to help users locate information and functionality, hopefully leading them towards favourable actions. Main components of navigation include local navigation, global navigation, utility navigation, facets, filters, footers, related links, and more.

example of navigation components

Examples of navigation components shown above

Some decisions have to be made when thinking of each navigation component. For instance, when usage priority is concerned, you need to ask yourself how much users depend on a particular navigation component. Placement is also another factor, calling for answers on which pages a navigation component should be present in. Lastly, the pattern is a factor that calls for questions on which navigation design patterns best support discoverability, whether it’s carousels, megamenus, or more.

IA and Navigation Relationships

The mistake many designers make when building a site is that they ignore IA and focus only on navigation. Doing so is inefficient, not to mention dangerous. Navigation that fails to address the full scope of content and functionality of a site can be a costly mistake.

For instance, imagine a design team opting to use the common inverted-L style navigation consisting of a top navigation bar and a left navigation rail, because they like how it looks. This template can be used on sites that have no more than 4 tiers, so you can only imagine the headache the design team has when they realise later on during a site inventory that many parts of the site will be more than 4 tiers deep.

IA First Before Designing Navigation

That being said, it’s important for designers to first define or redefine the site’s IA before even thinking of a design project. While it’s true that the IA has to be flexible to accommodate new information, it doesn’t have to be final before wireframing and prototyping—a first pass is enough to get an idea of the volume and complexity of the content.  Making choices on your navigation components based on appearances alone can force you to remodel your IA, or cram too much information in a navigation component, ending up in your website failing to accommodate the needs of users.