Как применять плейсхолдеры для удобного ввода данных в форму

Оптимизируйте формат полей

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

Чаще всего ошибки встречаются при использовании плейсхолдера в качестве:

 • Инструкций к вводу информации 

 • Дополнительной текстовой справочной информации

Нет необходимости указывать пользователям на то, что им нужно ввести данные, потому что это подразумевает само поле для ввода текста. Лучше оставить его пустым, чтобы люди увидели, что оно пустое. Инструкция «Введите ваше X» («Enter your X») избыточна и перегружает форму.

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

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

Оптимальное место для дополнительного текста — под полем. Если вы хотите делать описание поля более точным, вы можете использовать скобки, чтобы добавить к нему информацию. Например, если поле называется «Полное Имя» («Full Name»), и вы хотите пояснить, что включает в себя полное имя (имя и фамилию), то добавьте в название «(имя и фамилия)» («(first and last)»). Это будет полезно для пользователей.

Правильные плейсхолдеры

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

Вместо этого сделайте ваши плейсхолдеры более ненавязчивыми и не слишком явными. Например, если вы хотите подсказать правильный формат электронной почты, лучше всего подойдёт «name@example.com», потому что пользователи знают, что это ненастоящая электронная почта.

Для поля с датой рождения лучше подходит формат «mm/dd/yyyy», потому что это нереальная дата рождения. Такой формат указывает на количество цифр месяца, дня и года, а также правильный порядок. Вместо реальных чисел можно подсказать формат номера телефона в таком виде — «(xxx) xxx-xxxx». Чем меньше подсказка похожа на реальный текст для ввода, тем лучше.

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

Например, серийный (serial number) или идентификационный номер продукта (product ID number) — нестандартные поля. Пользователи могут перепутать их, если будут невнимательны. Однако плейсхолдер указывает, что серийный номер длиннее, а у идентификационного есть дефис. Это различие в формате предотвращает путаницу при вводе пользователями похожих данных.

Ещё один пример — номер социального страхования (social security number) и идентификационный номер работодателя (employer ID number). Пользователи могут легко перепутать их местами. Однако плейсхолдер предполагает, что у номера социального страхования два дефиса, в то время как у идентификационного номера работодателя один. Этот ненавязчивый намёк помогает избежать ошибок и помогает людям правильно вводить информацию.

Автоматическое форматирование

Только плейсхолдеры не всегда оптимальны, потому что пользователи могут легко упустить или проигнорировать предлагаемый формат. Единственный способ гарантировать, что люди введут текст в правильном формате, — объединить плейсхолдеры с автоматическим форматированием.

Автоматическое форматирование подразумевает наличие специальных символов ввода, чтобы пользователям не приходилось их набирать. В плейсхолдере такие символы, как (), / и – выделяют при помощи более жирного начертания и контрастного цвета.

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

Доступность плейсхолдеров

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

Однако делайте светло-серый текст доступным для людей с нарушением зрения. Если он будет слишком светлым, пользователям будет трудно его прочесть. Чтобы решить эту проблему, выбирайте размер шрифта, равный не менее 16 пикселей, и начертание medium or semi-bold. Жирные шрифты увеличивают контраст и читаемость текста без изменения его размера.

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

Перевод статьи How to Use Placeholder Hints for Better Form Input из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!