What Is Information Architecture in UX and How to Make It?

Lebogang

The information architecture or IA has become a real trend among designers. As any data in the world, information brings much more value when it’s structured. So, let’s look through the principles of information architecture that make sense. It’s much more than just card sorting and mind mapping!

Do you want to help users clearly understand complex digital products? You’re in the right place at the right time! Let’s go!

What Is Information Architecture?

IA is a stand-alone science of structuring and organizing the content of apps, websites, socials, and so on. It studies the principles of information arrangement that leads to better user experience.

This scientific direction was founded by Richard Saul Wurman — a graphic designer and architect from the US. To date, this sphere grew up to have its own Information Architecture Institute. According to experts from this institute, they develop the practice of arranging the parts of bigger systems to make the whole picture understandable. Being clear and logical to easily navigate through complex information sets is their main objective.


Here is a quick insight into the main IA components:

Picture by Andrey Herasymenko

Why Is IA Important?

According to the scheme with Users, Content, and Context, we conclude the following… Creating valuable content is useless unless it is findable. If users find what they need quickly, they are ready to pay for that! Today, when time is our most precious value, people are not ready to spend hours searching for data. Users will abandon their attempts if looking for information is too slow or complicated. This may kill an app or website, as the user's goals will be lost in a huge amount of information.

Do you want to monetize your product and make it simpler (read, more attractive) for an end user? Use the right IA and UX approaches!


Information Architecture & Design

So, what is the role of IA in design? Modern UX approaches are all user-centered. And they are impossible without good information architecture. It is the backbone of any design project. Visual elements, functionality, navigation, and interaction are built on this backbone.

Just imagine tons of unorganized content so that users are even not able to perform a single action on the website! Sounds dreadful, right? In 99% of cases, users will quit such a site. And no second chances will be given to your product if that happened!

Of course, creating IA takes time, nevertheless, its further effect will be indispensable. It is a guarantee of a high-quality easy to use the product. If you were putting it off for tomorrow, start acting right now. It’s the right time, as your competitors are already doing IA-based design and conquering the market with intuitive and user-friendly products.

Old and new mobile app interface
Mr. Porter website redesign based on AI principles by Serge Vasil

What’s the Difference Between IA and UX?

You might wonder how IA differs from UX, as they sound very similar. Both of them are about simple navigation, finding necessary content…

Although they are tightly connected, UX is a broader term. While IA is only about structuring data, UX is about pleasant colors and layouts that evoke a response at the psychological level. You see, information architects do more focused work aiming at cognitive perception, without involving emotions.

Still, without a proper IA, no great and logical UX is possible.

IA System Components

What does strong IA consist of? According to Peter Morville and Lou Rosenfeld, IA pioneers, there are four components:

#1 — Organization Systems

They are different types of categories or groups all information is divided into. With these systems, users can quickly assume what a separate data group is about. Consequently, this component can be divided into three sub-components:

  • Hierarchical. It is a visual hierarchy that goes from the most important to the least important things. The objects are grouped by size, contrast, color, etc. 
  • Sequential. It is used to reveal a step-by-step process. This system is used in e-commerce when a user needs to perform some linear actions before achieving the goal.
  • Matrix. This is the most complex system since users choose their own navigation style. Products let users choose the content organization they like. For example, if we take an example of a blog, some readers will sort articles by topic, some — by dates.

#2 — Labeling systems

They are key in conveying global senses in a couple of words. Finding content by high-level concepts is simple. And you don’t need to navigate through plenty of irrelevant information. It is time-saving and definitely a good choice for users who want to achieve their goals asap.

Here is a short example. When you’re looking for contacts on an e-commerce website, you don’t look for an email or phone number. Users commonly look for the ‘Contacts’ or ‘Contact Us’ label.

#3 — Navigation systems

The term ‘navigation system’ is more than a sitemap. Though, according to IA science, it is less than a great UX/UI interface. In classic terms, such systems are used for users to easily move through content and fulfill their goals.

#4 — Searching Systems

Also, searching systems can be mentioned at this point. Not all products have them, but it makes the work with apps and websites easier when they are full of various content. 

Old and new website interface
Big Scoots website redesign by Lukáš Straňák

The Main Principles of Information Architecture

After we’re done with the terms and definitions, let’s dive into the details of the principles. They will help you a possibility to streamline your data:

1. Object Principle

This point is similar to what we have in object-oriented programming. Pieces of content actually are living objects with their lifecycle, attributes, and behaviors. They are based on templates, which are named ‘classes’ in programming.

2. Disclosure Principle

Designers and information architects should show people the amount of information necessary for figuring out what’s next. This amount of data should be reasonable, otherwise, one might decide that they don’t need that at all. So, a user sees content and decides whether they want to dig deeper into the topic.

3. Choice Principle

