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:

• Home
• Company
• Support
• Design
• SEO
• Portfolio
• Blog
• Contact
• 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
• Testimonials

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

• Design
• SEO
• Web Services
• Network Services

Other Stuff

• Home
• Company
• Support
• Portfolio
• Blog
• Contact
• Client Login
• Testimonials

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:

1. Web Design
2. Web Marketing
3. Hosting
4. Hardware Sales
5. 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:

• Home
• Company
• Blog
• Contact
• 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:

Primary Menu:

• Web Design
• Web Marketing
• Hosting
• Hardware Sales
• Network Services
• Portfolio

Secondary Menu

• Home
• Company
• Blog
• Contact
• 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.

Questions:

1. 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?
2. Does this mean that we’re forced into a box model for most service-oriented websites?