All the way back in 2014, the web passed a pretty significant milestone: 1 billion websites. Of course, fewer than 200 million of these are actually active as of 2019, but there’s an important underlying point. People love to create. If the current digital age that we live in has taught us anything, it’s that it’s never been as easy to get information and ideas out into the world.

‍

Understandably, this ability has been used – and often misused. Overloaded, convoluted websites are par for the course, with a common tactic for website renewal being to simply update them with a new coat of paint while ignoring the swirling pile of outdated and poorly organized content below.

‍

So what are you supposed to do when trying to address this problem on your own website or digital project? Well, there’s a fairly robust technique called top tasks management. Here, we’ll go over exactly what it is and how you can use it.

‍

Getting to grips with top tasks

‍

Ideally, all websites would be given regular, comprehensive reviews. Old content could be revisited and analyzed to see whether it’s still actually serving a purpose. If not, it could be reworked or just removed entirely. Based on research, content creators could add new content to address user needs. Of course, this is just the ideal. The reality is that there’s never really enough time or resource to manage the growing mass of digital content in this way. The solution is to hone in on what your users actually use your website for and tailor the experience accordingly by looking at top tasks.

‍

What are top tasks? They're basically a small set of tasks (typically around 5, but up to 10 is OK too) that are most important to your users. The thinking goes that if you get these core tasks right, your website will be serving the majority of your users and you’ll be more likely to retain them. Ignore top tasks (and any sort of task analysis), and you’ll likely find users leaving your website to find something else that better fits their needs.

‍

The counter to top tasks is tiny tasks. These are everything on a website that’s not all that important for the people actually using it. Commonly, tiny tasks are driven more by the organization’s needs than those of the users. Typically, the more important a task is to a user, the less information there is to support it. On the other hand, the less important a task is to a user, the more information there is. Tiny tasks stem very much from ‘organization first’ thinking, wherein user needs are placed lower on the list of considerations.
‍

According to Jerry McGovern (who penned an excellent write-up of top tasks on A List Apart), the top tasks model says “Focus on what really matters (the top tasks) and defocus on what matters less (the tiny tasks).”

‍

How to identify top tasks

‍

Figuring out your top tasks is an important step in clearing away the fog and identifying what actually matters to your users. We’ll call this stage of the process task discovery, and these are the steps:

‍

1. Gather: Work with your organization to gather a list of all customer tasks
2. Refine: Take this list of tasks to a smaller group of stakeholders and work it down into a shortlist
3. User feedback: Go out to your users and get a representative sample to vote on them
4. Finalise: Assemble a table of tasks with the one with the highest number of votes at the top and the lowest number of votes at the bottom

‍

We’ll go into detail on the above steps, explaining the best way of handling each one. Keep in mind that this process isn’t something you’ll be able to complete in a week – it’s more likely a 6 to 8-week project, depending on the size of your website, how large your user base is and the receptiveness of your organization to help out.

‍

Step 1: Gather – Figure out the long list of tasks

‍

The first part of the task process is to get out into the wider organization and discover what your users are actually trying to accomplish on your website or by using your products. It’s all about getting into the minds of your users – trying to see the world through their eyes, effectively.

‍

If you’re struggling to think of places where you might find customer tasks, here are some of the best sources:

‍

• Analytics: Take a deep dive into the analytics of your website or product to find out how people are using them. For websites, you’ll want to look at pages with high traffic and common downloads or interactions. The same applies to products – although the data you have access to will depend on the analytics systems in place.
• Customer support teams: Your own internal support teams can be a great source of user tasks. Support teams commonly spend all day speaking to users, and as a result, are able to build up a cohesive understanding of the types of tasks users commonly attempt.
• Sales teams: Similarly, sales teams are another good source of task data. Sales teams typically deal with people before they become your users, but a part of their job is to understand the problems they’re trying to solve and how your website or product can help.
• Direct customer feedback: Check for surveys your organization has run in the past to see whether any task data already exists.
• Social media: Head to Twitter, Facebook and LinkedIn to see what people are talking about with regards to your industry. What tasks are being mentioned?

‍

It’s important to note that you need to cast a wide net when gathering task data. You can’t just rely on analytics data. Why? Well, downloads and page visits only reflect what you have, but not what your users might actually be searching for.

