Ever been on a badly designed website? It’s a nightmare. Links that take you round in circles, important information hidden away in drop-down menus, checkouts that don’t confirm your order — like most people who encounter this, that first visit is usually your last.
Website design has come a long way. Now, users expect a seamless experience with the websites and apps they use. Patience is lower than it’s ever been for bad design — so designers and dev teams really need to be on their A-game.
Usability testing is one way to make sure the website or app you create is working as it should — and cognitive walkthroughs are one quick, easy, and cost-effective version of this. Here’s how to get started.
What is a cognitive walkthrough?
Cognitive walkthroughs are a form of usability testing. The aim here is to see whether a user can do certain tasks within a system.
For example, a test on an eCommerce site might be to see whether a customer can add an item to their basket, then pay for it. A cognitive walkthrough is one way to see whether the process is as seamless as it could be (and if it isn’t, work out why and what can be done about it).
It’s task-oriented, meaning it’s based around the idea that, given the option, people will prefer to navigate their way around a site via tasks rather than by following instructions or manuals.
A short history lesson…
The process was first created by Cathleen Wharton, John Rieman, Clayton Lewis e Peter Polson in the early ’90s, is based on a model of exploratory learning, the CE+, a paper published in 1990 by Polsen and Lewis.
According to this model, people learn best through exploration, learning, and guessing, rather than following instructions. During this process, the user will note the system’s responses and use that to guide them towards their goal.
Here are questions users will unconsciously ask themselves while using the system:
- What do I need to do first to take me closer to my goal?
- Did that work? If so, show me the next step. If not, show me where I went wrong and help me find a way to get back on the right track.
This is what cognitive walkthrough essentially is: a process that involves looking at the way the user interacts with an interface, and noting down problems that stop them from being able to reach their goal.
What are the benefits of cognitive walkthroughs?
Compared to other forms of usability testing, cognitive walkthroughs are easy, fast, and affordable to run. They can also be run early on, during the design phase before the project goes through to the dev team. This provides vital insight before too much budget is spent on developing things that will need to be redeveloped or redesigned.
Who should conduct a cognitive walkthrough?
Cognitive walkthroughs work best when the tasks are given to someone who isn’t already familiar with the interface. Someone who has a rough idea of how it works will often miss problems because they know where they’re going and how to avoid issues — often unconsciously. If you give it to someone fresh, they’ll be able to pick up on things others may have missed.
If you’re worried the user won’t know how to navigate certain things because they’re not quite finished, you can write instructions down for them or oversee the test and step in if needed.
How to run a cognitive walkthrough: Preparation
Define: Before you begin, it’s a good idea to define your test and your user’s goals. This can be a simple list.
Describe: For this stage, describe your average user. What are their goals likely to be, and how will they interact with the system? In some situations, one system may have two or more different types of user. For example, a lecturer may use an online blackboard tool one way, while the student uses it another.
Detail: Define the users’ different goals in relation to your own goals. Note down all the steps they need to take to reach that goal. There may be additional tasks the user does in addition to those being assessed — but don’t include these. The walkthrough should only focus on the tasks being analyzed.
An example task flow for an eCommerce site might look a bit like this:
- Open site
- Find ‘shoes’ section
- Filter by color
- Filter by size
- Filter by material
- Select item
- Add to cart
You can set the instructions out in a list, or if the process is more complex, with several options branching out as the user progresses, a diagram like the one below could work better.
How to run a cognitive walkthrough: Kick-off
Pen and paper at the ready — it’s time for your user to interact and give feedback. You can run the test digitally, or use print-outs of each screen.
Four important questions to ask during a cognitive walkthrough
It’s important to always keep the user’s needs in mind. Asking the following four questions can help you stay on track while the testing goes on.
These four questions are taken from a 1994 paper by Cathleen Wharton, John Rieman, Clayton Lewis e Peter Polson, and they’re still used as the gold standard to this day.
Question 1: Will the correct action be made sufficiently evident to the user? (Or in other words: Will the user know what they need to do?)
The goal here is to see whether the interface is intuitive or whether incorrect assumptions have been made about a user’s experience. If it’s the latter, the user won’t know what to do.
This stage can also help you work out whether the user’s action aligns with the user’s expectations: If they’re lost or using other things as reference points, then there’s a problem. For example, if you have two tabs that have the same or similar names, you might find the user notes the position of each tab to help them navigate. While that does work in some instances, it’s not ideal nor is it intuitive.
Question 2: Will the user connect the correct action’s description with what they’re trying to do? (Or in other words: Will they notice the right action that’s available to them?)
This part of the test looks at whether they can pick out the right tools, tabs, or buttons. So say, for example, they want to see their favorited items. If there are too many buttons on the screen, they might not be able to spot the one with the little heart on it.
One option is to limit the visible data by hiding it in, say, a dropdown menu. But be careful about what you put there: If an important tab is buried in a hidden menu, the user will struggle.
Top tip: Keep analysis paralysis at bay by limiting the choices available. This also lowers the user’s chance of making a mistake.
Question 3: Will the user interpret the system’s response to the chosen action correctly?
When the user clicks or drags something, they’ll scan all the options available to them and then choose the one they think will take them closer to their goal. If there are too many options, none seem correct, or they’re written in a confusing way, the user will struggle.
Question 4: Will the user be able to see progress is being made towards their goal?
There are few things more annoying (and disconcerting) than clicking ‘pay,’ only to be taken back to the homepage or a blank page.
This is just one example of why it’s important to show users that things are happening — for example, a ‘thank you for your order’ screen after checkout, or a green tick next to something that’s been submitted. Feedback is important because it shows the user that they’re moving forward or finished and that they don’t need to do anything else.
Top tip: If you’re pushed for time, it might be tempting to design as you go. Make sure there’s a ‘no designing’ rule during the analysis stage. Instead, focus on finding problems, documenting them, then generating ideas for solutions. Any further design should be done once those stages are complete.
Proper documentation is a vital part of the process. If the answer to any of the above questions is ‘no,’ then you’ll need to take note. It’s a good idea to gather all these questions together and store them in one online place so designers and developers can prioritize the tasks and access the list with ease. Project management software is a good option here: online Kanban boards and real-time notifications get teams working and collaborating together — meaning no tasks are missed off or done twice due to lost information.
Cognitive walkthroughs are a great way to put yourself in the user’s shoes. They’re fast, straightforward, and the product doesn’t have to be fully finished for the walkthrough to happen. This means teams can find lots of problems quickly and early on in the process and make adjustments before too much money has been spent on development.
To get the most out of your cognitive walkthrough, use diagramming software to do all your testing and planning. Cacoo, our own diagramming tool includes a repository of editable diagram templates, plus handy features including version control, live comments, and multi-user editing. This makes feedback and sharing so much easier because developers, designers, and users can all work and collaborate together on one, easy-to-use platform.