The more options there are, the more difficult decision making is. If there are dozens of options, try to keep a couple of the most meaningful ones to not distract users from their goal.

4. Exemplar Principle

Descriptions are good, but with examples, users will remember your product better. What’s more, showing something in action is always the best explanation. And cognitive scientists have already proven this! Human brains perceive categories as sets of good examples.

5. Front Door Principle

Surprisingly, but not all users enter sites via the front door. So, you don’t need to place everything only on the homepage. Think of those (and there are almost 50% of them) who use a side entrance to get acquainted with your web resource. No matter what entry point your visitors choose, take care of what they will see on a page. Keep all of them clear and easy to navigate through.

6. Multiple Classification Principle

The design should accommodate the fact that people look at information from different perspectives. So, products should have at least a couple of classification systems to work the best. Nevertheless, don’t overdo it. Too many schemes can distract users from the final goal.

7. Focused Navigation Principle

Forget about using extraneous links in your navigation. A way around, keep it focused. Each menu should have a purpose and structure perceptible for an end user. This approach is different from naming menus based on the location (for example: ‘Main menu’ or ‘Global navigation’.

8. Growth Principle

Your today’s content is only a part of what you’ll have on the website or in the app tomorrow. So, designers responsible for information architecture should anticipate adding new forms and formats: videos, PDFs, photo slideshows, presentations, and so on. Growth is progress! Keep increasing your success!


Finally, keep in mind several assumptions concerning these principles:

  • When working on IA, a designer should focus only on logic and cognitive constructions, not on UX. Flowcharts and sitemaps come ahead wireframes and good-looking design.
  • A designer knows what content users need. Please, be sure that user personas are already in placeю Otherwise it will be fortune telling on coffee grounds.
  • A designer has to know which content formats and functionality will be available. And also, it’s crucial to define which part of the content will be yours and which will be user-generated.
Designed by Marina Kasian

The Best Information Architecture Tool

Okay, let’s assume you’re ready to get to create and develop IA for your product. What tools are there on the market?

You can find overviews on most of them in our previous article. We’ve done this research for Mac users. As for other platforms, we recommend using web-based apps. They mean quick and granted access to your working projects from any device, be it a powerful PC on Windows or your personal iPhone.


FlowMapp is a user-friendly web app that offers designers a variety of IA tools:

  • Sitemaps that turn UXs into digital maps so that your site is intuitive and customizable.
  • User flows reveal customers’ actions and allow you to pay attention to all variables.
  • Customer journey maps (CJMs) come in handy with visualizing UX stories and enhancing communication.
  • Personas bring empathy to the design process. Learn your target audience from A to Z using this tool!

Try a demo to see how everything works and sign up for free to start your project! 

Examples of IA

Information architecture seems extremely complex in theory, so let’s consider a couple of examples. Everything is much simpler than you think!

  1. A full-fledged sitemap example can be your first template for creating your own one. Still, it’s not the ultimate truth, so you’re free to experiment with all those schemes.
  2. Gamification routes and user experience scheme. This example clearly shows possible user navigation. What’s great in this template is that you can add clickable parts that will open if you click on them. This way, if there are extra details that don’t fit one page, link to them! If one needs clarification, they will find it in place.
  3. The scheme of content cloud service with its primary and secondary navigation. It’s a brilliant template for designers working on similar projects. It shows us not only a high-level perspective but also smaller tasks.

By the way, you can also browse other examples of our experts’ work in the same section. There are lots of inspirational materials!

Key Takeaways

To sum everything up, let’s examine these tips. After this, you’ll be able to sign in to your FlowMapp account and implement fresh knowledge in practice.

  1. Always learn from IA and UX best practices. Sure, there are classic rules and time-tested traditions. Anyway, the evolution of information architecture is not over, designers try innovative approaches, bring creativity to everyday things. We suggest you subscribe to blogs of designers whose work is worth it. Learn from their best cases and use lifehacks in your work! 
  2. Keep logic in the first place. All processes should be clear. Everything should make sense. When a person clicks on the ‘Sign up’ button, they don’t want to visit settings first. They want to find tools they signed up for! As for apps, clicking on the camera doesn’t need to lead to its preferences or other menu sections.
  3. Focus on structure, not hierarchy. The latter is rather adjustable. All in all, a homepage will always be in its ‘main’ place. Focus your creativity on the structure: where this page leads, how customers get there, and so on.
  4. Keep UX in mind. Yes, we told you that IA and UX are different fields, still, they are complementary. Making just information architecture with a thought about how it will look might bear weird results. It’s like programming without prototypes or writing a book without an outline.

If you are responsible for information architecture at your project, consider yourself a cartographer. Map the project — be it a website or app — define what needs to be mentioned in your IA design. Pages of the website, landing pages, decision points, patterns for user behavior… This depends on your and users’ needs.

FAQs