CRUX #6: Information architecture in unexpected places

Making your navigation work harder 💪🏼

‍

There are many ways that your website can work wonderfully and of course, the converse is very true. There are lots of (simple) ways a website isn’t working as well or as hard as it can. Your website navigation is crucial to creating a brilliant user experience (UX). As well as being visible to search engine crawls, completing the circle by making your website more visible to potential visitors.

‍

You’ve got a strong homepage, it’s modern, clean, bright and tells your story just right. But your conversions just don’t seem to be happening? Have you considered your navigation? No, not only the menu at the top of your website, but your Information Architecture (IA) sitting in behind. And not just this, but how it is used, interacted with and navigated by your users?

‍

Even if you haven’t already identified an issue with your website it can be super valuable to test your usability regularly. Moments like; building a new website, adding, removing or structuring content can be times when navigation changes can impact how your website performs. And also can be a great instigator for testing and improving. There are some very effective tools to help with finding navigational issues, and with great data and insights shining the way to better sorting and ordering.

‍

What is website navigation? ╰┈➤

‍

Simply put, website navigation is the links within your website that connect the pages. The purpose is for your website visitors to find what they need on your site. And importantly it is also used by search engines to discover and index the content housed on your website.

‍

Search engines use links between pages to understand context and relationships between pages. Ultimately building a picture of what your website is about and who would want to see it, and why. 

‍

Whilst strong SEO is vital to finding users, it is always best to make sure your users come first. If your website only talks to search engines it is unlikely to really speak ‘human’ and do what it is intended, make conversions. Users first, search engines after.

‍

Let’s explore some common navigational issues and how great UX research can solve them.

‍

Your Information Architecture 🗺️

‍

Your website Information Architecture (IA) is always important to consider. How content is stored, ordered and found will impact the UX and the performance of your website SEO. Using a card sorting tool to research how users expect information and content to be sorted, stored and found can be vitally important to how effective your website is. Optimalsort is a quick and effective tool to establish where and how users expect information to be sorted.

‍

Building intuitive IA and making sure navigation, and menus are simple to follow will ensure your users are confident and comfortable making their way through your website. Understanding where they can find the information they need and progressing to the next step.

‍

As well as understanding the order of content with card sorting, combined with our tree-testing tool, Treejack, it can be incredibly useful to understand where users expect information to be found. Looking at how users interact with your website, where they look for information and where they get lost is all great stuff!

‍

Using these insights will keep them on your website longer, more likely to see the task through. And let’s not forget that search engines love it when your website is performing, keeping users longer with strong content that is seen as relevant.

‍

Content hierarchy 📝

‍

The order of your content is important. This can be how content is stored and the order of your navigation and creating intuitive IA. But can also be as simple as where navigational sign posts are. 

‍

It seems obvious, but there is a case for keeping the most important information at the top of drop down menus, and where you want users to take action, usually on your most important pages. Studies show that attention and retention are highest for things that appear at the beginning and at the end of lists.

‍

This is why ‘Contact’ should always be found at the top right corner, the last on the list and in a standard, expected location. Keeping this in mind when creating the order of your pages and what you want your users to interact with will inform your structure.

‍

How is your website used now 👨🏻💻

‍

Understanding exactly how your website is used currently and identifying areas that need to be improved will lead to much stronger user experience (UX). Usability testing should be an essential part of ongoing research for your website success.

‍

One of the biggest issues with website usability is building intuitive navigation. If your users can’t find their way through your website to complete a task, they’re not going to try too hard. They’re far more likely to abandon and find another website (organisation) that makes it easy. Great navigation should act as a simple to follow map from landing page through to task completion. 

‍

Using a research tool like Reframer can allow you to test how users complete tasks across your website. Following their journey from their first interaction through to task completion. The data will provide insights into how users engage, navigate and complete their tasks (or don’t). Where do they get stuck, lost or confused? How do they feel (even down to their body language)? How quickly can they find what they are looking for? And the next step?

‍

All great stuff to inform the design team to build an engaging, usable website.

‍

Homepage expectations 🤡

‍

Your users already have set expectations when they arrive on your website. They anticipate your website to look and behave in a regular way that makes navigation, and their decisions, easy. Simple design features, such as your navigation menu across the top of the page, with clear options. It is vital to make life simple and easy when it comes to navigating your website. 

‍

Creating an interface that looks clear, is easy and quick to follow will build trust and engagement quickly (remember the 2 second rule). Simple to follow navigation, including descriptive labels, can make completing tasks much simpler and quicker for your users. Guiding them smoothly through your website and ultimately to conversion.

‍

Confusing homepage navigation  🫣

‍

Your homepage is the hardest working page on your website. It’s the first place (most) users will interact with you and it is make or break. 

‍

Did you know? You have less than 2 seconds to grab users with a well designed, organised and simple homepage. If they don’t immediately know what to do, trust what they see and get started they will move on (to someone else).

‍

Increased bounce rate does the converse for your SEO. With a homepage that users bounce away from you are likely to see a drop in SEO rankings, meaning ultimately you will see less users!

‍

Did you know that 87% of people that find themselves on the right path after the first click will complete their task? Ensuring that when users land on your homepage they can clearly find the road signs, but not everything that your website contains. Your homepage should simply guide your user to navigate your site, know what to do and how to do it. 

‍

A cluttered, busy homepage with too many links will distract your users’ attention, confuse them and maybe even lose them forever! First-click testing will take an informative look at how your homepage interface is performing. Mapping where your user is clicking once they arrive on your homepage and conversely, where they are not engaging.

‍

This can all be highly informative in designing, re-designing or even removing clicks from the users journey through your homepage, and beyond. Using Chalkmark to test your users first clicks is a great way to get started now.

‍

Wrap up 🥙

‍

With a website that is intuitive to navigate and content that is relevant you will find users that are engaged and SEO that ranks!

‍

Get started quickly and simply with our range of tools to sort out your navigation.

‍

And, if you need some more inspiration to help improve your website navigation, grab yourself a copy of our Actionable IA guide that explores actionable ways to fix, refine and build better IAs.

‍

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.

“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.