Плейсхолдеры (от английского placeholder, «заполнитель») — это текстовые подсказки или краткие описания, которые помогают пользователю при заполнении формы, например при регистрации на сайте или оплате товара в интернет-магазине. Простыми словами, плейсхолдер — это текст внутри поля формы, например в поле для адреса электронной почты, пароля или телефона. Он встречается не только на сайтах, но и в мобильных приложениях и десктопных программах.
Плейсхолдер обычно выглядит как светло-серый текст в пустом поле. Чаще всего в нем стоит пример значения или формата, скажем «name@example.com» для адреса почты. Как только в поле появляется значение, подсказка исчезает.
Если вы делаете форму заявки, регистрации, оплаты или обратной связи, вам нужно решить, оставлять ли подсказки внутри полей. В этой статье разберем, чем плейсхолдер отличается от подписи поля, какие бывают виды подсказок, что писать в плейсхолдере и как его задает атрибут placeholder.
.jpg)
- Зачем нужен плейсхолдер
- Чем плейсхолдер отличается от подписи поля
- Виды плейсхолдеров
- Что писать в плейсхолдере и атрибут placeholder
- Как правильно использовать плейсхолдеры
- Коротко о главном
Зачем нужен плейсхолдер
Плейсхолдеры задуманы как подсказки для пользователей. Они показывают, какие данные нужно вводить в каждом поле формы, и дают пример значения. Формы заявки, регистрации и оплаты входят в путь посетителя к конверсии, поэтому подсказки в полях должны помогать заполнять их быстро и без ошибок.
Подпись поля, она же лейбл (label), помогает пользователю вводить корректные данные, если он никогда не пользовался этой страницей, например не заполнял форму почтового адреса.
Текст-заполнитель дополняет подпись и дает подсказку, описание или пример данных, которые нужно ввести в поле. Он виден, пока в поле нет значения, и пропадает, когда значение появилось.
Чем плейсхолдер отличается от подписи поля
Подпись поля сообщает, какие данные к нему относятся, и стоит вне поля, обычно над ним. Плейсхолдер находится внутри поля и дополняет подпись примером или форматом ввода. Стандарт HTML называет подпись отдельным элементом label и рекомендует не использовать плейсхолдер вместо нее. Это рекомендация, а не запрет, но у нее есть практические причины.
| Признак | Подпись поля (label) | Плейсхолдер |
|---|---|---|
| Где стоит | Вне поля, обычно над ним | Внутри поля |
| Когда виден | Всегда | Только пока поле пустое |
| Что сообщает | Какие данные относятся к полю | Дополнительный пример или формат ввода |
| Программы чтения с экрана | Озвучивается как подпись, если связана с полем | Не считается подписью, озвучивают его не все |
Если у поля есть только плейсхолдер, добавьте над ним подпись, а внутри оставьте пример формата.
%201.png)
%201.png)
%201.png)
%201.png)
%201.png)
Виды плейсхолдеров
Виды плейсхолдеров различаются тем, что стоит внутри поля, где находится подпись и что происходит при вводе. К ним относятся стандартный плейсхолдер, плавающая метка и подсказка вместо подписи.
Стандартный
Текст-заполнитель дополняет подпись поля. Подпись стоит над полем, а заполнитель находится внутри строки и подсказывает, какую именно информацию нужно ввести в каждой конкретной строке. Исследовательская компания в области юзабилити Nielsen Norman Group называет такое сочетание подписи и плейсхолдера шагом в правильном направлении.
Floating Labels (адаптивный или плавающий)
Смысл в том, что метка помещается непосредственно в поле формы и работает как заполнитель, пока поле не станет активным. Сразу после клика метка перемещается в верхнюю часть поля и остается над вводимым текстом.
Метка остается видимой при вводе и напоминает, что нужно вводить, поэтому, по оценке Nielsen Norman Group, плавающая метка снимает часть проблем подсказки, которая заменяет подпись (о них — ниже). Она также экономит место на мобильных экранах. Остаются две проблемы: поле с введенным текстом менее заметно, а часть пользователей принимает подсказку за значение по умолчанию и пропускает поле. Ограничения доступности тоже могут сохраниться. Если на экране достаточно места, лучшим вариантом остаются подпись и подсказка вне поля.
Подсказка вместо подписи поля
Дизайнеры используют текст-заполнитель вместо подписи, чтобы визуально уменьшить форму или сократить число ее элементов. В части реализаций подсказка исчезает уже при клике по строке или при вводе текста. Чтобы увидеть ее снова, нужно стереть введенное.
Стандарт HTML не рекомендует такую замену, а Nielsen Norman Group считает ее ошибкой формы, которая вредит юзабилити. По оценке Nielsen Norman Group (статья 2014 года, пересмотрена в 2018 году), исчезающая подсказка нагружает кратковременную память, не дает проверить ответы перед отправкой, а при ошибке неясно, что исправлять. Заполненное поле выглядит менее заметным, чем пустое, а подсказку часть пользователей принимает за готовое значение. Кроме того, программы чтения с экрана не считают плейсхолдер подписью, поэтому подпись лучше разместить непосредственно над полем.
Что писать в плейсхолдере и атрибут placeholder
В плейсхолдере уместна короткая фраза или пример формата, например даты, телефона или адреса электронной почты. Подсказка дополняет подпись и не заменяет ее. В HTML она задается атрибутом placeholder у поля ввода. По стандарту HTML он содержит короткую подсказку, которая помогает вводить данные, пока у поля нет значения, а по справочнику MDN Web Docs работает у полей типов text, search, url, tel, email, password и number.
Пример значения сразу под строкой помогает лучше понять, что требуется от пользователя, но такой пример уже не плейсхолдер, а подсказка вне поля. Она остается видимой во время ввода, поэтому подходит для информации, которая нужна постоянно. Если формат нужно помнить, пока человек печатает, пример лучше вынести под поле, как на картинке справа: внутри поля он исчезает с первым символом.
Длинную подсказку и пояснение, от которого зависит правильный ввод, в плейсхолдер не помещают. Для длинной подсказки стандарт HTML называет более подходящим атрибут title, но в том же стандарте сказано, что полагаться на title сейчас не рекомендуется: многие браузеры показывают такую всплывающую подсказку только при наведении мыши, и ее не видят те, кто пользуется только клавиатурой, телефоном или планшетом. Nielsen Norman Group советует выносить существенное для заполнения описание за поле, чтобы оно было видно всегда. Дизайн-система GOV.UK строже и не рекомендует плейсхолдер даже для подсказок и примеров.
Если поле разбито на части, например на имя и фамилию, подписи частей тоже выносят за поле, а не прячут в плейсхолдеры: после ввода они исчезнут, и будет не видно, где имя, а где фамилия.
Пройдите по всем подсказкам формы и перенесите под поле каждую, без которой его нельзя заполнить правильно, например требования к паролю.
Как правильно использовать плейсхолдеры
По оценке Nielsen Norman Group, в простых и часто используемых формах из одного-двух полей, например поиска или входа, плейсхолдер без подписи нагружает память меньше, чем в сложных: пользователь догадывается, что вводить. Но даже в форме входа без подписи человек может не вспомнить, что вводить — логин или почту, поэтому подпись лучше оставить и здесь. Подсказки в полях влияют на юзабилити всей формы, поэтому перед запуском пройдите ее по списку.
- Текст подсказки короткий: слово или фраза, пример или формат.
- У каждого поля есть подпись, плейсхолдер ее не заменяет.
- Пояснения, без которых поле не заполнить правильно, вынесены за поле.
- Контраст подсказки с фоном не ниже 4.5:1 по стандарту доступности WCAG 2.2 (Web Content Accessibility Guidelines), а от введенного текста она отличается, чтобы ее не приняли за значение.
- Подсказка не исчезает, пока пользователь не начал печатать.
- Отображение проверено на разных устройствах и в браузерах.
- Шрифт и оформление подсказки согласованы с дизайном сайта или мобильного приложения.
- Плавающая метка допустима, но при достаточном месте подпись и подсказка снаружи лучше.
Светлый цвет текста подсказки по умолчанию часто не дает нужного контраста с цветом фона поля, поэтому цвет стоит проверять отдельно, а не полагаться на стили браузера. Низкий контраст затрудняет чтение подсказки людям с нарушением зрения, а исчезающая подсказка сильнее нагружает людей с когнитивными и моторными нарушениями (по оценке Nielsen Norman Group).
Коротко о главном
- Плейсхолдер (он же текст-заполнитель) — это короткая подсказка внутри поля, она исчезает при вводе.
- Он не заменяет подпись поля, так как нагружает память и мешает проверить ответы.
- Заполнители создают дополнительную нагрузку для пользователей с нарушением зрения или нарушением когнитивных функций.
- Пояснения, без которых поле не заполнить правильно, выносят за поле, а пример формата внутри только дополняет подпись.
- Контраст подсказки не ниже 4.5:1, отображение проверяют на устройствах.
.png)
.png)
Комментарии (6)
Оставить комментарий