Что лучше с точки зрения UX для поля ввода: серый placeholder-текст или отдельный видимый заголовок (label)? Почему?

Почему label лучше placeholder?

Placeholder-текст — это текст внутри поля ввода, который исчезает, как только пользователь начинает печатать. Это создаёт несколько проблем с точки зрения UX:

• Пользователь теряет контекст после начала ввода, особенно если форма длинная или требует точных данных.
• Placeholder часто имеет низкую контрастность, что затрудняет чтение для людей с плохим зрением.
• Скринридеры не всегда корректно озвучивают placeholder, что нарушает доступность.

Label — это отдельный текст над полем или рядом с ним, который всегда виден. Он не исчезает при вводе, что помогает пользователю не забывать, что нужно ввести. Label также улучшает кликабельность: при клике на label фокус переходит на поле ввода.

Пример кода

<!-- Плохо: только placeholder -->
<input type="email" placeholder="Введите email">

<!-- Хорошо: label + placeholder как подсказка -->
<label for="email">Email</label>
<input type="email" id="email" placeholder="example@mail.com">

Когда использовать placeholder?

Placeholder можно использовать как дополнительную подсказку к label, например, для указания формата данных (дата, телефон). Но никогда не заменяйте им label. Это особенно важно для форм регистрации, оплаты или ввода личных данных.

Вывод: для лучшего UX всегда используйте видимый label. Placeholder — только как вспомогательный элемент, который не должен быть единственным источником информации о поле.