Explaining Information Architecture (IA)

Information architecture (IA) is the science of organizing and structuring content on websites, web and mobile applications and social media software.

Basically, IA helps users understand where they are on the site or app, what they have found, what they can expect and what else there is for them to see. It’s kind of like when you visit a museum, the signs explain the art work you are looking at, they tell you where you are and where else you can go, as well as what other exhibits you can visit. 

But there is something important to remember; IA is not part of the on-screen user interface (UI) but rather informs it. 

While the IA may not be visible in the UI, it still impacts the User Experience (UX). Based on its definition of UX we know that the total user experience consists of all the things the user encounters. So while users may not see the structure of the website or app, they still get the feeling that the content they are seeing is divided and connected in ways that meet their needs and expectations. 

The aim of IA is to organize content in a way that users will get the feeling everything on the site is connected and makes sense and to be able to find what they are looking for without exerting too much effort. IA mostly uses the Gestalt theory principles.

Gestalt Theory; what is that?

Gestalt theory is primarily used in cognitive psychology to explore the laws of meaningful perception of data that people constantly take in from the world around them, which is more often than not chaotic. Think about it; when you perceive a complex object consisting of many elements, you apply a conscious or subconscious method of arranging parts into a whole organized system rather than looking at it as just a set of simple objects. This works on different levels of perception, but the visual parts are of course the most interesting for designers creating interfaces. To top it all off, you happen to learn new cool things about psychology.

gestalt principles

Now, let’s get back to information architecture! IA forms the skeleton of any design project.  

According to the information architecture principles, we build the visual elements, functionality, interaction, and navigation. Subsequently, even the most compelling content and a masterful UI design can fail if you don’t apply the appropriate IA. Unorganized content makes navigation difficult and inexplicit, so the users can easily get lost or worse – feel annoyed. If the first interaction users face is bad, they may not give your product a second chance. 🤭

Here’s the kicker, many companies don’t recognize the importance of IA because they think it’s impractical. We won’t lie, IA does take some time to create and requires a specific set of skills for it to be done efficiently. However, powerful IA is a guarantee of a high-quality product since it reduces the possibility of usability and navigation problems. In practice, concepts of IA and navigation design are sometimes merged.

While it’s true that these concepts are related and that IA informs website navigation design, IA and navigation are not the same. IA spans well beyond website navigation. So when designing a new site, designers cannot ignore the IA and focus only on the navigation. Doing so is not only inefficient but dangerous. Navigation that does not adequately accommodate the full scope of a site’s content and functionality can be very costly.

Example for an IA (of an intranet) by Bjorn Amherd

Example of a sitemap with several “universes” by Bjorn Amherd

This way, a well-thought out IA can save the company both time and money which they would have otherwise spent on fixing and improvements.

Before Designing Navigation, Define the IA

When approaching a design or redesign project, it is important to take a look under the hood and start by defining or redefining the IA. A first pass is necessary to get a handle on the volume and complexity of the content, so the IA doesn’t need to be final before beginning to wireframe and prototype. Making navigation component choices based on looks alone can force you to change an ideal IA into something that doesn’t best serve the needs of users or accommodate your content. Displaying visual hierarchy is a valuable asset to IA, not only because it provides better context for the reader, but also generalizes key regions for the product.

The activities undertaken in defining an IA involve:

  • Content inventory: Locating and identifying existing site content by examining a website.
  • Content audit: Evaluating content usefulness, accuracy, tone of voice, and overall effectiveness.
  • Information grouping: Defining user-centered relationships between content.
  • Taxonomy development: Defining a standardized naming convention (controlled vocabulary) to apply to all site content.
  • Descriptive information creation: Defining useful metadata that can be utilized to generate “Related Link” lists or other navigation components that aid discovery.

As part of the UX process, IA design follows very similar patterns to flowcharting: Add shapes and connect them to a single document using lines in an organized fashion. The challenge when building IA is understanding how your app or website works from the user’s perspective, and how to organize that information into a readable, legible format.

Remember: good IA is the foundation of efficient UX, so the IA skill is essential for designers. Effective IA makes the product easy to use but only when united with design thinking does the product have a powerful user experience.

Takeaways and things to remember:

  • IA forms the skeleton of any design project for a digital product;
  • IA is like a blueprint of the layout;
  • IA is ever-changing and evolving;
  • Don’t focus on hierarchy, focus on structure;
  • Powerful IA guarantees a high-quality product since it reduces possible problems related to poor usability and navigation;
  • All processes should be logical;
  • Good IA is the foundation of an efficient user experience (UX).

 

This blog was first published as a guest post on Digital Knight’s website blog. To read the original blog, click here.

Leave a Reply