Dealing with Long Field Names | Analyzing Users’ Tasks
Published: May 19, 2014
In this edition of Ask UXmatters, our experts discuss how to deal with very long field names in forms and some ways to analyze users’ tasks.
Each month in Ask UXmatters, our UX experts provide answers to our readers’ questions about a broad range of user experience matters. To get answers to your own questions about UX strategy, design, user research, or any other topic of interest to UX professionals in an upcoming edition of Ask UXmatters, please send your questions to: firstname.lastname@example.org.
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.
Are You Really Sure That Your Users Hate Scrolling?
“First of all,” Jessica asks, “How do you know that your users really hate scrolling? Have you observed a large, representative sample of users interacting with the form, or is this a hypothesis that is based on other information such as poor completion rates for fields toward the end of the form? I’m curious because, in my experience, a significant proportion of form-fillers don’t mind—or even actually prefer—scrolling. If you’re going to make a design decision based on a user preference, you want to be really sure that the data is solid.
“If, in fact, your particular target audience actually is bent against scrolling, it might be important to understand why. For instance, form-fillers might dislike scrolling because they have trouble keeping track of where they are. This, in turn, may be a result of the form’s visual design or lack of chunking.
“Having labels above fields does double the form’s length. So, if after all of your research, you know that this layout just isn’t an option, don’t despair about placing labels to the left of fields. You can help link each label visually with its corresponding field by using zebra striping—shading the background of alternate questions. For each question, the absence or presence of shading helps to draw the eye from the label across to the field. Finally, I would point out that the productivity gains of labels above fields are marginal at best. You should be much more concerned about things like whether the questions use plain English and make sense for the target audience.”
“Test the form with your users,” recommends Caroline. “Only they can tell you whether the pain of scrolling is greater than the pain of reading awkwardly placed labels.”
Move Labels Inside Fields?
“If you’re really opposed to making the form labels left aligned above fields, the only solution that I can think of is to use in-field labels. I’d recommend testing this option anyway,” replies Jordan. “The idea is to have no field label to the left. Each label instead appears within the field itself. The label disappears when a user clicks or taps the field. There are usability concerns when using this pattern though. You might want to consider displaying contextual instructions when a field is active, or has focus. Or try some other solution to help users remember what information they’ve been asked to provide once the field label has disappeared.”
“Read Caroline Jarrett’s article on UXmatters, ‘Don’t Put Labels Inside Text Boxes (Unless You’re Luke W),’ in which she makes a very strong case against placing labels inside fields,” suggests Pabini.
Analyzing Users’ Tasks
Q: What are your favorite ways to analyze your users’ tasks?—from a UXmatters reader
“The holy grail of user experience is understanding the tasks that users want to get done,” responds Jordan. “Clayton Christensen offered a few key nuggets of insight in his jobs-to-be-done methodology, which he worked on about a decade ago. Many articles have been written about it. Read ‘What Customers Want from Your Products.’ The biggest take-away that I got from Christensen’s work is the idea of switchers—the users who have just hired or fired the solution they were previously using to complete a task. For instance, if I was engaged to help create a new search engine, I’d want to talk to users who have just started using a new search engine and figure out why they switched. This still leaves some prioritization work on the shoulders of the analyst, but the reasons users switch generally translate to unmet needs around their most important tasks.”
“When it’s just me doing the analysis,” answers Jim, “I usually type up my notes in a spreadsheet, with a column for each research participant and the task steps in rows. This allows me to scan the rows to see how each person performed each step—looking for similarities and differences. I can easily see how common certain actions and problems are.
“When the tasks that I’m analyzing are more complex, I use something like Visio to create diagrams that map out the steps in the process, the inputs and outputs, the tools and systems that a user employs, and the other people that are involved in the process. That lets me progress from the textual descriptions in my notes to a visual depiction of the situation.
“When I’m analyzing tasks with a group of people, we create affinity diagrams and process diagrams. We use Post-it notes when collaborating on task analysis because it’s easy to move them around and add or remove steps. You can go through your notes from your first research participant and list out each step he or she took in order, using Post-it notes. Then, as you go through your notes on each additional participant, you can make revisions or additions to the process. Sometimes I use red Post-it notes to indicate problems during a process. You can use Post-it notes of other colors to indicate other issues such as tools or documents that the participants used or environmental factors.”