Modified 12/4/23
What is Information Architecture?
Information Architecture (IA) is a series of design choices and techniques that prioritize the organization, structure, and labeling of page content and pages in a way that is easy for users to understand and navigate. The way you display the content on your websites should effectively show users how to find what they are looking for on your site without becoming confused or frustrated.
There are two main components of information architecture:
- Structure, or the way information is organized into categories, hierarchies, and relationships.
- Labeling, or the things used to represent and classify those things.
Why use Information Architecture?
Good IA results in your user quickly becoming accustomed to your site’s layout and utilizing its features effectively, completing whatever task they have with as little trouble as possible. This results in better user satisfaction and the likelihood of them coming back or recommending your site to others.
If you find it easy to find and purchase what you need from an online store or access the information you were looking for, then you are much more likely to go back to that site and use it again. So, this is what you should be trying to achieve through your own site's design.
Good Information Architecture
To see how these ideas come together in practice, here is an example of good IA from the Adidas home page (see figure 1). The home page of the site acts as a welcome, giving the user any big updates or new releases that have come out. And, at the top of the page, the navigation is separated into broad categories which show more content when hovered over. Each category has categories within, as a way to better narrow down a user's search.
Below is an example of these categories in action. If a user was looking for men’s shoes used for playing soccer, they would hover over “Men,” go to “Shoes,” and then click on “Soccer” (see figure 2). If the user cannot find what they need using these categories, the search bar is always at the top right no matter where the user is on the website.
Bad Information Architecture
A poorly organized site might prevent people from visiting it again, especially if they never end up finding the information that they need. If you put too much content on a page, how do users know where to look?
The Craigslist home page (see figure 3) is an example of bad IA. While there is quite a bit of information provided and a useful search bar, that is about all that there is. The lack of images and white space cause a blur effect on the page. Creating a larger page with spaced out information may be more effective here. If you're not familiar with the site, you may have to scan the entire page and read all of the links in order to find what you are looking for. There are dozens of links on just one page alone that gives a user too many options to look through all at once, and too many choices can be overwhelming.
You want users to have a pleasant experience on your site, so creating an organizational system that is logical and easy to navigate is the way to go!
Utilizing and Implementing Information Architecture
Good information architecture can be achieved through a variety of strategies. Below are some methods to figure out an effective structure of your site.
Card Sorting
One very simple and easy method of implementing IA is using a method called card sorting (see figure 4). While not always requiring physical cards, it is a method of outlining the information you want on your site and organizing it as logically as possible by putting different information into categories. This will help ensure that users are finding information where they expect to find it.
Label each card with its own piece of information that you want included on the website. Then, group them based on which category they fall under. For example, if one of your categories is an "About" page for your organization, the cards you may sort under it could be "History," "Mission," and "Goals."
If you still feel unsure about the results of your card sorting, recruit a few willing volunteers to go through this process and compare the results. That way, you have an outside perspective on how intuitive your site's navigation is.
Information Flow Trees
Another method of laying out the content of a website is to create an information flow tree (see figure 5). Like card sorting, this helps visualize and break down the content and paths of a website.
Starting on the homepage, identify what information you want included on the website. In the example, a shoe website is shown in the information flow tree. From the homepage, users would choose to look at either men’s or women’s shoes. From there, they can choose more specific styles (boots, high heels, tennis shoes, etc.) The individual branches will become different pages on the site.
Visuals
Below are some things to keep in mind when adding visual media to your site.
Images
Good IA should also be accompanied by visuals that correspond to the information. Several users are visually inclined, so having some visual cues along with the text will make things clearer and more appealing for your users.
Take the YouTube home page and video thumbnails for example (see figure 6). If the title of a video was displayed without a corresponding image, many users may not be interested in navigating to the video without a visual preview of the content of the video.
It's important to make sure that any images you use online are high-resolution, if possible. Consider creating alt text for any images you use, in order to make your sight more accessible to those with visual impairments.
Icons
Icons are small visual tools used to represent functions on the interface. A user will be able to navigate a website using the icons, limiting the number of words used on the screen. Icons should be simple, consistent, and universal. For example, a magnifying glass is commonly associated with the search function, which we can see on the IKEA website (see figure 7).
The icons below (see figure 8) are all similar in style with one another. Though they each convey a different meaning, they are within the same icon "family," which helps make the page more visually consistent.
Visit Google's Icon Library to see different icons and their meanings.