‍

As for search, Jerry McGovern explains why it doesn’t actually tell the entire story: “When we worked on the BBC intranet, we found they had a feature called “Top Searches” on their homepage. The problem was that once they published the top searches list, these terms no longer needed to be searched for, so in time a new list of top searches emerged! Similarly, top tasks tend to get bookmarked, so they don’t show up as much in search. And the better the navigation, the more likely the site search is to reflect tiny tasks.”

‍

At the end of the initial task-gathering stage you should be left with around 300 to 500 tasks. Of course, this can scale up or down depending on the size of the website or product.

‍

Step 2: Refine – Create your shortlist

‍

Now that you’ve got your long list of tasks, it’s time to trim them back until you’ve got a shortlist of 100 or less. Keep in mind that working through your long list of tasks is going to take some time, so plan for this process to take at least 4 weeks (but likely more).

‍

It’s important to involve stakeholders from across the organization during the shortlist process. Bring in people from support, sales, product, marketing and leadership areas of the organization. In addition to helping you to create a more concise and usable list, the shortlist process helps your stakeholders to think about areas of overlap and where they may need to work together.

‍

When working your list down to something more usable, try and consolidate and simplify. Stay away from product names as well as internal organization and industry jargon. With your tasks, you essentially want to focus on the underlying thing that a user is trying to do. If you were focusing on tasks for a bank, opt for “Transactions” instead of “Digital mobile payments”. Similarly, bring together tasks where possible. “Customer support”, “Help and support” and “Support center” can all be merged.

‍

At a very technical level, it also helps to avoid lengthy tasks. Stick to around 7 to 8 words and try and avoid verbs, using them only when there’s really no other option. You’ll find that your task list becomes quite to navigate when tasks begin with “look”, “find” and “get”. Finally, stay away from specific audiences and demographics. You want to keep your tasks universal.

‍

Step 3: User feedback – Get users to vote

‍

With your shortlist created, it’s time to take it to your users. Using a survey tool like Questions, add in each one of your shortlisted tasks and have users rank 5 tasks on a scale from 1 to 5, with 5 being the most important and 1 being the least important.

‍

If you’re thinking that your users will never take the time to work through such a long list, consider that the very length of the list means they’ll seek out the tasks that matter to them and ignore the ones that don’t.

‍

‍

Step 4: Finalize – Analyze your results

‍

Now for the task analysis side of the project. What you want at the end of the user survey end of the project is a league table of entire shortlist of tasks. We’re going to use the example from Cisco’s top tasks project, which has been documented over at A List Apart by Gerry McGovern (who actually ran the project). The entire article is worth a read as it covers the process of running a top task project for a large organization.

‍

Here’s what a league table of the top 20 tasks looks like from Cisco:

‍

‍

Here’s the breakdown of the vote for Cisco’s tasks:

• 3 tasks got the first 25 percent of the vote
• 6 tasks got 25-50 percent of the vote
• 14 tasks got 50-75 percent of the vote
• 44 tasks got 75-100 percent of the vote

‍

While the pattern may seem surprising, it’s actually not unusual. As Jerry explains: “We have done this process over 400 times and the same patterns emerge every single time.”

‍

Final thoughts

‍

Focusing on top tasks management is really a practice that needs to be conducted on a semi-regular basis. The approach benefits organizations in a multitude of ways, bringing different teams and people together to figure out how to best address why your users are coming to your website and what they actually need from you.

‍

As we explained at the beginning of this article, top tasks is really about clearing away the fog and understanding on what really matters. Instead of spreading yourself thin and focusing on a host of tiny tasks, hone in on those top tasks that actually matter to your users.

‍

Understanding how to improve your website

‍

The top tasks approach is an effective way of giving you a clear idea of what you should be focusing on when designing or redesigning your website, but this should really just be one aspect of the work you do.

‍

Utilizing a host of other UX research methods can give you a much more comprehensive idea of what’s working and what’s not. With card sorting, for example, you can learn how your users think the content on your website should be arranged. Then, with this data in hand, you can use tree testing to assemble draft structures of your website and test how people navigate their way through it. You can keep iterating on these structures to ensure you’ve created the most user-friendly navigation.
‍

