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