What Have I Done Wrong?
As you’ll remember from Volume 10 of Site Insights, we discussed the dreaded sign-up process and when it is and isn’t needed. The gist of the article was that customers don’t like being “pigeon-holed” into signing up and instead prefer being given the option of purchasing from your site without providing personal information. When there isn’t an option, however, and the visitor must sign-up, there are some basic guidelines as to how to make the sign-up process a little less??? well, dreadful.
Keep the form as short as possible.
Clearly mark all required fields with an asterisk (and be sure to include the key in a visible location).
In fields where the visitor is required to enter text, give examples (we’ll get to this in the next newsletter).
If there is an error, clearly indicate to the visitor where the error occurred and what needs to be done in order to correct it. We will cover this more in depth below.
The first point, keep the form as short as possible, really doesn’t need much explanation. If the information is not essential to your business, leave it out. The next guideline, clearly marking required fields, is something we repeatedly see done incorrectly. As a general rule, required fields should be marked with an asterisk placed adjacent to the field label.
The screenshot below shows a sign-up form seen on a major retailer’s site. Can you tell which fields are required?
There is nothing more frustrating to a visitor than completing fields that are unnecessary. Or, opting not to fill in fields and receiving numerous error messages. On the other hand, this example from a popular electronics site, clearly indicates which fields are required. It should be noted, however, that additional space should be added between the text and the ‘
*Required fields’ key, in an effort to improve its visibility to visitors.
Finally, if there is an error on the form, do not make the visitor guess where it occurred. Clearly indicate where the error has occurred by highlighting the fields that contain errors. This can be accomplished by highlighting the field in yellow or by changing the color of the asterisk to red (if a red asterisk was not the original color of the asterisk on the form). Also, place the error message to the right of the field and articulate the exact cause of the error and how to correct it. Red text is generally best to indicate error. For example, if a phone number was not included, the text should not only read that a phone number is required, but should also include the format in which is should be entered, 214-555-5555 or 2145555555.
The following example from a wholesale club site states that an error has occurred, however, it does not indicate where on the form the errors have occurred.
Here’s an example from a major online retailer, while it shows where the error has occurred, is not descriptive in how to remedy the problem. The error message indicates to enter a name, valid email address and password; however, a name has already been entered.
If the form is expecting or requires a full name, the error message should be more explicit, stating that a last name must also be included.
If required fields and error messages are clearly identified, visitors can efficiently and painlessly complete the sign-up process. This will generate a positive visitor experience, which hopefully will increase your conversion rates.
Sabrina Klein
Usability Analyst