Modified 122/4/2316/2024
In this article:
- What is Information Architecture?
- Methods for organizing information
- How to utilize visual elements
- Examples
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 navigaterefers to the way a website is designed to make the process of searching for information easy and intuitive. Think of it as creating a map to imagine the route users will take to find something, and structuring your site around that map. The way you display the content on your your websites should effectively show users how to find what they are looking for on your site without becoming confused or frustrated.
...
overwhelmed.
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.
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 is then expanded upon, giving the user more options to narrow their search.
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
Poorly organized IA is just as harmful to a site’s success as poor content itself. Like a complex maze, a user can get lost in an endless loop of clicking random links in search of their desired information.
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.
Utilizing and Implementing Information Architecture
Good information architecture can be achieved through a variety of strategies, from user to testing to physically laying the site out in front of you.
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 in categories. This will help ensure that users are finding information where they expect to find it.
In general, good IA goes unnoticed, but bad IA does not.This page will go over some of the basic principles of information architecture, as well as some ways to help you sort information on your own site.
Methods for Organizing Information
There are multiple strategies to implementing information architecture. Below are some ways to figure out an effective structure of your site.
Card Sorting
One common method for implementing IA is called card sorting. Despite its name, it does not always require physical cards. It is a way to sort subjects into predetermined categories to test if information is where users would expect to find it.
To do this method, label 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" “About” page for your organizationorganization, the cards you may sort under it could be "History," "Mission," and "Goals." “History,” “Mission,” and “Goals.” Below is an example of a digital version of this, using information from theIKEA website.
If you still feel unsure about the results of your card sorting, recruit a few willing volunteers to do it go through this process and compare and contrast the results. That way, you havean outside perspective on how intuitive your site’s navigation is.
Information Flow
...
Charts
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, allowing you to effectively organize and group information in an easy-to-understand way.
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.
Effective Image Use
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.
chart. This helps break down content into categories while also showing the paths a user might take. Using the information as the example of card sorting, shown below is an information flow chart example of the IKEA website. Though it looks similar, information flow charts are better at representing a hierarchy of information, as well as mapping how users can get from one page to another.
Utilizing Visual Elements
Visuals are important to making a website look more interesting, but they are also good methods when it comes to displaying information. Here are some things to keep in mind when adding visual media to your site.
Images
Be sure that each image you add serves a purpose and directly relates to the written subject matter. Using images that are objectively interesting, visually appealing, or attention-grabbing can be beneficial. Always make sure that images are high-resolution, and consider creating alt text in order to make your site more accessible to those who use screen readers. 
Icons
Icons are small visual tools used to representfunctions on the an interface. A user will be able to navigate a website site 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 associated with the search bar, which we can see on the IKEA website (see figure 7). 
function, and a heart usually means “like” or “favorite.” These are icons with unambiguous meanings, and therefore effective as a shortcut for written information.
Another important aspect of icons (or other small visual cues) is consistency. Below are some icons from the IKEA website. Although each of them has a different meaning, they have a similar style, making the page look 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 and makes the page more visually consistent.
8 Different on
Visit the Google's Icon Library to to see different icons and their meanings.
Color
Though you might be limited with how much color you can incorporate into your site, it’s important to take color contrast into consideration if you are adding things such as text onto images or text boxes with a colored background. When you do this, the color of the text against the color of the background may make it difficult to read, especially to those with visual impairments. Use theWebAIM Contrast Checkerto test the readability of text on your site if it’sanything other than black text on a white or light gray background.
Examples of Good Information Architecture
To see how all these ideas come together in practice, here is an example of good IA from the Adidas home page. There's a visually appealing balance of words and images, with a clear navigation bar at the top with broad categories of different shoes. When these categories are hovered over, it reveals its subcategories to better narrow down a user’s search. Navigation bars are helpful to keep some information hidden so the user isn’t bombarded by too many choices.
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.
Illinois State’s home page is also a good example of effective IA. The home page doesn’t have a huge mess of information, but rather the important things that prospective students would be visiting the site for, such as clearly labeled tabs for academic programs and visiting campus. Other information requires a little more work to find.
Examples of 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 is an example of bad IA. The lack of images and white space cause a blur effect on the page.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. It'sa good idea to limit the number of things to look at on a screen, like seen in the examples of good IA above.
Information architecture involves a balance between how much information is shown immediately and how much needs a little bit more navigatingto be found. You don’t want to put all the information on your site on one page (see the above example), but you also don’t want to hide your information in endless layers of subcategories. Try putting yourself into the shoes of a potential user of your site and figure out the most intuitive way to go about organizing it.