7 рекомендаций, как сделать формы на сайте идеальными

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

7 рекомендаций, как сделать формы идеальными

1. Держите их короткими
   
   Часто встречаются формы, состоящие из 5-10 полей. Заполнять такие формы ни один посетителей не желает. Поскольку слишком ленивы, чтобы тратить своё драгоценное время. Большое количество полей вызывает у клиентов ощущение, что в их частную жизнь вторгаются, когда они должны предоставить на первый взгляд ненужную личную информацию.
   
   Очень простая вещь, которая может повлиять на ваши продажи – это сокращение полей в вашей форме заявки, регистрации и т.д.
   
   Нужно следовать простому правилу: “Чем меньше полей в форме, тем больше заказов”
   
   Достаточно, чтоб клиент заполнил только важные 2-3 поля, вместо 5-10 полей. Также желательно в форме указать посетителю, какую выгоду он получит от предоставления своих данных.
   
   Таким образом, удалите из формы поля, информация, которых может быть:
   
   
   • Получена каким-либо другим способом.
   • Собрана в более поздний срок.
   • Просто опущена.
   
   Если вы запрашиваете дополнительную информацию от посетителей, то следует объяснить причину. Почему вам так нужна эта информация, как вы её будете использовать и хранить. Будет ли данная информация передаваться третьим лицам.
   
   Сравним эффективную и не эффективную форму.
   
   Не эффективно
   
   
   1. Email
   2. Имя
   3. Отчество
   4. Фамилия
   5. Город
   6. Телефон
   
   Эффективно
   
   
   1. Имя
   2. Email или телефон
   
   Всё! Больше вам ничего не нужно от клиента. Всю дополнительную информацию о клиенте менеджер получит по телефону или email.
   
   По поводу капчи: Устанавливайте её только в том случае, если идёт спам. Если спама нету, то капча в данный момент в форме не нужна.
   
   Каждый раз, когда вы сокращаете поля вашей формы, вы повышаете вашу конверсию.
   
   
2. Соответствие полей типу и размеру
   
   Избегайте раскрывающего меню, если у вас всего 2-3 варианта. Лучше отобразить короткий список в виде радиокнопок.
   
   Во-первых, все варианты видны сразу без щелчка. Во-вторых, для выбора варианта достаточно всего 1 клик. Вместо 2 кликов, если выбирать раскрывающий список.
   
   Также поля ввода должны быть примерно того же размера, что и ожидаемая, вводимая информация. Иначе, данное поле подвержено частым ошибкам ввода, поскольку посетители не смогут сразу просмотреть всю вводимую информацию.
   
   То есть ширина поля должна быть достаточной для просмотра.
   
   
3. Обязательные поля
   
   До сих пор встречаются сайты, где данное правило нарушается. Если какие-либо поля обязательны для ввода, то их нужно пометить. Например, самый распространённый вариант в виде звёздочки. Иначе, посетитель вынужден методом проб и ошибок выяснять, какие поля обязательны для заполнения, а какие – нет.
   
   
4. Форматирование
   
   Если поле требует определённую форму заполнения, то укажите точную инструкцию, как вводить данное поле. Не заставляйте пользователей гадать по поводу ваших неясных требований к паролям, телефонным номерам, кредитным картам.
   
   
5. Избегайте кнопку “Очистить”
   
   При наличии данной кнопки рядом с кнопкой “Отправить”, повышается риск случайного нажатия не на ту кнопку. В результате, время пользователя на заполнение формы будет потрачено впустую всего из-за одной ошибки.
   
   Данную кнопку “Очистить” нужно:
   
   
   • Либо удалить.
   • Либо сделать меньшего размера и разместить подальше от кнопки “Отправить”, чтобы избежать случайного нажатия.
   
   
6. Хорошо видимые сообщения об ошибке
   
   Информация об ошибке должна быть хорошо видна: красного цвета, жирно. Чтобы пользователь не упустил из виду важную информацию. Она должна ясно и просто объяснить, в чём ошибка и как её исправить.
   
   
7. Label вне поля ввода
   
   Label – сообщает пользователю, какую информацию следует вводить в поле. Многие допускают ошибку и размещают label внутри поля ввода.
   
   Частые проблемы с этим:
   
   
   1. Исчезновение подсказки напрягает пользователей
      
      Эта информация, как правило, быстро исчезает из поля, когда пользователь начинает вводить. Часто пользователей отвлекают, например телефон, электронная почта и т.д. В результате при возвращении к форме он может забыть, что собирался вводить в данное поле.
      
      
   2. Не может проверить свою форму перед отправкой
      
      Отсутствие label делает невозможным для клиента убедиться, что он правильно всё заполнил. Нет label, нет специальной инструкции для каждого поля. Многие посетители перед отправкой формы привыкли проводить проверку, всё ли правильно заполнено. А тут нет такой возможности, поскольку не ясно какое поле за что отвечает.
      
      
   3. Ошибка – значение по умолчанию
      
      Некоторые пользователи могут предположить, что если поле заполнено текстом, то это значение по умолчанию. И полностью пропустить данное поле, не заполняя его.
      
      
   4. Удаление текста-заполнителя вручную
      
      Иногда заполнитель внутри поля не исчезает и пользователь вынужден вручную удалять его, прежде чем он ведет свою информацию в поле. Это излишняя нагрузка на пользователя, увеличивает время заполнения формы.
      
   
   Таким образом, очень важно, чтоб label размещался вне поля ввода.
   

Вывод:

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