How to Keep your Users in Control

There’s nothing worse than logging into an online service, attempting to carry out a task that was supposed to be simple, and then getting frustrated at how there doesn’t seem to be a way to do what you want. What’s even worse is when your screen is cluttered with buttons and alerts that don’t seem to make sense. Control and Visibility are some of Nielson’s Heuristics and I’d like to share with you an example that personally threw me off track and how it might be addressed.

What was I trying to do?

View energy tariffs. I was already on a decent plan but I was ready to prepare for spring cleaning and see if there were any cheaper and greener plans I could switch to. Under one of the plans I was looking at, this alert popped up:

popupfail.png

At first it seems like any other alert, but then I’m given the option to select ‘Yes’ or ‘No’. Hmmm… what am I saying yes or no to, surely this is just an alert? To assure you I wasn’t missing anything obvious allow me to show you the context around it.

Screen Shot 2017-03-16 at 19.00.37.png

What’s wrong with this?

Now the questions I have are:

  • Is this alert for this particular tariff, or for me because of the one I’m on currently?
  • What exactly isn’t available here?
  • What is available to me? Afterall, I’m looking at alternative tariffs!

The biggest mistake I can see here is that the alert is in exactly the same style as the features that are listed above it. When it comes to bringing attention to something the thing that we respond to is a break in uniformity and some sort of contrast. By providing the exactly the same style it isn’t immediately obvious that the alert is something I need to be concerned with. Pretend it was in a different language – do you see what I’m getting at here?

How could they resolve this issue?

Although I can only guess what the original intention was for that alert, there are a few suggestions I can make to help the designers or developers.

Provide context; locational awareness

By this I mean the user is located somewhere within the system and needs to navigate around to find what they need to find. By providing a context and locational awareness of where they are and where they can go, you keep the user informed and they remain in control. This is most often seen with breadcrumbs in website navigation.

Here you need to inform the user what exactly isn’t available, why isn’t it available and most importantly the means to find what is available.

Contrast to highlight important information

Perhaps it’s important for the user to be aware of the information given here and I already touched upon this before, but provide some contrast. It should be used carefully and here with this design either making it bold, or using a different colour scheme would help to bring attention to it in order to prompt the user to notice it and take the appropriate action. Which brings me to my final point.

Give the user the option to take action

If something isn’t available and there’s nothing the user can do about it, then a simple “OK” button or a “Dismiss” would have sufficed. If there is, then give me the option to filter out the ones that don’t apply to me so I can focus on my available options. Always provide the next step a user can take, it means they have somewhere to go and you can improve your retention rate.

Only show what’s needed!

I can’t stress this enough – this whole debacle wouldn’t be needed if they simply filtered out the available tariffs! By default you would only want to see what’s available to you if you decide to search for available tariffs. For those people who want to see all options available even if unredeemable then a subtle alert should have been displayed informing the user of this, and giving them the options to dismiss or reveal all possible plans.

In Summary

In the end, I switched supplier. Not surprising eh? I’m just one customer, but there are hundreds and thousands and tens of thousands of people also using this system who could come to the same conclusion. Remember:

  • Provide context – let the user know where they are and where they can go
  • Contrast – make important information stand out
  • Options – let them know what they can do about it, don’t make them figure it out
  • Essentials – I don’t need to know the power plans available in Australia man!

I hope somebody finds this useful, or at the very least amusing. Keep nitpicking, keep designing, and until next time.

> chuckwired

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s