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

According to Abby Covert, author, teacher and community leader in the field of information architecture (IA) : ‘IA is the way we arrange pieces of content to make sense when experienced as a whole. By this definition: there is information architecture in everything. Mindblown?’

‍

😮 (That’s a resounding yes from an IA rookie like me.)

‍

In this issue of CRUX we go in search of information architecture and have some surprising encounters in the worlds of emoji, elevators, walking tracks, games and more. We meet UX designers, developers, researchers and even a Senior Park Ranger. It seems you can have your ‘IA hat’ on without even realising it. That’s the power of information architecture.

‍

Some highlights from this issue:

‍

• UX research and strategy specialist, Q Walker explores the world of emoji from an information architecture perspective and sparks curiosity along the way. Have you ever wondered why clock emojis are organized under travel and places? 🤔

• We talk to Senior Park Ranger David Rogers about the thinking behind creating and building New Zealand’s national walking track network and reveal how information architecture can also live ‘in the wild’.

• UX developer Ben Chapman delves into the classification systems of libraries over time and ponders the pros and cons for users of moving information online.

• We talk to Sam Cope, Lead UX Designer at Wētā Workshop’s Interactive division about what it takes to drive design decisions with the end user in mind - something crucial for any video game’s success, whether it’s a blockbuster or something more niche.

• And much more about information architecture in unexpected places….

‍

The stories and people in this issue of CRUX certainly captured our imagination and attention - we hope they inspire and even surprise you too.

‍

Get comfortable and settle in for a great read. Welcome to CRUX #6.

‍

A plug for the next issue

‍

Do you have a burning idea to share or a conversation you’re dying to kickstart that’s of interest to the world of UX?  Now’s your chance.  We’re already on the lookout for contributors for our next edition of CRUX for 2022.  To find out more please drop us a line.

“Questions are never indiscreet, answers sometimes are.”Oscar Wilde

‍

Frequently asked question pages. Love them or hate them, I don’t think they’re going anywhere anytime soon. This debate has been going on for quite some time and there is an equal number of opinions on both sides of the FAQ fence. Nielsen Norman Group’s Susan Farrell says FAQs can still add value to a website when done properly, and Gerry McGovern says FAQs are the dinosaurs of web navigation.

‍

So, how do we really know for sure if they will or won’t add value to a design? Like anything in UX, you have to test it! I don’t know about you, but I’m a shake-it-and-see-what-falls-out kind of UXer, so naturally I decided to run a Treejack study. Scouring the web one fine day, I came across Sainsbury’s Active Kids. Its FAQ page was unlike any I had ever seen and I knew I’d found the one. I was also curious to see how it would test with people who don’t use the website — after all, anyone should be able to use it. Since Active Kids is an active lifestyle program for UK schools and sports clubs, I recruited my participants entirely from the US.

‍

Pull up a chair and get comfy because what I found out should serve as a lesson to us all.

‍

Why Active Kids? 🤸🏼

‍

First of all, why did I choose this in the first place? The Active Kids FAQ page caught my attention for three main reasons:

‍

• structure
• labels
• content

‍

The structure of this FAQs page is quite deep, complex and very different from the rest of the site — almost like another information architecture (IA) had been built within the main structure. Imagine you have a large warehouse with hundreds of shelves, and then somewhere in the middle of it, someone builds a house — that’s how it felt to me.

‍

There are two ways to get to it: through the “Help” label on the top navigation bar and the “FAQ” label in the footer. It also uses a combination of drop-down filters that the user needs to apply, but it also has automatic filter options and confusing labels that can send you down a path you don’t necessarily want to take.

‍

I also found it very interesting that most of the information contained within the FAQs section cannot be located anywhere else on the website and most of this is essential to gaining a fundamental understanding of what Active Kids actually does. Adding to the house in the warehouse analogy, it’s like the house holds all the key information the warehouse needs to function, but no one knows which room it’s kept in.

‍

‍

‍

Setting up the study 🛠️

‍

Treejack was the perfect choice for testing the findability of information on the Active Kids FAQ page and I decided to test the IA of the website as a whole — this means both the warehouse and the house. I couldn’t just test the house in isolation because that’s not how a user would interact with it. The test needed the context of the whole site to gain an understanding of what’s going on. Creating a Treejack study is quick and easy and all you have to do is build the structure out in a basic Excel spreadsheet and then copy and paste it into Treejack.

‍

My next job was to determine the task based scenarios that my participants would use during the study. I decided to choose nine and all were derived from content located in the FAQs section and related to tasks a user might carry out when investigating or participating in the program. Once I had my tree and my tasks, all I had to do was set the correct answers based on where the information currently sits on the Active Kids website and I was ready to launch.

‍

Recruiting participants for the study🙋🏾

‍

In my experience,recruiting participants for a Treejack study is quick and easy. All you have to do is determine the screener criteria for your participants and Optimal Workshop takes care of the rest. For this study I requested 30 participants and they all had to reside in the US. I ended up with 31 completed responses and it was all over in less than two hours.

‍

Treejack results 🌲

‍

So, what fell out of that tree when I tested a website aimed at parents and teachers of kids in the UK with 31 Americans? I’ll be honest with you: it wasn’t pretty. Here’s what I discovered in this study:

‍

‍

• 81 per cent were unable to find out if home educators were eligible to apply (number 1 on the graph)
• 65 per cent were unable to find out what a Clubmark accreditation is (number 2 on the graph)
• 68 per cent were unable to find out how to share their wishlist with friends and family (number 3 on the graph)
• 64 per cent could not find the information that would explain the purpose of the £1 fee mentioned in the terms and conditions (number 4 on the graph)
• 97 per cent could not locate the information that would tell them if they could use a voucher from 2014 in 2015 (number 5 on the graph)
• No participant was able to determine if students from a middle school would be able to participate in Active Kids (number 8 on the graph)
• 58 per cent of participants in this study were unable to find out what the program is even about (number 9 on the graph)

‍

‍

On the flip side, 68 per cent of participants in this study were able to locate a phone number to contact Active Kids directly (number 6 on the graph) and 97 per cent were successfully able to work out how to redeem vouchers (number 7). Overall, it wasn’t great.In addition to some very useful quantitative data, Treejack also provides detailed information on the pathways followed by each participant.

‍

Understanding the journey they took is just as valuable as discovering how many found their way to the correct destination. This additional level of granularity will show you where and when your user is getting lost in your structure and where they went next. It’s also handy for spotting patterns (e.g., multiple participants navigating to the same incorrect response).

‍

I always set my studies to collect responses anonymously and when this occurs, Treejack assigns each participant a numerical identifier to help keep track of their experience without the participant having to share his or her personal details. For task 6, the paths chart below shows that participants numbered eight to 20 were able to navigate directly to the correct answer without deviating from the correct path I defined during setup.

‍

‍

‍

For Task 3 (below) , the story told by the paths was quite different. Participant number five navigated back and forth several times through the structure in their attempt to locate information on how to share a wishlist. After all that effort, they were unable to find the information they needed to complete the task and nominated to contact Active Kids directly. Not only is this a bad experience for the user but it also puts unnecessary pressure on the call centre because the information should be readily available on the website.

‍

‍

‍

Treejack also provides insights into where participants started their journey by recording first click data. Just like Chalkmark, this functionality will tell you if your users are starting out on the right foot from that all important first click.In this study I found it interesting that when looking for information regarding the eligibility of home educators in the Active Kids program, 42 per cent of participants clicked on “Schools & Groups” and 19 per cent clicked on “Parents & Community” for their first click. Only 6 per cent clicked on “Help”, which happens to be the only place this information can be found.

‍

‍

‍

‍

‍

I also found the first click results for Task 9 to be very interesting. When looking for basic information on the program, more than half (52 per cent) of the participants in this study went straight to “Help”. This indicates that, for these participants, none of the other options were going to provide them the information they needed.

‍

‍

‍

‍

What can be learned from this study? 🎓

‍

I mentioned earlier there was a lesson in this for everyone, and rather than dwell on how something tested, it’s time to move on to some lessons learned and constructive ideas for improvement. Based on the results of this Treejack study, here are my top three recommendations for improving the Active Kids website:

‍

Rethink the content housed in the FAQs section

‍

Most of the key information required to master the basics of what Active Kids is all about is housed entirely in the FAQs section. FAQs should not be the only place a user can find out basic information needed to understand the purpose of a product, program or service. I believe this website would benefit from some further thinking around what actually belongs in the FAQs section and what could be surfaced much higher.

