Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX

What is Information Architecture? (UX Tips and Examples)

Read Time: 6 mins

Information Architecture (or “IA”) is an important part of UX. Let me explain what Information Architecture is, how it’s like the organisation of your house, and how you can build it for your own websites.

What is Information Architecture?

Information Architecture is the process of organising and deciding which content to include or omit from your website or app. This includes all the information on your website and helps your audience understand how to complete tasks.

an example of information architecture structurean example of information architecture structurean example of information architecture structure
An example of Information Architecture structure for an eCommerce site

It might not be the most exciting, but IA is definitely one of the most important aspects of UX design. Carefully designed Information Architecture can mean the difference between your users leaving, or staying, within the first few seconds of visiting your website.

Just like an architectural blueprint determines the layout of your house, Information Architecture determines the structure of your website.

Video Explainer: Information Architecture

Check out this 5 minute video where I (with help from my cat and a leaf blower) explain what information architecture is and how you can create the best structure for your own websites. Don’t forget to like, share, and subscribe to Tuts+ on Youtube for more!

How to Design Information Architecture

We’re going to walk through this process for your own website or app. At the end you’ll have a fully designed structure (or map) of all the content that exists on your site, so that users can understand and navigate everything without running circles looking for information.

Step 1. Define User Goals

Designing Information Architecture starts with determining the main user goals, helping us figure out our top level pages. We’ll start with the homepage, then link out to all the other main pages. To figure out what those main pages are, work out what the main actions you want users to perform are.

For instance: the main user goals for an eCommerce site might be:

  • search for new clothing
  • add items to a cart
  • find a nearby store to shop at
main user goals for ecommerce websitemain user goals for ecommerce websitemain user goals for ecommerce website

So some top pages might be the clothing categories, the cart, and store locations.

Information Architecture is Like Your House 

We can also look at IA like your house (or my case, apartment); what’s the main layout of all the rooms in the house? A few rooms you’ll probably need are:

  • a kitchen to cook in
  • a bedroom to sleep in
  • a bathroom to shower in
a bedroom for (the cat)a bedroom for (the cat)a bedroom for (the cat)

These rooms would be included in the top navigation if your house was a website.

top level itemstop level itemstop level items

One thing to note is that the homepage shouldn’t be too long, trying to explain everything on the whole site. It should give a clear sense of the main purpose and the type of things users can find.

If you already have a website, one way to do this is to do a content audit. Here you’ll list out all the pages on a spreadsheet, with the number of visits, the URLs, and the type of content on the page. This can help you see which pages visitors are drawn to most (so you may want to draw even more attention to them), and which pages you might want to move or delete if they’re not being visited often.

Step 2. Group Content

Once we have the main pages in our hierarchy we can start grouping content within those pages. Think about what you want users to do on each page, just like you organise objects in your house based on how likely you are to use those things for main tasks in each room.

For example, items you’ll need in your office might be SD cards, chargers and camera equipment, whereas you’ll use cooking utensils in the kitchen.

If you’re anything like me, sometimes you’ll use the kitchen counter as a desk, but that would be incorrect placement because the goal of the kitchen is to cook food, not to work. If the desk were a page, we’d move it under the office page.

using the kitchen as an officeusing the kitchen as an officeusing the kitchen as an office

In terms of our eCommerce example we’d put the product pages under clothing, the checkout flow under the shopping cart, and the map of stores under location.

Step 3. Sort by Usefulness

The next important part of Information Architecture is determining the usefulness of each page and piece of content. We want to make sure that the content that users see is relevant to the page they’re on.

Users Don’t Want Cognitive Overload

Back to our house example, if we were to put every single kitchen item out on the counter top, it would be way too overwhelming to find exactly what we need when we need it.

This is called “cognitive overload”. To avoid this we have cupboards and drawers to store all this information for when we need it (in website terms: dropdown menus).

cat in the spice cupboardcat in the spice cupboardcat in the spice cupboard
Cat in the hatch

For eCommerce you’d generally want to group concepts together in dropdowns. For example; by type of clothing, or accessories:

dropdownsdropdownsdropdowns

Based on your content audit you can see how effective each page is in terms of the metrics you’re using. This will help us decide which components to focus on, and where to place them in the hierarchy.

For example, you probably don’t use a leaf blower every single day, so we’d probably tuck that away in storage rather than just laying it out in the middle of the garage.

Getting Into the Details

Another thing to consider is how people will be using the site. It’s important to assume people won’t always be accessing your site from the homepage (aka “the front door”). They might well enter from a blog post link, or a search on Google, and they could find themselves on any of your site pages. So it’s important to orient users and help them understand where they are.

Just as you might enter your home from different doors; coming through a side door, or the garage should be just as easy to navigate and appealing as entering from the front door.

entering the garage doorentering the garage doorentering the garage door

If we’re dealing with a blogging site, users should know what category they’re in, and how they can navigate through the larger structure of the site from there.

The user might be viewing your site on mobile, or desktop, so you’ll need to make sure the content is available on any platform; just like you’d have lights in your home so you can still navigate any of the rooms, at any time of day.

Final Thought: IA Evolves and Changes

That’s it for this introduction to Information Architecture! I hope you now have a better understanding of the steps needed to determine the IA on your own websites.

Don’t forget that even once you’ve completed the job, your site structure will always evolve and change, based on your user needs. Using our ever-flexible house analogy, this is just like you might change round the rooms in a home based on a growing family. There’s always room for improvement!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.