Can I show the 'info' and 'validation error messages' in the same page. Could you please give me your comments?
Attached screen shot.
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
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.
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.
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.
From a cognitive perspective, here is the likely sequence of event:
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.
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).