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.
