Оставить комментарий
В статье рассказывается:
Плейсхолдеры появились давно. Это атрибут HTML5. Внешне выглядят как фразы или слова внутри формы для ввода данных. Плейсхолдеры подсказывают посетителю сайта, что нужно ввести в ту или иную строку. Судя по описанию, это полезный инструмент, но на самом деле все не так радужно.
Часто плейсхолдеры, наоборот, отпугивают посетителей сайта. Они не запоминают подсказки, так как те сразу пропадают, как только поставишь курсор мышки в строку. Многие и вовсе не видят текст плейсхолдера, так как он настолько блеклый, что ничего не разобрать. И это только часть минусов такого, казалось бы, полезного инструмента. Ниже мы приводим аргументы, чем он так плох и как выйти из положения.
Отличия плейсхолдера от лейбла и его виды
Для начала разберемся с понятием «плейсхолдер» — что это такое и чем отличается от лейбла. Данный термин происходит от английского слова placeholder и означает подсказку внутри поля веб-формы на сайте. Соответственно, этот элемент изначально предназначен для облегчения ввода пользовательских данных. Один из множества вариантов реализации — подсказка внутри поля «Пароль» (к примеру, «Не менее 8 символов»).
В идеале такая технология улучшает юзабилити веб-страницы с интерактивными формами. Однако при ее неправильном применении возникает обратный эффект: юзабилити ухудшается (возникают проблемы при заполнении полей). Как результат, теряется часть потенциальных клиентов.
Лейблы похожи на плейсхолдеры тем, что также помогают пользователю вводить правильные данные. Отличие заключается в расположении элементов: плейсхолдеры находятся внутри поля, а лейблы — снаружи. Собственно, отказ разработчиков от вторых в пользу первых обосновывается экономией места за счет сокращения размеров формы. Однако зачастую такое решение приводит к негативным последствиям.
Понятие «плейсхолдер» используется не только в интернет-маркетинге, но и в программировании. Правда, там оно имеет несколько другое значение. Под данным термином программисты понимают символ или совокупность символов, которые служат временным текстовым шаблоном перед заполнением поля актуальной информацией. К примеру, имеется лишь точное количество значений или переменных, но сами эти переменные и значения остаются неизвестными. В таких случаях вводится временный заполнитель, который затем будет заменен конкретными данными.
Часто эти шаблоны применяются при верстке сайтов с целью предварительной оценки выбранного шрифта и взаимного расположения текстового или графического контента на странице. Наиболее часто в качестве плейсхолдера используется фиктивный текст, начинающийся с латинских слов Lorem ipsum.
-
Дополнение заголовка
Вариант совмещения заголовка с текстом-заполнителем считается наиболее грамотным. Заголовочная строка здесь видна пользователю все время. Плейсхолдер пропадает, как только посетитель начинает вводить в поле информацию.
-
Замещение заголовка
В данном случае заполнитель используется вместо заголовка. Такое решение, являющееся наихудшим с точки зрения юзабилити, используется для уменьшения размеров формы и минимизации количества текста на странице.
7 причин не использовать плейсхолдеры, заменяющие лейблы
Иногда при верстке форм разработчики вместо лейблов используют текст плейсхолдера. HTML-страница в этом случае становится лаконичнее, упорядочивается текст, сокращаются размеры веб-формы. Однако такие благие намерения зачастую ухудшают качество сайта.
Приведем несколько главных причин, по которым менять лейблы на текст-заполнитель не следует.
-
Так как текст плейсхолдера пропадает при заполнении поля, пользователь вынужден помнить смысл этого текста в процессе ввода.
Если форма достаточно объемная, посетитель, заполняя ее, часто забывает подсказку. Поэтому ему приходится стирать введенные данные, чтобы текст появился вновь. В некоторых случаях требуется еще и кликнуть на пустое пространство, переведя таким образом фокус с поля.
Идеальное юзабилити предполагает, что пользователь будет полностью сосредоточен на заполнении формы. Но посетители сайтов могут выполнять несколько задач одновременно: отвечать на почту или телефонный звонок, писать сообщение в мессенджере, отвлекаться на другие сайты и т. д. В случае сложного действия, возможно, придется прервать процесс для поиска нужного документа или номера заказа. Подобным пользователям Интернета свойственно часто отвлекаться в процессе работы. И дизайн сайта должен помогать им возвращаться к месту остановки.
Если веб-форма относительно простая, содержащая 1-2 поля для ввода, проблема с запоминанием информации стоит не так остро, как в случае особо сложных или нестандартных форм. А в знакомом интерфейсе подсказка зачастую и вовсе не нужна — посетитель сам догадается, что нужно вводить. Но даже в простых формах это не всегда очевидно. Например, посетитель сайта не помнит, можно ли в поле «Логин» вводить свой email. И вот здесь как раз-таки нужен лейбл.
-
При отсутствии лейбла нельзя перед отправкой проверить, корректно ли введена информация.
Отсутствие лейблов не позволяет пользователю убедиться в правильности заполнения формы. Ситуацию может усугубить поведение браузера с активированной функцией автоматического заполнения полей.
Есть вероятность, что в форму будет внесена неверная информация. И тогда, чтобы проверить корректность автозаполнения по плейсхолдеру, пользователю придется стирать текст и вводить его заново. Но часто посетители даже не задумываются о возможно совершенной ошибке и не проверяют введенные данные.
-
При появлении предупреждения об ошибке пользователь не знает, как решить проблему.
Полностью заполненная форма без лейблов вне полей ввода никак не покажет, какое поле может быть заполнено некорректно. В связи с этим пользователь вынужден будет сам поочередно удалять данные для открытия плейсхолдера и исправления ошибки.
-
Пропадание текста-заполнителя при активации поля может являться раздражающим фактором для пользователей, использующих клавиатуру для навигации.
Многим удобнее перемещаться по элементам страницы с помощью клавиши Tab. При этом они сосредоточены только на том поле, где в данный момент находится курсор.
-
Содержимое заполненных полей привлекает меньше внимания.
Как показывает практика, пользователи обращают внимание в первую очередь на незаполненные элементы ввода. Соответственно, переизбыток плейсхолдеров создаст некоторые неудобства, так как потребует больше времени на нахождение уже заполненных полей. Худший сценарий поведения заключается в том, что важные элементы могут быть пропущены посетителем, а это в перспективе негативно отразится на бизнесе.
-
Из-за внешнего сходства плейсхолдера с автоматически заполненными данными может возникнуть путаница.
Если в поле уже содержится какой-то текст, пользователь может предположить, что сюда ему вводить уже ничего не надо. Некоторые неопытные посетители путают вспомогательный заполнитель со значением поля по умолчанию и в итоге оставляют это поле незаполненным.
-
В некоторых случаях плейсхолдеры не работают как полагается и поле приходится очищать, прежде чем вводить нужные данные.
Некорректно запрограммированный заполнитель не исчезнет при активации поля курсором. В таком случае пользователь видит перед собой обычный редактируемый текст и вынужден его удалять. Это ухудшает работу посетителя с формой и, как следствие, увеличивает стоимость такого взаимодействия.
Иногда плейсхолдер при попадании в поле курсора не исчезает полностью, а тускнеет. Это, к сожалению, пока редко встречающийся вариант реализации, поэтому пользователям он не знаком в достаточной мере. А значит, они будут считать текст заполнителя обычным редактируемым набором символов, который нужно удалить. В результате посетитель сайта совершает ряд лишних действий, тратит дополнительное время, пока не поймет, что от него требуется.
3 проблемы юзабилити с плейсхолдером
Кроме описанных выше трудностей имеются также проблемы с юзабилити. Плейсхолдеры были внедрены сравнительно недавно, а потому эта технология имеет несколько существенных недостатков. Приведем три характерных примера:
-
По умолчанию заполнитель выглядит как светло-серый текст внутри поля. Изменить цвет плейсхолдера, используя возможности CSS, в большинстве случаев не представляется возможным. Это достаточно существенная проблема в первую очередь для людей со слабым зрением, так как такой текст очень плохо читается на светлом фоне.
-
Внедрение плейсхолдеров в форму заставляет пользователей напрягать краткосрочную память и требует от них повышенного внимания при заполнении. Людям, обладающим когнитивными расстройствами, это доставляет дополнительные проблемы и служит серьезным препятствием.
-
Для слабовидящих и слепых существуют специализированные программы, озвучивающие текст на сайте. На сегодняшний день не все скринридеры способны адекватно воспринимать текст плейсхолдера, а значит, пользователи с проблемами зрения могут пропустить потенциально важную подсказку.
Подводные камни использования плейсхолдеров
Несмотря на перечисленные преимущества, при использовании плейсхолдеров важно помнить о некоторых нюансах. Расскажем о неочевидных на первый взгляд моментах.
Особенности при автопереводе страницы на другой язык
В некоторые браузеры (например, Chrome) встроены автоматические переводчики. Если пользователь активирует эту функцию, некоторые атрибуты страницы не переведутся. Во многих случаях это скорее хорошо, поскольку неточности перевода могут исказить структуру сайта.
Не обрабатываются переводчиком в том числе и плейсхолдеры. Если поле не снабжено дополнительным лейблом, подсказка внутри поля остается на языке оригинала. А пользователь, запросивший перевод, может не знать этот язык и не понимает в таком случае, что именно нужно вводить.
Иногда родной язык пользователя определяется системой по местонахождению устройства. И браузер предлагает на основе IP-адреса клиента перевести страницу. Но человек может использовать устройство на языке, отличном от родного. Веб-разработчикам и дизайнерам следует учитывать такие случаи, грамотно составляя семантику сайта.
Проблемы с цифровой грамотностью
Количество активных пользователей Интернета стремительно растет. Веб-дизайнеры призваны обеспечивать удобство пользования сайтами и приложениями для людей всех возрастов. Если человек впервые оказывается в Интернете вообще и на определенном ресурсе в частности, разработчики должны учитывать это.
Среди пользователей Сети появляется все больше людей в том числе преклонного возраста. Цифровая грамотность старшего поколения со временем растет, но также увеличивается количество проблем с доступностью, которые необходимо решать.
Безусловно, многие новички незнакомы с функцией подсказки внутри поля (не говоря уже о самом термине «плейсхолдер»). Видя такой текст, они считают поле уже заполненным и не понимают, что от них еще требуется и почему форма не отправляется.
Если поле является обязательным для заполнения, то страница просто-напросто не пустит пользователя дальше, сообщив об ошибке. Если же заполнять элемент ввода необязательно, есть риск не получить от пользователя какую-то важную информацию.
Удобство пользования
Вспомогательный заполнитель представляет собой обычный текст, чего порой бывает недостаточно для полной и понятной подсказки. Иногда приходится соответствующим образом менять стили плейсхолдера, добавлять дополнительные теги, иконки и прочие атрибуты.
Плейсхолдер также имеет ограничение по количеству символов строки, которое зависит от длины поля. Мобильные версии сайта зачастую сужают элемент ввода, скрывая тем самым часть подсказки.
Правильное использование плейсхолдеров
Внедряя текст-заполнитель в код сайта, необходимо помнить о важных принципах:
-
плейсхолдер не является полноценной заменой лейблу;
-
использовать данный элемент желательно лишь в простых формах (к примеру, для ввода имени пользователя и пароля);
-
цвет фона нужно делать таким, чтобы заполнитель легко читался на нем;
-
поддержка данной технологии реализована еще не на всех браузерах.
Идеальное решение в применении плейсхолдера
Текст-заполнитель размещается между лейблом и полем для ввода:
«Ваш ID сотрудника. Его можно найти в вашем рабочем профиле интранета. Пример: a1234567–89».
Что дает это решение:
-
обеспечивается иерархия, связанная как визуально, так и структурно. Заголовок говорит о предназначении поля, далее идет подсказка для правильного заполнения с примером, и завершается блок пустым полем для ввода;
-
плейсхолдер рассматривается браузером как обычный текст и при необходимости переводится на другой язык;
-
пользователь не рассматривает текст-подсказку как уже введенные данные;
-
текст-заполнитель легко читается даже в плохих условиях;
-
подсказка не пропадет при заполнении поля;
-
текст можно стилизовать инструментами CSS, а также наполнять семантическими тегами.
Плейсхолдер, пример которого мы разобрали, можно было бы разместить и под полем для ввода. Однако на мобильных устройствах в этом месте обычно возникает цифровая клавиатура, которая может скрыть часть подсказки:
Реализуется данное решение следующим кодом:
Можно заметить не очень большое отличие от стандартной связки for + id. Здесь label программно связан с элементом input через id, имеющий значение employee-id. В свою очередь между label и input расположен атрибут p, который служит заменой атрибуту placeholder.
У читателя может возникнуть вполне закономерный вопрос: «А не проще ли выполнить стилизацию плейсхолдера в виде заголовка?» Ведь тем самым мы избавляемся от лишней работы. Ответ на этот вопрос простой и логичный: разработчик должен упрощать жизнь не себе, а потенциальному посетителю.
Вернемся к коду. С помощью атрибута aria-describedby мы связываем элементы input и p, что можно использовать, чтобы задать алгоритм прочтения скринридером. В таком случае контент внутри тега p гарантированно будет читаться последним, а заголовок и данные, запрашиваемые от пользователя, озвучат в первую очередь.
Данное решение обеспечивает полноценную доступность сайта для людей с нарушением зрения. Программа, читающая текст, проинформирует незрячего пользователя, что именно от него требуется, и поможет при заполнении форм, озвучивая плейсхолдеры. Остальные посетители, не испытывающие серьезных проблем со зрением, получат абсолютно ту же информацию, просто прочитав ее.
Текст-заполнитель никак не привязывается к заголовку, поэтому им легко управлять. Например, можно указать скринридеру, чтобы он пропускал подсказки либо, наоборот, озвучивал каждую дважды. Если же сделать плейсхолдер частью заголовка, последний станет чересчур громоздким, трудно воспринимаемым на слух.
Реализация в виде кода:
Веб-форма играет важную роль в структуре сайта, напрямую влияет на конверсию сайта и в результате на прибыль владельца. Поэтому необходимо обеспечить ее доступность и понятность. Текст-подсказка укажет пользователю, какие вводить данные, но это будет полноценно работать лишь в комбинации с лейблами.
