Плейсхолдер что это такое

Плейсхолдер: как его использовать и кому будет полезен

Плейсхолдер что это такое. Смотреть фото Плейсхолдер что это такое. Смотреть картинку Плейсхолдер что это такое. Картинка про Плейсхолдер что это такое. Фото Плейсхолдер что это такое

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

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

Плейсхолдер: определение термина и его роль в маркетинге

В маркетинге плейсхолдер – это подсказка, которая находится внутри поля формы. Например, можно добавить её в строке «Пароль». Тогда пользователю появится сообщение о том, что необходимо ввести не меньше 6 символов или выполнить иные условия для успешного заполнения данного пункта регистрации. Указанная технология задумывалась как опция, способная упростить ввод данных.

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

Разновидности плейсхолдеров

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

Плейсхолдер что это такое. Смотреть фото Плейсхолдер что это такое. Смотреть картинку Плейсхолдер что это такое. Картинка про Плейсхолдер что это такое. Фото Плейсхолдер что это такое

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

В дополнение к названию

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

Вместо заголовка

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

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

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

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

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

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

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

Основные рекомендации по использованию плейсхолдера:

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

4 проблемы плейсхолдеров в юзабилити

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

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

Следует учесть особенности автоперевода страниц сайта на другой язык. Во многие браузеры встроены автоматические переводчики. Они будут полезны иностранцам, которые хотят получить доступ к национальному сайту. Если эта функция включена, то некоторые части страницы не будут переведены. Переводчик не обрабатывает плейсхолдер, и такая подсказка останется непонятной. Как итог, человек не поймёт, какие данные ему вводить. А если отсутствуют лейблы, которые переводятся встроенной программой, то ситуация усугубится. Иностранец не сможет даже предположить, какие данные нужно вписывать в определённые поля.

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

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

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

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

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

Что делать с особенностями плейсхолдеров

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

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

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

Заключение

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

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

Источник

Плейсхолдеры: что это такое и стоит ли использовать

Плейсхолдер что это такое. Смотреть фото Плейсхолдер что это такое. Смотреть картинку Плейсхолдер что это такое. Картинка про Плейсхолдер что это такое. Фото Плейсхолдер что это такое

Плейсхолдер что это такое. Смотреть фото Плейсхолдер что это такое. Смотреть картинку Плейсхолдер что это такое. Картинка про Плейсхолдер что это такое. Фото Плейсхолдер что это такое

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

Плейсхолдер что это такое. Смотреть фото Плейсхолдер что это такое. Смотреть картинку Плейсхолдер что это такое. Картинка про Плейсхолдер что это такое. Фото Плейсхолдер что это такое

Что такое плейсхолдер

В маркетинге плейсхолдер (от англ. placeholders) – это подсказка внутри поля формы. Например, в поле «Пароль» можно вставить подсказку, что нужно ввести «Не менее 6 символов». Технология создавалась, чтобы облегчить процесс ввода данных.

Плейсхолдер что это такое. Смотреть фото Плейсхолдер что это такое. Смотреть картинку Плейсхолдер что это такое. Картинка про Плейсхолдер что это такое. Фото Плейсхолдер что это такое

Чем плейсхолдер отличается от лейбла

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

Плейсхолдер что это такое. Смотреть фото Плейсхолдер что это такое. Смотреть картинку Плейсхолдер что это такое. Картинка про Плейсхолдер что это такое. Фото Плейсхолдер что это такое

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

Плейсхолдер что это такое. Смотреть фото Плейсхолдер что это такое. Смотреть картинку Плейсхолдер что это такое. Картинка про Плейсхолдер что это такое. Фото Плейсхолдер что это такое

Текст плейсхолдера временно «занимает место» в документе при верстке. Его используют для предварительного просмотра шрифтов, расположения текста или изображений на веб-странице или другом документе. Например, разработчик электронного письма заполняет шаблон «фиктивным» текстом, чтобы приблизиться к окончательному макету. Один из наиболее распространенных плейсхолдеров – lorem ipsum.

В дополнение к заголовку

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

Вместо заголовка

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

Стоит ли использовать плейсхолдеры

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

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

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

Чтобы избежать ошибок при использовании плейсхолдера, помните:

Заключение

Источник

Плейсхолдеры в полях формы вредны

