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
Is it better to have the validation message next to the label or the control?
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.
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.
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:
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.
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.
