Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm designing several forms for a web application. Non-validating fields are marked red, and we show the messages in a validation summary.

We wonder: what would be the best placement for the validation summary?

I think it would be nice to have it just above the submit-button because that is were the user is having his/her attention.

However, other people in the team say it is just "common use" to place it above the form.

We have small forms, with about only 5 fields.

Does anyone have any thoughts? Is there a real difference, does it matter?

share|improve this question
    
Are you talking about the message that displays after user inputted invalid data in the input fields? Like this: asciicasts.com/system/photos/134/original/E167I04.png –  Chairman Meow Feb 21 at 19:30
1  
    
In fact we show the summary only after the user clicked on the submit button. However, while the user in typing, The fields will turn red of green. By the way: We also added instruction messages to fields when neccesary. –  Maarten Feb 21 at 20:01

2 Answers 2

up vote 0 down vote accepted

Data format validation error messages should appear close to the UI element that contains the offending user input.

There are also "remote validation" errors, which happen when the user enters an invalid value that based on all other existing records. A common one is trying to register a user name that's already taken.

If it's a remote validation error for one field, it should also appear in the same place as an data format error message close to the UI element (most likely a single-line text box).

There are some violations, though, that result from just the wrong combination of values (even properly formatted) in multiple input elements. I would put such error message away from input elements so that the user can focus on what's wrong in one reading.

10-15 years ago, I put an error summary on the top of the page because form submission required a full page post back. Since the user will read from top to bottom, I wanted them to immediately see what they did wrong (and the error text is in red). Now, when I know form submission will not require a full page postback, I would put the error summary above the submit button because the user is already at that location.

share|improve this answer
    
I totally agree with the distinction you make between field specific, and global validation messages. After reading your answer i realized the name "validation summary" doesn't make much sence. Indeed: Why would need a summary for 5 fields after all? Using this pattern the way you describe sounds like a better option. –  Maarten Feb 24 at 20:00

I think the answer depends on the length of the form and the type of the error message.

This article nicely explain what to do in different scenarios: http://www.nomensa.com/blog/2010/4-rules-for-displaying-error-messages-from-a-user-experience-perspective/

Since your form is only 5 fields, I would keep the message short and simple and just have contextual message and not overwhelm users with summary message.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.