What is the Difference Between Navigation & Information Architecture (IA)?

Web designers sometimes bring together the concepts of information architecture (IA) and navigation design. It is true that these concepts are related and that IA informs the design of website navigation, but it should be made clear that IA and navigation are not interchangeable. In fact, IA spans beyond simple website navigation. Some web designers even refer to navigation as just the tip of the iceberg that is the entirety known as information architecture of the site. With recommendations from professionals, it is not wise to design the navigation of a website without taking the information architecture into consideration first. This is because the IA has many functions, and these functions include adding very important context to a web page. This would enable users to visit a page that is deep in the site straight from the search engine.

What is Information Architecture for a Website?

A website's information architecture is made of two main components:

• Identification and the definition of the site content and functionality.
• Underlying organization, nomenclature in structure that will define the relationship between the sites content and functionality.

The information architecture is not part of the website that a user will see on their screen. Rather, the IA forms the UI (user interface). The information architecture is documented in diagrams and spreadsheets and in wireframes, prototypes or comprehensive layout. The information architecture itself is not visible in the user interface but it most certainly does impact the user's experience. The total user experience is built from everything that the user encounters. The user will not see the structure of the website but they will feel that the content is divided up and then connected in a comprehensive way that will match not only their needs, but their expectations as well. When this is not the case, users will leave the website feeling that the content or functionality is not what they wanted, and they may experience friction due to poor organization, nomenclature, or structure.

• Information architects are responsible for creating navigation schemes for software that are concise, descriptive, possessive of information scent (a cue that helps users navigate to a relevant part of the website), and mutually exclusive.

There are five activities that are performed when defining an information architecture.

1. Content inventory – This is an examination of a website to locate and identify existing content on the site. It would include web pages along with each page's metadata, images, audio, video, and documents. Simply put, this qualitative analysis will merely log what is on a website.
2. Content audit - This is an evaluation of the fullness of the content, the tone of voice, the accuracy, and the overall effectiveness. This qualitative analysis will vary by auditor and the tools that they have available. A content inventory sheet will include links, keywords, format, content owners, and much more. It is vital to have human oversight when a content audit is happening. This differs from content inventory because the audit will assess how the content interacts with the other information assets and web pages.
3. Information grouping- This is the relationship of the user and content. The website developer needs to decide how the content will be organized. Will it be organized by function or format? How is the information currently navigated? How do users and clients want to navigate this content? Which items will be included in which categories?
4. Taxonomy development - This is a standardized naming convention, or controlled vocabulary, that will be applied to all content on the site. Taxonomies will vary by website, and rarely will one taxonomy apply to multiple websites. They should be developed to fit the specific website or company that is being developed, keeping in mind the audience and users.
5. Descriptive information creation- This is the useful metadata that will be utilized in order to generate a “related links” list or other components that aid in navigation and it discovery.
   1. Structural metadata are elements which need to be collected such as title, author, subject, date created, purpose, etc.
   2. Administrative metadata is created automatically when the content is entered into the content management system (CMS). This would include information such as author or date created.
   3. Descriptive metadata will describe aspects that are specific to components of the content like subject, title, audience, and purpose.
   4. Administrative and descriptive metadata are created when specific content is created or posted, while structural metadata would be identified as part of the system's requirements.

How to Create an Intuitive Information Architecture

• Be aware of the website's mission or purpose. Why are people visiting the site?
• Determine what the immediate and long-term goals are for the site. Are these goals different?
• Identify the intended audience and then conduct a requirements analysis for each group.
• Collect content for the site and then develop the content inventory.
• Determine the organizational structure of the site. This could be: narrow and deep, hierarchical, broad and shallow, sequential, or tag based.
• Create an outline for the website. This will include the content inventory as well as the sitemap.
• Create a visual blueprint for the website. This will include wireframes.
• Define the navigation systems. Included in this will be global navigation, local navigation, and utility links.
• Conduct research on the user. The usability research would be methods including but not limited to contextual task analysis, card sorting, usability testing, and cognitive walkthrough.

What is Website Navigation?

The navigation of a website is the collection of components making up the user interface, also called a sitemap. Navigation's primary goal is to aid users in finding information, functionality, and encouraging them to take actions that are desirable.

• The components of navigation include local navigation, utility navigation, global navigation, breadcrumbs, facets, filters, footers, related links, fat footers, etc.
• Website navigation can be made using sitemap generators if the website builder is not writing it out themselves.

