Обсудить проект

Немного о формах: 15 правил юзабилити

  • Юзабилити и дизайн
  • 04 сентября 2013
  • 2322
  • 5 минут

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

В этой статье я рассмотрю разные аспекты юзабилити форм, применив которые вы сможете создать формы со 100% конверсией заполнения:)

    1. Располагайте название полей над полями ввода.Это связано с движением глаз человека, поскольку для мышц глаз легче двигаться сверху вниз и снизу вверх, чем слева направо и справа налево. usability
    2. Делайте форму в виде одной колонки.Это тоже связано с движением глаз людей и поэтому форма должна быть в виде одной колонки.Пример сложной для восприятия формы – регистрация пользователя на сайте www.ebay.comregister-with-eBay
    3. Автоматически устанавливайте курсор в первое поле для заполнения.Это поможет пользователям начать заполнение формы.
    4. Выделяйте обязательные для заполнения поля.Общепринятым является выделение таких полей звездочкой *, но хорошим вариантом может стать обозначение каждого поля в виде фразы «Обязательно для заполнения». Пример регистрации на сайте www.zappos.comzappos_регистрация
    5. Используйте подсказки и рассказывайте о том, как будут использованы данные пользователя.Некоторые пользователи бояться оставлять свои контактные данные, особенно номер телефона и другие данные. Поэтому объясните, каким образом будут использованы данные. Пример регистрации на сайте odnoklassniki.ru:Usability
    6. Не используйте капчу.Не нужно обременять пользователем лишней информацией, особенно такой, как капча, поскольку в ней легко допустить ошибку. Проще удалить несколько писем спама, чем заставлять пользователей вводить непонятные цифры и буквы.
    7. Не спрашивайте пароль 2 разаВместо повторного заполнения пароля сделайте возможность посмотреть пароль, который ввел пользователь. Это можно реализовать в виде чекбокса «Показать пароль»
    8. Используйте призыв к действию заполнения формы.Опишите выгоды, которые получит пользователь от заполнения формы: это может быть доступ к личному кабинету, возможность совершения покупок, скачивание пробной версии программы. Стоит также указать, что заполнение формы не займет от пользователя много времени. Это особенно актуально для объемных форм – заявка на оформление кредита, заявка на кредитную карту и т.п.
    9. Данные об ошибках должны быть ясными и подробными.Если пользователь допустил ошибку в заполнении формы, то нужно сразу показать, как это исправить. Например, «Логин слишком короткий», «Неправильно введен пароль». Не стоить использовать восклицательный знак и верхний регистр в сообщениях об ошибках, поскольку это обидит пользователя, и он просто покинет страницу с формой.hotgloo_registration
    10. Проверяйте данные пользователя при помощи JavaScript.Пользователи очень часто допускают ошибки в написании адреса почты: пропускают точки, знак @, ошибаются в написании почтовых доменов. Поэтому проверяйте правильность ввода e-mail при помощи JavaScript. Это позволит значительно сократить количество ошибок в написании адреса почты.surveygizmo.com_form
    11. Выделяйте поля, которые заполняет пользователь.При заполнении формы пользователь должен видеть, в каком поле он находится, поэтому визуально выделяйте поле, которое заполняет пользователь. Пример регистрации на сайте wufoo.com:wofoo.com
    12. Объемные формы разделяйте на несколько шагов и показывайте процесс заполнения формы.Если форма очень объемная и требует от пользователя ввода многих данных, то разбейте такую форму на несколько шагов. Например, оформление заказа можно разбить на следующие шаги: ввод личных данных, ввод адреса доставки, ввод данных об оплате, подтверждение заказа. Пример регистрации на сайте www.asos.comasos.com_registration
    13. Не используйте кнопку «Отправить».Никогда не нужно использовать текст «Отправить» на кнопках формы. Создавайте такие понятные призывы к действию, как «Зарегистрироваться», «Создать аккаунт», «Оформить заказ», «Купить». Нет:Forever21.com_submitsendДа:Basecamp-Signupregistration
    14. Не используйте кнопки «Отменить» и «Очистить» в формах.Я не могу назвать ни одной резонной причины наличия таких кнопок как «Отменить» и «Отправить». Кроме того, они могут понизить конверсию форм: dо-первых, эти кнопки, как правило, расположены рядом с кнопками отправки сообщения или заказа, во-вторых, наличие таких кнопок заставляет пользователя задуматься, нужно ли заполнять форму вообще. Вот пример такой кнопки на сайте www.gap.com с кнопкой «Отменить»:Registration-Gap
    15. Сохраняйте (кешируйте) данные, которые вводит пользователь.Не все пользователи заканчивают заполнение форм, особенно объемных, где нужно вводить паспортные данные. Поэтому сохраняйте данные заполнения форм, чтобы пользователь мог продолжить заполнение формы там, где закончил.

[EPSB] Проверим юзабилити вашего сайта и дадим советы. [/EPSB]
Эти 15 правил юзабилити форм помогут вам повысить конверсию, но не забывайте, что всё нужно тестировать и анализировать. Проанализировать заполнение пользователями форм можно с помощью инструмента «Аналитика форм» от Яндекс.Метрики.


Обсуди с другими
Обсудить проект
Выберите услугу,
впишите имя и телефон, нажмите кнопку
Нужна консультанция Экспресс-аудит Реклама Аналитика Анализ конкурентов Стратегия ROI-маркетинг SMM Блог Сайт Другое
Нажимая кнопку, вы соглашаетесь с  Условиями обработки персональных данных