Design & UX
Article
By Jessica Enders

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

By Jessica Enders
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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.

--ADVERTISEMENT--

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.

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.
Is it good?Is it good?