Плейсхолдер что это пример
Почему плейсхолдеры вредны и как с ними лучше работать
Использование плейсхолдеров — подсказок внутри поля для ввода текста — является частым явлением в современной веб-разработке. При этом многочисленные исследования показывают, что подсказки, сделанные в виде плейсхолдеров, затрудняют работу с формами для ввода текста, поскольку пользователям приходится также запоминать информацию, которая находится в нём. Кроме того, плейсхолдеры создают дополнительную нагрузку для пользователей с нарушением зрения и когнитивных способностей. Мы перевели статью Кэти Шервин из Nielsen Norman Group — о неоднозначности плейсхолдеров, а также об их правильном использовании.
В идеальном мире контекстные подсказки существуют для того, чтобы пользователю было проще понять, какие данные вводить в определенные формы. Это позволяет увеличить конверсию для бизнеса, а для самих пользователей делает интерфейс более дружелюбным. Один из способов давать пользователям такие подсказки — использовать текст внутри самих форм, который называется плейсхолдером. Часто их использование комбинируют с лейблами — текстом, который находится над формой для заполнения.
Плейсхолдеры и лейблы
Лейблы всегда находятся снаружи формы и сообщают пользователю, что в ней нужно вводить. Плейсхолдеры же располагаются внутри поля для ввода текста и, как правило, являются либо конкретным примером ввода, либо подсказкой и дополнительной информацией. При этом исчезают они только тогда, когда пользователь начинает вбивать текст в эту форму. При совсем плохих случаях текст не исчезает даже в таком случае и его приходится убирать вручную.
Лейбла нет, но есть плейсхолдеры
В интернете можно часто встретить формы, где нет лейблов — вместо них разработчики и дизайнеры вставляют плейсхолдеры. Обычно это объясняется избавлением от лишнего визуального мусора, однако на деле приводит к снижению качества работы с формой.
Самый плохой вариант — использование только плейсхолдера
7 причин, почему нельзя использовать плейсхолдер вместо лейбла
1. Полное исчезновение текста плейсхолдера нагружает кратковременную память пользователя
В случае, если пользователь забыл содержание текста подсказки, ему придется удалить уже введенный текст, а в некоторых случаях еще и щёлкнуть мышкой вне поля, чтобы текст плейсхолдера снова отобразился. В идеальном мире пользователь должен сосредоточиться только на заполнении этой формы, однако в реальности — люди многозадачны и могут отвлекаться на различные факторы: звонки по телефону, другие открытые вкладки или сообщение в мессенджере. Для некоторых сложных задач пользователям приходится даже идти искать документы, поэтому разработчикам необходимо помочь человеку без проблем продолжить заполнение формы с того места, где он остановился.
В простых и часто используемых формах с одним или двумя полями ввода текста, таких как строка поиска или форма логина-пароля, нагрузка на краткосрочную память пользователя намного меньше. При этом в большинстве случаев пользователь интуитивно понимает, что ему необходимо ввести в этом поле. Однако даже с формой для ввода логина иногда могут возникнуть проблемы — кто-то просит адрес электронной почты, а кто-то — имя пользователя.
2. Отсутствие лейбла мешает пользователю проверить правильность введенных данных
Ещё одна проблема использования плейсхолдеров без лейбла в том, что пользователь не может проверить, правильно ли он вводит данные и ту ли форму использует для этого. Кроме того, браузеры, которые автоматически вставляют сохраненную пользователем информацию, могут неправильно её использовать и вставлять в ненужные формы.
3. При появлении ошибки пользователю сложнее понять, что именно нужно исправить
Если при заполнении большого количества форм появилась ошибка, пользователю достаточно сложно понять, где она находится и что именно нужно исправить.
4. Исчезающие плейсхолдеры раздражают пользователей, которые используют клавиатуру для переключения между полями
Некоторые пользователи используют клавишу Tab для быстрого перехода к следующему полю ввода. Использование плейсхолдеров приводит к тому, что пользователи не успевают прочитать текст в форме ввода.
5. Поля, в которых уже есть какой-то текст, менее заметны
Многочисленные исследования показывают, что человеческий глаз лучше воспринимает пустые поля, чем формы, в которых уже есть какой-то текст. Использование плейсхолдеров приведет к тому, что пользователь будет дольше искать необходимое поле для ввода данных, либо вовсе не заметит его и уйдет со страницы, что негативно скажется на конверсии.
6. Плейсхолдеры похожи на данные, которые были введены автоматически
Пользователи могут спутать текст плейсхолдеров с автоматически введенными данными, либо решить, что это значение по умолчанию, и также пропустить это поле.
7. Иногда текст плейсхолдеров приходится удалять вручную
Некоторые разработчики по какой-то причине не делают автоматическое удаление текста плейсхолдеров при переходе пользователя в форму заполнения. В таких случаях человеку приходится вручную удалять этот текст, прежде чем ввести настоящие данные. Это негативно влияет на отношение человека к продукту и создает лишние затруднения и сомнения.
Иногда текст плейсхолдера тускнеет, когда пользователь переходит в поле заполнения формы, однако это тоже мешает вводить новые данные и отвлекает от заполнения.
Использование плейсхолдера вместе с лейблом
Одновременное использование плейсхолдера вместе с лейблом — шаг в верном направлении. В таких случаях лейблы, которые находятся за пределами формы, несут важную информацию и видны в любое время, в то время как плейсхолдеры нужны только для дополнительных подсказок. Несмотря на это, даже такое их использование может привести к проблемам, указанным выше. Поэтому, даже если для заполнения полей необходимо знать еще какую-то информацию, лучше разместить её вне формы.
Использование двух элементов уже улучшает качество восприятия
Плавающие плейсхолдеры
В современной веб-разработке часто используют плавающие плейсхолдеры, которые уменьшаются при переходе пользователя в поле ввода. Несмотря на явный прогресс в удобстве, это всё равно не решает проблемы из 5 и 6 пунктов, а также сложности из следующего блока.
Плейсхолдеры и их доступность для всех пользователей
Еще одна проблема плейсхолдеров — они доступны для восприятия не всех пользователей.
Не все сервисы чтения с экрана могут воспринимать плейсхолдеры — это приводит к тому, что слабовидящие пользователи просто не смогут самостоятельно заполнить необходимые формы.
Стандартный цвет плейсхолдеров практически не контрастирует с большинством фонов. Их использование становится проблемой даже для людей с ослабленным зрением.
Необходимость запоминать определенные данные и нагрузка на краткосрочную память может отпугнуть пользователей с когнитивными и моторными нарушениями, особенно когда человеку перед заполнением поля приходится вручную удалять текст плейсхолдера.
Для того, чтобы пользователи не путались при заполнении форм и не уходили с сайта на этапе ввода данных, лучше всего использовать явные подсказки, которые находятся за пределами поля для ввода.
Лучше всего: лейбл и подсказка находятся за пределами поля и всегда видны пользователю
Подсказки и инструкции должны находиться рядом с полем для ввода — не слишком далеко от них, чтобы пользователям не приходилось тратить дополнительное время на их поиск. При этом их текст должен быть простым и помогать пользователям, а не путать их.
В современной верстке существует множество нюансов, о которых мы подробно рассказываем на наших курсах в профессии «Верстальщик». Они подходят как для начинающих разработчиков, так и для людей, которые знакомы с HTML и CSS.
Адаптированный перевод статьи Place holders in Form Fields Are Harmful с сайта Nngroup by Katie Sherwin. Мнение администрации Хекслета может не совпадать с мнением автора оригинальной публикации.
Плейсхолдеры: что это такое и стоит ли использовать
Плейсхолдер способен улучшить или, наоборот, ухудшить юзабилити веб-формы на сайте. При неправильном его использовании можно потерять потенциальных клиентов, у которых возникнут проблемы при заполнении формы. Нужны ли плейсхолдеры на сайте – разберем в статье.
Что такое плейсхолдер
В маркетинге плейсхолдер (от англ. placeholders) – это подсказка внутри поля формы. Например, в поле «Пароль» можно вставить подсказку, что нужно ввести «Не менее 6 символов». Технология создавалась, чтобы облегчить процесс ввода данных.
Чем плейсхолдер отличается от лейбла
Лейблы так же, как и плейсхолдеры, сообщают пользователю, что нужно ввести. Только находятся они снаружи формы, а плейсхолдеры внутри поля для ввода текста. Отказываясь от лейблов, веб-разработчики хотят сократить размер формы. Но часто это приводит к негативным последствиям.
Термин встречается не только в интернет-маркетинге. В компьютерном программировании это символ, слово или строка символов, которые временно заменяют окончательные данные. Например, программист знает, что нужно определенное количество значений или переменных, но еще не знает, что вводить. Он использует заполнитель как временное решение, пока не будет конкретных данных.
Текст плейсхолдера временно «занимает место» в документе при верстке. Его используют для предварительного просмотра шрифтов, расположения текста или изображений на веб-странице или другом документе. Например, разработчик электронного письма заполняет шаблон «фиктивным» текстом, чтобы приблизиться к окончательному макету. Один из наиболее распространенных плейсхолдеров – lorem ipsum.
В дополнение к заголовку
Использование плейсхолдера вместе с заголовком – наилучший вариант. Заголовок поля остается видимым все время, и пользователь будет видеть нужную информацию. А плейсхолдер будет служить дополнительной подсказкой и исчезнет, когда пользователь начнет заполнять форму.
Вместо заголовка
В худшем варианте текст-заполнитель используется вместо заголовка. Это делают для того, чтобы уменьшить размер формы и избавиться от лишнего текста.
Стоит ли использовать плейсхолдеры
Плейсхолдер можно использовать, но необходимо, чтобы текст-заполнитель облегчал заполнение формы, а не усложнял. Для этого обратите внимание на проблемы, которые негативно сказываются на юзабилити и конверсии :
Таким образом, применение плейсхолдеров вместо лейблов создает проблемы и ошибки, нагружает людей с нарушением зрения и слабой памятью.
Как правильно использовать плейсхолдер
Чтобы избежать ошибок при использовании плейсхолдера, помните:
Заключение
Плейсхолдеры в полях формы вредны
Вкратце: Использование плейсхолдеров внутри полей формы усложняет процесс вспоминания, какую информацию необходимо было внести в поле ввода. Из-за этого становится труднее процесс проверки и исправления ошибок. Это также может создать дополнительные трудности для людей с плохим зрением или когнитивными нарушениями.
Описания и подсказки могут объяснить, что необходимо вводить внутри каждого поля, и, следовательно, улучшить заполняемость формы и повысить её конверсию. Есть много способов показать подсказки. Самая частая реализация — это вставка плейсхолдеров внутрь поля. К сожалению, тестирование на пользователях показывает, что плейсхолдеры в полях формы часто вредят юзабилити больше, чем помогают ему.
Лейблы и плейсхолдеры
Лейблы говорят пользователям, какая информация должна находиться в данном поле, и обычно располагаются вне этого поля. Текст плейсхолдера, находящийся внутри поля формы, — это дополнительная подсказка, описание или пример требуемых данных для этого поля. Эти подсказки, как правило, скрываются, когда пользователь печатает в этом поле.
Лейблы и плейсхолдеры
Плейсхолдеры, замещающие лейблы
В некоторых формах лейблы заменяются расположенным внутри текстом плейсхолдера. Это помогает уменьшить хаос на странице или сократить размер формы. Несмотря на то, что этот подход основан на хороших намерениях, наши исследования показывают, что это влечёт за собой много негативных последствий.
Худший вариант: в этом примере, текст плейсхолдера используется вместо лейбла
Ниже приводятся 7 основных причин, почему плейсхолдеры не должны использоваться, как замена для лейблов.
1. Исчезновение текста плейсхолдера напрягает кратковременную память пользователя
Если пользователь забывает подсказку, а это часто происходит, пока люди заполняют длинные формы, ему приходится удалять то, что он написал, а в некоторых случаях кликать куда-нибудь вне этого поля, чтобы текст плейсхолдера отобразился снова. В идеальном мире пользователи будут полностью сфокусированы при заполнении формы. Но в реальности пользователи могут совершать несколько действий одновременно. У них открыто несколько разных вкладок, или они могут отвлечься на пришедший email или телефонный звонок. Для сложных задач им, возможно, потребуется остановиться, чтобы найти документ или номер заказа. Из нашего исследования юзабилити мобильных устройств, стало известно, что такие пользователи также часто отвлекаются, пока работают со своими устройствами. Таким образом, важно помочь пользователям вернуться к тому месту, где они остановились.
В простых, часто используемых формах с одним или двумя полями, таких как форма поиска или входа, напряжение памяти меньше, чем в случае со сложными или редкими формами. Это связано с тем, что в простых (знакомых) формах пользователь может догадаться, что он должен ввести. Хотя даже в простой форме входа без лейблов они могут не вспомнить, что им доступно для ввода: логин или email или только логин.
2. Без лейблов пользователь не сможет проверить свою работу до отправки формы
В отсутствии лейблов пользователям становится невозможно понять, верно ли они заполнили форму. Помимо этого браузеры, автоматически заполняя поля формы, могут заполнить их неверной информацией. Если не будет лейблов или специальные инструкции перестанут отображаться, пользователям придётся проверять указанное значение, удаляя введённый ранее текст. В действительности же, многие даже не осознают, что существует вероятность ошибки, и они не будут прилагать дополнительные усилия для двойной проверки.
3. Когда появляется сообщение об ошибке, люди не знают как решить проблему
Если форма была заполнена, но нет лейблов или инструкций, находящихся вне полей формы, тогда пользователям придётся поочерёдно возвращаться к каждому полю, чтобы открыть описания и исправить ошибку.
4. Исчезновение текста плейсхолдера, когда курсор помещается в поле формы, раздражает пользователей, которые используют для навигации клавиатуру
Люди используют кнопку табуляции для быстрого перемещения от одного поля к другому, и они не останавливаются для изучения следующего поля, пока не попадут на него.
5. На поля с надписью внутри обращается меньше внимания
Изучение движения глаз показывает, что взгляд пользователей будет сконцентрирован на пустых полях. Как минимум им будет неудобно, так как они потратят больше времени на обнаружение непустых полей. В худшем же случае, полностью пропустят такое поле, а это уже потенциальная убивающая бизнес катастрофа.
6. Пользователи могут перепутать плейсхолдер с данными, которые автоматически заполнили поле
Когда в поле уже есть какой-то текст, пользователи могут не осознать, что им надо туда что-то вводить. Некоторые пользователи могут посчитать, что текст плейсхолдера является значением по умолчанию и полностью пропускают это поле.
7. Иногда пользователям приходится удалить текст плейсхолдера вручную
Иногда плейсхолдеры не исчезают, когда пользователи помещают курсор в поле. Если плейсхолдер остаётся внутри поля как редактируемый текст, пользователям придётся вручную выделять его и удалять. Это создаёт ненужную нагрузку на пользователей и увеличивает стоимость взаимодействия с заполняемой формой.
Бывает, что плейсхолдер тускнеет при размещении курсора в текстовом поле. К сожалению, такой шаблон взаимодействия достаточно редок и пользователи незнакомы с ним: некоторые до сих пор считают, что им придётся вручную удалять этот текст. Это обычно приводит к нескольким неудачным попыткам и множеству кликов до того, как они поймут, что можно начать печатать прямо по потускневшему тексту.
Текст плейсхолдера в дополнении к лейблам
Использование плейсхолдера совместно с лейблами — это шаг в правильном направлении. Лейблы вне полей формы делают важную информацию видимой всё время, в то время как текст плейсхолдера оставлен для дополнительной информации. Однако, даже при использовании лейблов размещение важных подсказок и инструкций внутри полей формы всё ещё может стать причиной одной из 7 проблем отмеченных выше, хотя и в меньшей степени. Если в некоторых полях требуется специальное описание важное для корректного заполнения формы, лучшим решением будет разместить этот текст вне поля так, чтобы он всегда был виден.
Лучше: здесь, текст плейсхолдера используется как подсказка в дополнении к лейблу
Плейсхолдеры и доступность
Последняя важная проблема, которую надо рассмотреть, заключается в том, что текст плейсхолдера в целом плох для доступности. Конечно, специальное ПО и современные браузеры улучшаются, но впереди у них ещё долгий путь. Вот три крупнейшие проблемы, связанные с доступностью:
Заключение
Чтобы не было риска получить пользователей, застрявших на заполнении форм или теряющих драгоценной время на понимании, как они работают, лучшим решением будет иметь понятные и видимые лейблы, располагающиеся вне пустых полей формы.
Самый лучший вариант: лейблы и подсказки расположены вне поля формы и всегда видны для пользователя
Подсказки и инструкции также должны быть видны постоянно и должны располагаться вне поля для ввода. Формы являются важной составляющей многих конверсионных целей, и вам стоит убедиться, что ваши пользователи могут заполнить их быстро и аккуратно.
Плейсхолдеры: виды и решения для применения
В статье мы расскажем:
Плейсхолдеры появились давно. Это атрибут 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 гарантированно будет читаться последним, а заголовок и данные, запрашиваемые от пользователя, озвучат в первую очередь.
Данное решение обеспечивает полноценную доступность сайта для людей с нарушением зрения. Программа, читающая текст, проинформирует незрячего пользователя, что именно от него требуется, и поможет при заполнении форм, озвучивая плейсхолдеры. Остальные посетители, не испытывающие серьезных проблем со зрением, получат абсолютно ту же информацию, просто прочитав ее.
Текст-заполнитель никак не привязывается к заголовку, поэтому им легко управлять. Например, можно указать скринридеру, чтобы он пропускал подсказки либо, наоборот, озвучивал каждую дважды. Если же сделать плейсхолдер частью заголовка, последний станет чересчур громоздким, трудно воспринимаемым на слух.
Реализация в виде кода:
Веб-форма играет важную роль в структуре сайта, напрямую влияет на конверсию сайта и в результате на прибыль владельца. Поэтому необходимо обеспечить ее доступность и понятность. Текст-подсказка укажет пользователю, какие вводить данные, но это будет полноценно работать лишь в комбинации с лейблами.