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

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.

[caption id="attachment_140213" align="aligncenter" width="400"] Figure 1 - Apple shipping address form[/caption]

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 colours on screen, reduce brightness and so on.

For a form to be accessible by all its users, it must have enough contrast between colours, 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 grey labels and the white background is XX:XX. Even worse, the ratio between the lighter grey text box borders and the white background is XX:XX.

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

[caption id="attachment_140214" align="aligncenter" width="400"] Figure 2: Contrast increased[/caption]

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).

[caption id="attachment_140215" align="aligncenter" width="400"] Figure 3: Google account creation[/caption]

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 thinks would look in Figure 4.

[caption id="attachment_140218" align="aligncenter" width="400"] Figure 4: Google's account creation tweaked.[/caption]

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.

[caption id="attachment_140264" align="aligncenter" width="495"] Figure 5: By default, Amazon displays your password in the clear below the masked password field.[/caption]

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.

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

by Jessica Enders via SitePoint