When creating a website, mobile app, or any digital product really, you have to organize and structure the product’s content and functionality in a way that visitors understand. Ideally, visitors will be able to quickly and easily find the information they’re looking for, whether that’s a blog post or email signup form or something else.

Making information accessible and easy for visitors to find is about more than website navigation — though that’s a major part of it. It’s about the entire structure of your site: what information is displayed on the homepage, where your product catalog is, how it can be accessed, and so on.

Download Now: Free Intro Guide to HTML & CSS

No part of a website’s content structure is created based on guesswork. There’s a science behind it known as information architecture. In this post, we’ll take a deep dive into information architecture.

In order for the user to be able to make sense of the content, it must be structured in consideration of two major factors: the user’s context and their needs.

Context is the environment in which the user will engage with the content. To figure out the context, consider where, when, why, and how the user will be seeking out and engaging with the content.

Content should also be structured according to the user’s needs as well as their goals, behaviors, and expectations. To identify these, you must be able to answer who the user is (ie. who will be consuming the content), what value the content provides them, and how they actually use the content.

If you think these questions sound familiar to ones you’d ask during the user experience (UX) design progress, you’re right. While information architecture is practiced in many disciplines, from technical writing to library science, it’s particularly important within the UX field.

Below we’ll look at the relationship between IA and UX. While both concepts apply to virtual and physical spaces, we’ll focus on the former so you can create websites, mobile apps, and other digital products that are easy to navigate and use.

Information Architecture UX

Information architecture and the user experience are intricately connected — but they are not the same.

Creating a good information architecture is key to creating a good user experience. You cannot have one without the other. Even the most beautiful and interactive sites won’t delight a user if the underlying organization is poor. But UX is a much broader topic than IA, encompassing everything related to how a user perceives, interacts with, and feels about a product or service.

So building an IA is just one step of the UX design process. Later steps include customer journey mapping, user research and testing, wireframing, prototyping, but to do any of that you have to first identify the specific needs of your users and create a structure to meet those needs.

This structure is a combination of four systems: organization, labelling, search, and navigation systems. Each system should be designed to meet the user’s needs.

  • Organization system: An IA’s organization system refers to how information is categorized. The system could be hierarchical (which is most often established visually), sequential (think of a step-by-step checkout process), or matrical (basically a choose-your-own adventure made possible by internal linking).
  • Labelling system: An IA’s labelling system refers to how information is represented. It is basically the handful of words chosen to represent a lot more text that the reader can’t see, but can guess. So, for example, some site visitors land on the homepage and want to know about a company’s mission, values, history, leadership team, and so on. Instead of putting all that on the homepage, an IA architect might simply use the label “About” in the navbar. People will be able to make the associations themselves.
  • Search system: An IA’s search system refers to how information can be looked up by the user. It is typically composed of a search engine, filters, and other tools. The search system also encompasses how search results are displayed. They might be displayed chronologically by date, or alphabetically by title or author, or based on popularity, and so on.
  • Navigation system: An IA’s navigation system refers to how users can move through a site’s hierarchy and access information they’re looking for. A navigation system might be made up of a main navigation interface, sub-navigation menus, breadcrumbs, pagination, and other navigational aids.

To build out this complex structure, an information architect typically performs a range of tasks, including user research, card sorting, content inventory, site mapping, and labelling. Some of these tasks will be repeated later in the UX design process with different objectives. The information architect’s objective is always to understand the user, their needs and goals, and how they look for information and create a structure that accommodates those needs, goals, and behaviors.

Now let’s look at some important guidelines to follow when designing that structure.

Information Architecture Principles

The eight principles of IA were first proposed by information architect and UX designer Dan Brown in a 2010 issue of the Bulletin of the American Society for Information Science and Technology. His objective was to define a set of “guidelines based in universal truths that provide a sketch of what makes any information architecture good.” These have been widely accepted in the IA field, and can help guide your design decisions.

Below is a brief description of each principle below with some examples.

The Principle of Objects

According to this principle, pieces of content, like objects, are unique and dynamic. They have their own attributes, behaviors, and life cycles, which has to be taken into consideration to best use that content. For example, product pages of retired items might be archived, or simply re-categorized.

Before you begin thinking about how to organize and structure content, you have to identify the kinds of content you’ll create. Will you be creating blog posts and product pages primarily? What about videos? Will videos be embedded within blog posts or product pages? Once you identify the content types you’ll have and how they relate to each other, then you can begin mapping out how to best provide this information to visitors.

The Principle of Choices

The principle of choices is about limiting the amount of choices for the user to only the most meaningful and relevant. These choices should be related to a particular task.

