Юзабилити является важной характеристикой любого сайта или веб-приложения. Она складывается из удобства использования различных элементов пользовательского интерфейса. Среди прочего к ним относятся веб-формы. Чтобы сделать их более «дружелюбными» по отношению к пользователям используют плейсхолдеры.
Что такое плейсхолдер
Плейсхолдер – это небольшая подсказка текстового формата, которая помогает пользователю правильно заполнить форму. Последние используются на различных ресурсах, но чаще всего их можно встретить при регистрации или на странице оплаты заказа в любом интернет-магазине. Проще говоря, под плейсхолдером понимается текст, который расположен внутри поля для ввода информации (логина, пароля, телефона, электронной почты и т.д.)
Отличия от лейбла
Наравне с плейсхолдером, лейбл представляет собой текстовую подсказку, но он располагается снаружи формы, а не внутри поля для ввода. Иногда разработчики не используют лейблы, аргументируя это желанием сделать форму более компактной. Но подобная практика довольно часто несет в себе негативные последствия.
Виды плейсхолдеров
Понятие «плейсхолдер» распространено не только в маркетинге. Программисты понимают под ним последовательность символов, с помощью которых можно имитировать конечные данные. К примеру, разработчик понимает, что в программе должно быть определенное количество переменных, но их значения пока неизвестны. В этом случае конечные данные можно заменить на плейсхолдер.
Во время верстки он может заменять блоки с текстом. На нем удобно тестировать шрифты, их размеры и цвета. Кроме этого плейсхолдер помогает продумать взаимное расположение изображений и текста. Чтобы максимально приблизиться к макету, верстальщик может заполнить заголовки, описания и другие поля «временным» текстом. Одним из самых известных плейсхолдеров считается lorem ipsum.
Плейсхолдер может использоваться вместе с заголовком или вместо него. Первый вариант более предпочтителен, поскольку в этом случае вся нужная информация остается видимой, плюс пользователю доступна подсказка в поле ввода. Как только он заполнит форму, текст оттуда исчезнет. Второй вариант лучше не использовать, но все-таки он существует. Таким образом верстальщики стараются сократить количество текста, тем самым уменьшить размеры формы.
Особенности плейсхолдеров
Плейсхолдер можно смело использовать, но важно следить за тем, чтобы он делал процесс заполнения формы более простым, а не усложнял его еще больше. С ним связан целый ряд проблем, которые могут негативно отразится на юзабилити ресурса:
- пользователь может перепутать текст подсказки с заполненным ранее полем;
- в случае возникновения ошибки, ее будет труднее найти;
- если у полей нет заголовков, сложно проверить корректность заполненной формы;
- некоторые пользователи вначале не читают подсказки, и после ввода данных он исчезает. Если же была допущена ошибка, приходится полностью стирать информацию, чтобы увидеть текст плейсхолдера;
- если разработчики не предусмотрели возможность автоматического удаления текста с подсказкой, это приходится делать вручную, что занимает лишнее время и вызывает недовольство пользователя;
- чаще всего текст подсказок не очень контрастный, поэтому для слабовидящих он плохо различим.
Как правильно использовать плейсхолдер
Самое главное, никогда не использовать текст плейсхолдера в качестве заголовка для формы. Это запутает пользователя и гарантировано приведет к ошибкам. Подобная практика значительно ухудшает юзабилити. Чтобы этого не происходило, нужно придерживаться определенных правил:
- текст подсказки нужно делать более контрастным и ярким, чтобы его можно было увидеть на экранах с любым разрешением;
- подсказка должна быть информативной, короткой и простой для восприятия;
- предпочтение стоит отдавать адаптивным плейсхолдерам;
- текст не должен исчезать сразу после того, как пользователь начал заполнять поле. Он должен сохраняться до тех пор, пока это позволяет размер формы. Кроме этого, моментально исчезающий текст вызывает у пользователя диссонанс;
- при подборе цвета и контраста важно соблюдать баланс. Подсказка должна быть заметной, но не чересчур яркой. Это вспомогательный элемент, и он не должен идти в разрез с дизайном макета;
- тоже самое касается шрифта, он должен быть таким же, как и у остального текста на странице;
- подсказка должна быть расположена четко в границах поля, чтобы ее не прерывали другие элементы;
- у каждой формы должен быть свой отдельный заголовок. Заменять его на плейсхолдер нельзя;
- цвет подсказки должен контрастировать с цветом формы и поля. Для фона лучше выбирать более светлые оттенки, а для текста наоборот, темные.
После завершения работы над формой, ее необходимо протестировать. Это позволяет понять, как она отображается на разных устройствах и не возникают ли ошибки при ее заполнении. Важно помнить, что плейсхолдер в большей степени актуален для компактных и небольших форм. Чаще всего они используются для ввода номера телефона, email или имени пользователя.
Заключение
Плейсхолдер – полезная функция, которая важна для юзабилити веб-ресурса. Однако ей нужно пользоваться крайне осторожно, поскольку в случае некорректной реализации высок риск столкнуться с проблемами. Также стоит учитывать, что подобные подсказки вызывают дополнительную нагрузку у пользователей с различными нарушениями когнитивных функций, например, с нарушениями зрения.
Как показывает практика, если у формы есть заголовки, текст плейсхолдера вполне может быть опущен. Однако такое работает далеко не во всех случаях. Поэтому важно понимать, что подобные подсказки могут как улучшить юзабилити, увеличив количество заполняемых форм, так и ухудшить его. Чтобы последнего не произошло, нужно грамотно использовать данный элемент.
