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

юзабилити иконок

Юзабилити форм: 7 важных правил

1. Держите формы короткими

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

Очень простая вещь, которая может повлиять на ваши продажи – это сокращение полей в вашей форме заявки, регистрации и т.д.

Нужно следовать простому правилу: “Чем меньше полей в форме, тем больше заказов”

Достаточно, чтоб клиент заполнил только важные 2-3 поля, вместо 5-10 полей. Также желательно в форме указать посетителю, какую выгоду он получит от предоставления своих данных.

Таким образом, удалите из формы поля, информация, которых может быть:

  • Получена каким-либо другим способом.
  • Собрана в более поздний срок.
  • Просто опущена.

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

Сравним эффективную и не эффективную форму.

Форма №1: Не эффективно

  1. Email
  2. Имя
  3. Отчество
  4. Фамилия
  5. Город
  6. Телефон

Форма №2: Эффективно

  1. Имя
  2. Email или телефон

Всё! Больше вам ничего не нужно от клиента в форме. Всю дополнительную информацию о клиенте менеджер получит по телефону или email.

По поводу капчи: Устанавливайте её только в том случае, если идёт спам. Если спама нету, то капча в данный момент в форме не нужна.

Каждый раз, когда вы сокращаете поля вашей формы, вы повышаете вашу конверсию.

2. Соответствие полей типу и размеру

Избегайте раскрывающего меню, если у вас всего 2-3 варианта. Лучше отобразить короткий список в виде радиокнопок.

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

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

То есть ширина поля должна быть достаточной для просмотра.

3. Обязательные поля

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

4. Форматирование

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

5. Избегайте кнопку “Очистить”

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

Данную кнопку “Очистить” нужно:

  • Либо удалить из формы.
  • Либо сделать меньшего размера и разместить подальше от кнопки “Отправить”, чтобы избежать случайного нажатия.

6. Хорошо видимые сообщения об ошибке

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

7. Label вне поля ввода

Label – сообщает пользователю, какую информацию следует вводить в поле. Многие допускают ошибку и размещают label внутри поля ввода.

Частые проблемы с этим:

  • Исчезновение подсказки напрягает пользователей

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

  • Не может проверить свою форму перед отправкой

    Отсутствие label делает невозможным для клиента убедиться, что он правильно всё заполнил. Нет label, нет специальной инструкции для каждого поля. Многие посетители перед отправкой формы привыкли проводить проверку, всё ли правильно заполнено. А тут нет такой возможности, поскольку не ясно какое поле за что отвечает в форме.

  • Ошибка – значение по умолчанию

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

  • Удаление текста-заполнителя вручную

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

Таким образом, очень важно, чтоб label размещался вне поля ввода.

Вывод:

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

Хотите повысить продажи вашего сайта?
Сделать это при минимальных затратах и в короткие сроки!

Об авторе

Мария Кокухина

  • Основатель и директор компании «PROF-MK».
  • Эксперт по юзабилити, увеличению продаж.
  • 9 лет — опыт в интернет-маркетинге.
  • Публикации в популярных журналах и крупных сайтах: «Генеральный директор», «Интернет-маркетинг», «Маркетолог», «PR в России», «SEOnews» и т.д.
  • Сертификаты Google Analytics, Яндекс Метрика, Яндекс Директ. Полная сертификация «1C-Битрикс».
  • Автор книги по юзабилити: «Как увеличить продажи на сайте: на 30% за 1 неделю».

Популярные статьи