Стандарт ISO 9241 определяет удобство использования веб-сайта как "эффективность, результативность и удовлетворенность тем, что указанные пользователи достигают определенных целей в определенных средах". При использовании веб-сайта пользователи имеют конкретную цель. Очень часто в качестве инструмента для ее достижения используются веб-формы. Юзабилити веб-форм - именно об этом мы сегодня и поговорим.
Шесть компонентов веб-форм
Веб-формы являются необходимостью на сайте. И очень часто - болезненной точкой как для дизайнеров, так и для пользователей. Со временем у пользователей сформировался своеобразный паттерн того, как она выглядит и чего можно ожидать от нее:
- Заголовки. Они сообщают пользователям, что означают соответствующие поля ввода;
- Поля ввода. Позволяют пользователям предоставлять информацию. Они включают в себя текстовые поля, поля пароля, флажки, переключатели, ползунки и многое другое;
- Действия. Это ссылки или кнопки, при нажатии на которые выполняются действия. Например, отправка формы;
- Помощь. Эти подсказки помогают понять, как заполнить форму;
- Сообщения. Дают обратную связь пользователю на основе введенной информации. Они могут быть положительными (например, "Ваша форма была успешно отправлена") или отрицательными ("Выбранное вами имя пользователя уже занято").
- Проверка. Эти меры гарантируют, что данные, представленные пользователем, соответствуют приемлемым параметрам.
Регистрационная форма на сайте "Детский мир" содержит все элементы веб-форм:
Решение проблем юзабилити веб-форм
Несмотря на различия в компоновке, функциональности и назначении, все формы имеют три основных аспекта:
- Отношения. Устанавливают отношения между пользователем и сайтом;
- Диалог. Они устанавливают диалог между пользователем и сайтом;
- Внешний вид. По тому, как они выглядят, они устанавливают отношения и диалог.
Чтобы форма была пригодной для использования, необходимо рассмотреть все три аспекта. Для большего удобства рассмотрим их по порядку. Также дадим практические рекомендации, которым вы можете легко следовать.
Аспект 1: отношения
Люди связаны друг с другом отношениями. На сайте форма - это средство для установления и улучшения отношений между пользователем и компанией. Если все сделано плохо, это может повредить такие отношения. Отсюда возникает ряд принципов:
1. Отношения основаны на доверии , поэтому установление доверия в вашей форме имеет решающее значение. Это может быть достигнуто с помощью фирменных цветов и логотипа, типографии и формулировки. Пользователь будет чувствовать себя свободно, зная, что форма принадлежит компании;
2. У каждого отношения есть цель. То же самое касается веб-форм. Спросите себя, какова цель вашей формы;
3. Название формы. Оно сообщает пользователям, о чем эта форма и почему они должны ее заполнить.
4. Правильные вопросы. Познакомьтесь со своими пользователями и всегда думайте, являются ли вопросы, которые вы задаете, уместными. И если да, то своевременны ли они. Это привнесет естественность в вашу форму. Не задавайте вопросов, выходящих за рамки формы.
Аспект 2: диалог
Веб-форма представляет собой двустороннюю связь между пользователем и компанией. Фактически, пользователь заполняет форму, чтобы начать общение с нею Например, в социальной сети пользователь заполняет регистрационную форму, чтобы сообщить, что он хочет присоединиться. При этом сайт социальной сети задает пользователю ряд вопросов: имя, фамилия, адрес электронной почты и т.д. После принятия (или отказа) сайт сообщает пользователю о результате, тем самым завершив процесс коммуникации. Рассматривая веб-формы с этой точки зрения, можно вынести ряд рекомендаций:
- Форма - это диалог. Агрессивная формулировка вопросов заставляет пользователей нервничать;
- Логика в расположении полей. Согласитесь, было бы странно спрашивать кого-то о имени в конце, после ряда других вопросов. Поэтому более сложные вопросы нужно поставить в конце формы;
- Постоянная контактная форма. Как и в реальном разговоре, каждое поле должно затрагивать одну тему за раз, помогая пользователю ответить в соответствующем поле ввода.
- В любом разговоре люди отвлекаются на фоновый шум. Поэтому удалите помехи рядом с формой: баннеры, анимацию, ненужную навигацию и т.д.