Что за программа placeholder

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

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

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

How to Insert Placeholder Text in Microsoft Word (Random & Lorem ipsum)

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

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

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

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

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

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

How To Use Placeholders in Scheduling

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

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

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

Источник: arcticlab.ru

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

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

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

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

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

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

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

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

Плейсхолдер и ярлык: в чем разница

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

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

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

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

Плейсхолдер: строка поиска по каталогу

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плейсхолдер: html-код для Firefox

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

Плейсхолдер: html-код для Хром

Следует понимать и тот факт, что браузер 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.

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

Источник: rookee.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

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

Источник: romi.center