IA vs User Flow: Understanding the Differences and How to Use Them Together

What is information architecture? ✏️

‍

According to Abby Covert, a leader in the field of information architecture, IA is ‘the way we arrange the parts to make sense of the whole.’ Information architecture (IA) is found in every digital product, from websites and apps to an intranet. 

‍

For the purposes of this article we focus on the importance of information architecture to user experience (UX) design because IA is fundamentally important to the success of your user experience. It determines how users will access your  content and ultimately how successful their experience is when using your product. 

‍

When put like this it does seem pretty straightforward. Maybe even simple? But these tasks need to be straightforward for your users. Putting thought, time and research in at the front of your design and build can help build an intuitive product. IA is the structure that sits in behind and allows the design to tell the story and the content to be found in an easy way.

‍

The role of information architecture in UX design 🏗️

‍

Information architecture forms the framework for any UX design project. You need to consider the visual elements, functionality, interaction, and navigation and if they are built according to IA principles. If not considered fully even the most compelling content and powerful user experience design can fail without an organized and functional IA design. Disorganized content can make finding your way through difficult, meaning users get lost, annoyed and frustrated. Frustrated users don’t stick around and most likely don’t come back.

‍

Through solving or preempting users’ issues with research and designing powerful and effective IA it reduces usability and navigation problems. Meaning that researched, thought through and designed information architecture can save both money and time for your organization in the longer term.

‍

What is the difference between IA and UX? 🤯

‍

Often it can be confusing that there isn’t much difference between IA and UX design. While these terms do relate to each other and need to be considered alongside, they are not one and the same.

‍

“Information architecture (IA) is the discipline of making information findable and understandable, helping people understand their surroundings and find what they’re looking for online and in the real world” - Interaction Design

‍

“User experience (UX) design is the process design teams use to create products
that provide meaningful and relevant experiences to users” - Interaction Design

‍

UX design is well grounded with good functional information architecture but that’s not where it stops. The user experience focus is on influencing users’ behaviors and actions through emotion and psychology. Information architecture is focussed on the users' goals and task completion. They work together to create the very best user experience. IA provides the foundation of a well organized space that is easy to navigate and UX design ensures that the overall experience meets (or exceeds) users’ expectations, through their wants, needs and desires.

‍

The key components of IA 🧱

‍

There are four key components to consider when building a strong information architecture:

‍

Labeling

‍

How information is named and represented. Labels need to communicate information to users without using too much space or requiring much work on the user’s part.

‍

Navigation

‍

How people make their way through information. Without robust IA which has been thought through this is the quickest way to confuse users. If they can’t find their way to the information they need, they won’t be able to complete their task. It really is that simple.

‍

Search

‍

How people will look for information (keywords, categories). A search system is especially important when there is a lot of content to wade through. A search engine, filters, and many other tools help users search content. Great UX design will consider how the information will be displayed once searched.

‍

Organization

‍

How the information is ordered. These help users to predict where they can find information easily:

• Hierarchical is the hierarchy of the content and literally the order of importance
  the user expects to see information against what the organization needs.
• Sequential Taking a stroll in your user's shoes can be valuable. Considering the path a user would take and the journey they make. Walking step-by-step, ensuring that as users progress through their tasks they are easily led to the next step.
• Matrix This is a little more complicated for users as it lets them choose how to navigate on their own. Users are given the choice of content organization. For example, the searchability of a website. Where the user could choose to search by topic, size, price or any other filter or option.

‍

Wrap up 🥙

‍

Information architecture is a key part of a powerful user experience design. Efficient IA helps users quickly and easily move through content and find what they want.  And what do users want but to find what they want, complete their task and get on with their day!

‍

Provide an IA that functions well, is intuitive to use and well labeled, coupled with UX design that is smooth, attractive and responds to users needs, wants and desires and you’ll have a winner on the day.

Sitting inside any beautifully crafted and designed digital product, there must be a fully functional and considered information architecture.

‍

As much as information architecture shouldn’t be developed in a vacuum. Neither should the design and look of digital products. In fact, a large proportion of the function of digital designers is devoted to supporting users locating content they need and driving them towards content that the product owners want them to find.

‍

Incorporating visual markers to make sure that certain content is distinct from the rest or creating layers that demonstrate the diverse content on a product.

‍

If you do not have quality content, it is impossible to design a quality digital product. It all comes back to creating a user experience that makes sense and is designed to make task completion simple. And this relates back to designing the product with the content planned for it in mind.

‍

8 Principles of information architecture, according to Dan Brown 🏗️

‍

As a designer, the more you know about information architecture, the better the products you design will meet your user requirements and deliver what they need. If you work with an information architect, even better. If you’re still learning about information architecture the 8 Principles according to Dan Brown is a great place to begin.

‍

If you haven’t come across Dan Brown yet, you have more than likely come across his 8 principles. Dan Brown is one of the UX world's most prolific experts with a career that spans most areas of UX designs. He’s written 3 books on the subject and experience across a multitude of high profile projects. Aiding large organizations to make the most of their user experience.

‍

1. The principle of objects: Content should be treated as a living, breathing thing. It has lifecycles, behaviors, and attributes.
2. The principle of choices: Less is more. Keep the number of choices to a minimum.
3. The principle of disclosure: Show a preview of information that will help users understand what kind of information is hidden if they dig deeper.
4. The principle of examples: Show examples of content when describing the content of the categories.
5. The principle of front doors: Assume that at least 50% of users will use a different entry point than the home page.
6. The principle of multiple classifications: Offer users several different classification schemes to browse the site’s content.
7. The principle of focused navigation: Keep navigation simple and never mix different things.
8. The principle of growth: Assume that the content on the website will grow. Make sure the website is scalable.

‍

It’s highly likely that you’ve already used some, or all, of these IA principles in your designs. Don’t be shy about mastering them, or at the very least be familiar. They can only help you become a better user experience designer.

‍

Wrap up 🌯

‍

Mastering the 8 principles, according to IA expert Dan Brown will see you mastering the complex tasks of information architecture. Understanding IA is key to creating digital designs with a content structure that is functional, logical and just what your users need to navigate your product. Design without good IA doesn’t work as well, just as a content structure without a well designed interface will not engage users.

Click, click, click, BOOM! There it is. That thing you were looking for. You couldn’t find it on other websites, but you found it here, and it was easy. You feel like a hero. You thank the website and you leave with a sense of achievement.

‍

What if you could replicate that feeling on your website? What if you could make every user journey so satisfying? By combining information architecture and user flow, you can.

‍

But what are they and how are they different? In this article, we’ll explain how they influence website design and how you can (and should) use them together in your project. We’ll also discuss different user flow research techniques, how they inform great information architecture, and how it doesn’t have to be difficult or time consuming.

‍

‍

What is Information Architecture? 🏗️

‍

Information architecture is the system and structure you use to organize and label content on your website, app or product. It relates closely to user experience design, but it’s slightly different. Think of it as the structure or framework upon which user-facing assets are built.

‍

That being the case, if your information architecture has flaws, your website design will have flaws. It determines how information will be accessible, usable and relevant on your website and should be treated as a critical element of your project. How can we ensure that we have our content organized efficiently to promote seamless interactions?

‍

The answer is research. Without research you’re just guessing. The problem with guessing is that, well, you’re guessing. You tend to organize, categorize and label things the way that you (and maybe your team) would organize things. It’s biassed and subjective. In reality, people process information in all sorts of different ways and good information architecture should reflect that. You’ll often hear us say ‘test early and test often’. This mantra helps to avoid any little niggles during the user experience design process. Card sorting and tree testing are a couple of techniques that you can use to test early.

‍

Card sorting is a research technique that asks users to categorize different pieces of information or content. It’s best used when you have specific, information-related questions. For example, you may want to categorize products in an online store in the most logical way. Or you may have a mountain of blog post categories that need refining. Whatever it is, the benefit of a card sort is that you end up with consensus of how your users expect to see information. Card sorts can even be performed remotely using tools such as OptimalSort.

‍

Tree testing examines how easy it is for your users to find information using a stripped back, text-only representation of your website - almost like a sitemap. Rather than asking users to sort information, they are asked to perform a navigation task, for example, “where would you find today’s best deals?”. Depending on how easy or difficult users find these tasks gives you a great indication of the strengths and weaknesses of your underlying site structure.

‍

As the base structure of your website or app, information architecture has a fundamental influence on how well users access and use your content. It makes sense then that when designing it, you should receive real-world user feedback early on in the piece. Fortunately, there are great online tools like Treejack to quickly and easily test your site structures, categorization and labels.

‍

What is User Flow? 🌊

‍

User flow describes the steps involved for a user to complete a certain task. It lays out what needs to happen for a user to get from starting point to a defined finish line. Why is it important? Because we want that journey to be as efficient as it can possibly be. If it’s not, the user will be left frustrated and dissatisfied, no matter how beautiful the website design is.

‍

At the heart of user flow is, you guessed it, the user. A path that seems obvious to designers might be confusing to an end-user. It’s important to distance yourself from the project and put yourself in the user's shoes. Even better - watch the user. How do they react to a fork in the road? How do they get back on track? Where are they stumbling?

‍

User testing is a great way to observe user flow. But what are you testing? Normally you test based on a user flow diagram. A user flow diagram is generated based on insights from your research from card sorting, tree testing, and questionnaires, for example. It visually outlines the possible paths a user can take to achieve a certain task. The basic structure of a user flow diagram considers the following:

‍

• A critical path
• Entry points
• User end goals
• Success metrics (time to completion, number of clicks)
• Steps the user will take in between

‍

Once you have created a user flow diagram you can test it with your users. User testing can be remote or in person and uses a variety of techniques depending on the constraints of your projects. You may consider testing something rough and conceptual like a paper prototype before producing more detailed prototypes.

‍

How to Use Information Architecture and User Flow Together 🤝🏻

‍

By doing the work upfront to create great information architecture you put yourself in a great position to create great user flow. After all, information architecture is designed based on user research. Performing content audits and creating content inventories help to inform early content decisions, followed by user research techniques such as card sorting and tree testing. This research has a direct influence on user flow, since information and content has been given meaning and structure.

‍

The foundational work in designing information architecture leads to user flow diagrams which, as we discussed, are helpful tools in creating seamless user flow. They bridge the gap between information architecture and final user experience by visualizing pathways of specific tasks. By performing user tests on prototypes, the researcher will inevitably find speed bumps, which may highlight flaws in information architecture.

‍

Information architecture and user flow are integrated. This means there should be a constant feedback loop. Early research and categorisation when building information architecture may not translate to seamless user flow in practice. This could be due to integration factors outside of the digital ecosystem you’re designing.

‍

User flow and information architecture are complementary components of creating exceptional website design. Designers should make a conscious decision to apply both in synchrony.

‍

To Sum it Up 🧾

‍

Understanding the relationship between information architecture and user flow is important for any website design. Information architecture provides the organization and structure of content, where user flow applies that structure to how users execute certain tasks in the simplest possible way. The two are intertwined and, when used effectively, provide a framework to ensure seamless, user-friendly website design.

‍

User research and user testing heavily influence the design of both information architecture and user flow. We want users to feel a sense of accomplishment rather than frustration when using a website. Achieving this requires an investment in understanding user needs and goals, and how they consume and categorize information. This is where research techniques such as content audits, tree testing, card sorting and user testing become invaluable.

‍

We’ve always placed high value on solid research, but don’t be put off by it. The research techniques we’ve discussed are highly scalable, and you can be as involved as you want or need to be. Sometimes you don’t even have to be in the same room! The most important thing is to get outside of your team’s bubble and gain real user insight. Check out our information architecture services to ensure you’re on the right path towards powerful, user-centric website design.