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

Attached screen shot.

enter image description here

  • 1
    Not directly related to your question, but: 1) Field says "Current password", while error message says "Old password". 2) What does it mean "appears to be incorrect"? It is either correct or not. 3) Confirm is an action for which you normally tick or press something, the users really 're-enter' their password.
    – Izhaki
    May 14, 2015 at 23:04

5 Answers 5


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.


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:

enter image description here

  • 1
    was going to comment somehting on these lines, but @tohster beat me to it
    – Devin
    May 15, 2015 at 19:50

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.


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.

  • Hi. Welcome to UX.stackexchange. Question - what did you mean by the field / field group?
    – Mayo
    May 14, 2015 at 15:17

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).


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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