Making Nectar’s usability sweeter

Published on 28^th June 2008 in Usability, Websites, tagged forms, Nectar.

Nectar is a loyalty card scheme which I recently signed up for because you can earn points at the supermarket I use. It’s a pretty large scheme, so I was surprised to discover just how poor the Nectar website’s usability is. Let’s walk through the task of signing up for a Nectar card, having heard about the scheme in store.

So, load Nectar.com and you’ll immediately notice two things that are conspicuous by their absence. First of all, only the browser’s title bar tells you what Nectar is, a place that most people won’t look to assertain the meaning of a website. It mentions points and there are some offers, but it lacks a definitive statement of intent.

Aside from assuming knowledge of the product, Nectar’s homepage also contains no obvious link to a place where you can get a card. Going from potential customer to an actual customer should be an easy process. There’s a small ‘Register’ link in the top right corner and a couple of pointers hidden in the menus, but these are probably too little, too late for less determined users.

The homepage fails to answer the two most important questions, “What is Nectar?” and “How can I get it?” For this example, let’s assume that we really want to sign up and that we make our way to the next screen.

The ‘Get started’ page isn’t much clearer. About half of the text is redundant and no sensible visual hierarchy is employed to guide the user through the choice the page presents. The entire top half could be replaced by this:

Now the user has much less text to read, but the same information is conveyed.

The forms you’re presented with once you choose to register without a card aren’t really as bad, but many users may have given up before that point. There are a few notable usability issues though:

Here you would assume that like other forms, you put your house number and post code in, then it pulls the rest from some database. However, here the house number and name are both required, even though it’s extremely rare for a house to have both. If you actually try it, the form doesn’t complain if you just leave the house name blank.

Here, I assumed that I could just tick all three and avoid unnecessary offers, but when you click the first one, you’re prompted with this box:

You have to read through the entire thing before finally realising that it’s simply a vain attempt to get you to repent on your unwillingness to sign up to their mailing list.

Finally, you’re presented with this cardinal sin of form design; using check boxes instead of radio buttons.

For a scheme of its size, Nectar tests the user’s patience an extraordinary amount in their search for a loyalty card. By altering a few parts of their website, they could probably increase the number of successfully registered users by a huge amount.