Дизайн Ян Австрейх
5 008

Нужен ли сайту вспомогательный текст в полях ввода

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

В закладки

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

Эрик Бэйли отмечает, что использование плейсхолдеров таит в себе массу проблем, и призывает веб-дизайнеров отказаться от них.

Технически корректны

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

Тем не менее соответствие программному обеспечению — не значит удобство: машина имеет ограниченный чек-лист и может не учесть важные детали. Дизайнеры делают интерфейс для людей, а не для программ, считает Бэйли, поэтому не стоит оценивать его только по набору критериев.

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

Проблемы

Перевод

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

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

По мнению Эрика, это веская причина отказаться от атрибута.

Не стоит забывать о том, что по местоположению пользователя не всегда можно понять, на какой язык для него переводить текст. IP-адрес выдаёт страну, в которой тот находится, но многие используют свои устройства не на государственном языке, и дизайнеры должны понимать это. «Следите за тем, чтобы ваш контент был семантически описан — соседи будут вам благодарны», — напутствует Эрик Бэйли.

Совместимость

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

Чтобы программа могла взаимодействовать с введёнными данными, ей нужно объяснить пользователю, какие символы она сможет корректно обработать. Сделать данные совместимыми можно с помощью заголовка — этот элемент даёт семантическое описание того, что нужно ввести и в какой форме. На уровне программирования заголовок и поле ввода можно связать с помощью атрибута for со значением, соответствующим идентификатору ввода (id).

В статье говорится, что без связки for и id вспомогательные технологии не смогли бы донести до пользователя, какие данные нужно ввести. Она стала API-хуком, который могут использовать программы вроде скринридеров или распознавания голоса. Без for и id люди, которые полагаются на вспомогательные технологии, не смогли бы прочесть данные из поля ввода и взаимодействовать с ними.

Эрик Бэйли показывает, как заголовок (lable) связан с идентификатором ввода (id)

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

Пример любви к плейсхолдерам от Facebook

Плавающий эффект заголовка — близкий родственник этого явления.

Как только пользователь начинает вводить данные, плейсхолдер занимает место над текстом

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

Эрик Бэйли

Когнитивные нарушения

В статье приведены данные бюро переписи населения США за 2016 год — около пятнадцати миллионов человек имеют когнитивные нарушения.

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

Память

Под фразой «когнитивные нарушения» могут скрываться разные состояния, в том числе кратковременная потеря памяти, черепно-мозговая травма, синдром дефицита внимания и гиперактивности. Часто они влияют на запоминание информации.

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

«Не могу вспомнить, нужна дата в формате ММ/ДД/ГГ или ММ/ДД/ГГГ?»

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

Перевод плейсхолдера: «8-15 знаков, включая минимум три цифры и один символ». — «Подождите, сколько там минимум надо было знаков и цифр?»

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

Цифровая грамотность

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

Специально для читателей из США Эрик уточняет: «Новое — не всегда значит иностранное. Всё больше представителей старшего поколения осваивают онлайн. Они становятся более технически грамотными, но чем больше пожилых пользователей, тем больше проблем с доступностью приходится решать».

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

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

Удобство

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

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

Перевод плейсхолдера: «Вы можете найти этот код в...». Эрик: «Видимо, мы никогда не узнаем, где именно»

Визуальная составляющая

Контраст цветов

Большинство браузеров по умолчанию делают текст плейсхолдера светло-серым, чтобы отделить его от основного текста страницы. Так происходит в большинстве случаев: система берёт исходный цвет и осветляет его для плейсхолдера.

По мнению автора, такое решение неуместно как раз из-за проблем с цветовым контрастом.

Цветовая контрастность — это соотношение, определяемое путём сравнения яркости текста и значением цвета фона; в случае с плейсхолдером мы сравниваем его текст и фон поля ввода

Эрик Бэйли

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

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

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

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

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

Плейсхолдер на GoFundMe выглядит как введённые данные. Уверенность в том, что ничего не нужно менять, добавляет иконка на кнопке «Request New Password»: галочка выглядит так, словно программа одобрила адрес электронной почты

Режим высокой контрастности

В операционной системе Windows есть функция «режим высокой контрастности». Если его активировать, система заменит исходные цвета на другие, взятые из ограниченной палитры контрастных цветов. Вот как это может выглядеть:

Режим высокой контрастности в Windows 10, тема номер один, браузер Internet Explorer 11

В режиме высокой контрастности плейсхолдер окрасился в цвет, который сделал его похожим на введённые данные. Интерфейс выглядит так, будто размер пожертвования (donation amount) уже определён, и его нельзя изменить.

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

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

Хьюго Гираудел
фронтенд-разработчик

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

Минусы

Эрик выделил шесть проблем, связанных с использованием плейсхолдера. Этот атрибут:

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

Решение

Автор предлагает поместить текст плейсхолдера между заголовком и полем ввода.

