Part 2: Analyzing Usability: How to do it

Welcome back! In my last post, I gave a bit of background about how and why you can do a Usability Audit, based in Nielsen and Molich’s Heuristic Analysis. In this post, you’ll get to watch as I do my own. Let’s get started.

First: Get in touch with your inner crank

Large GIF (640x320).gif

The beauty of the Usability Audit is that you don’t have to be nice! I like to say that I connect with my inner Andy Rooney in doing this - grinding my axe with things that are particularly annoying, wasteful, or inefficient. And yes, it may seem silly to be purposefully indignant, but I think this is a good example of righteous indignation.

Next! Take Screenshots!

I’ll walk you through my process for performing the Usability Audit, and as you’ll see, I’ll share my screenshots. Taking screenshots is the first step I take in approaching a re-design project. I want to capture the interface as it is, so that I can illustrate what I’ve encountered, and then integrate it into my wireframes and flows.

Now, let’s pay my garbage bill

Screen Shot 2017-07-19 at 4.37.19 PM.png

When I ask workshop participants to name a web site or app that frustrates them, often they’ll name one that they have to use in order to pay a bill: sites of utility companies, insurance providers, or financial services institutions. Paying bills is rarely fun - add frustration and difficulty to the mix, and it’s the worst.

My most-frustrating bill to pay is literally garbage: the bill I receive each month from Waste Management. Like 41% of Americans (and 70% of adults under age 35), I’m a renter. Yet, as is the company’s policy, they won’t set up accounts for rental tenants. Thus, this bill doesn’t even have my name on it, but that of my landlady.

So, I have to pay as a guest. As e-commerce usability research shows, forcing users to set up accounts in order to pay increases what is called the “interaction cost” - the cognitive and emotional energy, as well as time, spent by the user.

The paper bill that I get in the mail is covered in reminders that I can pay my bill online. While I have most of my bills set for autopay, this is one that I can’t set up - in fact, when I go to wm.com/myaccount, I can’t set one up, due to the aforementioned circumstance. This is a task I do every month, but the entire experience makes me feel like I’m doing it all wrong.

Screen Shot 2017-07-19 at 4.38.24 PM.png

Likewise, when I go to WM.com, the site directs me to set up service, something I’ve already done. This is a relatively recent phenomenon in UX - an emphasis on the “pre-sale”, or onboarding the new customer. To me, this is relatively short-sighted - emphasizing the new customer while leaving the returning user to fend for themselves.

Always a visitor:

Screen Shot 2017-07-19 at 4.37.52 PM (1).png

Thus, when I pay my bill, I have to opt for the one-time payment. And objectively, there’s nothing wrong with this: there are lots of reasons for users to opt not to register. The problem is, accommodating them.

As many have argued, text is a powerful part of the user experience - coercive copy like this contributes to what I’ll call a dark pattern.

Screen Shot 2017-07-19 at 4.38.35 PM.png

When I do find my way to the “Make a One-Time Payment”, I am offered a little bit of useful assistance - the form shows me where to find my Customer ID on the paper bill.

Meanwhile, the UI elements are rather inconsistent. At the bottom of this page, I see this graphic and text for the first time. What does this mean? It doesn’t make me feel much more secure, just confused.

Screen Shot 2017-07-19 at 4.39.38 PM (1).png

Similarly, after I’ve entered my payment information, I see this completion meter for the first time.

Screen Shot 2017-07-19 at 4.41.02 PM.png

Normally, I think completion meters are pretty helpful in showing users where they are in a task, but this is confusing! I’m on step 3, but where were steps 1 and 2? And again, I’m reminded of my “one time” payment status. If I had the option, I would have definitely put this bill on Autopay!

Screen Shot 2017-07-19 at 4.41.13 PM.png

Finally, I have confirmation, and look, I’m on step 4 in the new completion meter.

My Findings:

Screen Shot 2018-05-01 at 4.39.16 PM.png

 

  1. Visible System Status: 😕

In this category, the findings are mixed. Due to the fact that I can’t create an account, there’s no way to check on account status outside of this process.

Likewise, the completion meters I see here give me some status indicators, but as they say “too little, too late”.

2. Match the Real World: 🤑

In this regard, the experience is… okay. Although the name-on-the-account issue is a fail in this regard, the graphic above showing the Customer ID on the bill is actually helpful in figuring out what my Customer ID is and what numbers to type in.

Likewise, this graphic is helpful (if a bit excessive) in helping one locate the name on one’s credit or debit card.

Screen Shot 2017-07-19 at 4.40.00 PM.png

 

Overall, it’s a little irksome to see that there is attention to these details - but only when it comes to payment information.

3. User Control and Freedom:🤦

Nielsen notes that users need a “clearly marked ‘emergency exit’”, and that design should support “undo and redo”. Facepalm!

4. Consistency and Standards: 🤷

I’ll give this a Shruggie. Like I pointed out earlier, the completion meters and rather random security icons don’t give me much in this regard.

5. Error Prevention: 🙄

Eyeroll. Because I’m used to this, and have found my own workarounds, I’m not the most reliable source in this regard. I’ve definitely made a lot of errors in trying to get this task done, and I’d hypothesize that new users would as well.

6. Recognition > Recall : 🚷

This is the principle of designing systems that do not rely on end users having to remember   things and make connections on their own. As we see, I’ve had to do both of those things.

7. Flexibility and Efficiency of Use: 🙅‍

Nope, I don’t see this here. I’ve had to create my own workarounds, and have spent considerable time doing so.

8. Minimalist Design:🙌

We've got to give them some credit for this. There aren’t a lot of stray design elements, thankfully!

9. Help Diagnose and Recover from Errors: 😬

Before I reached this point of frustration, I attempted to register for an account to pay online several times, called customer service, and spent a long time on the phone, only to be told. “Nope, sorry!” Grimace.

10. Help and Docs: 🤕

I have consulted the Help and Docs features on the site, and lo and behold, these weren’t particularly useful. Search “renter” or “tenant” in the knowledge base, and you’ll come up empty handed. Ouch.

Conclusion: Get Mad, then Make it Better

Thanks for following along - now it’s your turn!