What Is Information Architecture? (UX Design Guide)

Hey, in this video, I'm going to talk about information architecture, information architecture might not be perceived as the most interesting or sexy element in UX design, but it definitely is vital when creating a good user experience. Hi, my name is Maureen. I am a product designer I'm based in Berlin and I've been working in UX for the past four.

I'm actually also a CareerFoundry you graduate. And in this video, I'm going to talk about information architecture. I'm going to explain to you what it is.

I'm going to show you some tangible examples, and also give you an introduction to some of the techniques that UX designers use to create information architecture. So let's get started right away. I want to give you an introduction to information architecture.

So what does information. Information architecture is the structuring and organization of information in the digital space. That sounds very complicated.

But what that basically means is that information architecture focuses on the question, where can I find information fast and easily information architecture connects three important things. The user, that is the person that is looking for information, the content that's the information itself and the context. That's the place where the information lives.

Now let's look at these areas in more detail. The first one is. Of course, when you're creating a website or a mobile app, you have to take your users into account.

And for information architecture, this also is true and information architecture. It's very important to focus on who you're designing for because people look for information in different ways and people also look for different kinds of information. For example, you might have someone that is looking for a pair of jeans.

And another person that is looking for an address of a nearby coffee shop and Google maps, both of them are looking for information, but different kinds of information. An important thing to mention here are mental models. A mental model describes someone thought process and how they perceive the world.

Of course have to take this mental model into account because this impacts how you process information, the expectations that your users have from your website is influenced by their experience with other similar websites. So I talked a bit about mental health. Now let's take a look at a real world.

Example of how a mental model influences my perception. Let's take a look at Amazon. Now.

I'm here on their website of Amazon and my mental model. Already shows me some expectations I have based on other e-commerce websites that I've seen in the past. So if I want to buy an office chair, I go to the Amazon website with a certain expectation that steak look at how Amazon looks like.

So I can already see that there are plenty of ways to look for information on Amazon. Of course, we have a search bar, but we also have navigation and a hamburger menu that shows all kinds of departments programs. And my settings, imagine that I want to buy an armless office chair.

How would I go about it? My mental model tells me that the best chances. To find an armless office chair is when I click shop by departments.

So let's see what's in there. I see electronics computers. Women's fashion will probably not find an office chair there, but let's take a look at home and kitchen because my expectation is an office chair is furniture.

So I might find that under the category. When I click on the category, home and kitchen, I see gets Homestar bath oven, done party supplies, but I also see this category. That's called furniture.

So the expectation that I have is answered when I click on furniture, I see a lot of different kinds of furniture. So I'm yet to find my office chair, but seeing when I scroll down, I can already see the first one. However, that's not the one that I'm looking for because this one does have armrests.

So to wrap that all up, what I just showed you is what my mental model. And how it works. When I visited a website, my mental model was that if I'm looking for an office chair, my best chances are when I look for furniture first and Amazon really understands how to mental models of the customer's work because they show me exactly what I expect.

At the place where I expected it. Now let's take a closer look at the content, the information itself. So the content or the information is the main reason why our users visit your website or your mobile app.

How can a UX designer make sure that people find the information they're looking for? Without having to spend hours looking for it. That is a main question that we try to answer with information architecture.

How can we make sure that the content that your users see is relevant to them and it's not overwhelming them? An important thing to mention here is cognitive load. Cognitive load is the brain power that you need to process information.

That is why it is important that you ex designers focus on always shown only relevant. And for me, Okay. So how can we make sure as UX designers, that our users only see relevant information, there are plenty of things that we can do, and it all focuses on limiting information.

For example, by using filters. Sorting options or offering our users the option to save information or compare information, to avoid cognitive overload. It is important for UX designers to know what information or what content lives on my website.

And you can do that by doing an content audit. When you're performing a content audit, you're making an event. Of all the information on a website.

So you're looking at all the pages, the articles, and you're grouping them so that you have in the end, a map of all the content that exists on your website to give you another example of how the content works and how we as UX designers limit cognitive load. Let's take a look at Amazon. So as you might remember, I was looking for an armless office chair, and I already came to the category furniture.

That's where I saw this armchair right here. Um, but I'm looking for one without. So how would I go about it?

Amazon has different options where they can limit information and thus avoid me getting overwhelmed. What I can do is use the filters on the side. Like here I can.

Choose furniture department. I can choose a price, a color, a seller, or what I can also do is I can sort all my search results, for example, by price, by review or by arrivals. But what I'm going to do in this case is I'm going to use the search bar because I'm looking for a very specific piece of information.

I'm looking for an office chair. So let's stop that right. And I'm going to add armless to limit my options.

And when I click on search, I immediately see information that is more relevant to me. However, it's still a lot, as you can see, we have 400, almost $460. So I will have to limit my options.

