Юзабилити веб-форминтернет-магазина

Тетюхин Илья ВалентиновичРуководитель интернет-проектов AstraMediaGroup

Почему важно создавать удобные веб-формы

• Пользователи пришедшие к вам на сайт имеют конкретную цель. Если сайт спроектирован хорошо, то он поможет пользователю достигнуть своей цели

• Между целями пользователей и целями сайта, т.е. вашими целями обычно находиться веб-форма.

Юза

били

ти в

еб-ф

орм

Три главных метода использования веб-форм

  Продажи Сообщество Результативность

Цели пользователя

Предоставление информации, Покупка

Вступление в сообщество

Совершение операции

Цели сайта Увеличение продаж

Рост сообщества заинтересованных пользователей, активизирование сообщества вокруг продуктов и услуг компании

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

Пример сайта Интернет-магазин Социальная сеть, интернет-магазин

Онлайн банкинг, интернет-магазин

Пример формы

Форма ввода данных о доставке товара

Форма регистрации

Перевод денежных средств

Юза

били

ти в

еб-ф

орм

2 правила веб-форм

• Формы могут сделать сайт удобным или не удобным, поскольку именно они стоят на пути пользователя к достижению цели;

• Сами формы должны быть удобными, чтобы помочь пользователю достигнуть своей цели.

Юза

били

ти в

еб-ф

орм

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

• Имена полей. Они сообщают пользователям что означает соответствующее поле ввода.

• Поля ввода. Поля ввода необходимы для обеспечения обратной связи. Они включают в себя текстовые поля, поля пароля, чекбоксы, радио-кнопки, слайдеры и многое другое.

• Действия. Это разного рода ссылки и кнопки, при нажатии которых пользователем, происходит какое-то действие, например отправка данных формы.

• Помощь. Помощь предоставляет пользователям информацию о том, как заполнить форму.

• Сообщения. Сообщения обеспечивают пользователям возможность подтверждения их действий со стороны формы. Сообщения могут быть положительными или отрицательным.

• Валидация. Валидация полей формы гарантирует, что данные, представленные пользователем удовлетворяют параметрам формы.

Юза

били

ти в

еб-ф

орм

Три точки зрения на форму.

• Отношения. Формы устанавливают связь между пользователем и вашей организацией.

• Общение. Формы способны наладить диалог между пользователем и вашей организацией.

• Внешний вид. В зависимости от того, как они выглядят, в такой степени они и устанавливают отношения и общение.

Юза

били

ти в

еб-ф

орм

1. ОТНОШЕНИЯ

• Отношения основываются на доверии• Каждая связь имеет цель• Имя формы, должно основываться на цели формы• Знание предпочтений ваших пользователей

поможет вам выстроить свое обращение к ним• Не задавайте вопросов, выходящих за рамки

формы• Внезапные изменения в реакции или внешнем

виде формы настроят пользователей негативно

Юза

били

ти в

еб-ф

орм

2: ОБЩЕНИЕ

• Форма - это разговор, а не допрос• Дайте логичные имена полям формы• Группируйте информацию по смыслу• Излишне большое количество групп

вопросов запутает пользователя• Каждое имя поля должно затрагивать

только одну тему• Делайте паузы• Устраняйте помехи

Юза

били

ти в

еб-ф

орм

3. Внешний вид формыИмена полей

• Одно слово или целое предложение?

Юза

били

ти в

еб-ф

орм

3. Внешний вид формыИмена полей

• Строчные или заглавные?

Юза

били

ти в

еб-ф

орм

3. Внешний вид формыИмена полей

• Позиционирование имен полейВерх Справа Слева

Скорость заполнения Быстро Нормально Медленно

Необходимость в пространстве по горизонтали

Мало Нормально Достаточно

Необходимость в пространстве по вертикали

Достаточно Нормально Мало

Доступное место для имен полей

Достаточно Нормально Мало

Близость к полю ввода Очень близко Нормально Не близко

Движение глаз пользователя Вниз Вниз направо Вниз направо

Время на перемещение от имени поля к полю

50 240 500

Подходит для Простые Сложные Сложные комплексные

Юза

били

ти в

еб-ф

орм

3. Внешний вид формыИмена полей

• Формы никогда не должны состоять более чем из одного столбца

Юза

били

ти в

еб-ф

орм

3. Внешний вид формыПоля ввода

• Тип поля ввода• Кастомизация полей ввода

Изменениеинтерфейса запутаетпользователей

Юза

били

ти в

еб-ф

орм

3. Внешний вид формыПоля ввода

• Ограничение формата поля ввода (MM / DD / YYYY)

• Обязательные и необязательные поля (Используйте *)

Юза

били

ти в

еб-ф

орм

3. Внешний вид формыДействия

• Первичные или вторичные действия

Если необходимо использовать вторичные действия, дайте им меньший визуальный вес, чем первичным действиям

Юза

били

ти в

еб-ф

орм

3. Внешний вид формыДействия

• Наименование действий

Избегайте стандартных наименований, таких как “Отправить” для действий

Юза

били

ти в

еб-ф

орм

3. Внешний вид формыПомощь

• Текстовая справка должна пояснять некоторые правила относительно конкретных полей

• Показ справочной информации должен инициироваться самим пользователем

Юза

били

ти в

еб-ф

орм

3. Внешний вид формыСООБЩЕНИЯ

• Сообщение об ошибкеВыделяйте сообщения об ошибках , акцентируйте

внимание пользователя на них

• Сообщение об успешном действииСообщения об успешном действии не должны мешать

пользователю продолжению работы с формой и сайтом в целомЮ

заби

лити

веб

-фор

м

3. Внешний вид формыВАЛИДАЦИЯ

• Валидация должна использоваться только там где она необходима

• Организуйте автозаполнение и автопроверку полей формы

Юза

били

ти в

еб-ф

орм

Вопросы?

Юза

били

ти в

еб-ф

орм

Спасибо за внимание!

Если остались вопросы, пишите в Astra Media Group:

office@astramg.ru

Юза

били

ти в

еб-ф

орм