What Is a Cognitive Walkthrough and Does Your Site Need One?

There are a lot of ways to test the strengths and weaknesses of a WordPress site. And you should be using as many testing methods as possible both before and after launch to ensure that the user experience is always in good shape.

Many of the methods for testing the UX of a WordPress site have been automated in some way:

Here’s the thing: that software is going to review the technical aspects that contribute to a well-functioning WordPress site. Granted, the theory is that if you optimize your site thoroughly and review every element to ensure it’s working as it should, then your site should be good to go.

But sometimes the subjectivity of user experience can’t be tested by a machine. Sometimes you have to get in there yourself and experience the website as an end user. So, rather than solely rely on more heuristic (i.e. methodical and mechanized) approaches to UX review, I’m going to talk today about integrating an old-fashioned approach into your process.

And that’s the cognitive walkthrough.

Why Should You Use a Cognitive Walkthrough

I recognize that the speed at which your web pages open, the responsiveness of the design, and the security features that encourage visitors to buy or sign up are all essential parts of the user experience. That said, your WordPress site could have all of those boxes checked off and users still might feel discouraged from converting. Which is why a cognitive walkthrough should be included in your QA process–both before and after launch.

Usability.gov defines a cognitive walkthrough as:

“An inspection method for evaluating the design of a user interface, with special attention to how well the interface supports exploratory learning, i.e., first-time use without formal training. The evaluation is done by having a group of evaluators go step-by-step through commonly used tasks.”

I would say there are specific occasions when a cognitive walkthrough should take place in your process:

After you’ve finished a prototype of your web design.
You and your clients should walk through the website–starting at the home page–in the interactive prototype.

Right before launch.
With your WordPress site sitting in a local testing environment, you and your team members should take turns walking through the site as if you were a first-time user. It’s best if you can have a team member do it who wasn’t heavily involved in coding or design.

A couple weeks after launch.
You’ll want to give search engines a chance to index the site before doing this one. This will be the most comprehensive type of cognitive walkthrough as it requires you to start all the way at the pre-click experience (i.e. in search) and then follow the path of the user post-click.

When there’s a concern about lack of conversions.
Obviously, you’ll need to check with Google Analytics first to ensure the conversion rate isn’t living up to expectations. And you’ll also need an A/B testing tool to help you confirm your theory about the problematic area. However, in order to identify the issue, you should use a combination of a heuristic review and cognitive walkthrough.

During a redesign assessment.
If a client inquires about a redesign or rebranding of their WordPress site, a cognitive walkthrough would give you a good idea of how you can go about fixing the UX.

The key thing to remember is that a cognitive walkthrough isn’t about timing page loads, checking for broken links, or testing contact forms. This process solely focuses on recreating a user’s actual experience with the website. This means getting them from their first interaction with the site (usually a SERP listing or social media post) all the way to conversion.

How to Conduct a Cognitive Walkthrough for WordPress Sites

Regardless of when you conduct a cognitive walkthrough, the process will be the same for the most part.

1. Define the Website’s Goal

This is the main goal you have for your WordPress site. In other words, what does the site “sell” and where is the element that helps you achieve that goal? For most websites, that’s either going to be a contact form or a checkout page.

Now, write down that goal, save it, and don’t mention it again until the end of the cognitive walkthrough.

2. Define Your Users’ Motivation

Next, think about the target audience of your WordPress site and what’s motivating them to be there. In other words, what is their pain and what do they believe the website will do to resolve it? If you already have clients that found the business through the website, don’t be afraid to ask what compelled them to click through and visit the site. You may learn something new about what attracts people to the brand and website.

For those conducting the cognitive walkthrough, they will need to keep this motivation in mind. This is why it’s not always a good idea for the WordPress developer or designer who created the website to do this. In their minds, they’ll be focused on how the various elements contribute to the experience. But, in the users’ minds, they’re just navigating through a website in the hopes of finding what they need.

3. Chart the Steps Your Users Will Take

Knowing what you want your WordPress site to achieve, and what your users are there for, you should now be able to create a hypothesis. However, rather than write a statement about what you believe users will do, create a diagram that charts out the steps you believe they will take.

Here is an example of what that might look like:

Cognitive Walkthrough - User Path Diagram
An example of how to chart your users’ pathway.

After your test users have finished the cognitive walkthrough, you can compare their insights to the projected pathway you believed they would take. Any deviations will let you know where there’s a problem.

4. Conduct the Cognitive Walkthrough

Assign the cognitive walkthrough to people who haven’t been heavily entrenched in the web development process. They might be on your team, a business partner, a cowork space neighbor, a family member, or the CEO of the company behind the website who, up until now, hasn’t been involved in the project. Just make sure they’re going into this with the right mindset: that of the end user.

Also, be sure to record all sessions of the cognitive walkthrough. This way, you can get input in real-time and also have a recording to reference later while you perform your analysis.

Here is a list of plugins you can use to record your cognitive walkthrough. WPMU DEV members can also check out Forminator which is included in your developer tool kit.

If the site is live, start them at the search engine results page where your website is displayed. I’m going to stick to the restaurant reservation theme from above and use the Melting Pot as my example:

Cognitive Walkthrough - Relevant SERP
The metadata for this page says I can book a table, and so that’s what I want to click on.

(Note: If the site isn’t already live, you can start them at the home page or other critical landing page. If the site is live, but you want to test the efficacy of paid ads on Google or Facebook to drive visitors to conversion, start there.)

When I clicked on the link in search, this is what I encountered:

Cognitive Walkthrough - Home Page
What you can’t see is that the home page is also cluttered by a push notifications pop-up.

What the screenshot doesn’t show is that I also received a push notification approval request. As a user, I’m already a little annoyed with the pop-ups that appear immediately upon arrival. I saw in the search listing that I could reserve a table and that’s really all I wanted to do.

That’s okay. I’m blocking the push notification and X’ing out of the pop-up. With the distractions gone, I’m now faced with the home page that should allow me to book a table.

Cognitive Walkthrough - CTA
The call-to-action I was hoping for is right there, above the fold, on the home page.

As someone who dines out and orders in a lot, I would typically look to the top-right corner of a restaurant’s website to find the “Order Now” or “Make a Reservation” button. However, because the navigation is in white lettering and there’s a much brighter color down below, my eye is drawn to the CTA.

The good thing here is that the red CTA does what it’s supposed to do. It draws my eye downwards to the most important part of the page. However, there are two CTAs on this page. Not only that, but they’re sitting very closely to one another. And, worse, they’re not even aligned or properly balanced with one another.

For me, this is a distraction, though I don’t know if it’s because I tend to be easily bothered by bad design choices or because it caused me to hesitate in taking the next step.

Regardless, I know where to go to make a reservation now, so I’m going to put my frustration aside and click the “Book a Table” button.

Cognitive Walkthrough - CTA Click
The CTA button requires the user to go through multiple steps/clicks before getting to where they want to go.

Clicking the button didn’t do what I expected it to, so that was a bit of a surprise. Instead of taking me to the reservation page, it first asks me to select a location.

Cognitive Walkthrough - CTA Dropdown
I’m not sure if the dropdown was the best choice for a location selection task.

Then, upon opening the location list, it gives me a long scrolling dropdown I have to use to find my location. While it’s organized well-enough, I don’t know if this is the smartest choice for selecting a location.

I’ve now selected Wilmington, Delaware as the desired destination. Again, the resulting action isn’t what I expected.

Cognitive Walkthrough - Reserve or Call
Yet another hiccup in the conversion process.

Instead of going to the reservation form, I’m given this message about possibly having to call the restaurant. I’m definitely getting annoyed with this process. In total, there was:

  • 1 click on Google.
  • 2 clicks to close out the pop-up messages.
  • 4 clicks to get to the reservation page.

That’s seven total clicks I’ve made so far. Seems like a lot of work just to book a table with Melting Pot.

Thankfully, the next step does take me to the reservations page.

Cognitive Walkthrough - Outsourced Reservations with Open Table
Similar to using a well-known entity like PayPal or Amazon to handle payments, as a user, I’m happy to see Open Table here.

Looks like the Melting Pot uses Open Table to manage this on their behalf, which I think is a nice choice. I’m familiar with the platform and already have an account with them, so I know that claiming my reservation will be easy and take no more than two or three more clicks.

If this were a real cognitive walkthrough, I would go ahead and book that reservation and make sure I received the proper confirmation page and email. However, I don’t want to deal with cancelling a fake reservation, so we’re just going to assume that Open Table knows how to properly handle this part of the process.

But you get the sense for how to conduct this sort of review, right? Or how to encourage your test users to do so? In other words, you want them to experience this as if it were their first time and as someone on the same mission as your target audience. As they go through the pre-click to post-click actions, you want to collect their thoughts and concerns regarding the pathway you’ve cleared for them. Or why they chose not to follow the pathway you thought they would.

5. Conduct the Cognitive Walkthrough on Mobile

As more users access websites through smart devices, testing mobile UX is essential. So, when you have users doing their cognitive walkthroughs, ask some of them to do so on desktop and others to do so with their smartphones or tablets. Even better, review your Google Analytics data on the Technology used to access the website. Use the ratio of desktop-to-mobile users to decide how many people should do the walkthrough on each platform.

6. Interpret the Results and Apply Changes

With the cognitive walkthroughs complete, it’s time to figure out what’s going on.

If your test subjects got through the site as expected and had no hesitations before converting (and actually did convert), that’s wonderful! It doesn’t mean there won’t be any room for improvement, but that’s still a fantastic sign the process you’ve built for your WordPress business is on point.

If your test subjects struggled, review their feedback and review the on-screen recordings of their sessions. You may need to ask yourself the following:

  • Was there something in the pre-click interaction (in Google search, on social media, etc.) that was misleading or unattractive?
  • What happened within the first couple seconds of them being on site? Were they confused? Were they impressed? Were they ready to get straight down to business?
  • Did your users know immediately where to look to complete their goal or did it take a few tries and some digging through the page?
  • Did the navigation come in to play?
  • Were your users’ goals in alignment with your own goal’s for the site or were they distracted by some other action they could take?
  • Did they get through the action as quickly as you had hoped? What caused the deviations or slowdowns?

For some websites, it might not even be about taking an action as explicit as making a restaurant reservation. You may just want people to read your blog posts and subscribe to future updates. Or to look at your WordPress portfolio and inquire about rates. The questions you ask and the assessment you make should be reflective of what your site’s original goal was and what the cognitive walkthroughs demonstrated with regards to it.

Once you have your feedback, take time to address those issues by implementing alternative solutions or fixes through A/B testing. This way, you can make sure the problems reported weren’t just due to the small sample size before you permanently implement changes on the site.

With permanent updates in place, you should then monitor your analytics to confirm that the correct user flow is being followed and that conversions are on the up and up!

Wrapping Up

Keep in mind that a cognitive walkthrough is only one part of your WordPress website testing arsenal. You still have to make sure all the backend and frontend processes are working as they should. By taking a more holistic approach to testing, and using both mechanized and humanistic approaches to review, you’ll get a stronger sense of the whole picture of what works and what doesn’t.

Suzanne Scacca
Have you ever been surprised by a client’s perception of walking through their website? Do you think a cognitive walkthrough review process would’ve helped prevent that?