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

Плейсхолдер: что это такое и как его применять?

Плейсхолдер (калька с английского «placeholder», «заполнитель») – это краткие описания или подсказки текстового формата, которые помогают пользователю сайта вносить данные в какие-либо формы. Актуальнее всего они для различных интернет-магазинов, где нужно вводить информацию для оплаты товара или проходить регистрацию. Внешне плейсхолдер обычно выглядит как текст, расположенный внутри пока еще пустого поля ввода (телефон, адрес, ФИО и т.д.). Иногда он выглядит похоже на то, что должно быть введено (например, в поле ФИО может быть плейсхолдер «Иванов Иван Иванович»), иногда содержит только подсказку (например, в поле ввода пароля часто пишут требования к нему, вроде «Пароль должен содержать не менее 8 символов, строчные и заглавные буквы, цифры и спецсимволы»).

Зачем нужен плейсхолдер

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

С точки зрения SEO-специалистов, у плейсхолдеров есть еще одна полезная функция – они улучшают показатель конверсии сайта.

Виды плейсхолдеров

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

1. Стандартный. Плейсхолдер, дополняющий заголовок формы; заголовок располагается вверху, а заполнитель – внутри строки. Подсказки показывают, какую информацию пользователь должен ввести в каждое поле.
   
2. Адаптивный (плавающий), он же Floating Labels. Заголовок располагается внутри поля формы. Как только пользователь кликает по полю, оно становится активным и заголовок плейсхолдера перемещается в верхнюю часть строки. Плавающий заполнитель считается одним из лучших вариантов, поскольку сохраняет функциональность и при активации поля, а не просто исчезает. Кроме того, если в несколько полей вводится скрытая конфиденциальная информация, полезно помнить, где что находится.
   
3. Заголовочный. Используется в ситуациях, когда надо уменьшить текст на странице или размер непосредственно формы, что актуально для мобильных приложений. Однако сам по себе заголовочный плейсхолдер на сайте – это тревожный звоночек: обычно он приводит к понижению процента заполнения форм.
   
4. Заполнитель-метка. Подсказка, расположенная над полем ввода, а не внутри него. Еще более радикальный вариант – это размещение исчезающей метки в поле ввода, которая появится снова, если удалить весь текст. Это позволяет визуально уменьшить количество элементов формы и ее размер. Но считается, что это такой же плохой способ использования плейсхолдеров, что и в случае с заголовочными заполнителями. Лучше всего размещать неисчезающую метку над полем.
   
5. Заполнитель-пример. Один из самых функциональных вариантов. Пример текста расположен вне поля, чтобы постоянно быть перед глазами (чего не хватает плейсхолдерам-меткам). Считается, что такой вид заполнителя может несколько запутывать пользователя, вызывая расфокусировку внимания – иногда не сразу понятно, что из показанного на экране введено вручную, а что является подсказкой. Чаще всего эту проблему решают, выводя плейсхолдер-пример уменьшенным шрифтом.
   
6. Всплывающая подсказка. Плейсхолдеры такого формата неудобны, поскольку много информации во всплывающее микроокно не вписать, а при отведении курсора или сдвиге его фокуса подсказка исчезает – пользователь почти никогда не готов к появлению всплывающих строк, и поэтому с первого раза прочесть все не успевает, приходится снова ловить фокус и заниматься перечитыванием. Более того, во избежание перегрузки формы информацией всплывающая подсказка обычно исчезает спустя несколько секунд, даже если пользователь не сдвигал курсор в сторону. В итоге плейсхолдер подобного вида скорее вызывает раздражение, чем помогает.
   
7. Дополнительный ярлык. Чтобы не впихивать в заголовок поля слишком длинную строку, заполнитель нередко разделяют на несколько частей, вставляя каждую как отдельный ярлык. Такая разбивка упрощает восприятие, но только в том случае, если ярлыков немного. Многие SEO-специалисты считают, что лучше сделать текст плейсхолдера длиннее, чем разбивать его (даже всего на два ярлыка). Одинарная метка ввода часто повышает юзабилити формы больше, чем дополнительные ярлыки.
   

Правильное использование плейсхолдеров

