Good usability at Just-Eat.co.uk

Just-Eat is a company that offers an online menu and ordering system on behalf of takeaway or carryout restaurants. Dominos and Pizza Hut have been doing this for years at a franchise-wide level, but it’s not always feasible for individual restaurants to do it themselves. As a business concept, I think it’s a great idea — they definitely seem to have found a niche to serve.

Generally, the website shows good usability. The webpages have a clean and appealing design, which provides all the information you need without getting too cluttered. However, one page I particularly want to focus on is perhaps the most important — the credit/debit card entry page. The attached image shows the page as it appears for a Visa card.

Why is it important?

I don’t know how many people order by cash vs. card on Just-Eat.co.uk, but I would suspect that a large proportion of people use a credit/debit card for convenience. As such, making sure it is easy to enter the card details is important, as it is the lynchpin of the transaction.

If a user can’t enter the details, then they can’t place the order (unless they have cash handy for the delivery driver), and so business will be lost. It is also important to remember that credit/debit card details represent extremely sensitive information. Users need to feel confident and comfortable enough to use it.

Good: form clarity

The form itself is very clear and simple. The text-boxes are prominent in relation to the rest of the page, and they use a pretty standard colour scheme. Another interesting thing to note is that all the fields are aligned on the left. This might seem trivial, but it actually makes it much easier to go through the form visually, top to bottom — you’re not left searching through text labels to make sure you’ve found all the input fields.

In terms of design, it is worth noting that the form is in a moderately subtle box, setting it apart from the rest of the page without disrupting the overall visual theme. This draws the user’s eye to the essential part of the page in a natural way.

Good: helpful information

The information on the page is short and simple, but helpful. You can see a few items on the right of the form which are very visible, but not obstrusive or excessive at all. This makes the page easier to scan.

Very good: clear call-to-action

Hands-down, the best part of this page is that big “Validate payment” button at the bottom!

It is big and bold and the user knows exactly what will happen when he or she clicks it. It isn’t some vague generic “Submit” button, or a verbose explanation saying “Click here to continue”. It is short, sharp, and to the point. It even looks clickable, and the little arrow gives the impression of continuing to the next page. Brilliant!

A secondary, but equally important issue, is the alternative button. “Pay cash on delivery” is the equivalent of a “Cancel” button. It is visually distinguished from the main button by position, colour, and size, but it has the same alignment, so the relationship is clear. The user is very unlikely to click it accidentally, but it is also obvious enough that he or she is unlikely to miss it either.

A subtle point of wording here is that the button doesn’t just say “Cancel”. If it did, then the user would be left wondering “does this cancel my whole order?”. Instead, the wording makes it obvious that clicking it continues with the order, but changes payment method.

Quite good: form validation

Form validation is essential, and many websites still wait for you to submit your entire form before telling you about a problem. However, it’s becoming increasingly easy to validate forms in real-time, which is what this page does.

It is particularly nice to note that it tells you when the data appears to be valid. This is a great idea in principle, because it provides the user with a sense of confidence about his or her progress. However, here’s my only criticism — the ticks make it look like the form is actually verifying that the data is correct.

It might sound silly to some people, but others may not realise that the form can’t check that your card details are correct on the way along. It can only check that you’re not entering the wrong kind of information in a given box (e.g. putting the expiry month as “13”).

Conclusion

Overall, this is a great example of a well-designed webpage. It is clear, easy, and effective to use. I would only suggest the one minor improvement that something other than a tick is used for the form field validation.

Using the word “OK” instead of the tick might be better, although that might cause similar confusion. Ideally, a little end-user research would be used to determine what indication would best convey that the form is validating and not verifying the data as it goes along.

Leave a Reply

Your email address will not be published. Required fields are marked *