Information Architecture for Web Design: the Big Picture

Introduction

The beginning of all understanding is classification.

– Hayden White

Most probably you’re already familiar with concepts such as User Experience or usability. But there are also less-known ones, that are equally crucial for the success and profitability of your website or application.

One of them is Information Architecture (IA). 

It is the way of organizing the information on a website, mobile or web application so that using them is simple and intuitive.

Let’s dive into this concept and uncover the benefits which good IA brings for users and for a business.

The big picture of structuring information

In their book “Information Architecture for the World Wide Web”, Peter Morville, Louis Rosenfeld, and Jorge Arango explain that the way people understand the world is determined by their ability to organize information.

As the authors say:

We organize [the information] to understand, to explain, and to control.

— the quote from “Information Architecture for the World Wide Web”.

And the job of information architects is to use that on your website or application, organizing the information so that users can find what they’re looking for. Quickly and effortlessly.

What is Information Architecture (IA)?

Information architecture is the practice of deciding how to arrange the parts of something to be understandable.

— The Information Architecture Institute

Information Architecture (IA) defines the structure of a website or application, and the relationship between all the areas. It’s the skeleton.

The goal of IA is to classify the content on a website or web application in a way that is understandable, clear, and intuitive. Then, it needs to be organized in a user-centric way, so that users find what they need effortlessly. 

Therefore, Information Architecture combines users and their needs, business goals, and content. As a result, we receive content that is organized and easy to follow.

What does organizing information mean in practice? Categorizing content, creating consistent navigation, site map, dividing content into groups.

The role of Information Architect

IA designer is a complement to the design team with the main tasks consisting of research, navigation, data modeling, and labeling. Information architects often use tools such as card sorting, usability tests, and user interviews. 

Information architects gather users’ needs and content and turn them into something understandable. They are responsible for how a user will navigate through the web product and reach the relevant information. 

Information Architecture + UX Design

The term of Information Architecture (IA) is closely tied to the concept of User Experience (UX). 

IA is more about the structure of the entire website or application, while the UX design relates to how a user feels while interacting with them.

IA is a blueprint of the design structure which can be generated into wireframes and sitemaps of the project. UX designers use them as the basic materials so that they could plan navigation system.

— UX Planet

How information architects and UX designers work together

When the Information architect works along with the UX designer, he concentrates on Information Architecture design, while the UX designer concentrates on research and wireframing.

In the analogy of constructing a building, the early phases of development involve understanding the needs of the building, its potential tenants, and local building codes. Information architects and user experience designers work closely together to determine those needs and requirements. Information Architecture is the process of identifying and defining those particular needs, and creating a structure and nomenclature for them.

— Matt Rae, Adobe XD Ideas

Information Architecture vs sitemap

A sitemap lists all the pages and presents the hierarchy and structure between them. It also often shows the page goals and functionalities. Site mapping is a part of IA design. Sitemaps are based on previously created Information Architecture.

Information Architecture vs navigation

Navigation guides users through a website or application via links. Is basically a collection of user interface components like filters, related links, footers, and also global or local on-page navigation. Navigation is created on the basis of IA, as part of it.

Examples of clear global website navigation:

Example of well-designed, clear website navigation that guides us through the pages:

And here you have both:

Why is Information Architecture important to web design?

The way in which users will use an application or website depends largely on how information is presented and organised.

If you’ve ever tried to use something and thought, “where am I supposed to go next?” or “this doesn’t make any sense,” you are encountering an issue with an information architecture.

— The Information Architecture Institute

The simplest example to understand that is an e-commerce application. Imagine you enter an app trying to find new sneakers, and there’s no clear navigation nor search bar. Sneakers are mixed with sandals and boots. How much time will it take to leave the app and go to the competition? Exactly. That’s why we need to organize content in a logical way and make it as easy as possible for users to find what they need. 

Good IA helps us to navigate through tons of information that flush us on every step.

In this world where we can sometimes feel as though we are drowning in data, Information Architecture provides us with a logical way of organizing this data to make it easier to locate.

— Carrie Webster, Smashing Magazine

Examples of Information Architecture

Let’s start with the example of poor Information Architecture. We don’t know about you, but we’re confused about where to go and overwhelmed by the number of offers here. Plus, the not-so-good User Experience makes us question the authority of the website.

Now a good one. Simple categories on Zappos, along with clear navigation through them after clicking. Nonintrusive offers on the right and a search bar within the specific category to make things even easier.

Responding to users’ needs

Without a good IA, users may be confused after entering your website or application. IA responds to their needs, which oscillate around finding the right information at the right time.

What’s the exact value of Information Architecture (IA)?

IA is often underestimated, but it is a critical piece not only to the user experience of your web properties, but it can have a direct impact on your bottom line.

Where a well thought out IA and site navigation is unlikely to receive much praise (because it is simply intuitive and causes low friction), a poorly designed or thoughtless IA can lead to increased volume on phone, email and chat support, or will simply deter potential customers from engaging with your product. Spend the money up front to get the IA right, or you may be paying the price later.

— Matt Rae

The value of Information Architecture for users

Reduces information overload

When a user sees too much information on a screen, and there’s no clear path they can take, most likely they will drop off. Too many options may result in no decision at all. Well-crafted Information Architecture means there are clear paths to follow and not too much information on the screen.

Therefore, it speeds up the process of finding the right information, which on the other hand has a positive impact on User Experience. By that, it also reduces frustration.

Keeps a user focused

We don’t want our users to be distracted when they visit our website or application. Good Information Architecture makes it easy for them to follow the task they are trying to achieve.

