Presenting both information and validation errors in the same form?

Question

Can I show the 'info' and 'validation error messages' in the same page. Could you please give me your comments?

Attached screen shot.

Answer 1

Generally speaking you can but the message texts have to be very clear and non-confusing.

The biggest, read confusing, issue I see here is that the message in the orange rectangle does not clearly communicated which field the user has to change: 1, 2 or 3? Neither the message in the red one is 100% clear. Some users will wonder whether "Old password" relates to "Current password". This may look like a very subtle distinction but trust me, I have seen users wonder about much "more obvious" details.

So, if you cannot change the frontend code for the CMS (I assume that you have to use one) make all messages very very clear.

Answer 2

Error messages and helpful information are very different, so they need to be visually distinct

• In your layout, the error message and the information message are shaded differently, but have the same font, shape, and placement.

• This visually communicates that the messages are similar but not identical. That is not true: helpful information is the opposite of an error message.

Typically this is resolved by (1) making the information appear clearly different from errors; and (2) providing helpful information/guidance before and not after the form is submitted.

For example:

Answer 3

In general, error states should clearly communicate where an error occurred. In your example, you haven't clearly shown which state is the problem.

Additionally, you have two competing messages here. It seems like these two alerts could easily be consolidated into one alert.

Finally, watch the language you use. You say "Old password appears to be incorrect" but you have no "old password" field, only a "current password" field. Make sure the language matches.

Answer 4

If you do have access to edit the front end, I would probably suggest using indicators on the field/field group (such as "has-success" if you're using bootstrap).

Then I would suggest that maybe the 'info' error isn't necessary once they've made an attempt. Or instead of using an alert, make that the heading for the section.

Answer 5

The cognitive perspective

From a cognitive perspective, here is the likely sequence of event:

• User sees page
• An info message asks the user to change her password
• The user fills the 3 fields
• An validation error has occurred
• At the point the user already know the purpose of the screen, so there is no point for the information message to stay there - it can be removed

Messages & alerts

Message and alerts as the ones in your mockups should normally show up after a user action.

I suspect in your case the info bar shows as users land on the screen, but I can't see how this is justified.

The better solution

Accessibility has it that a page should have a heading - this is useful for all users, but particularly those using screen readers.

Anyhow, this whole issue can be solve if instead of showing an information message, you just use a heading (as in tohester mocks).