Take a look at the Intro to UX page to learn more about card sorting and tree testing, as well as the other user research methods you can use to make solid improvements to your website. If you’d rather just start putting methods into practice using user research tools, take our UX platform for a spin for free here.

Note: We’re gradually rolling out this feature, so it may not appear for you straight away.

We’ve made a few changes to our navigation header in-app to make it easier and more intuitive to use. In this blog post, we’ll explore the changes you’re going to see, why we made these changes and take a look at some of the testing that took place behind the scenes.

Let’s dive in!

What’s changed?

We’ve shuffled most tabs in the header around, but you’ll see the most obvious change when you create a study. You’ll now land directly on the ‘New Study’ screen, instead of being dropped in ‘Settings’ and then having to find your way to ‘Create Study’.

We’ve also made some changes to the ‘Create’, ‘Recruit’ and ‘Results’ tabs. These are now set in the header so you can easily navigate between creating, recruiting and reviewing results, instead of having to go back to ‘Settings’ to manage recruitment.

When you click ‘Back to studies’, you’ll now be taken back to the folder you’re currently working in. Previously you’d be taken back to the ‘All studies’ dashboard, so no more scrolling through the dashboard to find the folder you’re looking for. You can also rename your study in the header now, instead of having to navigate back to ‘Setup’.

Finally, you can now end your study by clicking the ‘End study’ button in the header. We’d discovered that some people had trouble ending their studies in the past, now you can just click the button with the tiny checkered flag.

Why we made these changes

Our goal is to create the world’s best user research platform – and a big part of that is ensuring that our tools are easy to use. Through testing, we found that our old navigation header had usability, consistency and design issues. Specifically, usability testing and tree testing showed that simplifying our information architecture (IA) would drastically improve the user experience and flow.

We asked the question: “How might we improve the flow of our tool without affecting customers that currently use our tools?”

This led us down a research rabbit hole, but we came to the conclusion that we’d need to redesign the navigation header across all of our tools and adjust the IA to match the user journey. In other words, we needed to redesign the navigation to match how people were using our tools.

What we discovered during our user testing

User research and testing inform all of the changes that we make to our tools, and this project was no different.

We ran 3 tree tests using Treejack, testing 3 different IAs with 97 participants (30 per test). We also ran a first-click test using Chalkmark to validate what we were doing in Treejack.

The 3 IA’s we tested were:

• The same as the prototype (Create, Design, Launch, Recruit, Results)
• Removing Launch and splitting up children branches (Create, Design, Recruit, Results)
• Moving Design back into Create (Create, Recruit, Results)

Note: A caveat of the results is that we used the phrase ‘Set up’ in many questions which would bias the second test in favor of any question where ‘Setup’ is the correct answer.

We found that the third tree performed the best during our test. On average, it required a little less backtracking and was less direct than the first 2 tests, but had a higher chance of completion simply because there were fewer options available.

Wrap up

So that’s our new in-app header navigation – we hope you like it. Got a question? Feedback? Click the yellow Intercom circle in the bottom right-hand corner to get in touch with our support team.

Happy testing!

Think about the last time you were visiting a friend or family member’s house and needed to find something. Like a spoon, for example. You start in the kitchen because that’s where we’ve all been trained to find things like spoons. But where do you look next? Some may look in the drawer near the dishwasher, while others may look to the drawer that’s by the cabinet that holds dishes and bowls. Point is, people use context clues and other points of reference (like familiarity and habits) to find things that they’re looking for. 

The same goes for navigating a webpage.

However, unlike the spoon example, there’s much more variation in website structure than kitchen layout. Websites vary from industry to industry, ranging in purpose from ecommerce to digital portfolios and everything in between. So when someone lands on your website to find something or complete a task, is it obvious where they should go to get things done? 

Your gut might tell you that it is. The people on your design team might tell you that it is too. But what really matters is what happens with actual users. Whenever you’re building a new website or optimizing an existing one, it’s important that you build it with quality user insights. That starts with user experience (UX) research.

And before you ask if we mean qualitative or quantitative research – the answer is both. Let’s explore a particular user research method that’s essential for gathering the information needed to build intuitive site navigation. It’s called tree testing.

How tree testing evaluates findability of topics on a website

For anyone unfamiliar with tree testing (sometimes referred to as ‘reverse card sorting’ or ‘card-based classification’), it’s a series of tests that help you understand where and why people get lost in your content.

It works by taking text-based versions of websites and stripping the influence of navigation aids or design elements to build a study. Participants are shown the text-only version of your website or app and are asked to indicate where they would find specific items or topics.

By removing everything but the labels and how they’re organized, you can work out just how effective your website structure is at enabling people to find what they need. If test participants consistently struggle to locate specific items, you’ll know there are issues with your structure. It can also help you visualize what paths participants take to get to specific site information.

Another point worth mentioning is that tree testing not only uncovers site navigation flaws, but it reveals word choice and microcopy that may not be clear to users. To reference back to the initial analogy, one person might say “where would I find your spoons,” while another may ask, “where do you keep your utensils?” So, tree testing can also be helpful for understanding which words work best in your site structure.

When should I conduct a tree test?

While it’s best to conduct a tree test early in the research phase of a project, there’s never a wrong time. (Unless that time is not at all). And if you have an existing website, this is a good time to establish a base of your existing site structure. The results you gather here can help to highlight any issues with your site’s structure and provide the data needed to compare to any improvements.

If you’re starting from scratch with a new website, you can run tree tests on different versions of your proposed site structure and then compare the results to determine which makes the most sense to your users.

How do I conduct a tree test?

Running a tree test is simple. You can use an online tool (like TreeJack) to collect all of the necessary quantitative data you need to ensure successful site navigation.

But what about the qualitative side of it all? We’re so glad you asked.

How to add qualitative data to your tree test

Running tree tests is a great way to gather quantitative data about your site navigation and topic findability, but it's not so good at providing you with qualitative insights, or why people are looking for information the way that they are.

Traditionally, you could get your gift cards ready and set up an in-person study where you watch people perform the tasks laid out in your tree test, and subsequently ask why they searched for things the way they did. But that takes a lot of time, coordination, and compensation. Alternatively, you could set up a remote usability test using a platform designed to record users as they complete your tree test.

This way, you’ll get the quantitative results you need to make decisions, backed by qualitative insights from real people. You’ll be able to set up your test to get answers to questions like: 

• “Why did people go to X category to find information on X?”
• “Why did it take so long to find X?”
• "Why did people take that path to find X?"

Combine quantitative and qualitative research solutions to paint the whole picture

Teams that solely rely on quantitative data are only getting half the story. By pairing tree testing tools, like Optimal Workshop’s Treejack, with UserTesting’s Human Insight Platform, researchers are able to not only see how people search for information on a website but get to the bottom of why. When used together, quantitative and qualitative data reveal the most valuable insights for tree testing.

Information architecture (IA) isn’t the easiest space for a newcomer. The myriad terms and technologies can often be quite tricky to understand on their own – not to mention how they all fit together.

We wanted to help, so we’ve put together a comprehensive cheat sheet/glossary that you can use whenever the topic of IA comes up.

Information architecture

Information architecture is the structure used to organize and label content on websites, mobile applications and other digital environments. At a very basic level, IA determines the paths people take to get to the content they’re looking for and where they might get lost.

IA isn’t actually one “thing”, but a number of different elements:

• Labels: How information is represented
• Navigation: How people make their way through the information
• Search: How people look for information

It’s also the layer upon which you build the design. This means that for your users, they’ll never likely see the IA – but they will feel the effects of the decisions you make when designing it. Your IA should help people find what they’re looking for, regardless of where the IA exists. It’s as important for desktop users as it is for mobile.

Experience architecture

The term ‘experience architecture’ refers to a wider set of practices or terms that includes information architecture. Experience architecture covers IA, interaction design and experience design. It’s similar to how user experience (UX) is just one element under the wider customer experience (CX) umbrella.

Note that just as the field of information architecture has information architects, experience architecture has experience architects; people responsible for planning and executing experience architecture deliverables. Typically, the experience architecture role is quite varied in that it requires expertise in user-centered design, human behavior and interaction design.

User journey

A user journey is basically what it sounds like – the experiences someone has when they interact with something. It’s also most commonly used to describe these experiences and interactions in a software context.

User journeys describe the steps users take to complete a task when interacting with a website or other digital service. For example, for a photo storage app, the user journey may look something like this:

1. User runs out of storage space for photos
2. User finds new photos app on app store
3. User installs new photos app
4. User creates account
5. User begins uploading photos from device

Typically, you’d create a user journey in the discovery phase of a project, as you can use this tool to visualize what the users need and to influence wireframe and information architecture development.

Depending on your needs, your user journey may be quite a bit more detailed, with overarching categories ‘before’, ‘during’ and ‘after’ to show where the user is with regards to using the product. You can also add in ideal emotions at each stage.

Wireframing

Chances are if you’re using a website or mobile app, it was a wireframe at some point in the past. Wireframing is essentially a way to design digital applications at a structural level, a way to map out broadly where different elements like content and functionality sit before adding in visual design.

Wireframing is to websites, apps and other digital applications what the rough first sketch of a building is to a finished skyscraper. It’s foundational, yet entirely important to nail down broad strokes ideas before investing more heavily in design.

Why might you produce a wireframe? In addition to using it as a way to prototype ideas prior to the visual design process, wireframes are an important method of getting stakeholders and other teams onboard.

Labeling system

In the world of information architecture, labels represent a relationship between your users and content. The idea behind labels is to communicate information to users without using too much space or requiring much work on the user’s part.

Let’s take a look at an example. ‘About us’ is a label that represents a larger chunk of information. On a website, this could be information about the people who work at the organization, what the office space is like and the work that the organization does. You wouldn’t want to present all of this information to a user on the homepage, so instead, you use a label like ‘About us’ to trigger the user’s association with that term. Once they’ve seen the label, a user can decide whether they want to proceed. In a nutshell, a label should be used to communicate information clearly and efficiently.

Labels are understandably important, and things can go awry when the people designing websites and other digital applications don’t adequately consider the importance of correct labeling. Perhaps more than most other parts of a website, poor labeling is an easy way to spot websites where user needs haven’t been appropriately considered.

Search system

Search is how your users go about looking for the information they require, whereas a search system is essentially a search engine: a way to sidestep the act of navigating through a website and search directly for information. One of the biggest misconceptions when it comes to designing digital applications is that search is the answer to all navigation problems. Search systems are often seen as a way to avoid developing user-focused navigation systems, as the common thinking is that users know what they’re looking for and so will just plug terms into a search bar.

This isn’t actually true, and there’s a great quote from Larry Page that neatly summarizes this argument: “The ultimate search engine would basically understand everything in the world, and it would always give you the right thing. And we’re a long, long way from that”.

Search engines often become bandages for websites with inadequate browsing systems. When considering adding a search engine to a website, consider how much content you actually have. The last thing you want to do is have to maintain a search engine when the browsing experience meets user needs.

When a search engine is appropriate:

• Websites with large quantities of content (50+ pages)
• Websites with long, dense pages
• Any situation where browsing will take significantly longer

Metadata and taxonomies

In the world of information architecture, 2 terms that get thrown around and mixed up more than most others are taxonomy and metadata. Here’s a breakdown of what both of them mean, and how they relate to each other.

Metadata makes content findable and understandable for users and computer systems, it’s data about data. Rachel Lovinger describes it as “information about the content that provides structure, context, and meaning”. Photos typically have significant quantities of metadata attached to them, information like where the photo was taken, the date the photo was taken and the device the photo was taken on. Metadata is particularly important to search engines, helping to surface the right content based on what the user is searching for.

Taxonomies, on the other hand, refer to structures that organize information. Unlike metadata which applies to individual pieces of content, taxonomies help to organize content into hierarchical relationships.

So how do metadata and taxonomies work together? Well, if a taxonomy’s goal is to organize content, it needs terms to be stored as metadata. Christine Benson notes that “a taxonomy organizes information, and metadata describes it”. They’re really 2 parts of the same whole.

Wrap up

Hopefully, we’ve given you a clear idea of some of the more important information architecture terms and how they relate to each other. If you want to start rethinking your own website’s information architecture, there’s no better place to start than with a comprehensive understanding of how your users think the information on your website should be structured. You can read more about one of the best methods for this process, card sorting, right here on our blog.

Take a look at the navigation menu at the top of our blog. Mouse over the ‘Explore by topic’ menu and browse through the different elements.

