1

I am looking for possible solutions that could be used to make our forms look better when displaying errors.

Our application is using Government of Canada Intranet Theme (WET 4) with bootstrap. The image below is an example of one of our many forms in this application.

We are looking to see what other peoples thoughts were on this as we have considered a lot of ideas but can't agree on anything.

Is there a better way to design the flow of these fields so that when there is errors on the page, fields don't look like they are all over the place at random.

form with multiple error messages demonstrating how the fields don't line up with the error messages in between the label and the field

Improve this question
4
  • 1
    It's not related to the question, but your name field should probably have "Middle name(s)", not just a singular.
    – Veedrac
    Commented May 19, 2016 at 20:28
  • 2
    This seems too simple, but would putting the field validation messages below the fields work for you?
    – Tim Grant
    Commented May 20, 2016 at 1:57
  • From what I have understood from a usability stand point is, when putting the field validation below the input, it often makes it more confusing to a user which field the error relates to.
    – Shaun L.
    Commented May 20, 2016 at 12:54
  • I think that is the case when there's no separation between fields, but in your screens I think the padding and the next field's label would create enough visual separation to make it easy to distinguish which field each error is associated with. I think you should explore the idea of displaying the errors beneath the fields. I think you could make that work as a viable solution to your inconsistent alignment problem. And personally, it strikes me as kind of odd looking when i see the validation above each field like that. I think i expect error text to be under, beside, or inside each field.
    – ke11en
    Commented May 20, 2016 at 21:01

1 Answer 1

Reset to default
1

Referring to the comments on your questions, I disagree with your assessment (that putting messages below fields is bad for usability), and think that @timster is on the money.

Put the error message below the inputs, or use encapsulated flags

This is arguably more conventional than putting them above. This question What is best practice for designing form error messages? deals with the matter extensively, and putting the errors above isn't considered a viable option.

Putting the message above the input, as you're findig, separates the input from the the label, causing the input to "float", or seem detached from the visual grid, and when you have multiple instances of this, it can seem a bit chaotic.

Improve this answer
3
  • Unfortunately I have my problems with both of those... Putting the message below will still have to be something I consider, although I'm still not convinced that it would be better. One of the highly rated answers from that post you linked is suggesting that the error message should be before the input so that when the user gets to the input they already know what to fix.
    – Shaun L.
    Commented May 24, 2016 at 18:30
  • Using encapsulated flag seems like more hassle than its worth for the developer and user. For me its raising questions like, does it work on hover? if so is should stay open while changing the input. Does it work on click? if so how does a user know they can click it to get the message. Is it always open? Well now its likely blocking other fields and text, how is that accessible?
    – Shaun L.
    Commented May 24, 2016 at 18:30
  • You should take answers from here, even 'highly rated' ones with a pinch of salt. The only was you're going to know what really works best is through testing and iterative design. The screenshot you submitted is more proof than anyone should need that putting the validation between the fields and labels is a bad idea that causes visual disruption, and if flags going to tax your developers too much, the the reasonable option is to putt them under the input. Just make sure that it's clear that they're connected/related to the field they're validating.
    – dennislees
    Commented May 24, 2016 at 19:18

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.