Imagine going to a shopping mall and discovering that there’s no rhyme or reason to the building’s layout: only one way in and out, no shortcuts, plenty of dead ends, and no directory at the entrance to help visitors make sense of it all.
Now imagine what would happen if you create a website that way: Your visitors’ initial curiosity will quickly give way to confusion and stress, and they’d likely leave the page—never to return again.
This is why the principles of information architecture form such a critical part of website design. In this guide, we’ll break down what information architecture is and the steps and tools you’ll need to accomplish it.
What is information architecture?
Information architecture (IA) refers to the structure, organization, and labeling of information within a product or website. In UX design, designers conduct extensive research and testing to plan how to best organize information so users can easily complete their goals.
Information architecture includes:
The design, organization, and labeling of the sitemap
The relationship of pages within the sitemap and the corresponding hierarchy
The layout of content on each page
The flow of users from page to page
The users’ goals and the steps that take them there
The way in which users search for information on the site
IA design uses user research, psychology, and your business’s overarching goals as the foundation for your website design.
Peter Morville and Louis Rosenfeld’s simple tool can help anyone designing a website to strike this balance:
Your information architecture strategy sits at the center of this Venn diagram. By accounting for your users, your content, as well as the context within which your website operates, you can craft a well-balanced website.
What are the benefits of information architecture design?
With a well-researched and user-centric strategy, you can architect a foundation for your site that benefits everyone involved.
Users get a better website experience
Consumers head to a website to find something they need or want, but all too often a site built without the foundations of information architecture can prevent them from accomplishing that goal.
When you build a website with the foundations of IA in mind, you base decisions off of user research and testing instead of assumptions or biases. Because of this, the site is easier to understand and navigate, and consumers are less likely to bounce and more likely to engage or convert.
The content will be more useful
Information architecture design informs content strategy because it helps define the following details:
Who copy is written for for
Which pages will be on the site
How the pages relate to one another
What the ideal layout and hierarchy is for each page
How and where users should move from one page to another
Since every piece of website copy should serve a purpose—from the headline in your home page’s hero image to the smaller bits of microcopy scattered around the site—writing to this foundational research can ensure each word and sentence executes on its intended purpose.
Your website will easier to manage
Once you map out all your website’s information, you’ll have a crystal-clear game plan for implementing and maintaining your website.
Websites always need updating down the road, whether it’s adding pages and blog posts or updating services and launching new products. With a solid, organized foundation for your site, changes can be made in a cost-efficient and timely manner, too.
How to design your website with information architecture
No matter your website size, taking the time to include principles of information architecture in your website design will ensure a better experience for all. Here are the basic steps to follow:
01. Define your website goals
Visitors should be able to glance at the navigation and know within seconds what your brand does and what they can get from the website. Irrelevant and poorly organized content will only lead to confusion. For that reason, the first step in designing a website with information architecture principles is to define your goals to ensure your design delivers what you aim to accomplish.
Take, for instance, a website for an accounting firm. Let’s say the owners would like their primary goal to be signing new clients, while their secondary goal is getting subscribers. If the navigation and homepage prioritize the blog over the accounting services, the information architecture will likely push more visitors towards the secondary goal instead of the primary goal.
Completing a goal on your website should be as intuitive as possible for your users, from using the navigation, reading content, taking steps to convert, and so on. To do this, you need to base your site’s architecture off real data tied to your site’s unique goals rather than what other sites have done or on assumptions about your audience.
02. Conduct user research
Your goal is to figure out who your users are, what sort of problems they experience, and what they need from your website. While market and competitive research will help you learn more about your target audience, you’ll need to go directly to the source for the rest.
You can use a variety of methods to conduct user research:
Online surveys: You don’t need anything fancy to create online surveys. An online survey tool will help you generate surveys to send to your target audience.
User interviews: You can host one-on-one interviews in person or over videochat to get real-time input and feedback from target users.
Focus groups: If you want to gather insights directly from your users, consider going the focus group route. This may give you a broader sense of what they need from your brand or website, and will allow you to more easily follow up on topics you want their input on.
03. Create user personas
The first thing to do with your collected user research is to create a user persona from it. A user persona is a fictional user that represents the real users you’re building your website for. Why bother with this? After all, you already did the research to figure out who they are and what they want from your site.
A user persona isn’t just a vague description of who they are. For instance, “moms-to-be shopping for baby clothes.” A user persona provides you with a complete description as well as a face and name to that fictional user.
Your user persona (or personas if you have different users) will:
Show you who your users are
Provide a background for them
Explain what they do for a living
List their hobbies
Describe their problems
Explain what their goal is in engaging with a business like yours
Offer quotes that lend insights into how they think and behave
04. List out your pages
Now it’s time to figure out how many pages your website needs to help your visitors accomplish their goals. Anything more than what’s necessary might overwhelm visitors—anything less and they might not feel confident about staying on your website.
To determine what pages you’ll include in your website, complete the following:
Write down all the web pages you plan on building: If you’re creating a large eCommerce site, you don’t need to write down every product page (unless you have that list handy somewhere). Just the broad categories will do for now.
Include a one-line description of each page: If you’re struggling to concisely describe a page’s purpose, then that is a sign you may need to break up the content into multiple pages.
Classify the page based on its purpose: A page’s purpose dictates what content appears on it and what the users’ ultimate goal or action will be, whether its navigation, education, search, interaction, and so on.
For instance, the homepage is a navigation page. While visitors might learn a lot about your brand from the homepage, it’s an important navigational tool that will guide them towards their next step. A blog post or services page, on the other hand, would be considered educational pages. There are also interaction pages, like contact and checkout.
05. Organize your pages through testing and analysis
Now it’s time to establish relationships between your pages and determine the best way to organize them. The exercises included in this section will help you decide the best website structure as well as how best to categorize or group your content.
To do this, you would ideally engage with your target users once more—however, you can always run through the exercises on your own or use a colleague or friend. Just make sure to review the user personas you’ve created before beginning any of these exercises and approach it from their point of view:
Card sorting (open)
In this exercise, you’ll give participants a stack of cards with topics on them. You can do this exercise in person with paper cards or an online card sorting tool.
You’ll then ask the participants to organize the cards in a way that makes the most sense to them. They will also need to assign a label to each category.
This is a useful technique if you’re designing a business website and are curious about how users would want to see the pages grouped together. For instance, would the FAQs page belong under About or Contact? Or should it be a top-level page?
Card sorting (closed)
Unlike an open card sort, all the participants do in this exercise is organize their cards of topics under already established labels.
This exercise is helpful for large sites, like those in eCommerce or media. For example, you wouldn’t really need to know how to label eCommerce categories like “Womens” and “Home,” but you would be concerned how the individual product pages should be categorized and sub-categorized, for example where “Travel accessories” and “Handbags” belong.
Tree testing
Tree testing is a useful exercise to complete after card sorting. Again, you can do this in person or online.
In this experiment, provide participants with a simplified version of your website structure, forming a map connecting all your pages in a tree-like structure. Ask them to complete certain tasks using this, and note if they struggle when trying to complete a task. If they do, this exercise will give you the opportunity to ask them where the issue is in real time.
For example, they might say there are too many links in the website menu, or that some labels don’t make sense. This invaluable information will ensure that you design the most user-friendly website navigation.
06. Finalize the sitemap
By this point, you’ve started to gather up all the pieces for your sitemap. And if you did tree testing, then you should already have a working sketch of it. Now, you’re going to create a formal sitemap that represents what your menu looks like.
While you can draw it out by hand or create it within design software, it’s easier to use a digital visual sitemap tool. One thing to keep in mind when creating a sitemap is that consistency is key.
Before you start laying down the pages and other navigational elements, create a legend for your sitemap. Use the same types of shapes, lines, arrows, and other symbols to signify certain types of content and relationships within your website.
07. Create wireframes and user flows
With the navigation settled, focus on nailing down the architecture of your pages. You’ll do this by creating wireframes for them. Wireframes help create a consistent structure for your site—to establish the layouts, patterns, and visual hierarchy rules for your pages.
You can sketch out your wireframes by hand if you’re building a smaller website. You also have the option of using digital wireframing software.
In terms of how you create your web page structures, the data you’ve gathered throughout this process will come in handy. However, don’t forget to reference the principles of design, too. Deviate from them and you risk creating a website that feels unfamiliar, unpredictable, and unusable to your visitors.
One other thing to consider at this stage is building user journeys based upon your wireframes. You can make these as simple or complex as you want. Regardless of what level of detail goes into the flow chart, this type of diagramming can help you identify dead ends, convoluted pathways, or confusing link systems on your website. Start by adding interaction points to show how certain pages connect to other pages within the IA.
