В презентации Ильи Тетюхина, руководителя интернет-проектов Astra Media Group: - Почему важно юзабилити веб-форм для интернет-магазина - Основные компоненты веб-форм. - Основные формы интернет-магазина - барьеры для покупателя - Связь между пользователем и организацией - Диалог между покупателем и продавцом - Внешний вид - определяющий фактор в отношениях пользователя и организации Больше на astram.ru

1. Юзабилити веб-форм
интернет-магазина
Тетюхин Илья Валентинович
Руководитель интернет-проектов AstraMediaGroup

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

3. Три главных метода
использования веб-форм
Продажи Сообщество Результативность
Предоставление
Цели Вступление в Совершение
информации,
пользователя сообщество операции
Покупка
Юзабилити веб-форм
Рост сообщества
Увеличение
заинтересованны
контента сайта и
х пользователей,
времени
Цели сайта Увеличение продаж активизирование
проводимого
сообщества
пользователями на
вокруг продуктов
сайте
и услуг компании
Социальная
Онлайн банкинг,
Пример сайта Интернет-магазин сеть, интернет-
интернет-магазин
магазин
Форма ввода
Пример Форма Перевод денежных
данных о доставке
формы регистрации средств
товара

4. 2 правила веб-форм
• Формы могут сделать сайт
удобным или не удобным, поскольку
именно они стоят на пути пользователя
Юзабилити веб-форм
к достижению цели;
• Сами формы должны быть удобными,
чтобы помочь пользователю достигнуть
своей цели.

5. Шесть компонентов веб-форм
• Имена полей. Они сообщают пользователям что означает
соответствующее поле ввода.
• Поля ввода. Поля ввода необходимы для обеспечения обратной
связи. Они включают в себя текстовые поля, поля пароля,
чекбоксы, радио-кнопки, слайдеры и многое другое.
Юзабилити веб-форм
• Действия. Это разного рода ссылки и кнопки, при нажатии
которых пользователем, происходит какое-то действие,
например отправка данных формы.
• Помощь. Помощь предоставляет пользователям информацию о
том, как заполнить форму.
• Сообщения. Сообщения обеспечивают пользователям
возможность подтверждения их действий со стороны формы.
Сообщения могут быть положительными или отрицательным.
• Валидация. Валидация полей формы гарантирует, что данные,
представленные пользователем удовлетворяют параметрам
формы.

6. Три точки зрения на форму.
• Отношения. Формы устанавливают
связь между пользователем и вашей
организацией.
Юзабилити веб-форм
• Общение. Формы способны наладить
диалог между пользователем и вашей
организацией.
• Внешний вид. В зависимости от того,
как они выглядят, в такой степени они и
устанавливают отношения и общение.

7. 1. ОТНОШЕНИЯ
• Отношения основываются на доверии
• Каждая связь имеет цель
• Имя формы, должно основываться на цели
формы
Юзабилити веб-форм
• Знание предпочтений ваших пользователей
поможет вам выстроить свое обращение к
ним
• Не задавайте вопросов, выходящих за рамки
формы
• Внезапные изменения в реакции или внешнем
виде формы настроят пользователей
негативно

8. 2: ОБЩЕНИЕ
• Форма - это разговор, а не допрос
• Дайте логичные имена полям формы
• Группируйте информацию по смыслу
Юзабилити веб-форм
• Излишне большое количество групп
вопросов запутает пользователя
• Каждое имя поля должно затрагивать
только одну тему
• Делайте паузы
• Устраняйте помехи

9. 3. Внешний вид формы
Имена полей
• Одно слово или
целое
предложение?
Юзабилити веб-форм

10. 3. Внешний вид формы
Имена полей
• Строчные или
заглавные?
Юзабилити веб-форм

11. 3. Внешний вид формы
Имена полей
• Позиционирование имен полей
Верх Справа Слева
Скорость заполнения Быстро Нормально Медленно
Необходимость в Мало Нормально Достаточно
Юзабилити веб-форм
пространстве по горизонтали
Необходимость в Достаточно Нормально Мало
пространстве по вертикали
Доступное место для имен Достаточно Нормально Мало
полей
Близость к полю ввода Очень близко Нормально Не близко
Движение глаз пользователя Вниз Вниз направо Вниз направо
Время на перемещение от 50 240 500
имени поля к полю
Подходит для Простые Сложные Сложные
комплексные

12. 3. Внешний вид формы
Имена полей
• Формы никогда не должны состоять
более чем из одного столбца
Юзабилити веб-форм

13. 3. Внешний вид формы
Поля ввода
• Тип поля ввода
• Кастомизация полей ввода
Юзабилити веб-форм
Изменение
интерфейса
запутает
пользователей

14. 3. Внешний вид формы
Поля ввода
• Ограничение формата поля ввода
(MM / DD / YYYY)
• Обязательные и необязательные поля
Юзабилити веб-форм
(Используйте *)

15. 3. Внешний вид формы
Действия
• Первичные или вторичные действия
Юзабилити веб-форм
Если необходимо
использовать вторичные
действия, дайте им
меньший визуальный вес,
чем первичным действиям

16. 3. Внешний вид формы
Действия
• Наименование действий
Юзабилити веб-форм
Избегайте стандартных
наименований, таких как
“Отправить” для действий

17. 3. Внешний вид формы
Помощь
• Текстовая справка должна пояснять
некоторые правила относительно
конкретных полей
• Показ справочной информации должен
Юзабилити веб-форм
инициироваться самим пользователем

18. 3. Внешний вид формы
СООБЩЕНИЯ
• Сообщение об ошибке
Выделяйте сообщения об ошибках , акцентируйте
внимание пользователя на них
Юзабилити веб-форм
• Сообщение об успешном действии
Сообщения об успешном действии не должны мешать
пользователю продолжению работы с формой и
сайтом в целом

19. 3. Внешний вид формы
ВАЛИДАЦИЯ
• Валидация должна использоваться только там где она
необходима
• Организуйте автозаполнение и автопроверку полей
Юзабилити веб-форм
формы

20. Юзабилити веб-форм
Вопросы?

21. Спасибо за внимание!
Юзабилити веб-форм
Если остались вопросы, пишите
в Astra Media Group:
office@astramg.ru