Заголовок: «Ваш номер сотрудника».Текст плейсхолдера: «Его можно найти в вашем рабочем интранет-профиле. Пример: a1234567—89».

Такое решение:

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

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

Когда плейсхолдер находится внизу, его не видно из-за экранной клавиатуры

Разработка

Вот как решение автора будет выглядеть в виде кода.

Это не слишком отличается от традиционной связки атрибутов for и id: элемент label программно связан с input с помощью id со значением employee-id. Элемент p, расположенный между label и input, заменяет атрибут placeholder.

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

Эрик Бэйли

Используя атрибут aria-describedby для связывания элементов input и p, можно задать порядок прочтения для скринридера. С ним можно быть уверенным в том, что контент p будет озвучен последним, а заголовок и тип информации, которые надо ввести, — первыми.

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

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

Если включить подсказку в заголовок, это сделает его слишком громоздким. Такой объём текста может быть трудно запомнить, а переслушивать его будет долго и нудно. В доказательство своей позиции автор ссылается на «Руководство по обеспечению доступности веб-контента»: критерии 2.4.6 и 3.3.2 говорят то же самое.

Пример

Эрик показывает, как его решение использовано в коде.

И прилагает видео, где можно увидеть, как популярные скринридеры работают с такой страницей.

Мнения пользователей

Чем меньше интерфейс требует от пользователя, тем он доступнее.

Элис Боксхолл
инженер-программист Google

В конце автор предлагает задуматься над вопросом: а нужна ли вообще информация из плейсхолдера?

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

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

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

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

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

Эрик Бэйли
{ "author_name": "Ян Австрейх", "author_type": "self", "tags": [], "comments": 14, "likes": 27, "favorites": 62, "is_advertisement": false, "subsite_label": "design", "id": 46752, "is_wide": false, "is_ugc": true, "date": "Thu, 04 Oct 2018 11:46:56 +0300" }
{ "id": 46752, "author_id": 192524, "diff_limit": 1000, "urls": {"diff":"\/comments\/46752\/get","add":"\/comments\/46752\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/46752"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

14 комментариев 14 комм.

Популярные

По порядку

Написать комментарий...
0

Объясните бестолковому, хоть на картошке - что такое этот "пользовательский опыт"?

То, что это дословный перевод UX - спасибо, знаем. А суть то в чём? Пихают этот пользовательский опыт куда только можно и нельзя. Неужели забыли понятия "удобство", "производительность" и "интуитивное понимание"?

Вон Лицекнига для "улучшения пользовательского опыта" уже звонки парсит. Шатал я такой опыт, если честно.

Ответить
3

Хороший UX - это
- минимум действий для достижения результата
- отсутствие двояких толкований при использовании фичей продукта
- отсутствие помех при использовании продукта (паузы, блокеры, необходимость прилагать дополнительные усилия и тд)
- не существует

Лучший UX пока на рынке "полей ввода" - это кнопка Google аутентификации

Ответить
1

не у всех есть аккаунт google

Ответить
0

пользовательский опыт не ограничивается удобством использования сайта/приложения/другой малознакомой фигни

Ответить
0

Ну вот вы сами описали "пользовательский опыт" несколькими разными понятиями. Все они верны и являются его составляющими. Поэтому проще сказать "пользовательский опыт", чем перечислять вот это вот всё.

Ответить
0

вот вам для ознакомления: https://m.habr.com/post/279493/

Ответить
0

1. Разговоры про формы, кнопочки и прочее- это классическое юзабилити интерфейса, которое можно измерить по факторам: эффективность, продуктивность и удовлетворенность.
2. Интуитивного понимания интерфейса не существует, люди учатся работать в любых интерфейсах и вырабатывают привычки, всегда.
3. Производительность это фактор системы, продуктивность -фактор пользователя.

UX - понятие несколько шире и включает в себя юзабилити. UX это не только про степень удобства использования интерфейса (юзабилити), но и про ощущения, получаемые в оффлайне от компании на всем CJM (общение с сотрудниками, ощущение принадлежности к определенной социальной группе, эмоции и движ) и все остальное, что по крупинке формирует мнение клиента о компании в целом через любой канал взаимодействия.

Ответить
0

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

Ответить
–1

Когда тыкаешь в интерфейс не задумываясь, и происходит магия которую ожидаешь.
Это UX интерфейса.

Ответить
0

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

Ответить
0

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

Но самый простой инпут очень слаб сам по себе. Инпут с саджестом/маской, дропдаун, радиокнопки, итр — это вот тру.

Про контраст и режим конрастности все правильно.

Ответить
0

Почему плейсхолдер писать можно, а юзер экспиренс нельзя?

Ответить
0

На минутку подумал, что я на хабре..

Ответить
–1

АБ тест запили и проверь. Потом уже статьи пиши.

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }