
Infield top-aligned labels beat floating labels on forms - dojosensei
https://uxmovement.com/forms/infield-top-aligned-labels-floating-labels/
======
csnover
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.)

~~~
mgsk
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.

------
adt2bt
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.

~~~
wereHamster
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)

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

------
0xff00ffee
"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.

~~~
yunruse
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.

