Designing an effective product or redesign relies on the usability and structure of the interface and how the user is able to navigate through it. Learn how to organize content, conduct valuable research, design a site map, and define a navigation system.

Information Architecture

While information architecture is primarily concerned with the organization of the site content, before defining the structure it’s important to take inventory of the content you have and evaluate if it is necessary for the interface and product.

##### Content Inventory

A content inventory includes a list of every instance of digital content currently created, as well as any other relevant information about the content.  The goal of a content inventory is not to decide what content is important or unimportant, but rather to document the content that is already available. Oftentimes, this inventory is documented using a spreadsheet or visual board. 

##### Content Audit

Once you have an exhaustive inventory, the next step is to evaluate and audit the content. Not all content is equal. There is some content on your site that may be crucial to the user’s understanding of the design. Other content may just be more well-trafficked. Other content may prioritize design features that help the product team meet its goal. Users cannot process all of that information at the same time the same way. 

A content audit happens most often to evaluate and improve an existing site. A content audit edits, evaluates, and prioritizes the content documented in the inventory. Audits uncover content that is outdated, incorrect, or irrelevant - as well as content that is missing and needs to be developed. 

During a content audit designers will not only discuss adding and removing content, but also reestablishing the priority of content items based on new findings. Users' expectations and needs are not usually static. Their needs may change over time, as the design improves and changes. 

For example, after the rise of Snapchat stories, other social media platforms began to prioritize short-term story posts. A feature that was once nonexistent became a pinnacle point of the information architecture. Then, we saw the same thing happen when Tik Tok gained popularity and content creation became a viable career. Other social media platforms had to adapt their interfaces to reflect new usability trends. Instagram, for example, made changes to their bottom navigation to emphasize reels and content consumption, deemphasizing creation to the majority of their users. The post button is now out of the way, at the top right of the page. 

The constant evolution of products and technology is why content inventories and audits are so crucial to an effective information architecture.

Content Inventory and Audit

The next step to develop the information architecture is to build a site map. A site map is a visual representation of a website - outlining the site pages that different content items will go and the relationship between these pages. Site maps are not concerned with the layout or organization of the content on each page, rather just what content goes where.

##### Analyze Research

The first step to building a site map is to analyze and consult the usability research you have conducted. The card sorting exercise should give you an idea of commonly grouped content items, as well as commonly used labels. 

##### Identify a Format 

Then, identify a format to develop and communicate the site map that is accessible and understandable to the design team. Common tools to develop a site map are design programs such as Miro and Figma. 

##### Establish a Structure 

The next step is to establish the structure of the content. Start with the home page as the root. Using analysis from the card sorting task, group content items together. Then, categorize those groups and label them accordingly. These categories will become the second level of your site map,  defining the pages on your site with the highest priority. 

Make sure every item in the map has a reference number (according to the hierarchy of elements) and a meaningful label to easily identify and process it

Site maps allow a design team to document the information architecture without having to build out wireframes or a high fidelity prototype. 


Building a Site Map

At this point we’ve discussed how to organize and structure an interface - but how do we define how to navigate through it? Think back to our architect designing a house. What would be the best way to move through the spaces of the house? Through hallways? Up a staircase? Just through open space? Imagine if the only way to get from the bedroom to the bathroom was up a windy staircase -  going to the bathroom at 3am would be a lot more dangerous. The navigation of the house affects the functionality and aesthetic deeply. 

##### Prioritization

The architect also takes into account the priority of each space and the relationship different rooms might share. For example, it’s important that a dining room is easily accessible from a kitchen. It’s less important that it’s easily accessible from a laundry room. We should do the same when we consider how users will navigate through different pages and what order or procedures they expect to access the content in. 

All of these considerations fall under the interface navigation. Navigation outlines the user paths to each page on a website.

##### Navigation vs. Sitemaps

There is a common misunderstanding that a sitemap is website navigation. It’s essential to understand the roles of navigation and a sitemap. A site map shows what pages your website consists of. The primary purpose of a sitemap is to categorize the content. It answers the question, “What pages do I have on the website?” Navigation, on the other hand, explains how to get to each page.

There are multiple different types of navigations. Primarily, navigation through an interface is done either through some type of menu or through a search. 

