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

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

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

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

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

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

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

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

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

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

Как выглядит плейсхолдер?

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

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

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

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

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

Как работает placeholder?

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

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

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

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

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

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

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

Какой цвет должен быть у placeholder?

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

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

Для браузера Firefox потребуется использовать псевдокласс ::-moz-placeholder. В теле HTML кода он будет выглядеть следующим образом input::-moz-placeholder { color: red; }.

Если говорить о Safari или Google Chrome, то работа с плейсхолдерами в них устроена ещё проще. Стиль текста меняется в следующей строке кода страницы: input::-webkit-input-placeholder { color: red; }

Следует понимать и тот факт, что браузер Microsoft Edge и его предшественник в лице Internet Explorer вообще не особо лояльно относятся к плейсхолдерам. Они их просто не замечают.

Не меньше сложностей вызывает и работа с замещающим текстом в Opera. Она не умеет работать с цветами и стилями этого элемента. На экране монитора или мобильного устройства подсказки всегда будут выводиться со стандартными параметрами.

Можно ли стилизовать placeholder?

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

Для исключения потенциальной непрозрачности элемента придётся переназначить атрибут opacity: 1. Он является предустановленным только для Firefox. Поэтому только для этого браузера обязательно задавать атрибут принудительно.

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

background;
color;
font;
letter-spacing;
line-height;
opacity;
text-decoration;
text-indent;
text-transform;
vertical-align;
word-spacing.

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