For example, if you have an email opt-in form popup, then there should really only be three choices for the user: to opt in, to not opt in, and to exit out of the popup. This will help limit the amount of cognitive effort required of the user, which can improve their experience.

The beauty company Alaffia provides a great example of such a popup.

Alaffia's email opt-in form follows the IA principle of choices

Image Source

The Principle of Disclosure

According to this principle, only disclose what is necessary for the user to understand what they’ll find next and make a decision. Take the newsletter opt-in form popup from above. Ideally, you’d include a short headline and a sentence of description to try to convince visitors to opt in and that’s it. If they do opt in, then you might redirect them to a landing page or send a welcome email with more information, but only at that step.

Take a Google Search Engine Results Page (SERP) as an example. In addition to providing 10 results for your search query, it provides a People Also Ask (PAA) question box. This box only shows the related search queries. To see the answer, you have to click the arrow to expand the box.

Google's People Also Ask question box is a great example of the principle of disclosure

The gist is to not overwhelm the user. You want to provide them only a certain amount of content at a time so that it’s easy to digest.

The Principle of Exemplars

According to the principle of exemplars, you should provide examples of content for category options that aren’t necessarily clear or intuitive upon reading.

Ecommerce sites provide the clearest examples of this principle. Take Jungalow’s homepage for example. It shows images for the categories “wallpaper” and “pillows.” While the category names are clear, the visuals help readers understand the colorful and bohemian-inspired products they can expect if they click one of the links.

Jungalow's homepage follows IA principle of exemplars by showing images for wallpaper and pillows nav links

Image Source

The Principle of Front Doors

The principle of front doors is the idea that your website or app has multiple access points. Not all your visitors will land on your homepage first, so you have to construct your website accordingly. By placing navigation aids and important information and elements on different pages, you’ll make sure that visitors know where they are on your site and what next steps they can take, no matter where they first land.

Nude Barre perfectly exemplifies this principle. In addition to a navigation header with drop-down menus and search box, Nude Barre has a fat footer at the bottom of each page. This footer contains important navigation links as well as a short description about the company and its products. That way, users can easily understand what the company does, find additional information they’re looking for, or browse wherever they are on the website.

Nude Barre's website footer is a great example of the IA principle of front doors

Image Source

The Principle of Multiple Classification

According to the principle of multiple classification, users should be provided multiple ways to browse the content on your site. This is important because people prefer different methods for finding information they’re looking for. Some, for example, may prefer to browse your site by category using sub-navigation menus. Others may prefer to search for what they’re looking for by keyword using a search bar. Others still may scroll down to your footer to find the navigation options they’re looking for, and so on.

Here’s a look at fitness website Ailey Extension, which provides a navigation bar with sub-navigation menus, a search bar, breadcrumbs, and a footer with navigation links.

Ailey Extension's website navigation system follows IA principle of multiple classification

Image Source

The Principle of Focused Navigation

The principle of focused navigation means that navigation menus and aids should be consistent across your site and only contain relevant content. If, for example, you use breadcrumbs on your blog, then you should use breadcrumbs everywhere on your site. Or say you have a primary navigation menu with Products and Services links and each has its own submenu. Then you should only list products under the Products link and services under the Services link. Otherwise, you’ll confuse your visitors.

Take a look at HubSpot’s homepage below. You can see a well-organized sub-navigation menu that clearly delineates which links belong to Education, and which to services, and so on.

HubSpot's homepage follows the principle of focused navigation

Image Source

The Principle of Growth

Following the principle of growth, you should construct your IA so that it can accommodate your site as it scales. Meaning, you should be able to add new content within a section as well as add new sections as a whole. Here’s a helpful illustration:

Information architecture principle of growth illustrated

Image Source

So say you run an ecommerce store. You might have a category for women’s apparel that only contains shirts and pants right now. But over time you can add additional sub-categories like dresses. Or you might create a whole new category for accessories, where you can list scarves, hats, jewelry, and more.

Remember these principles are meant to guide your design process — not dictate it. Let’s look at the different ways these principles have been implemented in IA examples of real websites.

Information Architecture Diagram Examples

Since a website’s content structure depends on the specific needs of the user, no structure will look exactly the same. The IA of an ecommerce store can look completely different from a blog and still meet its users’ respective needs.

Most websites and apps, no matter what their business niche, will share one similarity: they’ll have three or four levels of hierarchy. That way, the content users want will still be accessible in a few clicks, but the website navigation won’t be too broad. You can see this in the IA diagram examples — or visual sitemaps that outline websites in a skeletal form — below.

Duke Library

As part of its 2013 website redesign, Duke created and published an IA blueprint (shown below). Its new IA would have six main categories — Search & Find, Using the Library, Research Support, Course Support, Libraries, and About Us — under which its most important pages would be organized. These six categories would make up the site’s global navigation, and the sub-categories could be accessed in a drop-down menu.

