What Is Information Architecture? (UX Design Guide)

Summary

In this informative video, product designer Maureen from Berlin introduces information architecture, emphasizing its crucial role in creating a seamless user experience. She explains how it structures digital information, focusing on the user, content, and context. Maureen provides tangible examples, like navigating Amazon, to illustrate mental models and cognitive load. She also discusses the importance of visual hierarchy and SEO, highlighting the balance between accessible information and an enjoyable user journey.

Takeaways

• 🏛️ Information Architecture is crucial for a good user experience, structuring and organizing information in digital spaces to make it easily accessible.
• 🧐 It focuses on three main components: the user, the content, and the context in which the information is presented.
• 🧠 Mental models are important as they describe how users perceive the world and process information, influencing their expectations and interactions with a website.
• 🛍️ Amazon is used as an example to illustrate how mental models guide users to find what they need, showing how the site is organized to meet these expectations.
• 📚 Content is central to why users visit a site or app, and UX designers must ensure that the content is relevant and not overwhelming to avoid cognitive overload.
• 🔍 Techniques such as filters, sorting options, and search bars are used to help users find relevant information quickly and efficiently.
• 📋 A content audit is a process where all information on a website is evaluated and organized, creating a map to understand what content exists and where it is located.
• 🎨 Visual hierarchy is essential in information architecture, as it helps users scan a webpage and understand the relationship between different pieces of information.
• 📉 Gestalt principles describe how we perceive elements in relation to each other, which is used in creating a visual hierarchy to group elements and build patterns.
• 🌐 The context in which information is found is important, considering how users find information on a webpage, which can be through various entryways like Google search, social media, or bookmarks.
• 🔍 SEO (Search Engine Optimization) impacts how users can find information, affecting the ranking of search results and making sure the information is discoverable and reliable.

Q & A

What is the main focus of information architecture in UX design?

Information architecture in UX design focuses on the structuring and organization of information in the digital space, making it easy for users to find information quickly and efficiently.

Who is Maureen and what is her background in UX design?

Maureen is a product designer based in Berlin who has been working in UX for the past four years. She is also a graduate of CareerFoundry.

What are the three important elements that information architecture connects?

Information architecture connects the user, the content, and the context. The user is the person looking for information, the content is the information itself, and the context is the place where the information lives.

Why is it important to consider the mental models of users in information architecture?

Mental models describe a person's thought process and perception of the world, which impacts how they process information and their expectations from a website. Considering mental models helps in designing an information architecture that aligns with user expectations and experiences.

Can you give an example of how mental models influence user behavior on a website?

An example is given with Amazon, where the user's mental model, based on past experiences with e-commerce websites, leads them to expect certain navigation paths and categories, such as 'Home and Kitchen' for furniture.

What is cognitive load and why is it important in information architecture?

Cognitive load refers to the brain power needed to process information. It is important in information architecture because designers need to limit the amount of information presented to users to avoid overwhelming them and to make the content easily digestible.

How can UX designers ensure that users find relevant information without cognitive overload?

UX designers can use techniques such as filters, sorting options, search bars, and content audits to limit the information presented to users, ensuring that only relevant content is shown.

What is a content audit and how does it help in information architecture?

A content audit is a comprehensive review and inventory of all the information on a website. It helps in information architecture by providing a map of all content, allowing designers to understand and organize the information effectively.

What is visual hierarchy and how does it benefit users in finding information?

Visual hierarchy is the arrangement of elements on a webpage to create a clear pattern and grouping, which makes it easier for users to scan and understand the information presented. It helps in reducing cognitive overload by guiding users to relevant information.

How does the context in which information is found affect information architecture?

The context, which is the place where information lives, affects how users find and interact with the information. It's important to consider various entry points to the website, such as search engines, social media, or bookmarks, as these influence the user's journey and information architecture design.

What is the relationship between information architecture and UX design?

