What is Information Architecture? A beginner’s guide to IA for UX designers
UX process
March 27, 2023
Colton Schweitzer
If there’s one stat that proves the importance of UX design, it’s this: According to research, the average user spends 50 milliseconds deciding whether to stay or leave a website.
While there are plenty of elements that influence their first impression (like visual design, branding, trust, and authority), Information Architecture is probably the most essential.
Information Architecture is how you structure and label information in a way that’s intuitive to users.
If you’ve ever landed on a site and not known where to go or got frustrated when you clicked a link and ended up somewhere unexpected, you’ve suffered from bad Information Architecture. However, if everything seems just to be where you expect, then you’re benefiting from an information architect who knows their stuff!
Information Architecture is one of the foundational skills of learning how to become a UX designer. Unfortunately, it rarely gets the attention it deserves!
That’s why we wrote this guide. If you’ve felt overwhelmed by other IA guides that get overly technical or theory-heavy, this one is for you.
Information architecture is the process of organizing and structuring content and information to help people understand what they see, quickly find what they need, and easily complete tasks.
As a UX designer, Information Architecture (or ‘IA’ as you’ll see it commonly referred to) is one of the 6 core disciplines that make up the UX process and can be applied to everything from website designs to app experiences to buildings and other real-world situations.
Here’s an example.
Almost every grocery store is organized in the same way regardless of brand or location.
Fresh fruit and vegetables are in one section (usually on the left or right side), dairy and meats are in the back, and dry goods are in the middle.
As soon as you enter a store, you have an idea of where to go and where you should find what you’re after. In other words, grocery stores all follow the same information architecture principles and layout.
This might seem like an obvious observation but consider the alternatives.
Imagine walking into a grocery store with no structure to it. Vegetables are scattered throughout the store, and butter is on the opposite side from milk. It would be a nightmare to shop in (and annoying as hell to maintain and keep stocked).
Or, imagine if the store decided to organize its products alphabetically! You’d find radishes in the rice section and bread beside the broccoli.
Again, this is not the experience you expect or want when you go into a grocery store. It’s unnecessarily difficult, annoying to use, and will probably send you looking for another store that’s organized the way you want it to be.
What is the role of Information Architecture in the UX process?
Grocery stores are such great examples of the importance of Information Architecture as there’s no ‘common sense’ organizational structure for them to follow.
There are probably reasons why it makes sense to keep dairy at the back of the store (because it’s closer to the refrigeration units, maybe?) However, as a shopper, you aren’t thinking about those reasons.
Instead, you just know where things should be. And when they aren’t, you get confused and upset and probably won’t return.
The same principle applies to IA in the UX process.
Users have certain expectations when they land on a website or open an app based on context, industry standards, past experiences, trends, and best practices.
As you design an experience, you want to structure and label your information–navigation, copy, buttons, and even images–in a way that matches your users’ expectations.
The goal is to make them always feel like they know where they are, where to find what they need, and how to get around. This is why so many people say that great design is invisible.
We live in a world that is getting increasingly complex and crowded. As a UX designer, the best thing you can do is create an experience that just works. So how do you approach information architecture?
Let’s start with the four core components of IA (LONS) that UX designers should focus on:
Content strategy (aka labeling): The words you use to guide users through your digital experience. Using the proper labels for content (and staying consistent throughout the experience) is crucial for organizing information. You might do this work yourself or partner with a UX writer or content strategist specializing in it.
Organizational structures and layout: How you structure the information hierarchy of your app, product, or website. Think of this as your blueprint. It defines the paths and flows users can take to ensure they can get where they need to go. As a UX designer, you’ll make tons of wireframes and prototypes to test your structure with real users.
Navigation: How users can browse and move through your product’s content and information. What as well as how many options you show in your navigation will impact how a user experiences your product.
Search: How users can look for the information they’re after. Do you include search? How are results displayed back to users?
In many cases, you can probably already think of great examples of each of these components. For example, e-commerce sites pretty much all use a similar structure and navigation (sort of like a grocery store!)
But what about when you don’t have best practices or standards to follow? Or, if you believe there’s a better way to organize information for your users?
How to create content that ‘just works’: The 3 common IA methodologies
The biggest challenge of creating your Information Architecture is understanding how your app or website works from your user’s perspective. You may know where you would look for specific information or what structure makes sense to you.
But remember, you are not your user!
Instead, you need to take a step back and understand how users think and how you can structure information to make sense naturally.
Luckily, IA has a loooong history to pull from. So let’s start by covering some of the core principles and methodologies that will inform how you create your IA.
Library sciences
Libraries are buildings loaded full of information. Without a clear architecture and structure to them, you’d never be able to find anything! So it’s no wonder that IA and library sciences share several similarities.
When it comes to creating an IA, there are a few methodologies you can borrow from libraries:
Cataloging: Cataloging is the process of creating and attaching metadata to your content to make it easier to find later. Metadata can include things like descriptions, labels, or other identifiers. In IA, labels, tags, and categories make storing, organizing, and re-organizing content easy.
Archiving: Archiving is the process of building a structure (or repository) for all your information that can scale or change without falling apart. A great example is the Dewey decimal system in libraries. It doesn’t matter how many or how few books you have. You can find the book you’re after if you know the genre and the author’s last name.
Architecture
It only makes sense that IA is deeply connected to architecture (it’s in the name, for Pete’s sake!) Architecture is all about building off of a solid foundation and creating comfortable and useful spaces.
IA follows the same principles and process: start with the right foundation before adding content, interactions, and visual elements that enhance the experience!
Cognitive Psychology
Finally, cognitive psychology is probably the most influential element in how we think about structuring information.
Cognitive psychology studies how the human brain works, especially around perception, learning, and memory. If the goal of IA is to structure information in a way that just makes sense, it only makes sense to first understand how the human brain works.
Cognitive psychology covers a wide range of different ideas, but three elements are especially important for IA and UX designers:
Mental models determine how users see, understand, and/or think about your experience
A mental model is how a user thinks about the product they’re interacting with and any assumptions they have. We all see the world through our own mental models, and information is much easier to find when it matches where we expect it to be.
As a basic example, e-commerce websites use the concept of a shopping cart to help people understand what they're doing when they're buying something on a website.
This gives users a physical experience that matches one of their existing mental models and makes the online experience feel more familiar and understandable.
Cognitive load determines how much information to show a user
Cognitive load is the amount of brain power it takes to understand the information in front of you.
As a UX designer and/or Information Architect, your job is to decrease the cognitive load of any given experience. You want to make sure the experience isn’t overwhelming and is as simple as possible.
Users can only take in a small amount of information at any given time. Understanding that load helps you to simplify experiences, create intuitive navigation paths, and focus on only showing the right information at the right time.
Gestalt principles create visual connections between information and objects
The Gestalt principles are all about the visual perception of things in relation to each other.
Basically, our brains try to organize and simplify complex images, designs, and information by arranging the parts into a whole rather than just seeing them as individual elements.
It’s important to understand and apply these principles effectively because they help you make designs that follow how humans perceive and understand shapes.
What does an Information Architect do? 7 examples of how UX designers use IA
Now that you understand the core components of IA and some common methodologies for structuring information let’s put it all together.
Here’s how (and when) you’ll use the elements of IA throughout the UX process:
1. User research
Both the IA and the UX process start with understanding your user. Because how can you design a great experience or organize information in the best way possible if you don’t know who you’re creating for?
However, proper IA depends on more than just understanding who your users are. Instead, the way someone interacts with your content is a mash-up of the user (their needs, tasks, and experience), content (type, structure, and objectives), and context (business goals, culture, and expectations).
In their book, Information Architecture for the World Wide Web, Lou Rosenfeld and Peter Morville call this the ‘information ecology’ and visualize them as a Venn diagram.
To understand all of these interdependent elements, UX designers use several user research methodologies:
User interviews: Talking to users is a great way to understand how they think about your product and the language they use. The more you can use the language your users expect, the more intuitive your experience will become.
Card sorting: Card sorting helps you understand how users group content together so you can create an intuitive structure and navigation. Basically, you’ll give users ‘cards’ and ask them to either organize them into their own groups (‘open’ card sorting) or place them into predefined categories (‘closed’ card sorting).
Contextual inquiries: A contextual inquiry involves observing participants using a product in their natural environment. This is a great way to see if your structure and IA make sense without you being around.
2. Scenarios
Scenarios are tools you can use to empathize with your user and keep their needs and expectations front and center during the design process.
Here’s how Usability.gov describes scenarios:
“Scenarios describe the stories and context behind why a specific user or user group comes to your site. They note the goals and questions to be achieved and sometimes define the possibilities of how the user(s) can achieve them on the site.”
From an IA perspective, scenarios provide context for the interaction between the user and the product or service.
Here are a few things to consider when writing a scenario:
Who is the user?
Why is the user coming to the site? What’s their context?
What are the user's goals? What are their motivations and expectations?
What questions might the user have before and during their interaction with the product?
It’s important to keep scenarios at a high level. They shouldn’t include product details but instead, focus on a user’s state of mind and their environmental context. Scenarios don’t tell you what happens in the end. They just provide users’ context and goals.
3. Site maps
A site map is a high-level diagram that shows the structure of a website or application. It shows the organization of navigation and how many levels of information there are.
Site maps aren’t intended to show the path a user takes when they visit a website. They are, however,intended to help define the current and future structure of a website.
Site maps can be really high-level, only showing site-wide navigation. Or they can be more granular, showing how each level of information connects to the overall structure.
For example, here is a high-level site map for Apple.com. It shows the different top-level navigation, including Mac, iPad, iPhone, and so on.
Site maps create a hierarchy of information by considering what a user expects to see (based on research and scenarios) and what the business wants to show them (based on goals and project requirements).
So, in the above example, you could add more granular detail under each high-level category to show the hierarchy and how users will navigate through it.
4. Layout (CRAP)
Layout is the foundation of design and IA. How you use structure and relationships between elements can create balance and calm or totally overload your users.
Intentional content placement helps users quickly scan the page and find what they need (which is what IA is all about!)
At the macro level for digital products, layout is about figuring out the arrangement of images, text, and overall functionality.
You can think of your layout as a recipe. If UI elements such as buttons, text, images, icons, etc., are the ingredients, then layout provides the instructions for where and how you use them to make the overall recipe look and taste just right.
In terms of IA, there are four layout design principles to be aware of (that follow the handy acronym of CRAP!)
Contrast: Contrast is about using visual weight (the measure of how much a visual element attracts the viewer’s eye) to make elements stand out and draw attention. Contrast enables us to get a faster understanding of hierarchy and to see important pieces of information quickly. It can be created through color, shape, size, interaction, proximity, font choices, symmetry, and the list goes on.
Repetition: Repetition is about unity and consistency. It helps people quickly understand what they’re looking at because they can see all similar elements. Think about repetition this way: it’s a lot easier to look at 40 identical objects than 40 unique ones. With the unique objects, your brain has to parse each one separately. Whereas with repetition, your brain can group all like objects together and quickly understand what’s going on.
Alignment: Alignment is about the organization of elements relative to a line or margin. There are two basic kinds of alignment: edge and center alignment. With edge alignment, elements are aligned consistently to the left or right. With center alignment, elements are aligned consistently in the center. Using a grid for alignment can really help create a sense of cohesion and relationship among elements for several reasons: First, it matches how people naturally scan and focus on content. Second, it’s visually appealing. Third, it provides a sense of balance. And finally, it creates a relationship between similarly aligned elements.
Proximity: This principle states that elements that are close together are seen as related. Closeness shows connectedness. This helps create perceived groupings, which reduce cognitive load and increase readability.
5. Wireframing
Wireframes are a fantastic way to visualize the connection between different screens or elements of your product based on what you’ve learned during user research and writing scenarios and sitemaps.
Wireframes are low-fidelity, digital illustrations of a website. Because they're low fidelity, they don’t include any styling, color, or graphics. Instead, you can think of wireframing as the skeleton of your website.
Wireframes are static, don’t show interaction, and are entirely about communicating the site’s structure and functionality. These are great for getting your IA across and giving you something you can easily test with users.
6. UI elements
Information Architecture isn’t just about structure. It’s also about how people interact with your information.
User Interaction (or UI) is a UX discipline that focuses on creating interfaces that make interactions with a product usable, cohesive, and delightful. However, UI is more than just making your wireframes ‘pretty’.
Many UI elements can support (or work against) your overall information architecture. As you work through your user interface, you’ll want to be especially aware of:
Buttons: Buttons show an action that will take place. They’re one of the main ways a user moves through your product and needs to match up with your IA to maintain a cohesive experience.
Dropdown menus: Dropdown menus present a list of options to choose from. This is another opportunity to reinforce your IA and present users with the paths and flows they’re looking for.
Search fields: Search fields let users look for what they’re after. Again, your approach to on-site search is an important part of your site’s structure and functionality.
Tabs: Tabs are usually placed at the top of a page and change the content beneath them when clicked. Your choice of tabs is one way to quickly show users what content is available to them.
Tags: Tags are small elements that provide information for readers and make it easier to locate specific content.
Menus: Menus are temporary surfaces that display information, content, and navigation. They should be contextual to the user, easily scannable, and intuitive.
This is by no means an exhaustive list of UI elements. In fact, there are tons more you’ll work with as a UX designer such as checkboxes, radio buttons, text fields, breadcrumbs, progress bars, etc. Each deserves to be run through your IA ‘lens’ to see how it impacts your structure and the overall user experience.
7. Usability testing
Finally, usability testing at any phase is a great opportunity to check in on your IA.
Putting your designs and IA out in the wild is the best way to check if it makes sense, thanks to something called Cunningham’s Law, which states:
"The best way to get the right answer on the Internet is not to ask a question. It’s to post the wrong answer."
The same thing applies to your designs. If someone gets lost or confused while using your designs, you’ll notice it. Even better, you’ll probably hear the same issue from more than one participant (which is a good thing because it tells you exactly what you need to change!)
5 Information Architecture best practices to remember
If it’s not clear already, IA plays a huge role in the UX process and is often even a job on its own. But where many UX designers go wrong is in thinking that IA is just ‘something you do in the UX process’ and then move on.
IA isn’t a static field. Like UX design, it’s constantly evolving and changing based on user needs. So while the core elements and methodologies will stay mostly the same, you should constantly be on the lookout for changes to user expectations, industry standards, and trends.
It’s not always easy to work with so much uncertainty. So, to help you stay grounded, here are a few of our favorite IA best practices:
Focus on structure: Hierarchy isn’t set in stone. Your homepage will always be where it is but where it takes users and how they get there can be tested and changed.
Think logically: Even though you’re not mapping out user flows during IA, your structure still needs to make sense. A sign-up screen shouldn’t go to a settings page. If a user is shocked by where they end up, you need to know (and change it!)
Integrate IA throughout the UX process: IA can feel like its own discipline but it’s really a part of the entire UX process. Don’t go into it without thinking about how it will impact the rest of your project.
Plan for change: Products evolve, designs change, and users move on. Make sure your IA is simple enough that it can adapt to whatever comes your way. As always, don’t get too attached to your designs.
Choose your menu wisely: Ultimately, IA is about choosing what a user sees. But it also impacts product and UI decisions. Make sure you’re guiding everyone in the best way possible.
There’s no great design without a solid structure
Information Architecture can be an overwhelming process at times (especially if you’re working on a complex project, dealing with multiple user personas, or juggling competing needs!) However, it’s the foundation on which you build the rest of your designs.
If you spend the time properly organizing content and testing it with users, everything else is just icing on the cake.
