4

Is it better to have the validation message next to the label or the control?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Update: To be clear, I'm not referring to marking fields as required. I'm referring to displaying a message after the user left a required field blank.

Improve this question
1
  • The answer to this likely depends heavily on the UI/Visual design. Both can work. I would suggest also highlighting the field itself.
    – DA01
    Aug 13, 2012 at 20:40

3 Answers 3

Reset to default
7

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Which one stands out more? :)

A validation message placed next to the label is distinguished by typographic means and possibly minor visual means if you decide to add an icon to it. But it doesn't stand out at first sight, it might seem like a long label. If you show this to a user for 0.5 seconds, many won't be able to say with certainty which was the rejected field, or whether there even was one.

A message that stands out due to its location can have all the means listed above, and the additional distinguishing property of location. It will pop out and produce better performance in that test.

Improve this answer
2
  • 1
    This is very true, though does depend on the visual design of the form being a stacked, align vertical layout.
    – DA01
    Aug 13, 2012 at 21:04
  • Good example! No questions.
    – sysscore
    Aug 14, 2012 at 11:20
2

It doesn't matter... contextually, "next to it" is what matters (the principle of proximity), biologically, if it's red, and the font is bold (wide) enough, both distances are fine:

foveated image

This is a "foveated image" (created using Photoshop's lens blur with a radial gradient focusing on the left part of the first field, with fovea focus expected to be roughly 1 cm on my monitor). Long story short, this is what the user actually sees.

In case you need background material, Chapter 6 from Designing with the Mind in Mind is there for you (along with a few other books). Specifically, Jeff Johnson's examples Figure 6.8 and Figure 6.9 are both of your scenarios, and he says both of them are fine.

Improve this answer
7
  • "this is what the user actually sees" no, not literally.
    – DA01
    Aug 13, 2012 at 20:42
  • ok, find me a better solution for making foveated imagery, possibly compatible with photoshop... I guess this was good enough for demonstration purposes... And of course, in your brain, you put it together, but this is the information the brain actually receives from the eye - is it correct this way?
    – Aadaam
    Aug 13, 2012 at 20:55
  • I think for demonstration, it's just fine. Just pointing out that no, we don't literally see that. ;)
    – DA01
    Aug 13, 2012 at 20:56
  • 2
    It's more like that most of your eye has pretty low resolution, it's only the middle 1cm in one meter (tip of your thumb if you hold out your arm) which is clear. Whenever we enter into a new place, we quickly scan it through, and after that, our brain works on a 'cached' copy, and we only see what we're actually looking at, the rest is "procedurally" generated or static. Red is an exceptional color - the funny part is btw when you intercept the electricity of the eye's nerves and re-generate on computer... even a cat has pretty poor 'general' vision (yes, poor cat)
    – Aadaam
    Aug 13, 2012 at 21:22
  • 1
    @Aadaam thanks for the book reference! Looks like a good read.
    – Anna Rouben
    Aug 13, 2012 at 22:13
0

The focus changes all the time as one scans the page, sometimes backtracking. The overall layout and design should be easy to follow during the initial scan. After the initial scan the user starts to focus on individual elements as they fill it out. The blurring technique is borrowed from art, where it's used to assess tone, contrast, overall form and whitespace. I'm not sure it's valid to use it on a single element. The indication of some elements being required should be as uninvasive as possible so as not to distract from the form. Any additional indicators make the form harder to use. It is customary and visually less distractive to mark all required fields with a (not bold) red asterisk. The intro in the form can mention this but, it's widely understood anyway.

Improve this answer
7
  • The OP is asking about validation messages. He just shouldn't have used the "Required" example since it's ambiguous and one can think that he's asking about the marking of required fields before the form is filled out. (Or maybe that is what he's asking about, and then he shouldn't have used the term "validation message" :) )
    – Vitaly Mijiritsky
    Aug 14, 2012 at 5:17
  • best practise* indicates that for other kinds of validations it's best to avoid altogether by making fields not accept invalid data in the first place. Otherwise you could end up will all these different validation messages all over the form. As a user I would just give up then. Unfortunatelly some forms like this still exist and you have to put up with the pain when there's no choice. e.g. Field xyz must not include non-alphabetic characters.
    – Chris
    Aug 14, 2012 at 7:02
  • Chris, validation can run on the fly (as you type) or after you hit Submit. If you make a field that doesn't accept invalid data, you still need to display a validation message explaining what's wrong with the input.
    – Vitaly Mijiritsky
    Aug 14, 2012 at 7:05
  • i agree in exceptional circumstances. normally validation messages are abused. An entry field that requires a number, for instance, should not allow other than numeric input. That way you don't need validation messages -- and erroneous input -- occuring at all. This makes forms much more usable..and profitable, if your business depends on it.
    – Chris
    Aug 14, 2012 at 7:17
  • It's not exceptional cirumstances. If the user is trying to enter a letter into a number field, then there's obviously something he doesn't understand. A "dumb" refusal to accept his input only serves to frustrate him and make him wonder about what he's doing wrong, or whether there's a bug in the system. To abuse the title of the book, don't make him think, just tell him what's wrong.
    – Vitaly Mijiritsky
    Aug 14, 2012 at 7:33

Your Answer

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

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