Замена текстовым плейсхолдерам. Улучшаем юзабилити форм путем устранения проблем с плейсхолдерами

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

Плейсхолдер как замена лейблу

В попытке сократить длину формы или понизить визуальный шум дизайнеры используют плейсхолдеры в качестве лейблов полей формы. Эта практика нагружает нашу кратковременную память. Лейбл исчезает сразу, как только пользователь кликнул и/или начал вводить текст. Чтобы увидеть подсказку, необходимо стереть текст.

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

Плейсхолдер как пример

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

Плейсхолдер как текстовая подсказка

Текстовые плейсхолдеры часто используют в качестве подсказок относительно того, что нужно ввести в данное поле. Эта также плохая практика по тем же причинам, описанным ранее. Даже еще более сомнительная из-за объемов текста. Дизайнеры и разработчики, не понимающие назначения плейсхолдеров, часто пишут в них длинные сообщения. Этой практике есть много хороших замен, как, например, 3 практики, проиллюстрированные выше.

Плейсхолдер как второй лейбл

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

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

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

Плейсхолдеры должны быть светлее вводимого текста

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

Плейсхолдеры должны быть видны на всех экранах

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

Плейсхолдеры не должны исчезать при клике по полю

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

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

Более подробно прочитать о распространенных проблемах с плейсхолдерами вы можете в замечательной статье по плейсхолдерам Кэти Шервин из Norman Group.

Статья входит в серию по изучению UI шаблонов и компонентов. Я планирую писать по статье в неделю. Эти статьи и дизайн являются часть более масштабной инициативы по созданию библиотеки шаблонов интерфейсов, сосредоточенной на пересечении юзабилити и визуальной красоты. Заинтересовавшиеся могут подписаться на мои обновления.

Редакция: Andrew Coyle

Источник: //uxdesign.cc/

Редакция: Команда webformyself.

Комментарии Вконтакте: