Have you heard the good news?
Web usability testing works.
What’s more awesome is that just the act of focusing on your website and thinking about it systematically can result in website improvements. I’ve spoken with two business owners in the past week – one a DJ and the other an accountant about their websites. I talked to the DJ a few weeks back about defining a critical path on his website and helped him think through what services he offers and how to make them part of the critical path. He called me earlier this week ecstatic. He had made the changes I recommended and in the few intervening short weeks, incoming calls from new perspective clients increased 300%. Many of those callers specifically mentioned that the website was what provoked them to pick up the phone.
He couldn’t be happier.
The other guy is an accountant and I just spoke to him today about defining his website’s critical path and redesigning the website around it. After years of having the same website, just talking about a critical path made his eyes light up. He immediately saw what I was getting at and it caused him to think about his website and how it can be improved. If he can maintain the dissatisfaction with his current site, based on the idea that it doesn’t create a good flow through a critical path, then he will eventually decide to make the changes that will help his business, like the DJ above.
I also have a good friend who runs a web design business. We’ve been talking about web usability and employing the techniques we discuss here to improve the websites of his clients.
To get him in the mood to talk web usability, Newman and I decided to take the front page of his website and run it through Feng-GUI to see what it thought of the website.
Here’s what we tested: (I’ve removed the name of the company and the location in which he works out of respect for my buddy.)
And here’s what we got back:
What you’re looking at is a gaze-plot chart. The circles represent the places a web user would look on the site. The number in the circle tells you the order and place where the user looks.
Now, the $64,000 question. What are the take-aways from the gaze-plot chart?
Remember that the purpose – in my mind – of user testing is to shore up the website’s critical path.
What we see in the above image is that the user is utterly confused about what to do. There’s a small giveaway that the company knows their website is difficult to navigate too. They have a small “Questions?” pop-up balloon at the bottom of their page where users can chat with somebody from the company.
To me, rather than looking like a nice way to make yourself available to prospective clients, what the Questions bubble says to users is that their website is too dense and that you can short-cut your way around the whole thing just by talking to somebody directly.
But if the user wanted to talk to somebody directly, why didn’t they just pick up the phone?
So right away we have some cause to be concerned about determining the critical path of the website. The “Questions” balloon isn’t inspiring confidence and the gaze-plot seems to confirm the idea that the site is confusing to visitors.
The next thing I wanted to do was look at what their critical path should be. To do that I looked at their menu and listed out all of their options. They are:
- Client Login
Additionally they have three tabs that also seem to be part of the menu so I will add them here as well. They are:
- Web Services
- Network Services
Remember, a critical path is the path that a user takes in order to get what they (and you) want. In this instance, because they are a service-oriented firm, the website is supposed to provide leads. We know that to be true because the company went so far as to put a “Request A Quote” on the front page. So we can list a contact as the ultimate goal, and the front page as the logical place where the user will start their journey.
Let’s write all that out.
Step 1: Front page
Step 2: ???
Step 3: Contact (Profit!)
What you’ll see here is that, as seems to be the norm, step 2 needs to be better defined. Step 2 is the path between the front page and getting that contact.
In order to determine what step 2 should be, we need to look at what it is this company does. Using the menu items above, I will now divide that list into Things They Do and Other Stuff.
Things They Do
- Web Services
- Network Services
- Client Login
When we group their menu items by what they do, it immediately becomes apparent that they are not giving themselves a fair shake. Part of this has to do with terminology and part of this has to do with the fact that not everything they do is listed on the website. This is a problem because I know they didn’t mean to be intentionally vague.
That leads to the obvious question, what do they do?
Since I have experience with this firm, I can tell you that they do five main things:
- Web Design
- Web Marketing
- Hardware Sales
- Networking Services
All of which, except for hardware sales, is accounted for (if just barely) by their list. The difference between the two lists is that my list is consistent and their list is alternately too specific and too vague. They list ‘design’ as something they do but it’s not self-evident that it’s web design. They do SEO, PPC, and social network marketing but all that’s listed in the menu is ‘SEO’. The phrase ‘web services’ is confusing because it sits next to ‘design’ and ‘SEO’ which makes you wonder what else ‘web services’ could be referring to. And finally there’s ‘Network Services’ which is something they do, but for some reason when I was first doing this, I ignored.
In place of their list, I would substitute mine.
Next, I’d take a look at all of the remaining menu items and I would try to combine and arrange them into a coherent secondary menu. The reason we have these items on the secondary menu is because we are distinguishing between pages that get a user onto the critical path and pages that get a user onto a secondary path.
In this instance, the above Other Stuff list can be condensed to:
- Client Login
Furthermore I would substitute the phrase “About Us” for “Company” and would replace the “Contact” page with a “Customer Service” page.
This leaves two menu items left, the portfolio page and the testimonials page. I’ve left them out because while they aren’t technically part of the critical path, it’s virtually guaranteed that this page will be viewed by potential clients before they make the decision to reach out and contact the company. This makes it necessary to promote it to the main menu rather than to keep it on the secondary menu. It’s such a substantial part of the selling process that I believe it’s better to weave the portfolio and testimonials throughout the website.
This leaves us with the following primary and secondary menus:
- Web Design
- Web Marketing
- Hardware Sales
- Network Services
- Client Login
Now all that’s left is to draw some boxes that bring all of this together. Here’s what I did:
From there Newman mocked it up and ran it through Feng-GUI.
What we were hoping to see was a visual narrative that made sense. In our original test, the gaze-plot was all over the place. Now that we’ve put the most important things out front and center, we should see the gaze-plot be a lot more orderly, an indication of understanding.
Here’s what Feng-GUI thought of the redesign:
It’s a mock up that’s for demonstration purposes only, not meant to be other than looking at how the content blocks are seen. And I think we can safely say that this is a BIG improvement over what currently exists there now.
What we’ve proved is that if you keep your eye on the critical path of your website and design your information so that it can be digested at a glance, it will yield valuable results.
For Further Consideration
One thing that kind of bugs me about the above gaze plot is that nobody seems to be reading the information that’s in the main image. Arguably, that should be some important info there. It leads me to think that this opens us up to testing different headline sizes and different messages in that space to determine what works most effectively.
- This whole post presumes that Feng-GUI returns valuable data. Is it dangerous to make all of the assumptions that I did in this post based on an algorithm that simulates eye-tracking rather than doing it with a real test subject?
- Does this mean that we’re forced into a box model for most service-oriented websites?
On this week’s podcast Ben and I discuss the critical path for websites, explore secondary website paths and talk more about how to design a proper web usability test.
Listen and Enjoy. Links for your reference below. – Newman
Definition of manipulation on Thesaurus.com
What Every Body is Saying by Joe Navarro
Oh, and the music around the 15 minute mark is by Skrillex.
If you’ve been following the website or podcasts over the past few weeks you’ve seen Newman and I dig into the topic of web usability. We approached it, at first, from a philosophical perspective. We talked about the web design process and where web usability fits into it. We found various tools online to assist in doing user tests and we’ve found various models for how to conduct user tests.
And we started to realize something: these models tend to be obnoxiously vague. Even when they make intuitive sense, they still leave the reader with more questions than answers.
I feel like they keep creating iterations of the old Sony business model:
Step 1: Bright idea
Step 2: ????
Step 3: Profit!
It’s Mr. Sony and he’s a naughty kitty!
WTF is Step 2? Nobody I’ve read (and I’ll readily admit that I have much more to read) has articulated a quality strategy for conducting a user test. And all the user test examples I’ve seen have bared this out.
What I’ve noticed is that somebody will develop a model. For example:
I actually like this model. I think it does a good job of describing the steps and grouping the various considerations into each step. But what drives me crazy about it is that it doesn’t compel me to do anything specific. This is a 25,000 foot view of the web ux universe. And as you’ll see, it’s practically the only view these models will present:
Same thing with this model, except in this model, they’re using words and phrases I’m familiar with but use them in ways that are not intuitive and meaningful.
You can look at those two models or even the one we were initially so high on in Monday’s podcast at usability.gov until blood shoots out of your nose and you’ll never get to a better understanding of how to conduct a user test.
What we need to do is cut the chute.
We’re sailing along at 25,000 feet looking at our surroundings. If we were really sky diving we’d see a number of geological formations beneath us: flatland, rivers, mountains, and so on. That’s what’s amazing about being that high up – it’s possible to see how the mountains are connected to the rivers. You see how the rivers feed and nourish the surrounding area because the surrounding area is lush with vegetation and various critters. Finally you see that river find its delta where it meets the ocean. It’s a point-of-view that’s hard to visualize from ground-level.
What it doesn’t do is tell you why there are mountains and rivers; why life crops up around those rivers, or most importantly for this analogy: how to terraform.
This analogy, like life, revolves around water. In this case, a river.
There’s an idea that we’ve previously covered called the critical path.
This idea, for the uninitiated, is extremely simple.
Pictured: A critical path.
A critical path is the path a user must take through your website in order to complete the website’s primary goal.
Visualize it in its most common form: an e-commerce cart. The critical path looks something like this:
FRONT PAGE –> CATEGORY PAGE –> PRODUCT DESCRIPTION PAGE –> CART –> CHECKOUT –> RECEIPT
Now, obviously, it’s not necessary for somebody to start at the front page of a web site to buy something. Furthermore, this might not be the only way that a person could navigate the site that would result in a purchase. But what we just described is a from-the-rooter-to-the-tooter critical path. It’s got a little bit of everything.
If we look at this critical path more closely we can really divide it into two smaller sections based on what the pages do.
When a person buys something, they always go through this process:
Step 1: Find a product to buy
Step 2: Buy the product
Similarly, a website’s critical path can be divided into two sections: pages that help the user find a product and pages that help the user to buy.
I like to think of the pages that fit in Step 1 as FILTERS and the pages that fit in Step 2 as CONFIRMERS.
Let’s look at that critical path again:
Filters: FRONT PAGE –> CATEGORY PAGE –> (SUB-CATEGORY PAGE) –>
Confirmers: PRODUCT DESCRIPTION PAGE –> CART –> CHECKOUT –> RECEIPT
The Front Page, Category Page, (and sub-category pages if necessary) are all filters. Their purpose is to direct traffic to the Product Description page.
The Product Description page is really the beginning of the checkout process. Done right it will either sell the product using pictures, text, and multimedia; or it will confirm the shopper’s good sense to buy that particular product.
From the moment the shopper adds the product to the cart, the only job your website has is to get them into and through the checkout. This part of your website is so important that web analytics packages like Google Analytics include a tool that specifically measures this part of the process. It’s commonly known as a Conversion Funnel or Goal Conversion Funnel.
It looks like this:
The action in a conversion funnel is centered around the sales process – as it should be – because we want shoppers to buy the stuff they put in their cart.
But what about those FILTER pages? Where’s their visualization tool?
Web Usability folks have the tools to do the job but they’re rarely considered as tools to measure the effectiveness of how a user filters the information on your site. The tools are the click-maps that visualize where users click on a page. If one has the resources to do an eye-tracking test, then the heat-maps are just as valid a tool but they track the user’s eyes instead of their mouse. It’s the same underlying principal that’s been taken to another level of granularity.
What does this mean for designing a web usability test?
To me, it means that we’re out of the clouds where we talk about the three tiers of goals
Tier 1: Business and User Goals
Tier 2: Site Goals
Tier 3: Page Goals
and into a place where we connect Tier 1 to Tier 3. Once you see it, it’s so obvious it’s hard to imagine that you hadn’t seen it before.
The way you do it is by drawing a path from Step 1/Tier 1 (Goals) to Step 3/Tier 3 (Profit). Because it’s such an important path, one might even call it a critical path.
So you see, now we have the ability to design a user test because now we know the goal of user testing.
The goal of usability testing is to determine the effectiveness of your website’s critical path.
This makes all the sense in the world. The website is a machine built specifically to achieve an objective. User testing needs to be focused around measuring how well the machine achieves the objective.
Now, knowing that, how does that translate into actually designing a web usability test?
Newman will have to speak to that. Fortunately that’s what he’s preparing for Friday.
On Friday, Newman is going to break down for you the basics of creating a user test and how designing a user test around the critical path forces radical deviations from the standard questions that are often found on web usability tests. It’s sure to cause some controversy because for some jacked up reason it seems to fly in the face of conventional wisdom.
3 Questions For You
1. What web ux tests have you done and what was its primary goal?
2. Have you ever done a web ux test where evaluating the efficiency of the site’s critical path?
3. Can there be valuable non-critical paths in a website?