2022 Guide to Information Architecture in UX

Our comprehensive guide to Information Architecture and how it fits within the UX design process.

Maria Myre
Maria Myre
|
Mar 9, 2022
|
12
Min Read
Share

When you land on a website, there's usually a goal in mind. This goal might involve purchasing a product, obtaining information, or simply sending an email.

Most websites are intentionally designed so that you can achieve your goal with as few clicks—and in as little time—as possible. After all: the longer it takes to complete a task, the more likely it is that you'll simply click away and try another website.

If you come across a well-organized website or app where you can easily find the content you're searching for and information you need, you have information architecture to thank for it.

What is Information Architecture?

Information architecture (IA) provides structure to the content and information within a digital product. Through site structure, menus, labels, and search functionality, it aims to make each piece of information easily accessible for users who need it to complete their tasks.

Well-designed information architecture creates a highly accessible, easy-to-use product.

Why is Information Architecture (IA) Important in UX?

Information architecture (IA) plays a key role in user experience design, alongside other elements like user research, wireframing, and visual design.

Specifically, IA focuses on the way in which content is organized and made available through labels, sitemaps, and navigation. It supplies the logic and functionality to the user flows that UX designers create. Without information architecture to provide logic and structure, content remains inaccessible and useless.

Imagine heading over to Etsy to do some shopping. You're immediately met with a clean layout that includes a prominent search bar and categorical menus. Photos bring each product to life, making it easy for you to search via text, category, or by simply scrolling through the results.

Thanks to well-designed information architecture, the shopping experience is effortless and enjoyable.

An example of how the Etsy homepage uses information architecture

Information Architecture Design Components

An information architect utilizes four main components to create this logically seamless experience:

  • Organization: how information is structured and categorized
  • Labeling: how information is represented
  • Navigation systems: how users browse or access information
  • Search: how users look for information

Knowing these components is essential for designers who want a core understanding of what information architecture is. Moreover, their goal should be to assist users in understanding where they are within the site or product, what's available, and what to expect from any given screen.

The Information Architecture Design Process

It is the responsibility of information architects to provide users with the necessary tools to complete their tasks without spending too much time finding their way around the site. 

Step 1: Collect & Analyze Data

Information architects work with data from user research, usability tests, and user-centered design methods. Identify user goals, through this data obtained from interviewing your target audience to uncover what users expect to see and accomplish in your websites or digital products.

Step 2: Reverse Engineer the Navigation Flow

Once you have the information gathered, you can start structuring content by reverse engineering your IA based on the user's goals. By keeping the key elements as the focal point, you have a solid foundation to guide your process. Each part of the site should be carefully mapped out into a logical navigation flow, ensuring that it's easy for users to move between screens. 

Step 3: Test and Revise

The information architecture is typically displayed in a visual flowchart format to serve as a reference point for the product team. But, like most elements in product design, this information should be considered a fluid, working target. As your understanding of users—and the product itself—grows, you will likely need to make tweaks and improvements on a somewhat regular basis.

Information Architecture Design Tools

There are a lot of great flowchart apps that make it easy for you to create and revise your IA maps, with minimal clicks and lots of fun. Some of the more popular include:

If you're already using UX design tools in your workflow, you can create your IA maps in them as well, using something like:

Want to learn Figma but don’t know where to start? Check out our free course here.

[MID_ARTICLE_CTA]

Information Architecture Principles

Whether they're working with forty screens or four hundred, information architects have a variety of hard decisions to make as they seek to turn overwhelming amounts of information and content into something that's easily digestible to the average user.

Fortunately, Dan Brown identified 8 information architecture principles that can be used to guide this process.

Principle 1: Objects

Treat content as a living, breathing thing with a lifecycle, behaviors, and attributes. - Dan Brown

The first principle is one of simple analysis: to identify what objects you are working with, as well as what functionality they have when the user interacts with them.

Principle 2: Choices

Too many choices quickly leads to overwhelm and inaction. An information architect must find a way to reduce the cognitive load on users by thoughtfully displaying the right choices at the right time.