Information architecture is a vital part of UX design, focusing on making information accessible and findable. However, UX design also considers the emotional aspect of the user experience, aiming to create an enjoyable and delightful interaction beyond just the structural organization of information.

What resources are recommended for further learning about information architecture?

For further learning about information architecture, Maureen recommends visiting the Nielsen Norman Group website, which offers a wealth of resources on information architecture and other elements of UX design.

Outlines

00:00

🏛 Introduction to Information Architecture

Maureen, a product designer based in Berlin and a CareerFoundry graduate, introduces the concept of information architecture as a crucial yet often underrated element in UX design. She explains that information architecture is about structuring and organizing information in digital spaces, focusing on the user, content, and context. Maureen emphasizes the importance of understanding users' mental models and how they influence their information-seeking behaviors, using Amazon as an example to illustrate how mental models shape user expectations and navigation on e-commerce websites.

05:02

📚 The Role of Content in Information Architecture

This paragraph delves into the importance of content in information architecture, which is the primary reason users visit websites or mobile apps. Maureen discusses the challenge of ensuring users can find the information they seek efficiently without being overwhelmed. She introduces the concept of cognitive load and how UX designers can manage it by using techniques like filters, sorting options, and saving or comparing information. Maureen also highlights the necessity of a content audit to map out all the content on a website, providing an example of how Amazon uses filters and search bars to help users find relevant products and limit cognitive overload.

10:07

🎨 The Impact of Visual Hierarchy in Information Architecture

Maureen explores the significance of visual hierarchy in information architecture, explaining how it helps users perceive patterns and group elements together, thus making it easier to scan a webpage. She uses Amazon's product detail page as an example to demonstrate how visual hierarchy presents information in a structured way, allowing users to quickly understand and navigate the content. Maureen contrasts this with a website from the nineties, which lacks visual hierarchy and overwhelms the user with cluttered information. She also compares it to Apple's website, which effectively uses visual hierarchy to group information and maintain a clean, uncluttered design that guides the user effortlessly.

15:09

🌐 Context and Emotional Aspects of Information Architecture in UX Design

In the final paragraph, Maureen discusses the context of information as the final piece of the information architecture puzzle, explaining how users can find information on a webpage through various entryways and the importance of SEO in making information discoverable. She also differentiates information architecture from UX design, noting that while information architecture focuses on accessibility and usability, UX design encompasses the emotional aspect, aiming to create an enjoyable and delightful experience. Maureen concludes by directing interested viewers to further resources on information architecture and invites them to follow her on Instagram for more insights.

Keywords

💡Information Architecture

Information Architecture (IA) refers to the practice of organizing, structuring, and labeling content in a clear and effective manner. It plays a central role in the video's theme by focusing on how users can find information quickly and easily. The script illustrates this through the example of Amazon, where the speaker navigates through the site's departments to find an armless office chair, demonstrating how IA helps in organizing digital spaces for efficient information retrieval.

💡UX Design

UX Design, short for User Experience Design, is the process of designing products that provide meaningful and enjoyable experiences to the users. In the context of the video, UX Design is shown to be closely related to Information Architecture, as both aim to improve the usability and accessibility of digital content. The speaker, Maureen, who identifies as a product designer, discusses various techniques used by UX designers to create effective IA, emphasizing the importance of user-centered design.

💡Mental Models

Mental models are the cognitive frameworks that individuals use to understand and navigate the world around them. The video explains how mental models influence a user's interaction with a website, such as Amazon, where the speaker's mental model guides her to expect certain navigational elements and categories based on her past experiences with e-commerce sites. This concept is integral to IA as it helps in designing interfaces that align with users' expectations and thought processes.

💡Cognitive Load

Cognitive Load refers to the amount of mental effort required to process information. The script discusses the importance of reducing cognitive load in IA by presenting only relevant information to users, thus avoiding information overload. Techniques such as filters, sorting options, and search bars are highlighted as ways to limit the information presented, as seen in the Amazon example where the speaker uses these features to narrow down her search for an office chair.

