Design & UX

Form UX: Sometimes Even Apple, Google and Amazon Make Mistakes

By Jessica Enders

Using Adobe XD on Mac? Download our Handy Cheat Sheet of Keyboard Shortcuts!

Slipping up

Designing UX: Forms. Jessica Enders

Jessica’s brand-new book ‘Designing UX: Web Forms‘ (September 2016) has just been released.

Ever been asked to design something ‘as beautiful as Apple’, ‘as simple as Google’ or ‘as popular as Amazon’? The success of technology’s big names makes them appealing goal posts for clients – and in many cases, you’d do well to learn from them.

But when it comes to forms, even the giants of digital sometimes get it wrong.

Apple and Accessibility

Clients often start with a reference to Apple, so let’s do that too. Apple designs interfaces that are minimalist and modern, including their forms. An example is shown in Figure 1.

Figure 1 - Apple shipping address form

Figure 1 – Apple shipping address form

The problem is: sometimes they’re too minimalist.

I’m in my forties and consider myself still fairly young. But my eyesight, as it does with all humans, started to deteriorate in my thirties. Of course, many people need glasses even earlier than that, and there are people of all ages that use a screen magnifier, reverse the colors on screen, reduce brightness and so on.

For a form to be accessible by all its users, it must have enough contrast between colors, especially text versus background. The Web Content Accessibility Guidelines version 2.0 require a contrast ratio of 4.5:1 at a minimum. The ratio between the gray labels and the white background is just under 3:1. Even worse, the ratio between the lighter gray text box borders and the white background is 1.5:1.

So Apple fails the minimum standard of accessibility for all users.

Figure 2: Contrast increased

Figure 2: Contrast increased

Figure 2 shows an alternative design for the same form, with sufficient contrast ratios. Still minimalist, now much more usable.

All the colors of Google

Like Apple, Google also has a small color issue. Figure 3 shows that red is used for errors (see Birthday at the bottom of the screen) but also the form title (“Create your Google Account” near the top of the screen).

Figure 3: Google account creation

Figure 3: Google account creation

Another unusual difference is the background color behind fields. On text boxes, the background is white, contrasting nicely with the gray form background. Yet dropdowns and the form have the save background color, making these fields quite difficult to see. Some users are likely to be slowed down or confused by this inconsistency.

Figure 3 also shows that birthday is collected via three dropdowns: one for day, one for month, and one for year. This approach can reduce – although not eliminate – errors. But it means more work for the user. For a variety of reasons, on balance three text boxes is a better approach. See how this would look in Figure 4.

Figure 4: Google's account creation tweaked.

Figure 4: Google’s account creation tweaked.

Amazon takes control

Finally to Amazon, who have been constantly evolving their forms for over two decades. A recent change has been the ability to show password on their account creation form (see Figure 5). Allowing the unmasking of passwords improves usability and reduces errors. When implemented well it also has little to no effect on security – unfortunately, Amazon really missed the mark here.

Amazon reveal your password below the masked password field.

Figure 5: By default, Amazon displays your password in the clear below the masked password field.

Amazon has the “show password” option selected by default. A typical user will jump straight to filling in the fields from top to bottom, only to be shocked to see their password shown in the clear underneath their masked entry. By that time, anyone nearby may have seen it too.

Nobody likes unexpected behaviors that make them feel like they’re not in control. Another way Amazon takes control away from the user is by hiding the password requirements. The user has to guess and test potential passwords, without knowing when or how they’re going to trigger an error or succeed. What an awful yet unnecessary situation to put users in!

A much better approach would be to state the password requirements right there on the form, and have the “show password” field unselected by default (see Figure 6).

Figure 6: Amazon account creation reimagined

Figure 6: Amazon account creation reimagined

These form design insights and more

Designing UX Forms Book cover

Forms are a special kind of interface. They appear everywhere, yet there’s so little knowledge about them in the public domain. And they have elements and interactions that are distinct from all other interfaces.

Indeed, the points raised above are only a subset of the issues with these particular forms (placeholder labels, anyone?). They also do many things well, besides. The trick is knowing which is which.

The great news is there’s a new book out there to help you. You don’t have to be a giant in tech to get forms right, just grab yourself a copy of “Designing UX: Forms”. Each of the issues I’ve raised above is covered in the book – in more detail – plus much more. You’ll gain all the know-how to make great forms, even in a team of one.

  • rag

    Whether you expect passwords to be visible by default or not is very subjective. As for Amazon, the only way to know which is better for the business is to measure what percentage of users make the password visible and when they do it. And results of that measurement can be totally unexpected.

    I personally expect that on mobile the user would want to see the password right away because of the tiny keys of the virtual keyboard. Typing on a phone is very error-prone. Making the password visible is the best way to minimize the chance of error.

    This is my experience, and this is what I do if I have the option to see the password. The only time when I don’t do it is when I’m in a crowded place like on a bus.

    Considering that Amazon have been evolving their forms for over two decades I would assume that they did the research.

    • OlegM

      This x 3000

  • M S i N Lund

    The slightly little less sucky low contrast design, still sucks.
    Because its still low contrast design.

    Why gray?
    Why gray, AT ALL?

    If you want gray text, do this instead.
    Grab a second monitor and put it beside the other.
    Unless they are identical, I can guarantee that the text looks gray on one of them, compared to the other.

    So, you see, all black text already is gray.
    Mission accomplished.
    DONT make it grayER!

    Seriously, on behalf of all people over 40 everywhere:
    Fuck people why gray down text!
    Fuck’em in the ass!

  • OlegM

    How many times are people watching your screen as you’re tying in your password? Password obfuscation is the dumbest thing since the beginning of the web. Unfortunately we keep persisting this stupid strategy across all of our sites.

    • I agree the likelihood is low that you’re being watched, but it’s about what people expect. We, as web people, understand that this is simply a property on a text field at browser level.

      But Joe & Joanna Average more likely see obscured passwords as part of the way secure, trustworthy websites look. Give a guy in a suit a badge and he’s a police detective. Give a site a little padlock and a masked password and it’s trustworthy.

      Obviously we know this isn’t correct – but it doesn’t mean there isn’t a consequence for ignoring a well-established convention.

  • Great article Jessica and good to see the examples where even the big boys have got it wrong as well as your recommendations.

Get the latest in Design, once a week, for free.