Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm looking for some guidance on how labels should be styled for a data entry web application. My client feels that the labels detract from the user interface where I feel they provide necessary guidance.

Two competing theories are:

1 - Make the labels the same font size, bold, and black:

enter image description here

2 - Make the labels slightly larger (e.g. 9pt when the UI uses an 8pt default), normal weight, and a dim gray:

enter image description here

Rather than subjective debate, I'm especially curious if there is any science to one method or the other.

share|improve this question
    
How did you narrow it to those two options? Also, can you provide graphic examples? –  3nafish Apr 17 '13 at 19:16
1  
@3nafish Samples added. The highlighted field is just a result of the way Chrome displays input elements. –  Yuck Apr 17 '13 at 21:06

3 Answers 3

up vote 4 down vote accepted

It seems that there are some conflicting views when deciding to use a bold field input label or not.

“In this layout [with labels above the input fields], it’s advisable to use bold fonts for input field labels. This increases their visual weight and brings them to the foreground of the layout.”—Luke Wroblewski.

However, in an eye tracking study conducted by Luke Wroblewski, bold labels resulted in a 60% increase in saccade (fast movement of an eye) time to move from label to input field.

from 50ms without bold labels to 80ms with bold labels.

UXMatters.com wrote:

Reading bold labels is a little bit more difficult for users, so it’s preferable to use plain text labels. However, when using bold labels, you might want to style the input fields not to have heavy borders.

I’m my opinion, I wouldn't increase the font size of the field labels to increase the visual weight. Using bold field labels is a pretty common pattern in forms these days, and I’m sure big companies who employ this pattern, such as Google, have conducted their own research as to why they do it.

share|improve this answer
1  
+1 for UX matters find –  rk. Apr 18 '13 at 0:44

I don't particularly see the point of increasing font size unless it is a heading or something.

http://msdn.microsoft.com/en-us/library/windows/desktop/cc872782.aspx

When possible, format the labels using bold text. Otherwise, put the labels in quotation marks only if required to prevent confusion.

http://msdn.microsoft.com/en-us/library/windows/desktop/aa974176.aspx#controllabelguidelines

With labeled data, use bold to emphasize whichever is more important for the data as a whole.

  • For mostly generic data (where the data has little meaning without its labels, as with numerals or dates), use bold labels and plain data so that users can more easily scan and understand the types of data.
  • For mostly self-explanatory data, use plain labels and bold data so that users can focus on the data itself.
  • Alternatively, you can use dark gray text to de-emphasize less important information instead of using bold to emphasize the more important information.
share|improve this answer
    
The OP specifically asks for evidence. Do you have any evidence to suggest that this way works better than others? –  3nafish Apr 17 '13 at 19:32
1  
There you go, added reference. –  rk. Apr 17 '13 at 19:38
    
The OP's labels are for data entry. That source is a guideline for labels on ribbons. –  3nafish Apr 17 '13 at 19:46
    
How will you treat a label in 'data-entry' separately from another kind (ribbon) label? –  rk. Apr 17 '13 at 19:48
1  
I appreciate the reference to MSDN. One would hope that Microsoft has research into their choices, or at least years of experience developing intuitive user interfaces. –  Yuck Apr 17 '13 at 21:08

Labels should be legible with strong contrast between text and background colour.

People need to know what information they are being asked for. That is why forms have labels.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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