Плейсхолдеры в полях делают больно

Статья достаточно старая (2014 год), но разработчики форм косячат снова и снова. В общем, не баян, а классика

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

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

Ярлыки(labels) и Плейсхолдеры(placeholders)

Ярлык сообщает, о чем поле и располагается вне его границ.

Плейсхолдер – дополнительная подсказка, описание или пример данных, которые пользователь должен ввести. Плейсхолдер исчезает, стоит пользователю начать печатать.

Ярлык, инпут и плейсхолдер

Ярлык, инпут и плейсхолдер

Плейсхолдер вместо ярлыка

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

Ужасно: плейсхолдер используется вместо ярлыка

Ужасно: плейсхолдер используется вместо ярлыка

Вот 7 основных причин, почему не нужно так делать:

  1. Исчезающий текст нагружает кратковременную память. Если пользователь что-то забудет (а при заполнении больших форм такое случается), ему придется удалить написанное и, в некоторых случаях, щелкнуть по полю, чтобы увидеть текст подсказки. В идеальном мире, пользователь занят только заполнением. Но в реальности люди многозадачны. Они переключаются с вкладки на вкладку, отвлекаются на переписку, разговоры по телефону и для уточнения сведений. Поэтому, важно помочь понять, на чем юзер остановился. Для простых и часто используемых форм, нагрузка на кратковременную память не столь значима, пользователь может угадать, что нужно вводить. Но даже в самом простом случае авторизации, человек может забыть, должен ли он использовать имя пользователя или допускается и электронная почта тоже.
  2. Без ярлыка невозможно проверить форму перед отправкой. Если ярлыки отсутствуют, а инструкции больше не отображаются, пользователю придется по одному удалять каждое введенное значение и сравнивать его с подсказкой, чтобы убедиться, сделал ли он (или автозаполнение) все правильно. Звучит несложно, но в реальности многие не станут ничего перепроверять, недооценив вероятность ошибки.
  3. В случае ошибки, пользователь не узнает, как ее исправить. Если за пределами поля не будет инструкций, пользователю снова придется удалить введенное значение, чтобы понять причину ошибки и исправить ее.
  4. Исчезающий при наведении плейсхолдер раздражает пользователей клавиатуры. Те, кто предпочитают использовать клавишу Tab, сначала переходят на поле, а потом уже пытаются его изучить.
  5. Непустые поля не так заметны. Исследования движений глаз показали, что первым делом пользователи ищут пустые поля. В лучшем случае посетителю сайта понадобится больше времени для заполнения, это не очень страшно. Но в худшем он вообще проигнорирует поле – и это может нанести вред бизнесу.
  6. Пользователи путают автозаполнение и плейсхолдер. Некоторые считают, что текст плейсхолдера является значением по-умолчанию и пропускают такие поля, даже не пытаясь там что-нибудь напечатать.
  7. Иногда текст плейсхолдера приходится удалять вручную. Бывают ситуации, когда текст подсказки не исчезает при фокусе и пользователь вынужден выделить и удалить этот текст (привет, textarea), что увеличивает стоимость взаимодействия пользователя с формой. Но бывает и наоборот: при фокусе текст подсказки тускнеет, но не исчезает, и тогда пользователи, незнакомые с таким поведением, пытаются его удалить. Требуется несколько неудачных попыток и нажатий, прежде чем юзер понимает, что может набирать текст поверх подсказки.

Плейсхолдер в дополнение к ярлыку

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

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

Лучше: плейсхолдер используется как подсказка, в дополнение ярлыку

Лучше: плейсхолдер используется как подсказка, в дополнение ярлыку

Плейсхолдеры и доступность

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

Три самых больших проблемы доступности:

  1. Стандартный светло-серый цвет слабо контрастирует с большинством фонов. Для пользователей с нарушениями зрения это затруднит чтение. А из-за особенностей CSS-стилизации плейсхолдеров, проблему достаточно сложно решить (на момент написания статьи, 2014 год).
  2. Сложности для пользователей с когнитивными и двигательными нарушениями. Исчезающий текст нагружает память, а если подсказка не исчезает, то вызывает путаницу и требует большего взаимодействия с клавиатурой и мышью. Для людей с когнитивными и двигательными нарушениями эти трудности могут стать достаточно серьезными.
  3. Не все читалки озвучивают плейсхолдеры вслух. Слепые и слабовидящие пользователи могут пропустить подсказку, если программное обеспечение его не прочтет.

Всплывающие ярлыки

Шаблон с плавающей меткой достаточно прочно укоренился в веб-дизайне и смягчает недостатки традиционных заполнителей. Этой модели много лет и она является частью Material Design от Google.

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

Плейсхолдеры в полях делают больно

Хорошо: плавающий ярлык перемещается наверх формы после того, как пользователь начал печатать

У этого подхода есть два очевидных достоинства:

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

Однако пункты 5 и 6 все еще актуальны: поля с текстом внутри менее заметы и юзеры могут подумать, что они уже заполнены. Кроме того, проблемы с доступностью так же не решены.

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

Заключение

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

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

Оригинал статьи

все права принадлежат автору статьи

Рубрики: CSSHTML