‍

Another idea would be to follow the lead of the Government Digital Service and remove the FAQs section altogether — food for thought. Frequently asked questions would not be frequently asked questions if people could actually find the information on your site in the first place. Figure out where the answers to these questions really belong.

‍

If you’re using Treejack, just look at the fails in your results and figure out where people went first. Is there a trend? Is this the right place? Maybe think about putting the answer the user is looking for there instead.

‍

Restructure the FAQs section

‍

If you must have an FAQs section (and believe me I do understand that they don’t just disappear overnight! Just try to keep it as an interim solution only) please consider streamlining the way they are presented to the user. Ditch the filtering and display the list on one page only. Users should not have to drill down through several layers of content and then navigate through each category. For further reading on getting your FAQs straight, this Kissmetrics article is well worth a read.

‍

Review the intent of the website

‍

Looking at the Active Kids website and the results from this study, I feel the intent of this website could use some refining. If we come back to my warehouse and house analogy, the main chunk of the website (the warehouse) seems to be one giant advertisement, while the house (the FAQs) is where the action-oriented stuff lies. The house seems to hold the key information that people need to use the program and I think it could be displayed better. Don’t get me wrong, Active Kids does some incredibly good work for the community and should absolutely shout its achievements from the rooftops, however a sense of balance is required here. I think it’s time for the house and the warehouse to join forces into a solution that offers both rooftop shouting and usable information that facilitates participation.

‍

The value of fresh eyes 👀

‍

This study goes to show that regardless of where you are in your design process, whether that’s at the very beginning or a few years post-implementation, there is value to be gained from testing with a fresh set of eyes. I’m still undecided on which side of the FAQs debate I belong to — I’m going to sit on the fence and stand by the “if in doubt — test it” school of thought.

‍

Further reading:

• "Strategic design for frequently asked questions" - This ebook from Nielsen Norman Group explains how to design world-class FAQs.
• "Infrequently asked questions of FAQs" - An article from R. Stephen Gracey published on A List Apart, discussing FAQs and their place on the web.
• "Anatomy of a website: website architecture" - An article on our blog explaining website architecture and how to test your own structure.

When we first think of a beautiful website or app design, we rarely think of content structures, labels, and categories. But that’s exactly where great design and seamless user experiences begin. Beneath fancy fonts, layout, colors, and animations are the real heroes of user-centric design - information architecture and navigation.

Information architecture (IA) is like the blueprint of your website or app - it’s a conceptual content structure of how content is organized and arranged to create seamless interactions. And as useful as your information may be, if your navigation is flawed, users won’t be able to find it. They’ll simply leave your site and look elsewhere.

So, how does navigation and information architecture complement each other to create seamless user experiences?

‍

‍

Understanding Information Architecture (IA)

Information architecture refers to the practice of organizing, structuring, and labeling content and information to enhance the user's understanding and navigation of a website or application. It involves designing an intuitive, user-friendly, and efficient system to help users find and access the information they need easily. Good IA is essential for delivering a positive user experience and ensuring that your users can achieve their goals effectively.
‍

IA is often confused with navigation structure. Navigation is a part of IA, and it refers to the way users move through a website or application. IA involves more than navigation; it encompasses the overall organization, labeling, and structure of content and information.
‍

Three Key Components of IA

There are three key components of IA:

• Organizational structure: Defines how information is organized, including the categories, subcategories, and relationships between them.
• Content structure: The way information is arranged and presented, including the hierarchy of information and the types of content used.
• Navigation structure: Outlines the pathways and components used for navigating through the information, such as menus, links, and search functions.

‍

‍

Navigation: A Vital Element of Information Architecture

Navigation refers to the process of providing users with a means of moving through a website or application to access the information they need. Navigation is an integral part of IA, as it guides users through the organizational structure and content structure of a site, allowing them to find and access the information they require efficiently.
‍

There are several types of navigation, including utility navigation and content navigation. Utility navigation refers to the elements that help users perform specific actions, such as logging in, creating an account, subscribing, or sharing content. Content navigation, on the other hand, refers to the elements used to guide users through the site's content, such as menus, links, and buttons.
‍