I'm going to do that by choosing a chair that's between 50 and a hundred dollars. And what I also like to do when I'm shopping online is to filter by review because I only want to have the best products. So when I do that, I can see that I only have 123 results.

That's way better. For me, I'm less overwhelmed. So what I've just shown you are some of the techniques that UX designers use to limit cognitive overload.

We looked at filters sorting using the search bar to get more relevant information. And we also saw that Amazon offers a lot of different search results. So for them.

Extremely important to guide their users and only show information that is relevant to their users. Let's take a look at another key element of information architecture, which is visual hierarchy. Now, when we just looked at the example from Amazon, you might have already unconsciously started to group elements together.

A good way to create information architecture is by using a visual hierarchy. That means that we group certain elements together and build patterns. A good term that summarizes this Arctic gestalt principles, gestalt principles.

Describe how we perceive. In relation to each other. So how do we recognize patterns and how do we build groups of elements?

Visual hierarchy makes it easier for users to scan a webpage or to see elements or pieces of information in relation to. So when we go back to the example of Amazon and look at the visual hierarchy on the product detail page, you can already see some patterns. So I want to know what kind of parents you can see.

The first thing that I see. Are these group of little thumbnails that imply to me that the risk of photo gallery, where I can see more photos of my office chair and not our way to create visual hierarchy is that Amazon first shows me all the important information that I need. For example, the color, the material, the product dimensions, and then the most important details about this chair.

When I scroll even further down, I see similar chairs also grouped together in a way that shows me a certain pattern. Why? Because I can see that every picture has the same elements, a chair, a review with star.

The price on the right top and possibility to like, or dislike this chair. So now, um, we've looked at Amazon, but to even further explain to you the importance of visual hierarchy, I would like to show you a website that was made in the nineties. Now, when we look at this website, you can see that there is no visual hierarchy at all.

Everything is so cramped together. And I don't know where to look first because there are so many colors, links, texts, images. So you can see that web design has come a long way from the night.

Let's take a look at another famous example from the present day. When you compare the website that I just showed you to this website from apple, you can see the importance of visual hierarchy on the website from apple. I can immediately see elements that are grouped together.

For example, this iPhone 12 banner shows a hotline. Some price information and a supplying two links to buy an iPhone or to learn more and an image I'm not overwhelmed. I know what the website is trying to tell me.

And this also applies to the rest of the website. So you can see that apple uses background colors to group elements, to. For example, here in the iPhone, 12 pro, I can see that all the elements are together because of this black bag.

The same goes for the iPad pro and then these little squares that showed the iMac and the apple watch. So hopefully the examples that I just showed you on Amazon, the website from the nineties, and also the apple website shows you the impact of visual hierarchy and how important it is to group pieces of information together. To avoid cognitive overload.

So up until now, we've taken a look at the user and the content. Let's now take a look at the final element of being good information architecture, which is the context that's where the information. Now it's not only important where the information lives on your webpage is also important to consider how people find information on your webpage.

That can happen through many different ways. For example, through a Google search, social media links or bookmarks, it's not always evident that your users enter your website. Through the homepage, there are many different entryways.

And one last thing that I would like to mention right here is S E O or search engine optimization. So I typed in armless office chair and Google and the search results. First show me Google ads, images, and then I get to the actual results.

So as E O affects the ranking of your search results, if you have good SEO, that means that your website is shown first in comparison to Ottawa. For example, I just typed in armless office chair. And one of the first search results I see is from Amazon.

And I can see that my key words that I typed in armless office chair, also part of the description here. So as you can see, S E O impacts how people can find your information, if they can even find it and how reliable that information is. So I talked about the user, the content and the context.

Those are the three important elements of information architecture, but you might be asking how is information architecture relevant to UX design? And aren't both things. The same information architecture is a vital part of the work of a UX designer, but a UX designer does more than just structuring information because an important.

That UX design also takes into account is an emotional part. And that is something that we don't really focus that much on when we talk about information architecture. So what do I mean with emotional?

A UX designer also focuses on creating an experience that is enjoyable or delightful. Whereas with information architecture, we mostly focus on making the information accessible find-able and using. So they also take into account the emotions of their users.

Okay. So what's next. If you're interested in information architecture, then head over to the block of career Foundry, where we have more articles covering information architecture and not a website that I can record.

It's the website of Nielsen Norman group. They have a lot of resources when it comes to information architecture, but also other elements of UX design. I really hope that you learn more about information architecture and that you enjoyed this video.

My name is Maureen, and you can follow me on UX dot collection over at Instagram. The link to my account is in the description. Yeah.

Thank you so much for watching. I hope you enjoyed this video and I'll see you soon.