Helps users to understand where they are

Thanks to good navigation and Information Architecture users not only know which path to take to achieve their goal, but it’s also easy to acknowledge where they are right now. The right visual navigation path provides the right context.

Gives the right information fast

Since there’s an overload of information all around us, we need to deliver the right content at the right time. There’s no place for too slow or too complicated process of finding the information.

The value of Information Architecture for business

Discourages users from escaping to competition

Good Information Architecture allows you to engage your users better and for a longer time, for example, with the use of well-designed navigation and a well-presented value proposition. Plus, if users easily find what they need on your website, they most likely won’t search for more on competitors’ sites. Also, remember that when people abandon your website or app and go to the competition, it will be hard to bring them back.

Increases the chance of conversion and improves ROI

When your users can find what they’re looking for easily and intuitively, with minimum steps possible, the chance of conversion rises. We can achieve that by proper navigation and messaging. Since the income from sales increases, ROI improves.

Reduces the cost of support

If it’s easy to find needed information on your website or application, users won’t contact support unnecessarily — they will be able to find answers to their questions by themselves.

Reduces marketing costs

Poor website structure often results in poor marketing efforts, especially in terms of SEO. Websites that offer great navigation and User Experience climb higher in Google. Plus, if people leave your website or application before completing the desired action, it will be hard to win them back with remarketing because of the bad impression. 

Improves reputation

Speaking of an impression, when users can’t find what they’re looking for and navigate easily on your website or app, it has a negative impact on your brand and its reputation. Good IA and UX design will cause the opposite effect.

Is Information Architecture always needed?

The answer is: yes. It is always necessary to think information architecture and navigation through. In the case of smaller, simple pages or landing pages it takes less time, but we never should skip that step. And of course, the importance and value of IA will be highly recognized while designing an extensive website or application.

Creating a well-designed Information Architecture

Let’s take a look at the practice. Even if you’re going to delegate this work to your team or freelancers, we encourage you to become familiar with the basics of the process.

In order to take care of a well-designed IA, information architects seek the answers to the following questions:

• How do you organize and divide information?
• How do you present information?
• How do you communicate the way you navigate through the app?
• How will the user navigate in the application?
• How will the user look for information?

The components that make up a good IA are:

• Organization system
• Labeling system
• Navigation system
• Searching system

A well-designed Information Architecture creates an intuitive and efficient User Experience. For this reason, not only UX skills are necessary to create a good web product, IA skills are equally important. Only then it is possible to create a website or application meeting the users’ needs.

Tools and templates to help you create an IA

There are a lot of tools for creating Information Architecture. The simplest views can be created using tools such as Microsoft Visio.

Whiteboard is a visual collaboration plugin for Adobe XD that allows to work within the same environment as design files and other workflows.

Miro is another visual collaboration tool that supports teamwork with zoomable canvas, web whiteboards, and useful integrations.

There are also useful applications for creating diagrams or mind mappings:

• Create.ly,
• OmniGraffle,
• XMind,
• draw.io,
• SmartDraw,
• Coggle.

Presenting Information Architecture

The way of presenting Information Architecture depends on you and your team’s preferences. It can be done using mind mapping tools. This way we can effectively visualize the Information Architecture along with its flows.

Information Architecture can also be presented as a simple diagram. This version will work well even with very large pages or applications.

Diagrams are often used for site maps that are based on a previously created IA.

How to create Information Architecture for web design?

The process of creating IA generally comes up to 4 steps: defining the company’s goals, defining users’ goals, analyzing competitors, and defining content. If you try to make an existing website or application better, you should also focus on the content audit.

To design an effective Information Architecture, your team needs to go through the stages of the design process.

User research

Work on IA should begin with user research and analysis. An important part of this process is to understand the needs and problems of product users and to reconcile them with the business goals. We can use a number of tools for that purpose: card sorting, user interviews, focus groups, or surveys.

Navigation

The next step is to define the navigation, the hierarchy of the individual pages, and to design how and when to display them. At this stage, we can use programs for mind mapping or diagrams.

Labeling

Once we’ve developed the information structure, it’s time to name the sections and pages so that they are understandable to the user. They also make it easier to navigate the page.

Wireframing

The next step is to make wireframes that will be based on IA. By using them, we define a visual hierarchy of information on the page as well as connections between subsequent views of the application.

It is worthwhile to work on Information Architecture at the beginning of the product design process – after recognizing the users of the product, but before creating wireframes and mockups.

The first work should include structuring the information on the page, developing navigation, and naming the labels. The next step should be to test the IA on the users, for example using card sorting.

In the end: the bigger picture of the future

While the tangible targets of our work, websites and software, draw attention and investment, our superpower is organizing words to change minds, and so I propose a new definition: information architecture is the design of language and classification systems to change the world.

— Peter Morville

In this quote, Peter Morville refers to the concept of a mental model: a representation of something we — as users, and as people — have in our minds. They are built in our brains based on what we’ve learned and experienced while interacting with products and the world.

By improving our mental models — we’re learning. And by improving mental models of others — we’re teaching. “Improving others’ mental models means we’re teaching, and it’s in this uncharted stretch of IA where treasure lies.” — says Morville.

Information Architecture from a business perspective is one thing. But we never should underestimate its other power: organizing to teach, shape minds, and change the world. 

Next steps

Since IA is only one of many aspects everyone who takes care of a business’s success needs to understand, we invite you to go deeper into the topic of User Experience design. Other chapters of this handbook may turn out helpful for you.