If you’re new to the world of website architecture and UX, developing something like this may seem quite trivial – surely it’s just a matter of picking 'popular' areas of your website and dropping them in, right?

Not exactly.

When it comes to website design, navigation should sit at the top of the priority list. After all, it’s what sits between your user and their goal. It’s the critical link that’s usually the deciding factor in whether or not they’ll continue to use your website.

In this article, we’re going to cover off some of the key things that make for a good website navigation experience. But first, it’s important to dispel some confusion.

According to Wikipedia, “web navigation refers to the process of navigating a network of information resources [like content]”. This is key. Website navigation isn’t the design of a website, it’s the bones of a website – the core structure that sits beneath the design. It can be helpful to think of it like a freeway system linking drivers (users) to destinations (content). Without a navigation, or, as is more often the case, with a poor navigation, the experience of using a website falls over. And in real terms, this is going to impact whatever it is that your organization does.

How navigation affects the user experience

There’s no shortage of elements that play into the user experience of a website. Everything from font, color, imagery, headlines, call to actions, page load time and form design have a bearing on the end user experience. But navigation is really the most important consideration of all. If people can’t find what they’re looking for within the structure of your website, they’ll likely leave and look for that same content elsewhere.

If you run an ecommerce website selling cosmetics, a frustrating navigation experience could mean your customers simply get fed up and try one of your competitors instead.

What makes for a great navigation experience?

When looking at what separates merely functional website navigation experiences from great ones, there are a number of key considerations:

Keep your navigation bar as simple as it needs to be

Website navigation bars have a habit of either including far too many links or not enough – it’s important to strike the right balance. You may find it helpful to consider the following 2 factors when designing your own navigation:

• What you want your users to do on your website
• What your users want to do on your website.

The difference in a user’s goals and your own is important. While your users may want to find information about your company history, you’ll have your own goals of getting users to product pages or perhaps signing up for accounts.

User-friendly language

We’re not going to get into the specifics of structuring a brand tone and style here, but we’ll just note the following: Clear is kind. Unclear is unkind. This is an important rule to keep in mind when designing the labels/UX copy for your navigation items. You want people to immediately understand what they’re reading or about to click on – there should never be any confusion. When your confusing labels send users on a mission to find something that should be easily discoverable, there’s a good chance they won’t return to your website.

So what does this look like? Here are a couple of examples:

• When writing the label for a page with your company contact information, opt for ‘Contact us’ instead of ‘Leave us a message’.
• If you need a label for a page that has information about your staff, consider something like ‘About our team’ instead of ‘Who we are’.

Stick to web conventions

• The reason why conventions exist is because they’re based on ideas that work.
• Design conventions work so well that you can look at a website in a completely different language and still partially navigate your way around.
• The only time you should ever break from conventions is if you have a better way of doing something, for example, if you have a website for a specific marketing or sales campaign, it might be more appropriate to do something non-conventional with the menu.

Web conventions exist for a reason – they’re based on ideas that work and are understood by the majority of web users. In many cases, these conventions work so well that most people will be able to navigate websites in entirely different languages simply because the functions are located in places that make sense.

Don’t forget the footer

When we redeveloped the Optimal Workshop blog at the beginning of 2019, we ran a series of usability tests on our website to work out how our users navigated their way through different types of content. The results were pretty interesting. When we asked people to find a link to our blog, many didn’t go for the ‘Learn’ menu in our navigation bar but instead went straight down to the footer at the bottom of the page.

Often overlooked, the footer forms a key function in your website’s navigation experience, for a few key reasons:

• They encourage further exploration: The end of a webpage doesn’t have to be the end of a user’s experience with your website. A footer can help to prevent users from bouncing out by encouraging further exploration and interaction.
• They help your mobile users: Navigating the web on mobile device understandably involves more scrolling than a desktop. With this in mind, the footer becomes even more important as an anchor for mobile users: even when they get lost on a long page, they’ll know that easy navigation options await in the footer.

Tips for crafting a user-focused navigation

Building a navigation system that’s intuitive and understandable by the majority of your users isn't easy – but it’s not impossible. The first step on the path to creating such a navigation begins with an understanding of how your users think. Or, more specifically, how your users think the information on your website should be arranged.

One of the methods that we use to figure this out is called card sorting. With card sorting, you can work out how people understand and categorize information. In a typical card sort, you task participants with sorting cards containing different items into groups. You can then use the results to figure out how to group and label the information on your website in a way that makes the most sense to the people using.

The other technique that proves invaluable during the website design process is called tree testing. It’s best-suited to help you assess the findability of topics on a website. You run a tree test on a text-based frame of your website – there are no navigation aids or design elements to give any hints. By removing everything but the labels and how they’re, you can work out how effective your navigation is at getting people to the content they’re looking for. If you find that test participants consistently struggle to locate specific items, you’ll know there are issues with your structure.

These are 2 methods that can help you with website navigation design, but they make great starting points. You can use card sorting to get an idea of how people think information should be grouped, turn this into a rough structure of your website, test it, and then iterate. If you’d like to give card sorting and tree testing a try, give our UX platform a go.

A definition of a website footer

The footer of a website sits at the very bottom of every single web page and contains links to various types of content on your website. It’s an often overlooked component of a website, but it plays several important roles in your information architecture (IA) — it’s not just some extra thing that gets plonked at the bottom of every page.

Getting your website footer right matters!

The footer communicates to your website visitors that they’ve reached the bottom of the page and it’s also a great place to position important content links that don’t belong anywhere else — within reason. A website footer is not a dumping ground for random content links that you couldn’t find a home for, however there are some content types that are conventionally accessed via the footer e.g., privacy policies and copyright information just to name a few.

Lastly, from a usability and navigation perspective, website footers can serve as a bit of a safety net for lost website visitors. Users might be scrolling and scrolling trying to find something and the footer might be what catches them and guides them back to safety before they give up on your website and go elsewhere. Footers are a functional and important part of your overall IA, but also have their own architecture too.

Read on to learn about the types of content links that might be found in a footer, see some real life examples and discuss some approaches that you might take when testing your footer to ensure that your website is supporting your visitors from top to bottom.

What belongs in a website footer

Deciding which content links belong in your footer depends entirely on your website. The type of footer, its intent and content depends on its audience of your customers, potential customers and more — ie your website visitors. Every website is different, but here’s a list of links to content types that might typically be found in a footer.

• Legal content that may include: Copyright information, disclaimer, privacy policy, terms or use or terms of service — always seek appropriate advice on legal content and where to place it!
• Your site map
• Contact details including social media links and live chat or chat bot access
• Customer service content that may include: shipping and delivery details, order tracking, returns, size guides, pricing if you’re a service and product recall information.
• Website accessibility details and ways to provide feedback 
• ‘About Us’ type content that may include: company history, team or leadership team details, the careers page and more 
• Key navigational links that also appear in the main navigation menu that is presented to website visitors when they first land on the page (e.g. at the top or the side)

Website footer examples

Let’s take a look at three diverse real life examples of website footers.

IKEA US

IKEA’s US website has an interesting double barrelled footer that is also large and complex — a ‘fat footer’ as it’s often called — and its structure changes as you travel deeper into the IA. The below image taken from the IKEA US home page shows two clear blocks of text separated by a blue horizontal line. Above the line we have the heading of ‘All Departments’ with four columns showing product categories and below the line there are seven clear groups of content links covering a broad range of topics including customer service information, links that appear in the top navigation menu and careers. At the very bottom of the footer there are social media links and the copyright information for the website.

As expected, IKEA’s overall website IA is quite large — and as a website visitor clicks deeper into the IA, the footer starts to change. On the product category landing pages, the footer is mostly the same but with a new addition of some handy breadcrumbs to aid navigation (see below image).

When a website visitor travels all the way down to the individual product page level, the footer changes again. In the below image found on the product page for a bath mat, while the blue line and everything below it is still there, the ‘All Departments’ section of the footer has been removed and replaced with non-clickable text on the left hand side that reads as ‘More Bath mats’ and a link on the right hand side that says ‘Go to Bath mats’. Clicking on that link takes the website visitor back to the page above.

Overall, evolving the footer content as the website visitor progresses deeper into the IA is an interesting approach - as the main page content becomes more focussed as does the footer while still maintaining multiple supportive safety net features.

M.A.C Cosmetics US

