Альтернатива атрибуту «placeholder»

Правильное и неправильное использование placeholder-а в веб-формах

Правильное и неправильное использование placeholder

Placeholder используется в качестве атрибута практически в каждой веб-форме, и не стоит забывать о нем ни одному дизайнеру или разработчику. Легче всего подать справочную информацию в виде короткой заметки непосредственно в полях сложной формы, или даже заменить таким образом метки (label). Другое дело, что неправильное использование текстового input placeholder-а вызывает много проблем с удобством использования.

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

Placeholder как метка

Placeholder как метка

Разместите пояснение над полем ввода вместо того, чтобы использовать placeholder в качестве пояснения

В целях уменьшения размеров формы или устранения визуального «шума», дизайнеры используют текстовый  form placeholder как пояснение к полю ввода. Это, конечно, красиво, но нагружает кратковременную память – стоит лишь пользователю поставить курсор в поле и/или начать набор, как placeholder пропадает, и для того, чтобы его увидеть, нужно удалить уже набранное содержимое.

Посему пояснение лучше разместить над полем ввода. Одно пустое поле ввода без информации после постановки курсора вводит пользователя в ступор – становится непонятно, что делать дальше, ибо подсказок нет.

Placeholder в качестве примера

Placeholder в качестве примера

Вынесите пример вводимого текста под поле ввода, а не используйте его как placeholder

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

Placeholder в качестве подсказки

Placeholder в качестве подсказки

Placeholder не стоит делать в качестве подсказки к полю

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

Placeholder как заголовок поля

Placeholder как заголовок поля

Используйте label-ы как дополнительные заголовки полей, а не placeholder-ы

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

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

Правильное применение placeholder-ов

Placeholder-ы должны быть менее заметны, чем вводимый текст

Placeholder-ы должны быть менее заметны, чем вводимый текст

Более светлый цвет делает текст placeholder-a менее отвлекающим и отличает его от уже введенного текста.

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

Placeholder должен быть виден на любом экране

Placeholder должен быть виден на любом экране

Если цвет placeholder-а слишком светлый, он может быть незаметным на некоторых экранах.

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

Placeholder не должен исчезать при постановке курсора в поле ввода

Placeholder не должен исчезать при постановке курсора в поле ввода

Оставляйте placeholder до того момента, пока пользователь не начнет печатать

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

Как показывает практика, форма ввода более удобна без использования placeholder-ов.

Если эта статья показалась вам стоящей, нажмите «Like» ниже, дабы другие тоже могли найти для себя что-то интересное.

Источник: uxdesign.cc

Комментарии
Готовые шаблоны веб-форм
Gold

Как рассчитать стоимость деревянного дома?

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

Как выбрать свои "личные духи"?

Этот тест из 10 вопросов – мини-руководство, которое поможет тебе найти свой уникальный аромат. Для посетителей магазинов косметики,парфюмерии, тематических блогов, соцстраниц, СМИ.
$6.00
Подробнее
Platinum

Хорошо ли ты знаешь Солнечную систему?

Хорошо ли Вы ориентируетесь в Солнечной системе. Пройдите тест Подробнее
Platinum

Подбор автозапчасти

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

Закажите разработку формы под ключ

Нет времени разбираться со всеми настройками самому? Не проблема!
Закажите разработку веб-формы у нас