Information architecture, or IA, is used to create the structure of a website or mobile application.

In a perfect world, the IA of your website would give your user the context needed to know where they are and where their desired information is located in relation to their current position. But before your IA can come anywhere close to this ideal scenario, you must first understand and know how to apply the conventions and standards of information architecture.

Only after you have an understanding of these foundational tools can you develop and execute good IA for your website or mobile application.

Principles of good information architecture

To begin our discussion, we’ll first cover principles of good information architecture. After, we’ll dive deeper into the details of developing a structure.

Point of view

Before developing the IA of your website or mobile application, it’s important to first establish the point of view you’re going to take. With this, we recommend that you take the point of view of your users, not your organization.

Take the company Columbia as an example. In the screenshot, you can see the company’s jargon seeping through their main product categorization. Other than long-term loyal customers and employees, most users would have a difficult time knowing what “3 in 1 Interchange” or “Titanium Collection” are.

columbia example

Source: Columbia.com

At Zion & Zion, one of the ways we avoid this common mistake is by defining the user’s point of view with personas before diving into the structure of a website. Based on the target audiences’ demographics, we generate a name, select a photo, and pinpoint specific details for our representative. Once these are defined, we can use our persona(s) to test out our IA.

For instance, with the Columbia example, we may ask, “Would Tim (our persona) understand ‘Titanium Collection’ without trial-and-error clicking?” If the answer is no, we would go back to the drawing board and change the overall organization, label name, or categorization until Tim could confidently use the navigation with ease.

Applying point of view: Don’t let your site reflect the people who built it. Take the point of view of your users, not your company.

User expectations

Over time, users become accustomed to certain elements of web design. They anticipate specific items to be set up in particular ways. For example, users expect terms to be consistent throughout the entire site, and they expect states to be organized alphabetically. Users assume these standards are consistent across all websites and mobile applications because it’s what they’ve grown accustomed to.

Sometimes when you restructure these items, it can work. But for the majority of the time, discarding user expectations creates unnecessary steps within your user’s journey. This can ultimately result in unsatisfied, frustrated users.

Applying user expectations: Don’t reinvent the wheel. Take what users are familiar with and work it into the structure of your site so it’s predictable, easy, and simple to use.

Information scent

Information scent is defined by dictionary.com as, “visual and linguistic cues on a website to the information it contains.” In user experience, it essentially means how successful your users will be able to find what they are looking for based on the label(s) you provide.

Users can either have high information scent or low information scent, depending on how confident they feel in their decision.

High information scent: A user would have high information scent if they can confidently determine what is to come after they click a link or button on your website.

Low information scent: On the contrary, when there’s low information scent, there’s ambiguity and a user may be left asking themselves, “After I click this link, what’s going to happen?”

Here is an example from Oregon State University Athletics where users may have low information scent. Both “Sports” and “Athletics” can mean similar things, so it may be hard for users to predict what content is to follow after they click either navigational item. Additionally, it’s difficult to forecast what “Our Beaver Nation” entails. Does that link lead the user to a blog, login page, or newsfeed of current events? With their current structure and labeling system, it’s difficult to tell.

To avoid this mistake, make sure you’re being completely clear with your IA. The labels in your navigation shouldn’t leave your users wondering, “What does this mean?”

Applying information scent: Aim for high information scent within your site. Design your labels, categories, and links to be straight-forward so your users can easily predict what’s to come.

Developing a successful information architecture

After going over principles of good information architecture, you should be in the right mindset to develop your IA. With IA development comes more standards and conventions, including:

  • Organization systems
  • Labels
  • Structures

Organization systems

An organization system is how you decide to group and categorize the pages on your mobile application or website. While there are many ways to organize and group your content, some of the popular include organizing by:

  • Topic
  • Task
  • Audience
  • Geographic
  • Alphabetical
organization systems

Organization systems and their application

Topic

Topic organization works well for sites that have a wide range of content and services.

For example, Arizona State University’s website, pictured below, uses a topic organization system. Being such a large university, they have an extensive amount of pages they need to include on their site. A topic organization system allows them to condense and refine their wide range of navigational items, including “Academics,” “Alumni,” and “About ASU.”

asu example

Source: Asu.edu

Applying topic organization systems: When your website includes a wide range of different services, products, or features use a topic organization system within your global navigation to condense and coordinate your various pages of content.

Task

A task organization system is when all navigational items are action-orientated. This works best when your CTAs (call-to-actions) require an immediate action from your user. For example, Virgin America Airlines labels their navigation with “Book,” “Check-In,” and “Manage.” These are some of the top actions a user would want to complete when arriving to their site, so it works well.

On the other hand, task organization systems don’t work as well when you try to force what should be a topic item into a verb so it can be viewed as a task item, such as “Discover.” Typically, when this is done, users have low information scent because there are few specifics behind the term. Because of this, you’ll want to make sure that the action-orientated items have relevance to your company and users before implementing.

Task organization system application: Identify your users’ main objectives on your website or mobile application. If those top objectives are action-orientated, consider implementing a task organization system.

Audience