Both types of navigation provide users with a roadmap of how the site is organized and how they can access/interact with the information they need. Effective navigation structures are designed to be intuitive and easy to use. The goal is to minimize the time and effort required for users to find and access the information they need.
‍

‍

Key Elements of Effective Navigation

The key elements of effective navigation include clear labeling, logical grouping, and consistency across the site.

• Clear labeling helps users understand what information they can expect to find under each navigation element.
• Logical grouping ensures that related content is grouped together, making it easier for users to find what they need.
• Consistency ensures that users can predict how the site is organized and can find the information they need quickly and easily.

‍

‍

Designing Navigation for a Better User Experience

Since navigation structures need to be intuitive and easy to use, it goes without saying that usability testing is central to determining what is deemed ‘intuitive’ in the first place. What you might deem intuitive, may not be to your target user.
‍

We’ve discussed how clear labeling, logical grouping, and consistency are key elements for designing navigation, but can they be tested and confirmed? One common usability test is called card sorting. Card sorting is a user research technique that helps you discover how people understand, label and categorize information. It involves asking users to sort various pieces of information or content into categories. Researchers use card sorting to inform decisions about product categorization, menu items, and navigation structures. Remember, researching these underlying structures also informs your information architecture - a key factor in determining good website design.
‍

Tree testing is another invaluable research tool for creating intuitive and easy to use navigation structures. 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 XYZ product on our site?”. 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, which then informs your navigation design.
‍

Combine usability testing and the following tips to nail your next navigation design:
‍

• Keep it simple: Simple navigation structures are easier for users to understand and use. Limit the number of navigation links and group related content together to make it easier for users to find what they need.
• Use clear and descriptive labels: Navigation labels should be clear and descriptive, accurately reflecting the content they lead to. Avoid using vague or confusing labels that could confuse users.
• Make it consistent: Consistency across the navigation structure makes it easier for users to understand how the site is organized and find the information they need. Use consistent labeling, grouping, and placement of navigation elements throughout the site.
• Test and refine: Usability testing is essential for identifying and refining navigation issues. Regular testing can help designers make improvements and ensure the navigation structure remains effective and user-friendly.

‍

‍

Best Practices for Information Architecture and Navigation

Both information architecture and navigation design contribute to great user experience (UX) design by making it easier for users to find the information they need quickly and efficiently. Information architecture helps users understand the relationships between different types of content and how to access them, while navigation design guides users through the content logically and intuitively.
‍

In addition to making it easier for users to find information, great information architecture and navigation design can also help improve engagement and satisfaction. When users can find what they're looking for quickly and easily, they're more likely to stay on your website or application and explore more content. By contrast, poor information architecture and navigation design can lead to frustration, confusion, and disengagement.
‍

So, when it comes to information architecture vs navigation, what are the best practices for design? Great navigation structure generally considers two factors: (1) what you want your users to do and, (2) what your users want to do. Strike a balance between the two, but ultimately your navigation system should focus on the needs of your users. Be sure to use simple language and remember to nest content into user-friendly categories.
‍

Since great navigation design is typically a result of great IA design, it should come as no surprise that the key design principles of IA focus on similar principles. Dan Brown’s eight design principles lay out the best practices of IA design:

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

‍

‍

Summary: How User-Centered Research Elevates Your Information Architecture and Navigation

Information architecture and navigation are the unsung heroes of website design that work in synchrony to create seamless user experiences. Information architecture refers to the practice of organizing and structuring content and information, while navigation guides users through the site's structure and content. Both are integral to creating intuitive user experiences.
‍

In many ways, navigation and information architecture share the same traits necessary for success. They both require clear, logical structure, as well as clear labeling and categorization. Their ability to deliver on these traits often determines how well a website or application meets your users needs. Of course, IA and navigation designs should be anchored by user research and usability testing, like card sorting and tree testing, to ensure user experiences are as intuitive as possible!
‍

That’s where Optimal comes in. As the world’s most loved user insights platform, Optimal empowers teams across design, product, research, and content to uncover how users think, organize, and navigate information. Tools like Card Sorting and Tree Testing help you validate and refine your IA and navigation structures with real users, so you can move from guesswork to confidence. Ready to turn user behavior into better navigation? Try Optimal for free.

‍