• Заголовок формы и текст-заполнитель – это разные объекты, требующие разного подхода. Использующий placeholder сайт должен иметь отдельный заголовок на форме, совмещать их считается большой ошибкой.
• Подсказку нужно ограничивать по длине и сложности формулировок. Слишком объемный или запутанный плейсхолдер скорее сбивает пользователя с толку, чем помогает.
• Необходимо учитывать уровень яркости и цветности на разных экранах. На малоконтрастных (так называемых приглушенных) экранах с низкой яркостью слишком светлые подсказки могут быть не видны. Кроме того, если смотреть под углом, ЖК-устройства еще сильнее «скрывают» чрезмерно светлые надписи. При этом разработчики нередко делают подсказки светлыми, чтобы они отличались от вводимого текста и не слишком бросались в глаза. Помните: плейсхолдер должен быть такой яркости, чтобы его можно было увидеть на любом экране и под любым углом. Пусть лучше он будет чрезмерно ярким – если пользователю требуется напрягать зрение, чтобы рассмотреть подсказку, скорее всего, он ее не прочитает.

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

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

Возможные минусы заполнителей

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

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

Что такое плейсхолдеры и какие они бывают

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

Поставьте продажи на рельсы OkoCRM

OkoCRM сама собирает заявки, пишет письма и sms, звонит клиентам и закрывает сделки. Это волшебно! Первые 7 дней бесплатно.

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

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

Часто возникает вопрос — placeholder что это. Проще показать на примере.

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

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

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

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

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

Стандартный

Самый популярный вариант — плейсхолдер в поле, а над ним заголовок. Выглядит это так.

Атрибут подсказывает, что в поля надо вписать логин и пароль.

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

Floating Labels (адаптивный или плавающий)

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

Плейсхолдер: пример всплывающей подсказки.

Плейсхолдер в качестве заголовка

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

Можно использовать заголовок без подсказки, но подсказку без заголовка — нежелательно.

Заполнитель в качестве примера

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

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

Заполнитель в виде всплывающей подсказки

Бывает, возле поля делают всплывающие подсказки. Например, сколько знаков должно быть в пароле. Есть несколько вариантов таких плейсхолдеров.

Лучше если подсказка всплывает рядом с полем: вверху, сбоку, в облаке.

Заполнитель в виде дополнительных ярлыков

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

В таком варианте placeholder тоже лучше поставить снаружи поля.

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

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

Если подсказка внутри поля и его заполнили неправильно, трудно понять что именно не так. Допустим, в плейсхолдере указано: нужно составить пароль из 8 символов, используя заглавные буквы. Человек не внимательно прочитал, вбил пароль, а ему выдаёт ошибку. Чтобы перечитать подсказку, нужно стереть пароль, а это неудобно. Использовать placeholder полезно, это упрощает заполнение форм. Но для этого подсказки должны быть удобными.

Автоматизируйте продажи в OkoCRM

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

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

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

1. Заголовок над ячейкой — обязателен. Одних подсказок мало
2. Плейсхолдеры лучше делать рядом с полем для заполнения: внизу, вверху, сбоку. Или использовать всплывающие подсказки
3. Подсказки должны быть контрастные, чтобы люди легко их читали
4. Подсказки нужно адаптировать для всех устройств: планшетов, ПК, смартфонов
5. Нужно использовать шрифты, которые характерны для сайта
6. Лучше не делать исчезающие подсказки в поле для заполнения

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

Placeholder — один из базовых элементов MODX, бесплатной программы для управления сайтом. Стилизовать подсказки можно в HTML и CSS. Есть и готовые плагины вроде PlaceholderApi. Но для этого всё равно нужны минимальные знания вёрстки сайтов.

Чтобы не мучаться с созданием плейсхолдеров, плагинами для их стилизации и не писать свой код, есть готовые подсказки для форм. Например, в Dadata разработали сервис «Подсказки», который помогает быстро заполнять сложные формы: хоть 10 полей, хоть 20.

Работает это так: человек вводит ФИО и ИНН, Dadata подтягивает остальные реквизиты из официальных источников: справочников или ЕГРЮЛ. Не надо сидеть и набивать циферки вручную. Клиенты будут довольны.

Вот как выглядят подсказки в Dadata. И не придётся писать код «input placeholder».

А если подключить Dadata к OkoCRM, то клиенту достаточно ввести ФИО и ИНН в форму на сайте → БИК, номер счёта и другие реквизиты Dadata подтянет и сохранит в OkoCRM. Вы будете знать всё о своих клиентах.

Подытожим

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

Новости OkoCRM в Telegram

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

Поделиться:
А вы что думаете?
Добавить комментарий
Женя 23 апреля 2023 в 09:04

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

Статья помогла вам?
Благодарим за оценку!