The other parts of the sitemap show what content would appear above the navbar in the header (“utility navigation”), in the content area of the page (“news, events, exhibit” and the search box), and in the footer.

Duke Library Information Architecture Diagram Example

Image Source

Charity App

Below is the IA for a mobile app that UX designer Bogomolova Anfisa submitted to a client. While this is designated a “charity app,” most apps from Pinterest to Goodreads have a similar structure.

According to this IA, the user would first see some instructions to help them understand and use the app. Then they’d see a welcome page and be invited to log in with their Facebook credentials or email, or register an account if they haven’t already. From there, they’d be taken to the main page, which would contain options to view their bookmarks, messages, profile, or create a new post.

Charity app Information Architecture Diagram Example

Image Source

“The Museum”

Below is the IA for the mobile app of a client that design agency Pixel Fridge worked with. The six purple boxes represent the major sections of the museum’s website — but user research and testing showed that not all six were considered equally important. So on the left are the categories and subcategories that were placed in the navigation header. On the right are the categories and subcategories placed in the website footer.

The Museum Information Architecture Diagram Example

Image Source

Travel Booking Website

Like the Duke Library website and “The Museum,” the travel booking website consists of six major categories. These categories are account management, book a trip, about, destination, customer service, and travel tips. You’ll notice in the image below that there is an additional level in this site’s hierarchy. The pages connected to the three subcategories under the “destination” category form the fourth level.

Travel booking website Information Architecture Diagram Example

Image Source

Information Architecture Template

Information architecture is complex and building one out requires a lot of time and resources. The good news is you don’t have to start from scratch. There are templates available that you can use as the foundation for your next project. Some of these templates are stand-alone, and others are available with an IA mapping tool. Let's take a look at a few below.

UI8’s Information Architecture Kit

This kit created by web-based company UI8 contains 250 templates and over 500 elements to help you get started creating your information architecture for an app. In addition to being compatible with Adobe Creative Suite and Sketch, all assets in this kit are vector-based and fully scalable. You can use this kit to show the basic features and flow of an app before you start wireframing.

UI8 Information Architect kit template

Image Source

Keynote Information Architecture & Sitemap Template

Created by designer Alex Gilev, this file contains an easy-to-use IA template and a Google Doc outlining the content structure of a real project he created. The template contains simple blocks for showcasing the flow of your app or website. You don’t need a third-party software to edit this template — you can use the presentation software app Keynote.

Keynote Information Architecture & Sitemap Template

Image Source

Information Architecture Mapping

There are a variety of tools that you can use to map your information architecture. Let’s briefly look at a few below.

Draw.io

Draw.io is a free tool for creating user flows and information architecture and flowcharting. It automatically plugs into Google Drive so multiple people can collaborate on the same sitemap in real time. You can also choose to save your final visual site map to One Drive or Dropbox if you prefer. Here’s an example of a sitemap completed with Draw.io.

Information Architecture Diagram of app created with Draw-io

Image Source

OmniGraffle 

OmniGraffle is a premium tool that offers all the features you need to create a visual sitemap. Features include the more standard options like line, shape, text, and pen tools as well as the more advanced options like text objects, position snapping, geometric positioning, automatic layout, and default templates.

User creating information architecture sitemap with OmniGraffle

Image Source

FlowMapp

FlowMapp is designed to optimize the process of creating a visual sitemap of the website, app, or mobile project you’re creating. In addition to its drag-and-drop sitemap builder, it has tools for creating user flows, personas, and customer journey maps. FlowMapp offers four pricing plans, including a free option for a single project as well as three paid annual plans.

Information architecture sitemap created with FlowMapp

Image Source

Microsoft Visio

Microsoft Visio is a premium tool that offers dozens of premade templates, starter diagrams, and stencils to help you get started diagramming your IA. The latest version of Visio comes with even more features to help you create professional sitemaps, including one-step connectivity to Excel data and new shapes, for creating diagrams. Team members can also view, comment, and share Visio diagrams with one another to improve collaboration.

Information Architecture sitemap created with Microsoft Visio

Image Source

The Power of a Good Information Architecture

Information architecture is a critical part of the user experience. You want the user to not only be able to understand the structure of your content, but to predict it. They should be able to find jewelry under the sub-category of accessories, the author’s name on a blog post, and so on.

With a good IA, users can find the information they’re looking for as easily and quickly as possible. Without one, users won’t delight in your product, no matter how beautiful or engaging.

New Call-to-action

 css introduction

Originally published Nov 26, 2020 7:00:00 AM, updated January 07 2021

Topics:

Website Development