What is the best way to deal with very long form labels?

Question

I have very long labels in some forms, including forms in modal windows. There are some cases we have labels with more than 80 chars, which is bad because:

• Users need to read/track all the labels to identify the fields, and in most cases the most important word to identify the field is at the end of the label.
• It's hard to design/align the form, because we have fields with very short labels in the same form.
• It increases the vertical scroll of the page.
• Aesthetically it's not good.

Below you will see the "bad" situation, just showing all the label as is:

Here is a study trying to fix this by:

• Grouping the common terms in the label as a subtitle of a specified "section" in the form, and just showing in the top of the field the term that really differentiates one field to another.

• Using tooltips to show the complete label to the users that might have some doubt about the field description.

Is the second approach good UX? Is there anything I can improve or fix? Is there another solution that is more correct?

Answer 1

You do not need any help here. You've understood and identified the problem with the first approach and have clearly addressed it with your study.

Neither a dedicated info icon or a focused tooltip for the full field label are right or wrong. This is an individual user's preference and could be iterated upon with user testing, but neither is incorrect.

Nice work identifying the issue and solving it with the first re-work.

Answer 2

Second Approach makes lot of sense than the first. If the product is for the general market, the tool top could be beneficial as the first time users will benefit from that. However IMO, tool tip is unnecessary for an existing product as the user would understand the content without the help of it. Since, we don't know much about the product, this is as far as i can say.

Answer 3

Yes, the second approach seems like good UX. We can't know for sure without knowing more details (who are the users? How crucial it is that they read the texts? How motivated are they to complete the form? etc), but it seems like a good way to solve the problems you raised.

In case that you still want to increase the likelihood of the users reading the text, one thing that you can do is to display the tooltip whenever the field is in focus - without waiting for the users to click the icon. This can be very beneficial for novices, but it can get pretty annoying to frequent users.

Answer 4

While I have no real issue with the second approach and believe it certainly offers one solution, I personally would have take a different approach, using placeholders instead. See my mockup below:

This reduces the amount of space needed for the form and users are still presented with the various field labels in a typical 'paragraph' format so that it reads in the same way as a bulleted list would. To complete the form, users just click on the field to replace the placeholder text with whatever response they enter.

If vertical space is an issue, just do the same thing with two columns instead, such as my mockup below:

If for whatever reason placeholders aren't an option, you could go with a bulleted list of labels and fields, but this would obviously use up more screen real estate.

Answer 5

Your solution is a lot more elegant, and does indeed address the specific issues you've identified.

At this stage, I don't know the wider context of what your product is or does (and you may have solid commercial reasons for not explaining it).

You mention the use of tooltips as a way of making the form easier to use. What these tooltips say could prove to be be quite important, depending on how familiar your audience is with your product or service.

For example, if the audience is quite novice, it's a good idea to make the tooltips a little bit more informative, rather than showing the full text of your original form label. You could perhaps include examples of what sort of information the user could enter, or a brief description of what the form field means.

Answer 6

One suggestion would be to try using "Summary", "title", and "ALT" tags with in the HTML Tags by having the tool tips show during the mouse-over of the tag. which can show the attribute as a tool tip.