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

Что такое плейсхолдер

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

Пример плейсхолдера на нашем сайте

Плейсхолдер помогает понять, какая информация относится к тому или иному полю.

Виды

Выделяют пять основных разновидностей плейсхолдеров:

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

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

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

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

• Всплывающее окно. Такой плейсхолдер перегружает форму информацией и создает визуальный шум на странице.

Оптимальный выбор — адаптивный плейсхолдер. Он улучшает восприятие контента и решает проблемы традиционных подсказок.

Проблемы с юзабилити

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

Например, цвет текста внутри поля нельзя изменить с помощью CSS. Он по умолчанию остается светло-серым. Люди со слабым зрением плохо различают его, особенно если плейсхолдер располагается на светлом фоне.

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

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

Как правильно использовать

Чтобы не навредить юзабилити, следуйте следующим рекомендациям:

• Не заменяйте лейбл плейсхолдером — это должны быть два самостоятельных элемента.

• Используйте контрастный цвет фона, чтобы светло-серые символы легко читались на нем.

• Дополняйте заголовок плейсхолдером, а не заменяйте его подсказкой. Он не должен исчезать в то время, как пользователь нажимает на поле.

• Размещайте плейсхолдер между заголовком и строкой для ввода данных.

• Добавляйте недлинный и простой для восприятия текст.

• Следите за тем, чтобы дизайн и шрифт заполнителя соответствовали общему стилю сайта или мобильного приложения

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

Коротко о главном

• Placeholder — это вспомогательный текст, который располагают в форме ввода данных. 

• Его главная задача заключается в том, чтобы подсказать пользователю, какую информацию нужно указать в конкретном поле. 

• Плейсхолдер может улучшить юзабилити, если его правильно использовать в мобильном приложении или на сайте. 

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