The following experts have contributed answers to this edition of Ask UXmatters:
- Jessica Enders—Principal at Formulate Information Design
- Pabini Gabriel-Petit—Senior Director, User Experience and Design at Apttus; Publisher and Editor in Chief, UXmatters; Founding Director of Interaction Design Association (IxDA); UXmatters columnist
- Caroline Jarrett—Owner and Director at Effortmark Limited; UXmatters columnist
- Jordan Julien—Independent Experience Strategy Consultant
- Jim Ross—Senior UX Architect at Infragistics; UXmatters columnist
Handling Very Long Field Names
Q: I am currently wondering how to deal gracefully with very long field names—for example, “Retired Serviceman’s Family Protection Plan.” My application currently has left-aligned labels to the left of input fields. I know that changing to labels above input boxes would not only help alleviate the issues with long names, but would also be better for overall user productivity. However, my users really seem to hate scrolling, so I am hesitant to make this format change because it would increase the length of the form.
Obviously, increasing the space between the labels and the fields is awful, but I also abhor abbreviations as they steepen learning curves. What is the best design solution?—A programmer concerned about user experience
“You could right align the labels. That would keep them close to the fields regardless of label length, without adding to the height of the form,” replies Jim. “Another option is to wrap long labels to a second line of text. However, that can create odd vertical spacing across fields, depending on the labels for other fields in your form.
“If there are acronyms that are familiar to your audience, you could use acronyms in your field labels, with a ToolTip that appears on hover and shows the full label. For example, Retired Serviceman’s Family Protection Plan is often abbreviated as RSFPP. Depending on your audience, people may be highly familiar with that acronym, so you could use that.”
“I strongly disagree with the suggestion to use acronyms in field labels,” responds Pabini. “Many people have great difficulty in learning them—if they ever learn them at all. On mobile devices, you can’t display ToolTips, and it’s best to use consistent labeling across devices.
“You’ve already identified the design solution that would be preferable for fields with long labels: placing the labels left aligned above the fields. That placement provides the best performance. More important, they’re easier to read than left-aligned labels. One thing is certain: users don’t like spending a lot of time filling out forms. So, even though the time-savings for filling out each individual field is infinitesimal, cumulatively, they can add up when forms are long.
“Try to avoid writing long labels, while at the same time ensuring the labels’ clarity. For particular labels, some alternative design approaches might be to do the following:
- Provide group labels and eliminate the repetition of the same words in the labels beneath them.”
- Split the text across a label to the left of a field and interactive user assistance or tip text to the right. Labels to the left of fields should be right aligned, not left aligned. Right-aligned labels give performance that is almost as good as that of labels above fields and reduces the errors in reading that occur when there is a great gulf between shorter, left-aligned labels and fields far to their right.
- Practice concise writing. I see very few long labels that could not have been shortened.