Плейсхолдер что это такое. Смотреть фото Плейсхолдер что это такое. Смотреть картинку Плейсхолдер что это такое. Картинка про Плейсхолдер что это такое. Фото Плейсхолдер что это такое

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

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

Лейблы и плейсхолдеры

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

Плейсхолдер что это такое. Смотреть фото Плейсхолдер что это такое. Смотреть картинку Плейсхолдер что это такое. Картинка про Плейсхолдер что это такое. Фото Плейсхолдер что это такоеЛейблы и плейсхолдеры

Плейсхолдеры, замещающие лейблы

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

Плейсхолдер что это такое. Смотреть фото Плейсхолдер что это такое. Смотреть картинку Плейсхолдер что это такое. Картинка про Плейсхолдер что это такое. Фото Плейсхолдер что это такоеХудший вариант: в этом примере, текст плейсхолдера используется вместо лейбла

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

1. Исчезновение текста плейсхолдера напрягает кратковременную память пользователя

Если пользователь забывает подсказку, а это часто происходит, пока люди заполняют длинные формы, ему приходится удалять то, что он написал, а в некоторых случаях кликать куда-нибудь вне этого поля, чтобы текст плейсхолдера отобразился снова. В идеальном мире пользователи будут полностью сфокусированы при заполнении формы. Но в реальности пользователи могут совершать несколько действий одновременно. У них открыто несколько разных вкладок, или они могут отвлечься на пришедший email или телефонный звонок. Для сложных задач им, возможно, потребуется остановиться, чтобы найти документ или номер заказа. Из нашего исследования юзабилити мобильных устройств, стало известно, что такие пользователи также часто отвлекаются, пока работают со своими устройствами. Таким образом, важно помочь пользователям вернуться к тому месту, где они остановились.

В простых, часто используемых формах с одним или двумя полями, таких как форма поиска или входа, напряжение памяти меньше, чем в случае со сложными или редкими формами. Это связано с тем, что в простых (знакомых) формах пользователь может догадаться, что он должен ввести. Хотя даже в простой форме входа без лейблов они могут не вспомнить, что им доступно для ввода: логин или email или только логин.

2. Без лейблов пользователь не сможет проверить свою работу до отправки формы

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

3. Когда появляется сообщение об ошибке, люди не знают как решить проблему

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

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

Люди используют кнопку табуляции для быстрого перемещения от одного поля к другому, и они не останавливаются для изучения следующего поля, пока не попадут на него.

5. На поля с надписью внутри обращается меньше внимания

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

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

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

7. Иногда пользователям приходится удалить текст плейсхолдера вручную

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

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

Текст плейсхолдера в дополнении к лейблам

Использование плейсхолдера совместно с лейблами — это шаг в правильном направлении. Лейблы вне полей формы делают важную информацию видимой всё время, в то время как текст плейсхолдера оставлен для дополнительной информации. Однако, даже при использовании лейблов размещение важных подсказок и инструкций внутри полей формы всё ещё может стать причиной одной из 7 проблем отмеченных выше, хотя и в меньшей степени. Если в некоторых полях требуется специальное описание важное для корректного заполнения формы, лучшим решением будет разместить этот текст вне поля так, чтобы он всегда был виден.

Плейсхолдер что это такое. Смотреть фото Плейсхолдер что это такое. Смотреть картинку Плейсхолдер что это такое. Картинка про Плейсхолдер что это такое. Фото Плейсхолдер что это такоеЛучше: здесь, текст плейсхолдера используется как подсказка в дополнении к лейблу

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

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

Заключение

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

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

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

Источник

Почему плейсхолдеры вредны и как с ними лучше работать

Плейсхолдер что это такое. Смотреть фото Плейсхолдер что это такое. Смотреть картинку Плейсхолдер что это такое. Картинка про Плейсхолдер что это такое. Фото Плейсхолдер что это такое

Использование плейсхолдеров — подсказок внутри поля для ввода текста — является частым явлением в современной веб-разработке. При этом многочисленные исследования показывают, что подсказки, сделанные в виде плейсхолдеров, затрудняют работу с формами для ввода текста, поскольку пользователям приходится также запоминать информацию, которая находится в нём. Кроме того, плейсхолдеры создают дополнительную нагрузку для пользователей с нарушением зрения и когнитивных способностей. Мы перевели статью Кэти Шервин из 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. Мнение администрации Хекслета может не совпадать с мнением автора оригинальной публикации.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *