We've created Zuko, our next-generation form analytics platform. Explore Zuko

Big Brand Teardown – IKEA. Their mistakes, and what you can learn from them.

Big Brand Teardown
Picture1

This is our latest in our series of highlighting issues with big brands’ forms and checkouts. Today, we look at the flat pack furniture giant IKEA.  The three areas we will look at are

  • using ‘*’ to denote a required field,
  • being forgiving with different formats of inputs such as credit card, and
  • providing users with helpful error messages.

For this, we looked at a number of their forms, including their create profile one pictured below.

IKEA

We won’t even mention the CAPTCHA on this page, as we have spoken about it before, and it’s too easy.

Using *, and required fields.

Most users will understand that an ‘*’ identifies a required field, but not all will. The IKEA form pictured above does not indicate what ‘*’ stands for and should include a ‘denotes/indicates a required field’. Luke Wroblewski, amongst others, recommends that if most fields are required, you should simply state this at the top of the form and indicate optional fields instead. This guide from CX Partners shows you how it should be done. This article also provides you with some examples from how larger websites do it.

Another interesting example from the IKEA site is when you come to add a billing address:

IKEA8

In the above, you are required to give at least one phone number, but only mobile is starred. In actual fact, you can enter a landline number without giving a mobile, and still complete the form:

IKEA10

The best option here would simply be to combine the fields into one input box, make it a requirement, and also explain why you are asking for it (in case of delivery problems etc).

So, if you do want to use a * to indicate a required field, have a legend that explains this. You do not have to have any * at all though, and you can state that ‘all fields are required unless indicated’ and show when one is optional with an explanatory label. Better yet, get rid of those optional fields if you can see that many users choose not to fill them in.

Also worth a mention about the above and probably indicative that it has not been changed for a VERY long time, is that it asks for Fax number. Sigh.

Be forgiving with inputs

For certain fields, there are a number of ways in which users may enter information, but your form may only accept a single version of this information. You will be forcing users to correct their ‘mistakes’ and spend time, effort and patience on entering it the ‘correct’ way. Remember, your form is always a barrier, so it is your responsibility to make it easy for them to complete.

A phone number is one such example, which I might write as 0161 848 4300, but can be written as 01618484300 or (0161) 848 4300 or +44 (0)161 848 4300. Post and zip codes can be the same too, as M17 1DZ can equally be written as M171DZ.

The IKEA site however, does not allow this:

IKEA7

Another one of Formisimo’s users was also not allowing non-spaced postcodes, and it was the second highest corrected field. Card number (which also did not allow spaces to be entered) was the highest, with a very high number of re-focuses (where a user has to go back into the field to correct something) and deletes (probably to delete the spaces they entered originally):

Picture21

Card details are tough enough to enter, so make it as easy as possible for users to enter them. Any extra effort you put into making your form easy to complete will be repaid a dozen times over by happier (and more) customers.

For more information on how to accept different inputs, you can head to this GetElastic blog, or read this interesting discussion thread.

Helpful error messages

If you can help users avoid making mistakes you should do everything you can to do so. But when they do make errors, big blocks of bright red text with a list are not the best way to go:

IKEA2

It can provide a large psychological hurdle (wow, that’s a lot of errors, stuff this!), plus if you only display a long list, users can easily forget where they have made mistakes and have to scroll back up to the top (as in the first example here).

Also ensure that your messages are clear, instructive and unambiguous.  IKEA doesn’t do well here:

IKEA3

(Also rethink whether you need to ask for email and password twice and read our case study on the difference it made to our sign ups for more information).

If it’s a password field, why can I enter a username?

And it gets worse:

IKEA9

Something about minimum length is being said here, but most will not see that.

The Nielsen group produced these guidelines on error messages back in 2001 (they still apply though), but for a more updated version, head to this article at Smashing Magazine about defensive design. The article suggests that the best error messages do the following:

  • Preserves visitor data
    When a user is returned to a form to fill in missing data, the website should keep completed fields filled in. The visitor should be able to fix their errors without retyping the entire form.
  • Highlights errors with clear graphics and text
    Fixing and completing entries should be obvious and easy.
  • Doesn’t make the visitor feel like a criminal
    Full-caps messages telling the visitor that “YOU COMPLETED THE FORM INCORRECTLY” aren’t exactly endearing.

So that’s that!

Their furniture may be excellent value and unbelievably hard easy to assemble, but their online forms and their checkout would be returned to their customer complaints department pretty quickly. Learn from them – keep your visitors happy and loving your website.