Although field validation is perhaps the least thrilling UX topic, it is arguably one of the more important. Without proper guidance to correct customer’s mistakes, the simple task of checking out on an ecommerce site can turn into a long, painful ordeal. If an error goes unresolved, it results in a 100% abandonment rate. This is not an ideal statistic to say the least. As a UX designer (and tester) there are validation issues and solutions we keep an eye out for at SD.
But first, the basics.
What is an input field? When we talk about input fields, text, dropdowns, checkboxes, and radio buttons, we simply mean the area the customer is selecting or typing into. This includes fields within checkout, registration, and account creation specifically within the ecommerce spectrum. Errors are the messages customers receive when attempting to progress through a form without entering a valid entry for required fields. The backend can put limitations such as the number of characters and the type of characters (letters, numbers, symbols etc.) on each input.
If error messages are styled, worded, and placed properly, they will successfully draw the customer’s attention, inform the customer something went wrong, and provide an easy path to error recovery.
Clarity is key when coming up with the correct error message. A vague message such as “We are unable to process your request” leaves the customer guessing and wasting time trying different solutions. If they can never fix it, they will never buy your product.
A popular inline error message is “invalid input”, which is very ambiguous. The good thing is, the backend knows exactly what is wrong. A better way to pinpoint the error is to customize messages per input. You can use 4-10 adaptive messages to provide this clarity. If a zip code is entered without the correct number of digits, instead of displaying “You have entered an invalid number” customize the message to “5 digits are required” or something similar.
On Home Depot’s shipping address form, the error messages are tailored to the user’s current entry.
The right place
Say you have all your error messages tailored to each field. Great! But what if the customer is on a mobile device, and the error message(s) appears out of the customer’s view? Many customers in this situation believe the page has completely frozen. The abandonment route will likely be taken.
An easy fix is to scroll the customer directly to the offending field. If there are multiple errors on one page, however, we have to handle it a bit differently. The customer in this case should be scrolled to the top of the page to view an error message outlining the specific incorrect fields. This informs the customer how many fields to look out for as they scroll back down the form.
Also, make sure you retain the customer’s original input. That way they can assess where they mistyped.
Draw the customer’s attention to each incorrect field by highlighting the field in red and placing the error message next to the field. Red has been the most common color used for warning signals for centuries. Think about stop signs, traffic lights etc. Because red is largely associated with error messaging, it’s best practice to limit the color across websites.
There is one field that calls for special attention: the credit card number input. The bad news is this field is the most error prone due to the length. The good news is all correct credit card numbers follow what is called a Luhn/Modulus 10 checksum validation. Because of this, the credit card number can be validated on the front end, giving you the ability to inform the customer of errors as they are typing. Customers wantto pre-empt error messages, so an easy front-end validation can go a long way.
On Home Depot’s checkout as he user enters a credit card number the number is validated on the front end.
The customer is right
Nobody wants to be told they are wrong when they are certain they are right.
A common validation bug is not removing the red error message and un-highlighting the field once the customer has made their correction. Ensure all outdated error messages are removed once the requirements are met. Live update the error message on a keystroke level.
In this example the user has corrected the field, yet the error message persists.
Another issue is presenting the customer with an error before she even has a chance to attempt the field. This is less than encouraging. Make sure no error messages display before the customer has a chance to interact with the form.
Optimized error recovery is the difference between a site that works with you and a site that works against you. Be mindful of the following:
- Provide alternative error messages for each field for specificity
- Always retain the customer’s input data
- Optimize the mobile error experience
- Use red only for error messaging
- Use Luhn Validation on the credit card field
- Keep errors messages updated and accurate
Although the frequency of errors may be low, the resulting severity is high. Take care of your errors as you would any other important UI element on your site, and you’ll be likely to keep every intended sale.
Written by: Lindsay Stork, Interactive Designer