Example:

The Target mobile app uses a bold menu to help you quickly switch between shopping for products, viewing your cart, and accomplishing account-related tasks.

Example of information architecture in the Target mobile app

Principle 3: Disclosure

Show only enough information to help people understand what kinds of information they’ll find as they dig deeper. - Dan Brown

Simply withholding content isn't enough to create a user-friendly experience. The principle of disclosure requires you to give enough visual and textual clues so that users essentially learn as they go through the product.

Example:

On the Classes & Events page, REI "hides" the list of available classes behind a thoughtful search and filter option. Not only does this prevent overwhelm or confusion at seeing courses not in your location, but it also gives you an efficient way to discover the content you do want to see.

Example of information architecture in REI

Principle 4: Exemplars

As intuitive as your navigational mental models might be, text links alone are not always self-explanatory. You can use images to give an example of what users will find when they click on a label or category.

Example:

Shopping for handcrafted goods is a visual, textual experience. Although its marketplace only exists online, Etsy relies heavily on product images to help shoppers connect with the various products and categories available.

example of information architecture in etsy website

Principle 5: Front Doors

Although the home page of a website is generally structured to give users easy access to other parts of the site, it's important to remember that not all users will land on a website from the homepage. Every page should be designed in a way that helps users understand where they are, and where they need to go to achieve their goals.

Example:

Websites typically use a combination of menus and breadcrumbs to help users remain oriented on where they currently are in the overall website, as well as quick ways to hop from one point to another.

Ecommerce sites, in particular, take care to keep the shopping cart prominently displayed no matter what screen you're on.

example of breadcrumbs and menus on the REI website
REI uses a combination of menus and breadcrumbs to help shoppers stay oriented on the website

Principle 6: Multiple Classification

While you could make an entire website accessible from a single search bar, it's usually best to include a variety of methods for users to navigate and interact with your website. From navigational tools to visual hierarchy, these methods must be carefully constructed to support the needs of individual pages as well as the site as a whole.

Example:

Not only does Amazon provide a comprehensive set of top menus and a primary search bar, but it also gives you a variety of ways to filter your results on the left sidebar.

An example of how the Amazon homepage utilizes information architecture

Principle 7: Focused Navigation

Navigational logic should remain consistent throughout the product experience. If you have a dropdown under "Shop", the sub-menu items should remain focused on the product-based categories that the user expects to see.

Example:

Known for its simplicity and ease of use, Squarespace maintains a clean header menu area with logical categorical menu items.

Example of a clean layout on Squarespace website

Principle 8: Growth

Since your product will grow and change over time, it's important to create a scalable structure for your content. This means choosing categories thoughtfully, and striking a balance between "too general" and "too specific" with your labels and imagery.

Helpful Skills for Information Architects

Information architecture utilizes many of the same hard and soft skills as UX design, like:

User Empathy

Information architects benefit from an awareness of cognitive psychology and its role in user experience design. Understanding how users experience a product, and maintaining a level of compassion and empathy is a "must" for this line of work.

Data Analysis

Some of the best information architects have a background of knowledge of manipulating data. Librarians and database administrators might be drawn to this line of work, as well as those with a diverse understanding of industry standards involved in creating, storing, accessing, and presenting digital data, such as HTML and CSS. 

Visual Design

The UX design process addresses user flows and functionality, but having a fundamental understanding of visual and UI design can help an information architect to deliver a well thought-out solution that can be gracefully designed and implemented. 

Interested in Learning More About Information Architecture?

Information architecture is only a portion (albeit an important one) of the overall UX design process. UX Academy, our UX bootcamp, dives deep into the methodology of Information Architecture, and how you can use it to design more user-friendly product experiences. 

Launch a career in ux design with our top-rated program

Top Designers Use Data.

Gain confidence using product data to design better, justify design decisions, and win stakeholders. 6-week course for experienced UX designers.

Launch a career in ux design with our top-rated program

Top Designers Use Data.

Gain confidence using product data to design better, justify design decisions, and win stakeholders. 6-week course for experienced UX designers.