Как писать текст для плейсхолдера
Плейсхолдер — это небольшой серый текст в поле ввода. Он подсказывает, что и как нужно ввести, и обычно исчезает, когда человек начинает печатать.
Плейсхолдеры часто встречаются в формах регистрации, поисковых строках, полях обратной связи.
Вот пример стандартной формы, где нужно заполнить поля. Плейсхолдеры показывают, что именно нужно написать в каждом поле.
Плейсхолдер дает подсказку, описание или пример информации, которую нужно ввести. Например, уточняет формат телефона или адреса, чтобы человек меньше ошибался.
Еще такой текст помогает сориентироваться и упрощает первый шаг в заполнении формы — поле уже не кажется таким пустым.
В этой статье расскажу, что стоит писать в плейсхолдере, чтобы он работал на максимум.
Что делает эффективный плейсхолдер
- Показывает, что нужно ввести и в каком формате
- Дает подсказку
- Не дублирует название полей
- Не прячет важную информацию
- Не повторяет функции
Давайте посмотрим каждый вариант с примерами.
Показывает, что нужно ввести и в каком формате
Плейсхолдер говорит, что нужно добавить в поле. Например, плейсхолдер у Авито просит ввести код из смс.
У Purpur нужно ввести email, чтобы подписаться на рассылку.
Еще один способ заполнить плейсхолдер — показать нужный формат. Например, добавить код страны в поле с телефоном, чтобы человек не забыл поставить «плюс».
Или вот еще пример, где в поле с датой указан формат: ДД/ММ/ГГГГ. Так человек лучше поймет, какие данные ввести, и будет меньше ошибаться.
Дает подсказку
Чтобы человеку было легче заполнить поле, плейсхолдер может дать подсказку — что именно туда писать.
Вот сервис предлагает не просто описать ошибку, а уточнить, как она возникает и что нужно исправить.
Solar Staff подсказывает, как правильно заполнить поле с именем владельца карты.
Яндекс Карты дает подсказки, когда нужно написать отзыв о месте.
Такой же принцип работает и в строках поиска. Людям легче что-то найти, если они знают, что именно можно искать. Вот Яндекс Музыка подсказывает, что у них есть не только песни, но и клипы.
Appstore объясняет, что можно искать игры, приложения и статьи.
А у Альпина Книги плейсхолдер, наоборот, получился неудачным. И так очевидно, что в книжном магазине можно найти книги.
Или вот еще экран с полем для комментария. Никаких подсказок нет, поэтому человек может растеряться — непонятно, какую информацию нужно написать в комментарии.
Не дублирует название полей
Если плейсхолдер повторяет название поля, он просто занимает место и не помогает. Он не дает полезной информации, а повторяет то, что человек и так знает.
Чтобы сделать плейсхолдер более эффективным, лучше подсказать, что нужно написать. Вот, например, в форме заказа указан не только формат, но и возможные варианты заполнения.
Не прячет важную информацию
Плейсхолдер обычно исчезает, когда человек начинает печатать. Если рядом нет других пояснений, можно ошибиться и ввести что-то не то. Придется удалить заполненный текст, чтобы еще раз проверить, а что нужно заполнить.
Вот неудачный пример, как в плейсхолдер поместили требования о пароле.
Такие важные детали лучше оставлять под полем ввода, на видном месте. Например, так:
Не повторяет функции
Плейсхолдер уже находится в поле ввода, поэтому необязательно писать в нем «введите», «опишите», «расскажите». Плейсхолдер сам по себе уже означает, что туда нужно что-то ввести.
Вот пример, где плейсхолдер дублирует значение поля.
Плейсхолдер в Ютубе тоже не сообщает ничего нового.
Чтобы не повторять значение или функцию поля, лучше дать подсказку — а что именно в этом поле можно написать.
Резюмируем, как написать текст для плейсхолдера
Определите идеальный вариант заполненного поля — какую информацию человек должен туда добавить:
- Если нужны точные данные: дата, телефон, сумма, паспортные данные, номер карты — пропишите формат.
- Если нужно добавить однозначную переменную: имя, фамилию, улицу, e-mail — напишите пример.
- Если достаточно ввести текст в свободной форме: комментарий, поиск, описание проблемы — дайте подсказку.
Еще больше разборов интерфейсов и полезных советов в телеграм-канале «Наташин UX»