Design

Information architecture: Definition, tips, and best practices

4 min read
Tony Ho Tran
  •  Nov 22, 2019
Link copied to clipboard

Information architecture (IA) is how your users gather information from your product.

Imagine you’re looking for a new book from your favorite author. On your street there are two bookstores.

One looks like a bomb exploded inside of it. Books are scattered all about and employees are nowhere to be found. You find a sci-fi novel sitting right next to a cookbook, and you find a dictionary right next to a Harry Potter novel.

It’s haphazard and chaotic—making it very difficult for you to find the book you need.

The second bookstore is the opposite. The books are well-organized. It contains clearly labeled sections for fiction, non-fiction, children’s books, and more. When you walk in, you instinctively know where to go to find what you’re looking for—but you don’t even notice it.

That’s the power of a good information architecture. When it’s put in place with some solid best practices, you don’t even notice it’s there.

Let’s go into:

  • What is information architecture?
  • Why is information architecture important?
  • The 8 principles of information architecture
  • How to get started with information architecture

What is information architecture?

Information architecture is all the ways your content is organized and presented to your user.

It’s pretty hard to nail down.

Information architecture encompasses many different facets of the user experience. One can find examples of it all over, from digital products like websites and software to real-world places like libraries and grocery stores.

Here’s a great definition from the Information Architecture Institute, a nonprofit dedicated to helping improve and democratize IA:

“Information architecture is about helping people understand their surroundings and find what they’re looking for, in the real world as well as online.”

On your website, it refers to the design and layout of your pages that users use to find the content they’re looking for.

The content includes:

  • Blog posts
  • Landing pages
  • Case studies
  • White pages
  • Infographics

… and more!

Why is information architecture important?

As a designer, understanding information architecture is an invaluable skill you need if you want to make the UX of your digital products seamless and user-friendly.

“When your users’ predictions about an experience are confirmed, they are satisfied and happy with their experience.”

Twitter Logo

Peter Morville, findability consultant and thought leader on information architecture, says that information architecture goes beyond simple usability—it’s also about improving qualities of UX like accessibility and credibility.

He suggests designers should also consider themselves as “Architects of Understanding.”

“We help our users to understand where they are, what they’ve found, what to expect and what’s around,” Morville says. “We help our clients to understand what’s possible.”

[Use Freehand to outline your project’s information architecture.]

Consider the Expectation Confirmation Theory, which explains the typical way your users are expected to experience your website.

When your users’ predictions about an experience are confirmed, they are satisfied and happy with their experience.

However, if their prediction about an experience is not confirmed, their flow is disrupted. Not all disruptions are bad. For example, the experience could overperform from the users’ predictions.

But if it underperforms, your user won’t be satisfied with the experience.

Information architecture is all about either confirming or—ideally—overperforming the users’ predictions. When you do, you’ll leave your users more satisfied and more likely to use your digital product more often.

Five ways to improve your information architecture

Now let’s take a look at some best practices to employ when creating a good information architecture for your website.

1. Go beyond wireframes

In his piece The System of Information Architecture, Morville writes:

“In an era of cross-channel experiences and product-service systems, it makes less and less sense to design sitemaps and wireframes without also mapping the customer journey, modeling site dynamics, and analyzing impacts upon business processes, incentives, and the org chart.”

When it comes to designing for the users’ full experience, you need to do more than whip up a wireframe. You need to dive deep into their journey to understand who your users are and—more importantly—why they’re on your website.

For that, you’ll need a solid UX design process. To help, check out this fun video we created all on the topic:

If you need an even deeper dive, check out our article on the six stages of the UX design process.

2. Check your biases

As with all things design, it’s important to always challenge your assumptions.

One issue that often arises with biases is seeing patterns that aren’t actually there. Designer Preethi Shreeya summed it up well in an article on information architecture:

“Often we go with these false beliefs in order to satisfy our own personal opinions as designers. We think we know better, and sometimes we do. Sometimes we don’t.