##### Navigation Best Practices

Generally, there are some tips and best practices to follow when developing the navigation of any interface. 

**Make the navigation tool easily accessible and in a place users expect it to be.**

Remember, the navigation tool is usually the only obvious way a user can move through a site. If it is difficult to find, users may get frustrated and leave the site altogether. 

**Visually separate the navigation from the content.**

This allows users to quickly find the navigation and makes sure they do not mistake it for content. 

**Use descriptive labels.**

The label is the best indication to the user where information might be. Make sure that the label is descriptive, concise, and encapsulates the content that lies within that group or item.

**Don't hide important entry points to high trafficked pages or content.** 

Drop down menus can be effective when there are a lot of subpages, but they also increase the number of interactions needed to access pages. So if a page is important, make sure your user can get to it easily and quickly.

We will cover types of navigation and their use cases more deeply in the coming exercise - looking at specific desktop navigation methods. 


An illustrated sitemap of general wireframes that highlights a particular flow within the sitemap.

Navigation

If you can’t understand a product - you can’t use it very well, even if in theory it does what it’s supposed to. The secret to good understanding is establishing a proper mental model. Mental models define the expectations that users have on the functionality of a product. 

##### Three Mental Models

There are three mental models for any given product. The designer model is the mental image in the head of the designer. The user model is the mental image in the head of the user. In the ideal world, the designer’s model and user’s model should be exactly the same - meaning the user will know exactly how to use a product. 

The problem is the only way the designer has to convey their model to their user is through the product. We call that the system model. The system model is the actual image conveyed by the product and written material. The better the system model is, the closer the designer model and user model will be, which in turn, makes the product easier to understand. 

##### What makes a good system model?

Good system model designs rely on two components: clear instructions and feedback. The design should make the operation apparent and provide sufficient instruction so the user understands how to perform the operation. The design should also give the user enough feedback to make them aware if they are performing the operation correctly.

It can get even trickier because different users might have different mental models for the same product. Imagine you are on a social media platform designed to create and connect with study groups within a university. 

Some users may view the platform as a product to make social connections. Others might view it solely as a means to get academic support. The priorities of these different types of users are inherently different. It’s difficult to define an obvious and universal user purpose for this platform.

Information architecture is heavily influenced by mental models. Because IA tries to best understand how to organize and structure an interface based on user needs and expectations, it’s important to understand how users perceive and approach a product based on their expected function. 

In the next lesson, we will look at how to organize and evaluate content.



A chart that contains 3 nodes, Designer/Designer Model, System/System Model, and User/User Model. Designer and User both point to System, and System points back to User.

Mental Models

Before setting out to build a house, an architect will draw up a blueprint to figure out the design and structure of the project. This blueprint not only allows the architect to prototype ideas, but communicate the design and instructions to the team of people who will go on to build the house. 

Information architecture is like a blueprint for a user interface. It defines the organization, structure, and navigation of the interface. 

Just like the architect needs to understand the space available and the general needs of the client for that space, the designer will outline how many pages an interface will need and what the purpose of each page will be. 

Then, there’s the question of how to prioritize the space according to the user's needs. An architect might consider who will live in the house. A single person might want a large open common space - living, dining, and office spaces all easily accessible. A family might feel very differently. Similarly, it’s important to prioritize pages and content based on who the target audience is, how they expect to use the product, and how they will move through the interface. By defining the structure of the content, as well as how it’s prioritized, organized, and navigated, designers can increase the usability of the interface.

In this lesson we will cover how to develop information architecture, as well as the role it plays in interaction design. We will complete the process of developing the information architecture beginning with content inventory, audit, and organization, followed by building a site map, and finally outlining the navigation. 

Let’s get started!


A sitemap that matches an adjacent blueprint of a home. There is a category of the sitemap for commons spaces which includes Office, Kitchen, Dining Room, Living Room, and Entryway. There's another category for Master Suite, which includes Master Bedroom and Master Bathroom. Finally, there are 2 more categories that don't contain any subitems which are another Bedroom and another Bathroom.

What is Information Architecture?

Diagrams depicting different information architecture exercises such as content inventories and sitemaps.

That’s a wrap on the lesson on information architecture and navigation. Here’s an overview of the key principles we covered:

- Information architecture defines the organization, structure, and navigation of an interface. 

- A content inventory includes a list of every instance of digital content currently created, as well as any other relevant information about the content. 

- A content audit edits, evaluates, and prioritizes the content documented in the inventory. Audits uncover content that is outdated, incorrect, or irrelevant - as well as content that is missing and needs to be developed. 

- A site map is a visual representation of a website - outlining the site pages that different content items will go and the relationship between these pages. 

- Navigation defines the user’s path to access pages and content on an interface.

- There are a variety of different desktop navigation practices, including top navigation, sidebar navigation, hamburger menus, and search navigation.


Wrapping Up

The next step in building the information architecture is to decide how to organize the content onto the site itself. This is not the question of the visual design layout of the content, but rather what content goes on what pages. Like everything in UX/UI design, conducting research is at the centerpoint of developing a user-centered information architecture. 

##### Card Sorting

Card sorting is a user research technique that asks participants to organize cards into groups that make the most sense to them. You might remember this method from the article [Conduct Card Sorting](https://www.codecademy.com/courses/learn-user-research-generative/articles/ui-and-ux-how-to-conduct-card-sorting)! If you haven’t covered that article already, take a second to read through it now and come back to this lesson.

Card sorting can be especially useful when developing information architecture because it gathers data on how users group content items together - as well as how they might refer to a group of content. We can use that data to group the content onto separate pages accordingly, so that the website is organized based on the users’ expectations. 

##### Tree Testing

Another research method that can provide useful data to inform the IA is a tree test. Tree testing is a user research technique that evaluates the structure of a site hierarchy by asking users to navigate through the “tree” to complete certain tasks. Tree testing can be incredibly useful to conduct after card sorting, to gather user data that can inform the navigation and structure of the site, rather than the organization. 

To conduct a tree test, you will need to prepare your tree, or hierarchical menu, and the tasks you want the user to complete. The first step is to define the structure you want to test. 

![Tree Testing Example Photo](https://static-assets.codecademy.com/Courses/interaction-design/information-architecture-navigation/tree-testing.png)

This is your tree. You will want your users to be able to navigate through it one level at a time. You can do this using a paper prototype or an online tool. [Google Form's Branching Logic](https://support.google.com/docs/answer/141062?hl=en) can even be used to create effective tree structures. 

Then you will want to define the tasks. For example, you can ask a user to navigate to the page where they will be able to “Search for an event their friend just told them about.” Record the time it takes, the number of steps, any missteps, and any other relevant notes or data. This data will help you understand how users expect to complete important tasks and navigate through the site.

The data you gather from these research methods will help you make decisions in regards to the content organization and navigation.


Organizing Content

Screenshots of the Codecademy website demonstrating different types of navigation including horizontal navigation bar, drop down menu, hamburger menu, sidebar, and search navigation.

There is not one universal way to design the navigation of a website. Different websites, designs, and products will benefit most from different design practices. 

###### Horizontal Navigation Bar
  
Horizontal navigation bars are the most common type of navigation. It usually lists the major pages of the site - making this content most easily accessible to the users. It is best used for sites that have a relatively simple and straightforward IA - where the content is clearly categorized into a number of separate pages.

###### Drop Down Menus

Drop down menus can often stem from horizontal navigation bars. Drop down menus are often used when the IA is very complex or the site is very content-heavy. In these cases, it may be easier to categorize the content into a large number of pages, then categorize the pages into groups. Those groups then will become the drop down menus. 

##### Hamburger Menu

A hamburger menu, named for the signature layered lines, is an icon that when selected, opens up a drop down or side navigation menu. Because it is so commonly used, users are likely expecting it to open up a hidden menu, so it is a good way to save space without making it difficult or confusing to find the content.

##### Sidebar

The sidebar is a navigation pattern that is located on either the left or right side of the page. Sidebars can be used as the primary navigation or used to support  a top  navigation - displaying the options for a specific information-heavy subcategory. 

##### Search Navigation

A search bar is commonly found at the top of a webpage. This allows users to navigate directly to a specific page or content item. While a search bar should not be the main navigation, it can be a very useful tool to any website - especially information heavy sites. 
