Stop using placeholders as labels

If you found this handy then join 20k+ designers and teams upskilling with me on memorisely ❤️

This is made even worse when autocomplete attempts to fill in the form (and sometimes incorrectly) and you have no idea what's what. I however *do* use placeholders for labels, but do this with it...

Hard disagree Taking the label off makes the UX 10X better and simpler

When the user’s already typing, just shift the label outside—it makes everything look cleaner and less cluttered.

I'm using custom TextField generated with MUI. Once user clicks on the field, placeholder's lining up with the input.

its not a real problem

On top of that hints should not be used as input placeholders. Few, but not all, reasons for it: 1. Users can mistake the placeholder for autiofill 2. Placeholder often have low contrast 3. Not all screen readers announce placeholders.

Imagine making this tutorial

On the one hand, I 1000% agree that it helps convey information better. On the other hand, that label under that heading for some reason feels really off. I wonder if there’s a middle ground between the extremes?

Yes. Also, best for accessibility to use proper labels