С момента появления плейсхолдеров, дизайнеры начали применять их в качестве средства хранения подсказок. Привлекательность плейсхолдеров состоит в их минималистичной эстетике и в том, что они экономят место.

Некоторые дизайнеры идут на шаг впереди и заменяют лейблы плейсхолдерами. Другими словами, плейсхолдер является «анти шаблоном» инклюзивного дизайна и может вызывать проблемы у пользователей. И вот почему:

Легко забыть

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

О проблеме плейсхолдеров - 1
Текст плейсхолдера исчезает, когда вы начинаете печатать

Отсутствие поддержки браузера

Не все браузеры поддерживают плейсхолдеры. В таком случае, пользовательский опыт будет неправильным.

О проблеме плейсхолдеров - 2
Неправильный UX благодаря отсутствию поддержки браузера

Заполненные значения неясны

Очевидно, что отсутствие лейбла приводит к фатальной ошибке. При отсутствии подсказки, пользователю будет трудно ввести ответ.

О проблеме плейсхолдеров - 3
Трудно использовать заполненное поле

Трудно просмотреть введенные данные перед отправкой

Пользователю необходимо выучить все подсказки для того, чтобы свериться с введенными данными до того, как он подтвердит отправку данных. Это происходит потому, что после заполнения поля, подсказка исчезает. Чем больше количество данных в полях, тем глобальнее проблема.

Трудно исправить ошибки

Ошибки исправить крайне трудно потому, что сообщение и данные лишены контекста. А подсказка может содержать информацию, которая поможет исправить ошибку.

О проблеме плейсхолдеров - 4
Различные подсказки при обозначении ошибок
Конечно, вы можете написать огромное сообщение об ошибке. Например: «Ваш пароль должен состоять минимум из 8 символов», вместо «Должно быть не менее 8 символов». Но это не является решением проблемы.

Некоторые браузеры скрывают плейсхолдер при фокусе

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

О проблеме плейсхолдеров - 5
Плейсхолдер исчезает при фокусе
Текст плейсхолдера может быть ошибочным в своем значении.

Люди не замечают небольшой разницы в контрасте и могут пропустить необходимую информацию, написанную более бледным цветом. Тестирование показало, что 99% людей думали, что им не надо вводить ничего. Зато, после нажатия кнопки подтверждения, пользователь разочаровывается потому, что видит ошибку.

Они имеют недостаточную контрастность

Текст плейсхолдера часто выглядит более тусклым по отношению к основному контенту. Некоторые люди с трудом могут прочесть текст в нем, или не придать ему значения вообще.

Программы чтения с экрана могут не уведомить о них

Скринридеры могут не прочесть текст плейсхолдера потому, что визуально он похож на пустое место.

Уменьшенное место для действия

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

О проблеме плейсхолдеров - 6
Отсутствие лейбла означает меньшую область взаимодействия

Текст плейсхолдера может быть обрезан

Если плейсхолдер длиннее размера поля, он будет обрезан. Это означает, что у вас возникнут трудности с пониманием того, что написано в поле.

О проблеме плейсхолдеров - 7
Длинный текст обрезан

Некоторые браузеры их не переводят

Например, когда Chrome переводит страницу, он оставляет без внимания текст внутри плейсхолдера.

Автозаполнение в браузере только усугубляет проблему

Автозаполнение в браузере позволяет автоматически заполнить поля. Это означает, что текст плейсхолдера исчезает и вы не сможете проверить, правильно ли заполнены все поля.

Вывод

Некоторые люди говорят, что использовать плейсхолдер с лейблом — норма. Я отвечаю, что в случае, когда подсказка несет ценность для пользователя, мы должны сделать ее читабельной и доступной. Плейсхолдеры не отвечают данным требованиям.

Другие говорят, что плейсхолдер — это всего лишь улучшение, а не основная часть UX. В ответ я говорю, что если подсказка не выполняет основной функции, не добавляйте ее. Контент — это основа, а не улучшение.

Ясно, что в случае с плейсхолдерами, минимализм не равен простоте. Избегайте плейсхолдеров. Всегда используйте заголовки. И если вам нужно использовать подсказку, поместите ее за пределами поля.