Join Chris Nodder for an in-depth discussion in this video Handling errors gracefully, part of User Experience for Web Designers.
- Now let's talk about how to handle errors in forms. Even with the best instructions and the clearest fields, people may still make typing mistakes. Of course, you want to do your best to catch errors before they cause people trouble. Any error is going to be disheartening to your visitors, and errors in forms are a big cause of abandonment. Some errors aren't really errors as such, but are just misunderstandings made because the computer didn't understand the format of the entry. One way to stop these errors is to use forgiving formats. For entries like phone numbers, let people enter spaces or parenthesis as they see fit, and then the computer can strip that information away before it checks that the entry is valid.
It's also best to do validation of each field, that way you can try and catch errors as they happen and let people know in line that the field needs attention before they submit the form. If people do make an error filling in the form, you need to help them correct it without scaring them off. If you found issues after they submitted the form, you're going to need to walk people through the errors so that they can correct them. A way to do this is to put a description of the error at the top of the form. This should indicate the number of errors and list them. Be careful not to use language that blames your customer though.
These listed errors can be links that take the user directly to the corresponding field. Also, highlight each field that has a problem. One of the most effective ways that I've seen during user testing is to turn the field border red. You should also add a message for each problem that describes what the entry should look like. Maybe using an example from the data or tips on common errors, like when people provide a username rather than an email address. If you can manage it technically, one of the most forgiving ways of getting people to correct problems is to just show them the fields they need to attend to rather than displaying the whole form all over again.
This often makes the error correction experience seem much less daunting, as only a few fields are shown on the screen. Forms can be a big source of confusion and frustration for your visitors, and this can really hurt your user experience. I really suggest that you spend the time to usability test your forms with representative users. That means people who meet your persona description. Give them a task to complete that involves filling in the form, and then sit back and watch them go through the process, thinking out loud as they do it. You'll learn a lot about the potential traps in your form design from this activity.
It's a great investment and it makes sure that your real customers don't find the same frustrations.
User experience expert Chris Nodder teaches
- What people want from websites, how they search for information, how they read online, and how to structure your content to take advantage of this research
- How to use graphics to help rather than hinder visitors, how to integrate video, audio, and other media, and when to consider interactive rather than static content
- How to look at your site's homepage, forms, product pages, and content through the eyes of users to build a site that better meets their needs
- How to balance site content with advertising
There are never enough great interfaces in the world. Take this easy introduction to start making wonderful online experiences for your own users.
- Building a site visitors will like
- Using single, consistent, and standard design principles
- Creating good menus
- Working with site maps
- Adding search to a site
- Arranging content in a layout
- Writing for the web
- Creating category pages and landing pages
- Designing product pages and forms
- Using media and interactive content
- Balancing ads and content