Floated label form fields - displaying hint text and validation

Question

I'm making updates to a form, which features form fields with floated labels. I want to add hint text to some of the fields, but I'm unsure how to format these fields when I need to display validation errors.

I tried the following, but I'm worried this might be confusing to users. Any suggestions or feedback is greatly appreciated.

Note: I'm trying to avoid hiding the hint text in tooltips.

Answer 1

This is is part of the problem with float labels.

7. They don‘t make room for hint text

Float labels are designed in such a way that means there’s no space for hint text.

You could put hint text underneath the text box but that means the hint text is far away from the label it relates to. And the text may get cut off by browser autocomplete dialogs.

You could put hint text above the input but that would put the hint text before the label which is confusing.

Taken from my article: float labels are problematic

It may not be what you were hoping for but it would be best to ditch float labels because they don‘t actually help users fill out forms.

Answer 2

I think in this case it might largely depend on the size of the interface, but I think it would be interesting to mix the validation with the label.

So, when you click and it's empty, the placeholder label would say Location is required and when there's content, the floating label would also say Location is required and when you correct it, it goes back to Location.

Answer 3

tbonejenkins, two things regarding your specific question about handling validation errors:

1. The design you show looks fine: it uses established patterns for highlighting the field; displays the warning in the proper context; and it does not obscure or move around the hint text. I don't see a pressing reason to change this at all.

2. A required field should be marked as such in its default state. I.e., don't wait until the form validates its input to tell the user which fields are required, and which aren't. Instead, apply the common " (required)" label text or an asterisk "*".

On a more general note, what's the motivation for using "floating labels" to begin with? They're known to cause some of the same usability issues that plague using placeholders as labels. Also, animating the labels between their two positions does not any meaningful information and simply feels gratuitous (particularly to a "UX traditionalist" like myself ;) ).

If you do continue to use them, please consider increasing the text size for both the label in its "in-form-outline" position and the hint text a bit, so they're both easier to read, especially for users with less-than-ideal eye sight.

Answer 4

Simple way is to make some room to keep error message at right side.

Suggest you to display hint text as placeholder as soon as users click on input. Kind of Progressive disclosure, But you need to mention in label if field is required. Place error msg where currntly hit text is placed.