Imagine this situation: You visit a website and spend time looking for the information you need. You click one link, then another, and again, and again… But you come up empty — you can’t find anything useful. Whether you’re a product owner or designer, you don’t want your website to be a maze with nothing but frustrating blind alleys.
Information architecture helps to avoid this. It handles the chaos, creating a clear structure for a website, an app, or a program. In this article, we’ll explain how you can create superb information architecture.
What is information architecture?
When you arrive at a new place, you need something to guide you. If you’re spending a weekend in an unfamiliar city, you have to consult a map. Then you use street signs and addresses on buildings to reach your destination. It’s the same with any unfamiliar location: You don’t want to waste time and get lost, so you need a guidance.
Information architecture (IA) is the science of structuring content as it is applied to news websites or blogs, online stores, booking apps, downloadable software, etc. The goal of information architecture is to classify the content in a clear and understandable way and arrange it according to relations between the content pieces, allowing users to find what they need with less effort. Not applied solely when creating a product from scratch, IA is used in redesign.
Information architecture is a part of interaction design that considers content, context, and users. This means that user needs, business goals, and different types of content must be taken into account while structuring a product’s information. Usually, information architecture design falls under the care of UX and UI designers or an information architect.
Peter Morville, the co-author of Information Architecture for the World Wide Web, explains the role of an information architect as a person who bridges users and content by designing search and navigation, embodying the abstract ideas into prototypes, units, and disciplines to turn the concepts into something understandable. An information architect who works along with a UX designer can concentrate solely on information architecture design, while a UX designer devotes more time to research. In this case, an architect creates a number of deliverables, which we will describe in the section on the steps of IA development.
Regardless of the title, a person who works on information architecture must start with the rules that help to achieve the goal of IA. In the next part of the article we will look closer at the activities of IA design and its deliverables. To create a strong information architecture, you must start with thorough research, so it all begins with learning your users’ needs and behaviors.
1. Conduct customer research
The aim of this stage is to learn about a user’s needs. You must work with a customer profile and the results of customer and stakeholder interviews. The data revealed at this stage will allow you create a user persona profile, list business requirements, and get an idea of what a user wants. Because these tasks belong to a UX designer or business analyst, you need the results of their activities.
At the end of this stage, you’ll end up with a user profile and user flow that illustrate the way a user thinks and interacts with a product. When you have all the necessary information about the product and the people who use/will use it, you can go to the next step.
2. Update and review the content
When you know what a user wants, you can update the content of an existing website and list it. The main activities to perform at this stage are content inventory and content audit. Let’s look at them.
Content inventory
The goal of this activity is to create a list of information elements on all the pages of a website and classify them by topic and sub-topic. This includes the following items:
- Headings and subheadings
- Texts
- Media files (images, video, audio)
- Documents (doc, pdf, ppt)
- URL-links of the pages
Content audit
Well, you have the content list. Now, scrap the least important items, update some pieces of content, and rearrange them for the next steps. This activity is applicable both to new products and to app or website redesigns.
The next step involves grouping content into different categories. For this purpose, you will need the help of potential users.
3. Apply card sorting for content classification
All types of content must be classified and have proper names that won’t confuse a user. You need a taxonomy to do it. Taxonomy is another word for classification. In the case of IA, it’s an attempt to group different unstructured pieces of information and give them descriptions.
The most popular and the most important technique that allows taxonomizing the content is card sorting.
Card sorting
As soon as you have the content, arrange it. The point of the activity is to see directly how users perceive the product’s content pieces. Card sorting is usually conducted in small groups of 15–20 participants, where they have to describe and sort 30–60 cards with pieces of information into different classes. The cards contain topics that must be categorized, or pieces of content that must be described.
There are three types of card sorting:
Open — for free labeling. The participants categorize topics as they choose and in the order that makes sense to them. This approach allows you to understand how the users think in terms of classification. Open type is used to design new products.
Closed — with pre-designed categories. This method of card sorting is usually applied in redesign. The participants are given pre-defined categories from a content inventory list, and they sort the content according to them.
Hybrid — unites elements of both types, or starts with an open type, moving to the closed type to follow user logic.
You can conduct card sorting in groups or as a personal interview, or remotely via IA tools like UserZoom, usabiliTEST, xSort, and Optimal Sort.
The cards can be digital or physical, i.e. written on pieces of paper. When creating cards, use the results of content inventory. Separate topics have to be on separate index cards. They should have numbers and some should have blank spaces, so the participants can create their own names for categories. As a result, you’ll see the approximate structure of a product and proceed with the first prototypes. But first, the categories must be labeled and defined in a navigation system.
4. Build a website hierarchy for user-friendly navigation
Every website or an app needs a solid navigation system that helps a user find what they need. As soon as you have the results of card sorting activities, you will understand how to embody and classify the content in reality. This step embraces navigation design, labeling, and site mapping. Let’s define them one by one.
Navigation
When working on navigation, remember that no matter which pages the visitors come from, they must be able to find what they need. A navigation system consists of many elements — buttons, menus, and tables of content. There are four main type:
Hierarchical — shows the information hierarchy from main elements to their sub-categories. An example is drop-down menus for large websites.
Global or site-wide — present across all the pages, this navigation enables the users to get to the main page from every location, for example, left- or right-sided, top-centered, sticky menus, footers, or hamburger menus.
Local — shows the navigation of a specific area: a page or a part of a site and its content. It can be present in the form of lists.
Contextual — relates to specific content, like document, page, video-audio object, or related products. Remember to make a clickable logo that directs a user right to a homepage.
These types can complement each other, but the main principle of good navigation is to avoid overloading with guiding elements. Sometimes navigation can be present in the form of an interactive guide, tour, or tutorial. It can navigate a user through a multi-stage process or a complex website. You can decide on the best option for location and menu type by conducting an A/B and multivariate testing for conversion optimization.
Labeling
The correct label gives users proper conceptualization of the category they are dealing with. During this procedure, name all parts of IA with headings and subheadings. The purpose of labels is to attract user attention, giving a proper understanding of what to expect from clicking on a link. Examples are the best description, so illustrate your labels.
When navigation and labeling are ready, outline the whole structure, creating a site map. Site map creation can be preceded by a mind map. Let’s look at the role of mind mapping in this procedure.
Mind mapping
Mind mapping is a technique based on relations between different pages of a digital product with a detailed description of functionality. As a tool, a mind map is very useful for instruction, allowing someone to understand the structure of the content by logical sequence and to develop associations. Apply it to an app or a website to visually represent the entities of a product and follow the logical structure of the content.
With a mind map, you can start making a site map. But first, you have to choose the hierarchy design pattern.
Hierarchy design patterns
Design pattern is a way to structure the content. It allows you to choose the direction at the very beginning of IA building or website redesign activities. There are several IA design patterns, which we describe below:
Single page model — one that serves a single purpose, for example, downloading an app or providing contact info.
Flat structure — one with a linear hierarchy, where all the pages are equally important. This pattern is suitable for brochure-like websites.
Index pages pattern — consists of a home page and equally important subpages. This type is one of the most common choices for websites because it’s simple, familiar, and deep enough for most use cases.
Strict hierarchy pattern — similar to index pages pattern, but more branchy: Each subpage has one or more subpages. Strict hierarchy pattern is chosen by websites that have a large number of categories such as blogs, eCommerce sites, or media.
Co-existing hierarchies pattern — unites several types of hierarchies in case the information from one subpage overlaps the content of another.
As soon as you have decided on design pattern, you can apply it along with the results of card sorting in site mapping.
Site mapping
A sitemap is a way to illustrate the hierarchy of content and display navigation. The word sitemap is self-explanatory. It’s a map of the content and categories of a website.
On a sitemap, you visualize the whole hierarchy of content. You can make it on paper or using different tools like WriteMaps, MindNode, Scapple, MindManager, XMind.
Show the sitemap to stakeholders and send it to developers so that they can understand what to do next: Are there any important changes that have to be applied before a product goes into production? Still, there is one more stage before production — prototyping.
5. Create a UI prototype for future development
Although a sitemap is the first prototype in information architecture development, you still have to create advanced prototypes by wireframing and data modeling.
Wireframing
While a sitemap is a scheme of content hierarchy, a wireframe embodies the final look. A wireframe is a schematic representation of a website or an app that displays the navigation and interface of a website. An IA wireframe shows all the pages and screens of a product, with headlines, tags, labels, and grey boxes where the content will be placed. It’s also the first draft of a digital product’s UI. This deliverable is a bridge between the information architect and a UX/UI designer. Using a wireframe, you can conduct user testing to understand if an IA serves its purpose. These test results will allow you to apply the changes before developers and UI designers start working on a product.
Wireframes are drawn on paper or using a special tool or a software like Justinmind, Wireframe.cc, Fluid UI, Balsamiq, or Visio for creating digital wireframes, sitemaps, or high-fidelity prototypes. Wireframes are tested by users to define whether the structure is clear and concise.
Data modeling
The final step before development is data modeling: You can embody the content structure in data modeling systems. At this stage, you communicate the prototypes to stakeholders and developers to work on a product.
Usually, it’s done via wireframes or right through CMS (content management systems), supporting systems for content publishing, like Squarespace, WordPress, and Wix. Lay the content out via CMS and later use it as the platform for website development.
The eight principles of Information Architecture
No matter if you’re goal is to improve user experience of a website or create a completely new app, you must take eight principles into consideration.
These eight principles were defined by Dan Brown, a co-founder of EightShapes design company. An information architect should stick to them to build a product:
- Principle of objects — a content is a living thing with its lifecycle, behaviors, and attributes.
- Principle of choices — the pages of a product should offer a number of meaningful choices to users.
- Principle of disclosure — the users mustn’t be overloaded with information; show only enough information to help them understand what kinds of information they’ll find as they dig deeper.
- Principle of exemplars — the best way to describe the content categories is to show examples of the contents.
- Principle of front doors — assume at least half of the website’s visitors will come through some page other than the home page.
- Principle of multiple classification — offer users several different classification schemes to browse the site’s content.
- Principle of focused navigation — don’t mix different categories in your navigation scheme.
- Principle of growth — assume the content you have today is a small fraction of the content you will have tomorrow.
Applying these principles, you are likely to structure existing content and leave a space for growth.
Examples of information architecture
As you have already seen, almost every stage has its own deliverables. But the most important deliverable that unite the results of an information architect’s hard work is a sitemap. Now, let’s see how websites structure their content.
First of all, it’s a part of the BBC news agency website, so in a way, it is also a part of a more global product. The information architecture of BBC Weather features a strict hierarchy design pattern with three hierarchy levels. The main categories involve forecast pages, UK weather, coast and sea, weather presenters, and story pages. A homepage features a map that sends visitors right to the cities they want and video. This IA allows a user to access the information from the home page.
The Global Seed network is an initiative that supports diversity and protects the public food system by encouraging farmers and gardeners to share seeds of different plants. The site’s information architecture has a simple navigation system and allows new visitors to sign up in two steps and find the available types of seeds right at the homepage. Also, the homepage features recent news. All this shows the visitors the advantages of an initiative and helps them to make a decision.
This is an example of not-so-good information architecture. Spotify’s website features a co-existing hierarchy pattern with reiteration and partial reiteration of some sections. This makes the information architecture a little messy. Renee Lin, a UX designer, found a way to improve it by simplifying it and removing some sections.
Renee Lin, a UX designer, found a way to improve it by simplifying it and removing some sections.
Final word
One of the new trends in UX/UI design is zero UI. If you have ever used Google Assistant or Alexa, you know what it’s like: A user finds necessary information without even touching a screen, just by saying a couple of words or potentially even by a gesture. This is what virtual reality projects most frequently apply. Zero UI will influence the way information architecture is created. But as long as we have a regular UI, we must stick to some tried-and-true tips like adhering to the eight principles of IA and not overloading users with information.
Originally published at AltexSoft Tech Blog “How to Create Information Architecture for Web Design”
