100 THINGS I LEARNED ABOUT DESIGN  |  AUGUST 19, 2020

100 THINGS I LEARNED ABOUT DESIGN
AUGUST 19, 2020

13. Information Architecture

13. Information Architecture

Information Architecture can make or break your designs. If the content on your website or app isn't findable/discoverable users will move on to greener (information) pastures. Let’s look at how to avoid this by designing a wildly successful Information Architecture, or IA. 

Information Architecture can make or break your designs. If the content on your website or app isn't findable or discoverable users will move on to greener (information) pastures. Let’s look at how to avoid this by designing a wildly successful Information Architecture, or IA. 

What is Information Architecture? 

One of the best definitions I’ve seen is from a gentleman that goes by the name of Chris How. In the 10-minute video below—which I urge you to check out—he brilliantly sums up Information Architecture into the following definition:

"Organizing stuff, so it’s easy to find.” - Chris How

I love the simplicity of this definition and how spot-on it is. So, let’s go ahead and unpack it. 

The first part is Organizing stuff. Referring to the information (or content) on your product. In other words all of the content that makes up your website or app. 

So it’s easy to find. Easy for users to find what they’re looking for on your product. Whether they’re shopping for something, searching for information or just looking to be entertained. 

What is Information Architecture? 

One of the best definitions I’ve seen is from a gentleman that goes by the name of Chris How. In the 10-minute video below—which I urge you to check out—he brilliantly sums up Information Architecture into the following definition:

"Organizing stuff, so it’s easy to find.” - Chris How

I love the simplicity of this definition and how spot-on it is. So, let’s go ahead and unpack it.

The first part is Organizing stuff. 
Referring to the information (or content) on your product. In other words all of the content that makes up your website or app.

So it’s easy to find.
Easy for users to find what they’re looking for on your product. Whether they’re shopping for something, searching for information or just looking to be entertained.

Why is Information Architecture Important?

Why does IA matter? Let’s look at a quick example so you understand the value of Information Architecture. Imagine a user is shopping on an online shoe store and she is looking for a specific pair of sneakers. She lands on the shoe store website and moves through the following pages:

Home page
Women
Sneakers
Product page 

Now this is a very simplified example of Information Architecture in action. The user has the task of finding shoes and moves through the website by selecting categories like Women and Sneakers. She eventually makes it to her destination, which is the product page for the specific pair of sneaekers she was looking for. 

Now imagine if there was no Information Architecture. And instead of these categories, the home page simply displayed every available product. That would mean our user would have to scroll through hundreds of products until finding the sneakers she was after. And I bet you can imagine the outcome of this? That user would likely give up and look for the sneakers elsewhere. 

And that’s the value of Information Architecture. It makes it easy to find stuff by organizing content in a logical way that users can understand. This helps them move through your website or app efficiently and effectively. And without Information Architecture, navigating becomes very difficult. 

Interlude - My favorite example of IA 

The shoe store example above really simplifies things but now let’s look at a more complex Information Architecture that deals with hundreds of products and pieces of content. 

Aesop.com is one of my favorite examples of Information Architecture at the moment. I won’t get too far in the weeds here, but if you select the Shop category from the main menu, you can see the magic start to unfold. 

Why is IA important?

Why does IA matter? Let’s look at a quick example so you understand the value of Information Architecture. Imagine a user is shopping on an online shoe store and she is looking for a specific pair of sneakers. She lands on the shoe store website and moves through the following pages:

Home page
Women
Sneakers
Product page

Now this is a very simplified example of Information Architecture in action. The user has the task of finding shoes and moves through the website by selecting categories like Women and Sneakers. She eventually makes it to her destination, which is the product page for the specific pair of sneakers she was looking for.

Now imagine if there was no Information Architecture. And instead of these categories, the home page simply displayed every available product. That would mean our user would have to scroll through hundreds of products until finding the sneakers she was after. And I bet you can imagine the outcome of this? That user would likely give up and look for the sneakers elsewhere.

And that’s the value of Information Architecture. It makes it easy to find stuff by organizing content in a logical way that users can understand. This helps them move through your website or app efficiently and effectively. And without Information Architecture, navigating becomes very difficult.

Interlude - My favorite example of IA 

The shoe store example above really simplifies things but now let’s look at a more complex Information Architecture that deals with hundreds of products and pieces of content. 

Aesop.com is one of my favorite examples of Information Architecture at the moment. I won’t get too far in the weeds here, but if you select the Shop category from the main menu, you can see the magic start to unfold. 

You start with 7 different categories and as you rollover each category a panel is revealed with subcategories. You can also see a small exponent next to the main categories, which indicates the number of products in that category. 

You start with 7 different categories and as you rollover each category a panel is revealed with subcategories. You can also see a small exponent next to the main categories, which indicates the number of products in that category.

Now this is the best part. When I rollover one of the subcategories, a third panel is revealed with a list of products. 

Amazing, right? In just a few seconds and with minimal clicks you can pinpoint the product you’re looking for based on your needs. And that’s what a successful Information Architecture is all about.

Now this is the best part. When I rollover one of the subcategories, a third panel is revealed with a list of products.

Amazing, right? In just a few seconds and with minimal clicks you can pinpoint the product you’re looking for based on your needs. And that’s what a successful Information Architecture is all about.

Designing Information Architecture 

My approach to designing Information Architecture is twofold. 

Step 1 is to create User Flows for your product. User Flows help your identify the steps users take to achieve their goals in the context of your website or app. This is huge because these steps help you identify the content and ultimately the pages that make up your product. If you’re interested in learning more, check out this article on User Flows. 

Designing Information Architecture 

My approach to designing Information Architecture is twofold. 

Step 1 is to create User Flows for your product. User Flows help your identify the steps users take to achieve their goals in the context of your website or app. This is huge because these steps help you identify the content and ultimately the pages that make up your product. If you’re interested in learning more, check out this article on User Flows. 

Step 2 is where you design your UX Sitemap, which a visual representation of your Information Architecture. Think of the sitemap like a roadmap for your product. But instead of cities and towns, you have categories and subcategories. And just like roads on a roadmap, the Sitemap shows how all of these categories are connected. 

Step 2 is where you design your UX Sitemap, which a visual representation of your Information Architecture. Think of the sitemap like a roadmap for your product. But instead of cities and towns, you have categories and subcategories. And just like roads on a roadmap, the Sitemap shows how all of these categories are connected. 

I often use the terms Sitemap and Information Architecture interchangeably. The only difference is that the Sitemap is the actual tangible design deliverable that you can use to visualize your Information Architecture.  

Validating Information Architecture 

The last thing I want to cover is how to validate your Information Architecture through a technique called Card Sorting. Put simply, Card Sorting is where you swap roles with the users and allow them to organize the content on your product for you. 

The way it works is you provide users with cards that represent the different pages of your website or app and then ask users to organize the cards into groups. This gives you an understanding of how users think and you can then reflect this thought-process in your Information Architecture.

I often use the terms Sitemap and Information Architecture interchangeably. The only difference is that the Sitemap is the actual tangible design deliverable that you can use to visualize your Information Architecture.  

Validating Information Architecture 

The last thing I want to cover is how to validate your Information Architecture through a technique called Card Sorting. Put simply, Card Sorting is where you swap roles with the users and allow them to organize the content on your product for you. 

The way it works is you provide users with cards that represent the different pages of your website or app and then ask users to organize the cards into groups. This gives you an understanding of how users think and you can then reflect this thought-process in your Information Architecture.

Get started with our online UX course.

Get started with our online UX course.