Ваши оценки помогают сделать блог еще лучше и информативнее.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Можно случайно спутать подсказку с уже заполненным полем. Следовательно, юзер посчитает, что текст-заполнитель установлен по умолчанию.
• Использование плейсхолдеров, не подсвечивающихся при некорректном заполнении, может значительно усложнить процесс отправки данных. Если пользователь допустит ошибку, ему станет сложно понять, что именно нужно исправить.
• Из-за того, что подсказка исчезнет, легче запутаться. Во время заполнения поля не все люди запоминают содержание подсказки, поэтому придётся полностью стереть текст, чтобы снова её посмотреть.
• Если отсутствуют заголовки формы, пользователю тяжело понять, правильно ли он заполнил конкретное поле.
• Низкую конверсию будет иметь форма, в которой пользователям нужно вручную убирать текст с подсказкой, он не исчезает автоматически. Это отнимает время, что отрицательно сказывается на отношении юзера к сайту.
• Часто для плейсхолдера выбираются бледные цвета, чтобы избежать эффекта уже заполненного поля. Блёклые тона, по мнению дизайнеров и разработчиков, дают понять, что информация, написанная таким образом – временная. Однако для слабовидящих такой текст подсказки будет плохо заметен — это связано с низким уровнем контраста цветов.

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

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

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

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

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

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

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

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

1. По умолчанию подсказка выглядит как бледно-серый текст, который находится внутри поля. А поменять оттенок при помощи шаблонных форм не всегда возможно. Это станет проблемой для пользователей с плохим зрением, так как светлый шрифт тяжело читается на светлом фоне.
2. Если внедрить плейсхолдеры в форму, тогда пользователи будут вынуждены с особым вниманием заполнять формы, а также напрягать краткосрочную память. Для человека с когнитивными расстройствами работа с такой формой окажется невыполнимой задачей.
3. Слабовидящие и слепые люди обычно используют специализированные программы, которые озвучивают текст на сайте. На данный момент далеко не все приложения могут правильно считывать текст плейсхолдера. Нередко они его просто не видят. Как итог, человек, имеющий проблему со зрением, пропустит важную подсказку.
4. Проблемы могут возникнуть не только у людей с особенностями физического здоровья. При наличии плейсхолдеров текст очень быстро исчезает, поэтому при заполнении такой формы нужна максимальная концентрация. Пользователю не удастся заниматься посторонними делами, например, отвечать на телефонные звонки, общаться и так далее. Придётся очень внимательно заполнять поля на сайте, так как важно всю информацию удержать в голове. В итоге есть большая вероятность, что занятой человек не заполнит форму просто из-за отсутствия необходимого количества внимания.

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Частые вопросы

Если у плейсхолдера столько минусов, зачем его использовать?

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

Чем отличается плейсхолдер от лейбла?
Лейбл находится снаружи строки для заполнения, а плейсхолдер – внутри.
В чём опасность использования плейсхолдера?

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

Каким должен быть правильный плейсхолдер?

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

Плейсхолдер

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

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

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

Пример плейсхолдера на нашем сайте

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

Виды

Выделяют пять основных разновидностей плейсхолдеров:

• Стандартный. Подсказка находится внутри строки и дополняет заголовок, однако при клике на форму надпись пропадает. Это не всегда удобно для пользователя: он может не успеть прочесть подсказку.
• Адаптивный. Плейсхолдер заполняет определенное поле до тех пор, пока пользователь не нажмет на него. Сразу после клика текст перемещается наверх и отображается над символами, которые вводит человек.
• Заменяющий заголовок или метки ввода. Позволяет уменьшить количество текста на странице, но усложняет заполнение формы. Нажав на поле, человек может забыть, какую информацию нужно ввести, передумает совершить целевое действие. А компания потеряет лид.
• Пример заполнения. Плейсхолдер располагается под полем ввода, что иногда запутывает пользователя и отвлекает его.
• Всплывающее окно. Такой плейсхолдер перегружает форму информацией и создает визуальный шум на странице.

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

Проблемы с юзабилити

Плейсхолдеры внедрили относительно недавно. Как и любая молодая технология, она имеет ряд недостатков, которые еще предстоит решить.

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

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

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

Как правильно использовать

Чтобы не навредить юзабилити, следуйте следующим рекомендациям:

• Не заменяйте лейбл плейсхолдером — это должны быть два самостоятельных элемента.
• Используйте контрастный цвет фона, чтобы светло-серые символы легко читались на нем.
• Дополняйте заголовок плейсхолдером, а не заменяйте его подсказкой. Он не должен исчезать в то время, как пользователь нажимает на поле.
• Размещайте плейсхолдер между заголовком и строкой для ввода данных.
• Добавляйте недлинный и простой для восприятия текст.
• Следите за тем, чтобы дизайн и шрифт заполнителя соответствовали общему стилю сайта или мобильного приложения

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

Коротко о главном

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