Infield top-aligned labels beat floating labels on forms | Hacker News Reader

Infield top-aligned labels beat floating labels on forms

uxmovement.com

50 pointsdojosensei8 comments

Where is the data? This article, like everything I’ve ever seen on UX Movement, makes all sorts of claims without any sign of conducting usability research to actually support their claims.

In this article, the examples are artificially constructed to support their claims in a dishonest manner. For example, they talk about how “floating label” text is smaller than the “IFTA label” text even though there is no reason they couldn’t be the same size (and, of course, the text is larger and more visible in the floating label’s initial state). The same thing is true of the “crammed spacing” claim, there is nothing inherent to the floating label that reduces spacing.

Finally, the article suggests that “IFTA label” is better by using colour to differentiate between complete and incomplete fields. This manages to ignore well-established research showing users with achromatopsia and low vision won’t be able to differentiate between those states at all since the contrast difference is only 1.25:1! At least unfilled fields with floating labels have no label at all above the field—which is not a great UI clue either, but is at least one that is legible for everybody. (In any case, unfilled fields should always be discoverable by form validation at submission time pointing out which fields are invalid and why.)

The article claims that not having the label inside the field allows users to spot fields that have yet to be filled-in. In the next section the article claims that by moving the label out of the field leaves room for helpful hint-type text within the field.

My eyes almost rolled out of their sockets reading this article.

1. No data, based on work experience and principles. Needing data to evaluate a solid argument backed by specific reasoning is an appeal to authority bias.

2. It's not dishonest as floating labels typically are designed a certain way — with tiny text labels and crammed spacing. This is the standard for how they're designed. Can you make it bigger and give it more spacing? Yes, you can go out of your way to do that but most typically don't because of the way floating labels are designed — the label is center-aligned in the field from the start and then it shrinks and floats to the top because it's not thought of as important anymore. This is standard behavior for floating labels. To suggest, "oh, you can just make it bigger then and put more spacing" shows you don't understand how floating labels typically work.

3. You ignore the fact of how many normal-visioned users the color label differentiation would help, which is a lot since they make up the majority on most apps. Your complaint on accessibility doesn't really stand since it can be resolved by making the label color a higher contrast and greater luminance for disabled users. Many users want to check their fields before they press the submit button and get errors. The label differentiation makes it easier for them to spot incomplete fields. These are great things for the user.

I generally agree with a lot of these points, but I’m not sure I agree with using the placeholder for hints. If you put in a couple characters and forget the hint, it’s now gone. The ‘bad’ example there actually seemed better to me.

material design distinguishes between: label (the one that moves to the top when the user focuses the field), placeholder (which is visible inside the field when the user has not entered anything yet) and help text (below the text field). The label should describe the field (eg. Name, Email, Phone number), the placeholder should indicate an example of a value that one has to enter (eg. your.name@gmail.com, +01 234 56 32), and the help text should provide additional context (eg. Must be at least X characters)

How about just using a regular textbox, and a regular label right outside the box?

"Users with vestibular disorders need control over movement triggered by interactions"

Also: it's fucking annoying.

I appreciate how much UX devs put into affordance and usability patterns, but I equally despise they "hey let's make this animated and more complex" for no good reason.

It’s a bit of flair that can be handwaved away. Unlike back-end systems, where due to the non-visibility, flair isn’t exactly seen, the best way of being tongue-in-cheek is a dud API or a comment highlighting some strange behaviour. But front-end is more visual, which is why designing how to animate your hamburger menu button is just something you might end up doing.

It’s not necessarily bad, trying to add a little animation or complexity, if it’s not in-your-face: it can help vary style, experiment with what clicks with an audience, and develop skills. It can also act as a status signal for the website if it can afford for developers to fine-tune every detail – Apple is a good example here.

But yes, the best design is usually one of the simplest ones. Some designers try to make content glide over your eyes and forget that this doesn’t fit usability needs.

Reply on news.ycombinator.com