Put form field error message next to the corresponding form element

It’s easier for the user to correlate an error message if the error message for a form element be placed next to the form element itself instead of somewhere else in the page. You can highlight the field by making it more prominent. For example by placing a red border around the field or the field having a red background.  Make sure the error message always shows above the fold. Either by scrolling the page to the error message or display a notification message at the top of the page notifying the user about the existence of any errors so they can look for it. Error messages which do not display in the viewable area can mislead the user.

Here’s an example of a page showing too many errors in a long list. Notice the errors box pushed the form below the fold. The problem here also is the inclusion of the full labels of the problematic fields. Some labels are very long causing the summary error box to look like an unorganized laundry list. Had the error message been placed next to the field, there wouldn’t be a need to include the label.

 

hubspot1

                                     See the form on the right side

 

hubspot2

             The error summary box is a long list which pushed the form down
separator
blog comments powered by Disqus