If beliefs were always true, we would have been able to predict our users’ behaviors for the entire time they were on our websites.

That doesn’t ever happen, does it? So the solution is to rely on research and explanations over beliefs.”

Instead of going with the patterns you see and your preconceived notions of what your user wants, turn to the research and data. Let them guide you when you construct your website’s information architecture.

3. Know the principles of information architecture

In 2010, Dan Brown, founder of design firm Eight Shapes and information architect (not the best-selling thriller author), outlined eight guiding principles for designing information architecture.

The principles are:

  1. Principle of objects. The content on your site is a “living, breathing thing.” That means that they have different characteristics that make them unique and are susceptible to change at any moment.
  2. Principle of choices. Your pages should give meaningful choices to your users. The choices should be focused, and provide your users with exactly what they need—and only that. Anything else is irrelevant.
  3. Principle of disclosure. Your pages should contain just enough information for your users to understand what they’ll get if they continue navigating your site. For example, if you have a blog, you don’t want to present every blog post in its entirety on your home page.
  4. Principle of exemplars. Show examples of the type of content your users will get in each category you present. For example, if you have a music streaming site, you might have categories that read: “Jazz (Miles Davis, John Coltrane)” and “Classic Rock (The Beatles, Jimi Hendrix)”. This helps your user understand what they’ll be getting.
  5. Principle of front doors. Don’t assume that your users will arrive at your site via the home page. Each page should serve to acclimate the reader to your website.
  6. Principle of multiple classification. Your users will have different methods of finding content on your website. As the designer, you need to accommodate them. For example, users might search for broad genres on a music streaming site (e.g. Jazz Music) while others might search for specific artists for songs (e.g. My Favorite Things by John Coltrane).
  7. Principle of focused navigation. Don’t present all of your content on your website. That’s a great way to overwhelm and turn off your user. Instead, give them focused ways to navigate to different content assets you might have.
  8. Principle of growth. Your content will grow and scale as your business does. Your information architecture should be prepared for this inevitably.

Let these principles guide your information architecture building process. For a more detailed explanation of all eight, be sure to read Brown’s breakdown of them here.

4. Remember your goals

As with so much of the design process, you should always keep your goals in mind. Every decision you make needs to be in line with them in order to create the best product for your users.

That means making sure it’s in line with your brand and the way you want your users to perceive you.

UX researcher Jared Spool said it best:

“Every piece of content, whether it’s existing or new, should be viewed through the filter of your message architecture. You have to ask yourself, ‘Does this support my brand? Does it convey the appropriate qualities to my audience?’ If the answer is yes, then you include it.”

Knowing this, you’ll be able to make decisions about what to include and—more importantly—what not to include in your information architecture.

This helps you avoid becoming an infoarder. 

What’s an infoarder? It’s a portmanteau of “information hoarder,” referring to the designer that doesn’t want to get rid of any piece of content because, after all, you made it and you might need it one day.

This is a fallacy—one you should challenge as much as any of your other biases.

5. Nail the visual hierarchy

Your website’s visual hierarchy is how you arrange your design elements on the page.

Like any hierarchy, you’re going to arrange the elements in order of importance—typically, with the most important elements first where the eye naturally sees them.

[Use InVision Freehand to organize your thoughts—and elements.]

For example, most Westerners read from top to bottom, left to right. That makes website layouts like the F-shape or Z-shape pattern very popular.

Here’s a heat map of where users typically look for Google results:

F-shaped heatmap.

Notice how it resembles an F? There’s a reason for that!

Alternatively, there’s also the Z-shape pattern for websites with less content.

Z-shaped heatmap.

For more on this, check out our articles on the topic of layout and visual hierarchy below:

Let us help

InVision’s collaborative design platform helps your team create a fantastic information architecture for your website.

Capture your product’s style with Freehand wireframes.

Create animations and microinteractions in Studio to get a true-to-life interactive view of the screens your users will see.

And rest easy knowing that Inspect ensures pixel-perfect handoffs from design to development.

Collaborate in real time on a digital whiteboard