When the navigation components are being made, there are three things to take into consideration:

• Usage priority: Exactly how much are users going to rely on this navigation component? For example, will they likely rely heavily on related links? Or will they navigate the site using a local navigation?
• Placement: On web pages should the navigation be present? Where will it be placed on the page layout grid? This could be the top, bottom, right, left hand, etc.
• Pattern: What is the navigation design pattern that will best support that discoverability and findability? This could be tabs, carousel, accordions, mega menus, etc.

Usable Navigational Systems are:

• Easy to learn
• Consistent through the entire website
• Able to provide feedback, and furnish an easy way for the user to navigate back to where they started
• Using the minimum number of clicks needed to arrive at the next destination
• Using clear and intuitive labels that are based on the user's terminology and perspective.
• Supportive of user tasks
• Comprised of links that are distinctly different from each other
• Logical in grouping navigation
• Careful not to disable the back button on the browser
• Careful not to make users scroll to a Submit button or scroll to important information

The Relationship between Information Architecture and Navigation

When making a new website, designers should never ignore the information architecture to focus only on the navigation. This is quite insufficient and possibly even dangerous.

• Navigation will not adequately accommodate the entire scope of the content and functionality of a website and this can cost the business their website traffic.
• As an example: if a design team chooses to use the typical inverted L style navigation because they like the way it looks, this style will accommodate sites that are only less than 4 tiers deep. If later in the project, they do site inventory and discovered that many sections in the site are more than 4 tiers deep, they have to choose whether to cram all of the content into 4 tiers or go back and design a new navigation structure.

Define the Information Architecture Prior to Designing the Navigation

When you have decided to either design or redesign a project, it is vital to take a look behind the scenes and design the sitemap from scratch, or just work on a redesign of the IA for the sitemap.

• The IA does not need to be in its final form prior to beginning the wireframe and prototype, but it is necessary to have a first draft to get a handle on the complexity and volume of the content on the website.
• Making choices about the navigation component based on the way it looks alone, may force the website designer to change what was their ideal IA into something that might not accommodate the content or will not serve the needs of the users.

Website with a considerable amount of data and inventory will have situations in which the relationships will overlap. This is why it is vital to have the information architecture laid out beforehand. The website could be left with orphan pages or hubs that are totally not connected from any related categories or subcategories. Navigation will not be able to offer a sense of placement until it has researched link relationships, mapped out and coded the back-end, or researched user connections that are based on the behavior of the user. This is how site visitors understand the sense of place for everything, and more importantly, how search engines are able to link directly to a website's top level page that it has learned to be the most popular with searches.

What Happens when the IA and Navigation are Compatible

In short, the website will work as it is supposed to when the navigation and IA are working in harmony.

• There will be a convenient and obvious way to move between pages and sections that are related.
• The most-needed information is easy to navigate from page to page.
• The navigation choices will be in order in the most logical manner.
• The navigation system will be broad and shallow, as opposed to deep.
• The website structure will be simple with no unnecessary levels.
• The major sections of the website will be accessible from every page and there will be no dead ends.
• There will be navigation tabs at the top of the page.
• The sitemap will provide a comprehensive overview of the website's content.
• The sitemap will be linked from every page and will provide a concise overview of the website.
• Good navigational feedback will be provided. This shows the user where they are on the site.
• The category labels will accurately describe the information in that category.
• Navigation labels and links will have “trigger words” that users can look for to achieve their mission.
• Terminology and conventions like link color will be consistent with web usage.
• The website will have an overall cohesive look.

While the navigation (sitemap) of a website will show the stratified structure of all pages that are available on a website, the IA is way beyond that. The sitemap will only important points of navigation and will have nothing to do with the reason that the navigation is set up the way that it is. This is where the information architecture steps in. the IA goes in depth with the organization of the website, contributing to how the pages and content are arranged, connected, accessed, and labeled. The IA will also determine how the search function will work for users, and it will make sure that the usability is effective and optimal for all audiences.

Developing the information architecture is its own dedicated phase in the life of a website where web designers will work with concentration on design, usability tests, and user personas to make sure that the content will respond as it is supposed to for all users. Those who are building a website should never build the website around the navigation, without taking the information architecture into account. The navigation will not know the depth of the information of the website without first consulting the information architecture.

Additional Resources:

The Difference Between Information Architecture (IA) and Navigation

What is the difference between a sitemap and information architecture?

The difference between Information Architecture (IA) & Website Navigation