Multi-step form design part three: validation, error messages and contextual help

Welcome to part three of understanding the ins-and-outs of multi-step form design. In part one and part two of this article series we covered the importance of progress indicators and field labels, whilst also understanding the differences between radio buttons, checkboxes and dropdowns.

Now I know that’s quite a lot of information to digest, however there are three remaining elements which are just as important and will absolutely ramp-up the effectiveness of your next multi-form masterpiece.

It’s time to delve into form validation, error messages and contextual help.

Why is form validation important?

Form validation is an effective tool that alerts users of errors in their submission. It is one of the most important parts of form design, because it helps the user understand where the error is and how to correct it.

There are two types of form validations and they are:

1. Instant validation – which occurs as the user is typing or selecting from elements.

2. Same page reload validation – which appears once a form has been submitted and reloads the page with an error alert banner.

Usability and best practice

Here is some handy advice to ensure that you’re nailing the intricacies of form validation:

• When an error notification is flagged, be sure to display the descriptive error message next to or in very close proximity to the input section.
• Display the error message at the right time, informing problems/success.
• Always use meaningful colours. Red for errors and green for success.
• Use clear, meaningful and simple language.

The humble error message

Error messages can provide a pleasant experience to users and are a great opportunity to share your brand voice and personality. Paying attention to language, placement, and visual design will result in successful and meaningful error messages.

Usability and best practice

• Be clear and not ambiguous. Users should be able to understand the problem.
• Be concise and write a short description that is meaningful and gives the user a clear idea of how to resolve the problem.
• Don’t use technical jargon. Try to use simple language without referring to implementation details.
• A good error message is humble and conveys the issue gracefully to the user without blaming them for their actions.
• Avoid uppercase text as it gives the visual impact of shouting.

Contextual help is good help

Contextual help provides help so subtly that users do not even realise they are seeking it. It provides users with task-specific information, within the context they are working.

There are many different variants of contextual help and they all provide user support in different ways, however ‘user-activated inline contextual help’ is definitely a handy one to consider for form design.

What is user-activated inline contextual help?

User-activated inline help allows users to access help text when they need it. Visually represented by a question mark icon, the user simply clicks or points to reveal the supportive message.

Here is an example of user-activated contextual help:

Usability and best practice

• Help should remain out of the way until users need it. And when they do, it should be easy to find.
• Short in length, descriptive and in plain/simple language. Help messages should use only as many words as necessary.
• The goal is to support the user to complete the form as swiftly as possible, so it should be easy to return to the original task after seeking help.

Conclusion

Form validation, humble error messages and contextual help may seem like tiny details, but they are necessary components in the grand scheme of good form design. If we can create a great form-filling experience and save a few keyboards along the way (from being smashed with frustration); then we are well and truly winning the race!