Блог студии Made
Заметки по делу rss
16 мая 2008 года в рубрике «Интерфейс»

О подсказках к полям формы

В своей интересной заметке Ярослав Бирзул советует «показывать конкретную подсказку, для конкретного поля, и только во время заполнения оного».

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

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

В этом случае следует написать, для чего понадобился телефон. Например, вот так сделано на одном из наших интернет-магазинов:

Стимулирующие подсказки к полям формы

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

Если эту подсказку спрятать до начала заполнения поля, то посетитель может ее и не увидеть. Ведь он сперва должен начать заполнять поле, а если он не видит в этом смысла, то и подсказки не увидит.

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

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

Подсказки нужны не только для корректного заполнения полей. Подсказки не всегда надо прятать.

©

12 комментариев

  1. Richard Ferlow отвечает:

    Очень хорошая идея.

  2. Кай комментирует:

    1. «Телефон и код города» в такой же последовательности вводить?
    2. В этом случае эстетичнее и расширяемее было бы вносить подсказки под поля.
    3. Левое поле с текстом можно немного увеличить, чтобы названия полей не писались по-уродски на двух строчках.

    Насчет приведения в нормальный вид см. sms3.ru

    Предпочтительно, чтобы форма ввода давала понять, как в нее вводить.

  3. Алексей Новиков

    Алексей Новиков отвечает:

    1. Еще никто ни разу в эту форму не вводил неправильно ;-) Следовательно, проверку практикой эта надпись проходит. Хотя, может быть, лучше и по-другому написать.
    2. Не сказал бы, что так эстетичнее. Это субъективно. Под полями обычно пишут подсказку о формате вводимых данных. О назначении же поля я предпочитаю писать справа от него.
    3. Скриншот снимал, не разворачивая окно на всю ширину экрана, потому и на двух строчках. В каких единицах ты измеряешь степень уродства?

    Ну и тут мы не о формах, а о подсказках к ним ;-)

  4. Кай отвечает:

    О назначении лучше писать, тогда уж, под названием поля.

    По-уродски — это булево значение. Либо по-уродски, либо нет.

  5. Алексей Новиков

    Алексей Новиков пишет:

    А ты попробуй, напиши под названием поля. И вот тогда ты увидишь, что несколько строчек и здоровые дыры между полями — это действительно «по-уродски» ;-)

  6. Grav пишет:

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

  7. Алексей Новиков

    Алексей Новиков комментирует:

    Grav, это не будет работать.

  8. Eugene пишет:

    Назначение поля удобнее всего писать над полем ввода данных, а пример под полем ввода, немного меньшим шрифтом. + Можно воспользоваться чем-то вроде «Masked Input Plugin» подпилив напильником.

  9. Ссылки в номер // Искариот - 30 серебренников за Интернет :

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

  10. Ян пишет:

    Спасибо. Хорошая тема для “человечного” сайта, буду использовать.

    А предыдущий коммент - спамерский :)

    От редакции: спамерский комментарий повисел немного (но без ссылки, спамер своего не добился), да исчез. Все увидели, какие бывают спамерские комментарии. Теперь домен спамера попал в черный список Parasite Eliminator.

  11. Алексей Новиков

    Алексей Новиков пишет:

    Знаю, что предыдущий от спамеров пришел. Я оставил его тут, чтобы показать нескольким людям стиль спамеров. Заметьте, ссылка-то, мною не одобренная, не проставилась ;-) Кстати, его домен уже в очереди на добавление в черный список.

  12. ainu комментирует:

    Простите за оффтоп, но не думаете ли, что комент был поставлен специально, чтобы запятнать честь какого-нибудь хорошего человека (блога)?
    Очень уж подозрительно, и ссылка на паразитэлиминатора стоит, и антибот неслабый (не просто цифры, а ещё и словами), да ещё на блоге, создателями связанным с сервисом… Ой, неспроста…
    Да и заголовок: Искариот - 30 серебренников за Интернет в яндексе ведёт на некий блог, «искариот», который на первый взгляд действительно является настоящим блогом.
    Не промахнитесь своей мегапушкой. А идея прекрасная, честно.

Вам слово