Плейсхолдер синоним

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

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

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

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

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

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

Вариаций (видов) текста-заполнителя не так много. Посмотрим, какими способами его можно использовать.

Стандартный

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

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

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

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

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

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

Заполнитель как метка

Поместите метку непосредственно над вводом — вместо использования заполнителя в качестве метки.

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

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

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

Пример текста может располагаться вне поля ввода (вне строки), а не в качестве заполнителя.

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

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

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

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

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

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

Заманчиво использовать текст-заполнитель для вторичных меток таким образом, как это показано выше. Однако с этим видом юзабилити выигрывает далеко не всегда. И нередко гораздо эффективнее использовать стандартную (одинарную) метку ввода.

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

Ни в коем случае нельзя использовать текст-заполнитель в качестве заголовка формы. Такая подсказка только запутает пользователя и вызовет у него когнитивный диссонанс.

Есть и другие правила, как правильно использовать текст-заполнитель, чтобы не навредить юзабилити: 

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

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

• Убедитесь, что у каждой формы есть самостоятельный заголовок. Заполнитель не может и не должен заменять такой заголовок.
• Цвет текста плейсхолдера должен быть контрастен цвету фона формы — особенно если заполнитель размещается внутри строки. Заполнители должны иметь более светлый тон, чем вводимый текст.

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

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

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

Отправьте статью себе на почту

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

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

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

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

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

Виды

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Не заменяйте лейбл плейсхолдером — это должны быть два самостоятельных элемента.

• Используйте контрастный цвет фона, чтобы светло-серые символы легко читались на нем.

• Дополняйте заголовок плейсхолдером, а не заменяйте его подсказкой. Он не должен исчезать в то время, как пользователь нажимает на поле.

• Размещайте плейсхолдер между заголовком и строкой для ввода данных.

• Добавляйте недлинный и простой для восприятия текст.

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

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

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

• Placeholder — это вспомогательный текст, который располагают в форме ввода данных. 

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

• Плейсхолдер может улучшить юзабилити, если его правильно использовать в мобильном приложении или на сайте. 

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

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

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

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

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

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

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

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

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

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

Стандартный

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Здесь рассказывали, чем ещё Dadata полезна бизнесу и как она работает в связке с OkoCRM →