The footer for the US website of this well known cosmetics brand has a four part footer. At first it appears to just have three parts as shown in the image below: a wide section with seven content link categories covering a broad range of content types as the main part with a narrow black strip on either end of it making up the second and third parts. The strip above has loyalty program and live chat links and the strip below contains mostly links to legal content.

When a website visitor hovers over the ‘Join our loyalty program’ call to action (CTA) in that top narrow strip, the hidden fourth part of the footer which is slightly translucent pulls up like a drawer and sits directly above the strip capping off the top of the main section (as shown in the below image). This section contains more information about the loyalty program and contains further CTAs to join or sign in. It disappears when the cursor is moved away from the hover CTA or it can be collapsed manually via the arrow in the top right hand corner of this fourth part. It’s an interesting and unexpected interaction to have with a footer, but it adds to the overall consistent and cohesive experience of this website because it feels like the footer is an active participant in that experience.

Domino’s Pizza US

Domino’s Pizza’s US website has a reasonably flat footer in terms of architecture but it occupies as much space as a more complex or deeper footer. As shown in the image below, its content links are presented horizontally over three rows on the left hand side of the footer and these links are visually separated by forward slashes. It also displays social media links and some advertising content on the right hand side. The most interesting feature of this footer is the large paragraph of text titled ‘Legal Stuff’ below the links. Delightfully it uses direct, clear and plain language and even includes a note about delivery charges not including tips and to ‘Please reward your driver for awesomeness’.

How to test a website footer

Like every other part of your website, the only way you’re going to know if your footer is supporting your website visitors is if you test it with them. When testing a website’s IA overall, the footer is often excluded. This might be because we want to focus on other areas first or maybe it’s because testing everything at once has the potential to be overwhelming for our research participants.

Testing a footer is fairly easy thing to do and there’s no right or wrong approach — it really does depend on where you are up to in your project, the resources you have available to you and the size and complexity of the footer itself!

If you’re designing a footer for a new website there’s a few ways you might approach ensuring your footer is best supporting your website visitors. If you’re planning to include a large and complex footer, it’s a good idea to start by running an open card sort just on those footer links with OptimalSort. An open card sort will help you understand how your website visitors expect those content links in your footer to be grouped and what they think those groups should be called.

If you’re redesigning an existing website, you might first run a tree test in Treejack on the existing footer to benchmark test it and to pinpoint the exact issues. You might tree test just the footer in the study or you might test the whole website including the footer. Treejack is really flexible and you can tree test just a small section of an IA or you can do the whole thing in one go to find out where people are getting lost in the structure. Your approach will depend on your project and what you already know so far. If you suspect there may be issues with the website’s footer — for example, if no one is visiting it and/or you’ve been receiving customer service requests from visitors to help them find content that only lives in the footer —  it would be a good idea to consider isolating it for testing. This will help you avoid any competition between the footer and the rest of your IA as well as any potential confusion that may arise from duplicated tree branches (i.e. when your footer contains duplicate labels).

If you’re short on time and there aren’t any known issues with the footer prior to a redesign, you might tree test the entire IA in your benchmark study, iterate your design and then along with everything else, include testing activities for your footer in your moderated usability testing plan. You might include a usability testing scenario or question that requires your participants to complete a task that involves finding content that can only be found in the footer (e.g., shipping information if it’s an ecommerce website). Also keep a close eye on how your participants are moving around the page in general and see if/when the footer comes into play — is it helping people when they’re lost and scrolling? Or is it going unnoticed? If so, why and so on. Talk to your research participants like you would about any other aspect of your website to find out what’s going on there. When resources are tight, use your best judgement and choose the research approach that’s best for your situation — we’ve all had moments where we’ve had to be pragmatic and do our best with what we have.

When you’re at a stage in your design process where you have a visual design or concept for your footer, you could also run a first-click test on it using Chalkmark. First-click tests are quick and easy and will help you determine how your website visitors are faring once they reach your footer and if they can identify the correct content link to complete their task. Chalkmark studies can be run remotely or in person and just like the rest of the tools in the Optimal Workshop suite, are super quick to run and great for reaching website visitors all over the world simply by sharing a link to the study.

For further reading on testing website footers, be sure to check out the case study review we ran on the footer of Sephora’s US website!