An audience organization system is appropriate when your company has separate, defined user groups as a part of its target audience. However, this system only works when your users self-identify with the audience(s) you’re proposing. When defining your user groups, make sure there’s no overlap. You don’t want to leave your user questioning which group they belong to.

Take Wells Fargo as an example. Their global navigation is organized by audience. They list “Personal,” “Small Business,” and “Commercial” as the main items in their navigation. This segmentation works well because all three of these audience groups will need to interact with the bank in different ways.

Applying audience organization systems: If your target audience has separate user groups that each interact with your company in exclusive, distinct ways, try organizing your content by audience. But keep in mind, there should be no overlap.

Geographic

A geographic organization system works well for websites that have varying products or services across multiple locations. Take the below image as an example. Ikea, a home décor store, has 375 stores worldwide. Each individual store offers a wide range of differing products.

Because of this, Ikea’s home page automatically directs the user to a geographic organization system. This works well because it helps to refine the user’s search. After the user selects their location, they can then get into the details of Ikea’s local products based on their indicated location.

ikea example

Source: Ikea.com

Applying geographical organization systems: Organize your content and pages with a geographical organization system if selecting a location is a required first step in your user’s journey.

Alphabetical

When many think of alphabetical navigation, they tend to think of a site that includes a terminology index, like a library. While this organization type does work well for academic websites, an alphabetical organization system can also work well in a few other scenarios.

For example, Backcountry, an online outdoor clothing company, uses an alphabetical organization system to categorize their brands from A-Z. This works well because a brand name doesn’t change. For instance, if a user is searching for an item from the brand Crocs, a brand Backcountry offers, they will always sort by the letter “C.” There’s no ambiguity here.

On the contrary, if Backcountry were to sort their product types from A-Z, there may be some confusion for the user. As an example, if a user was looking for a new pair of pants, would they sort by “P” for pants, “J” for jeans, or “B” for bottoms? Since there are multiple ways for the user to search product types from A-Z, an alphabetical organization system would not be successful.

Applying alphabetical organization systems: Before implementing this organization system, ensure your terminology is consistent across all mediums to avoid unclear, undefined search terms.

Labels

After selecting an appropriate organization system for your IA, it’s time to label your navigational items. When selecting proper terminology for your labels, remember to keep in mind the principles of good information architecture including point of view, user expectations, and information scent.

Additionally, we recommend sticking to the following rules of labeling:

  • Detailed: Labels should include an accurate description of what the item leads to.
  • Brief: Don’t say more than what’s necessary.
  • Comprehensive: Make sure the label encompassed all (or the majority of) the content within the corresponding section.
  • Recognizable: Use terms that are familiar to your users.
  • Front-loaded: Put the most important text first for easy scannability.

Applying the rules of labels: Get in the mindset of your user. If your labels aren’t detailed, brief, comprehensive, recognizable, or front-loaded, consider selecting new terminology until your labels are easy for your users to understand and interact with.

Structure

Structure, our last information architecture element to cover, is how categories relate to one another. This is an important element to define up-front because it has implications on the rest of your IA.

Here, we’ll explain what you need to know about the two most common IA structures, hierarchy and sequential.

Hierarchy

A hierarchy structure is useful because many users are familiar with it. It involves categories and subcategories that reveal a high-level view of how certain navigational items relate to one another.

Below, Primp and Blow, a website launched in early 2016 by Zion & Zion, includes a hierarchy structure. Underneath the category labeled “Services” are sub-categories “Primp,” “Blow,” and “Special Occasions.” Additionally, under each sub-category, is a sub-sub-category that reveals what is included within “Primp,” “Blow,” and “Special Occasions.”

This structure gives the user a quick look into how these items are related to one another. It’s organized, structured, and functional. If the user wanted to dive deeper into the details of either the sub-category, they’re able to do so quickly and easily.

Applying hierarchy structure: Implement this structure when your website or mobile application includes a wide range of pages that can be broken into layers of categories and sub-categories.

Sequential

Typically, a sequential navigation is used within certain sections of your website or mobile application, rather than the entire website. A sequential structure is useful in scenarios where the user has to go through a process to complete a particular task, such as a check-out, login, or sign-up process.

Below, Amazon uses a sequential structure on their check-out page. Within the navigation, the user can see the defined, linear steps they must go through to place and order. It’s evident that the user is currently on step two out of four. This provides the user with clarity as to where they are in the process.

It also provides the user with a level of control, allowing them to click through the various steps as needed.

amazon example

Source: Amazon.com

Applying sequential structure: Use this structure when there’s a process on your website or mobile application that’s linear. Keep your steps straight-forward, and give your users perspective and clarity through a progress indicator.

To wrap things up

Developing, executing, and applying a successful information architecture is no easy task. It requires time, patience, trial and error, and lots of testing. After launching your website or mobile application, it then takes even more testing to ensure that what you’ve created is working as well as you had expected.

Whether your users realize it or not (and they probably don’t), the information architecture can have major implications for their experience. A poor IA leaves users frustrated, dissatisfied, and angry; whereas a good IA leaves users satisfied, calm, and fulfilled—knowing that their desired task was easily accomplished.