💡Content Audit

A Content Audit is a systematic review and evaluation of all the content present on a website. The video mentions it as a crucial step in IA, allowing UX designers to understand and map out the existing content. This process helps in identifying gaps, redundancies, and opportunities for improvement, which is essential for creating an organized and user-friendly information structure.

💡Filters

Filters are tools used in digital interfaces to narrow down search results or display options based on specific criteria. In the context of the video, filters are presented as a method to reduce cognitive load by allowing users to focus on relevant information. The script uses Amazon's filter options for price, color, and seller as examples of how filters can help users find products that meet their specific needs.

💡Visual Hierarchy

Visual Hierarchy is the arrangement of elements in a design to guide the user's eye and create a clear path for information consumption. The video emphasizes the importance of visual hierarchy in IA by showing how it helps users quickly understand the layout and content of a webpage. Examples from Amazon and a comparison with a poorly designed website from the nineties illustrate the impact of a well-structured visual hierarchy on user experience.

💡Gestalt Principles

Gestalt Principles are a set of laws that describe how people perceive visual elements in relation to each other, recognizing patterns and grouping elements together. The video uses these principles to explain how visual hierarchy is created, making it easier for users to process information on a webpage. The script refers to the product detail page on Amazon as an example where gestalt principles are applied to group related information effectively.

💡Search Engine Optimization (SEO)

SEO is the process of improving the visibility of a website or a web page in search engine results. The video script discusses how SEO impacts the discoverability of information by affecting the ranking of search results. Good SEO practices ensure that a website appears higher in search results, making it more accessible to users, as demonstrated by the Amazon search result for 'armless office chair'.

💡Emotional Design

Emotional Design refers to the aspect of UX Design that focuses on creating an emotional connection with the users. While IA is primarily concerned with the accessibility and usability of information, the video highlights that UX Design also considers the emotional impact on users, aiming to make their experience enjoyable and delightful. This aspect of design goes beyond functionality to consider the affective response of users to the interface.

Highlights

Information architecture is crucial for creating a good user experience, despite not being perceived as the most interesting aspect of UX design.

Maureen, a product designer based in Berlin and a CareerFoundry graduate, introduces the concept of information architecture in this video.

Information architecture involves structuring and organizing information in the digital space to facilitate fast and easy access.

The three key elements connected by information architecture are the user, content, and context.

Understanding users' mental models is essential in information architecture as it impacts how they process information and their expectations from websites.

Amazon's website is used as an example to demonstrate how mental models influence user behavior and expectations in finding products.

Cognitive load is a critical concept in UX design, referring to the brain power needed to process information.

UX designers use techniques like filters, sorting options, and search bars to limit information and prevent cognitive overload.

Content audits help UX designers understand what content exists on a website, which is vital for effective information architecture.

Amazon's use of filters and sorting options is highlighted as a method to limit information and enhance user experience.

Visual hierarchy is essential in information architecture, aiding users in scanning webpages and recognizing patterns.

Gestalt principles are introduced as a way to understand how users perceive elements in relation to each other on a webpage.

Examples from Amazon and a 1990s website are contrasted to illustrate the importance of visual hierarchy in modern web design.

Apple's website is used as an example of effective visual hierarchy, showing how elements are grouped to avoid overwhelming users.

The context of information is important, as users may find information on a website through various entryways, not just the homepage.

SEO impacts how users find information and the reliability of the information they discover through search engines.

Information architecture is a vital part of UX design, focusing on making information accessible, findable, and usable.

UX design goes beyond information architecture by also considering the emotional aspect of creating an enjoyable user experience.

Maureen recommends resources on the Nielsen Norman Group website for further learning on information architecture and other UX design elements.

The video concludes with an invitation to follow Maureen on Instagram for more insights into UX design.

Transcripts

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.