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

Замена текстовым плейсхолдерам

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

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

Замена текстовым плейсхолдерам

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

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

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

Замена текстовым плейсхолдерам


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

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

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

Замена текстовым плейсхолдерам

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

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

Замена текстовым плейсхолдерам

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

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

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

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

Замена текстовым плейсхолдерам

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

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

Замена текстовым плейсхолдерам

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

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

Замена текстовым плейсхолдерам

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

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

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

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

Редакция: Andrew Coyle

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

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree