Юзабилити веб-форм. Часть 1

Стандарт ISO 9241 определяет удобство использования веб-сайта как «эффективность, результативность и удовлетворенность тем, что указанные пользователи достигают определенных целей в определенных средах». При использовании веб-сайта пользователи имеют конкретную цель. Очень часто в качестве инструмента для ее достижения используются веб-формы. Юзабилити веб-форм — именно об этом мы сегодня и поговорим.

Шесть компонентов веб-форм

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

  1. Заголовки. Они сообщают пользователям, что означают соответствующие поля ввода;
  2. Поля ввода. Позволяют пользователям предоставлять информацию. Они включают в себя текстовые поля, поля пароля, флажки, переключатели, ползунки и многое другое;
  3. Действия. Это ссылки или кнопки, при нажатии на которые выполняются действия. Например, отправка формы;
  4. Помощь. Эти подсказки помогают понять, как заполнить форму;
  5. Сообщения. Дают обратную связь пользователю на основе введенной информации. Они могут быть положительными (например, «Ваша форма была успешно отправлена») или отрицательными («Выбранное вами имя пользователя уже занято»).
  6. Проверка. Эти меры гарантируют, что данные, представленные пользователем, соответствуют приемлемым параметрам.

Регистрационная форма на сайте «Детский мир» содержит все элементы веб-форм:

юзабилити веб-форм
Решение проблем юзабилити веб-форм

Несмотря на различия в компоновке, функциональности и назначении, все формы имеют три основных аспекта:

  • Отношения. Устанавливают отношения между пользователем и сайтом;
  • Диалог. Они устанавливают диалог между пользователем и сайтом;
  • Внешний вид. По тому, как они выглядят, они устанавливают отношения и диалог.

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

Аспект 1: отношения

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

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

2. У каждого отношения есть цель. То же самое касается веб-форм. Спросите себя, какова цель вашей формы;

3. Название формы. Оно сообщает пользователям, о чем эта форма и почему они должны ее заполнить.

4. Правильные вопросы. Познакомьтесь со своими пользователями и всегда думайте, являются ли вопросы, которые вы задаете, уместными. И если да, то своевременны ли они. Это привнесет естественность в вашу форму. Не задавайте вопросов, выходящих за рамки формы.

Аспект 2: диалог

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

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

Рассматривая веб-формы с этой точки зрения, можно вынести ряд рекомендаций:

  • Форма — это диалог. Агрессивная формулировка вопросов заставляет пользователей нервничать;
  • Логика в расположении полей. Согласитесь, было бы странно спрашивать кого-то о имени в конце, после ряда других вопросов. Поэтому более сложные вопросы нужно поставить в конце формы;
  • Постоянная контактная форма. Как и в реальном разговоре, каждое поле должно затрагивать одну тему за раз, помогая пользователю ответить в соответствующем поле ввода.
  • В любом разговоре люди отвлекаются на фоновый шум. Поэтому удалите помехи рядом с формой:  баннеры, анимацию, ненужную навигацию и т.д.
Третий аспект юзабилити веб-форм — внешний вид, мы разберем в следующей статьей. Следите за обновлениями!
Меню