UX пособие:оптимизация форм


Содержание:

  1. Главная страница
  2. Меню и навигация
  3. Поиск
  4. Категория и продукты(карточки товаров)
  5. Конверсия
  6. Оптимизация форм

Глава 6: Оптимизация форм

На рисунке 1 указаны рекомендации для форм, сложность их реализации и влияние на метрики сайта.

Рекомендации для форм

Рисунок №1 — Рекомендации для форм

Поясним описанные рекомендации. Отмечайте поля формы, которые обязательны к заполнению, чтобы пользователю сразу было понятно, какую информацию от него хотят получить в обязательном порядке. Используйте встроенную валидацию, чтобы сразу клиент знал, что заполнил с ошибками или оставил пустые поля. Сделайте возможность автозаполнения данных, при начале набора, если форма уже заполнялась ранее. Уберите лишние поля, оставляйте самые основные, тогда будет выше вероятность завершения процесса заполнения формы. Для полей с текстом и вводом числовых значений используйте соответствующие клавиатуры, они будут подтягиваться самостоятельно на устройстве, если для полей используются соответствующие типы(об этом будет далее). Списки не стоит делать, если в них менее, чем 3 опции. Для полей, где нужно вводить много информации, как комментарии к заказу, добавьте скроллы или текстовые поля(textarea).

Заполнять формы с мобильных устройств достаточно неудобно и это может вызывать затруднения при оформлении заказов!

Примеры сайтов, которые придерживаются данных рекомендаций:

  1. Инлайн валидация и автозаполнение(рис. 2).

Примеры инлайн валидации и автозаполнения

Рисунок №2 — Примеры инлайн валидации и автозаполнения

В первом и втором варианте есть инлайн валидация, в третьем предлагается автозаполнение из варианта, который начинается на букву, которую начал вводить клиент в поле “Имя”.

  1. Уменьшено количество полей(рис. 3).

Уменьшено количество полей

Рисунок №3 — Уменьшено количество полей

В первом варианте вместо 3 полей — фамилия, имя, отчество, используется одно — полное имя. Во втором варианте адрес подтягивается с помощью Google API. В третьем — чекбокс для установки адреса доставки таким же, как адрес проживания клиента.

27% пользователей отказываются от заказов из-за «слишком длительного/сложного процесса оформления заказа».
Наиболее эффективные сайты электронной коммерции имеют 6-8 полей, максимум 12 элементов формы.

AllyouneedFresh, один из крупнейших онлайн-супермаркетов Германии для увеличение количества транзакций, сделали(рис. 4):

  • уменьшили количество полей для ввода информации;
  • сопоставление длины поля с длиной ввода;
  • использование меток(label) вместо заполнителей(placeholder) для полей формы.

Форма до и после исследования

Рисунок №4 — Форма до и после исследования

Результаты:

  • Транзакции через мобильный телефон выросли на 51%.
  • Мобильный CVR улучшился на 14%.
  • Количество возвратов со страницы подтверждения заказа упало на 21%.
  1. Замена выпадающего списка из 2 опций на чекбокс(рис. 5).

Замена выпадающего списка на чекбокс

Рисунок №5 — Замена выпадающего списка на чекбокс

  1. Использование правильной клавиатуры для текста и чисел(рис. 6).

Использование правильных клавиатур

Рисунок №6 — Использование правильных клавиатур

В первом варианте — для индекса города открывается буквенная клавиатура, на втором — числовая.

Это достигается при использовании соответствующих типов полей для вводимой информации(рис. 7).

Типы полей для форм

Рисунок №7 — Типы полей для форм

Существуют распространенные типы полей для форм:

  1. number — числа
  2. email — емейл адрес
  3. url — для адресов сайтов
  4. date — дата
  5. range — диапазон чисел
  6. text — для текста(ФИО, адрес и пр.)

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

AllyouneedFresh увеличение количества транзакций, сделали автоматическое определение типа кредитной карты клиента, а не ее выбор из выпадающего списка(рис. 8).

Автоматическое определение типа кредитной карты

Рисунок №8 — Автоматическое определение типа кредитной карты

До изменения нужно было выбрать тип оплаты “кредитная карта”, а затем из списка выбрать тип карты — “Visa” и пр.

После изменений имеется одно поле для ввода номера кредитной карты, алгоритм автоматически определяет тип кредитной карты.

Примеры украинских сайтов:

https://m.rozetka.com.ua/

Форма оформления заказа имеет следующее:

  1. Поэтапное заполнение данных.
  2. Первом этапе инлайн проверка заполнения обязательных полей формы.
  3. Выводится модальное окно для большого комментария.
  4. Выпадающие списки содержат более, чем 3 опции.
  5. При выборе оплаты через карту предупреждающая информация, появляется дополнительное поле(рис. 9).
  6. Типы полей соответствуют клавиатурам для них.

Минусы:

  1. Не отмечены обязательные поля.
  2. На первом этапе возможен ввод емейла с ошибками.
  3. Если не быть внимательным, то возможен ввод некорректных данных. В случае выбора поля “Не перезванивать”, то информацию о заказе можно не получить.

Форма оформления заказа в розетке

Рисунок №9 — Форма оформления заказа в розетке

https://comfy.ua/

Форма оформления заказа следующая:

  1. Выпадающие списки содержат более, чем 3 опции.
  2. Инлайн проверка заполнения обязательных полей формы.
  3. Типы полей соответствуют клавиатурам для них.
  4. Появляется поле для большого комментария(рис. 10).

Минусы:

  1. Много полей для имени: 3шт.
  2. Длинная страница оформления заказа, лучше было сделать поэтапное оформление.

Форма оформления заказа в комфи

Рисунок №10 — Форма оформления заказа в комфи

https://www.zolotoyvek.ua/

Форма оформления заказа следующая:

  1. Отмечены обязательные поля.
  2. Рядом с некоторыми полями есть вспомогательная информация.
  3. Есть поле для большого комментария.
  4. Выпадающие списки содержат более, чем 3 опции(рис. 11).

Минусы:

  1. Нет инлайн проверки для полей, только после нажатия кнопки “Оформить заказ”.
  2. В поле “Фамилия” можно ввести цифры, что будет верным после проверки.

 

Форма оформления заказа в золотом веке

Рисунок №11 — Форма оформления заказа в золотом веке

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

  1. отмечайте обязательные поля звездочками *;
  2. делайте инлайн валидацию;
  3. применяйте правильные типы полей для ввода информации;
  4. чтобы пользователь понимал логику заполнения данных на странице оформления заказа, разбейте ее на этапы: личные данные(имя, телефон, емейл), доставка(самовывоз, новая почта, курьер) и оплата(наличные, безнал, карта);
  5. если есть возможность реализовать оплату через Google Pay, сделайте, это сэкономит время пользователя и упростит оплату картой;
  6. реализуйте, по возможности, автоматическое определения типа карты, при оплате картой на сайте;
  7. рядом с полями формы, можно разместить кнопки в виде вопроса, где можно использовать всплывающие подсказки(tooltip)(рис. 12).

Всплывающие подсказки tooltip

Рисунок №12- Всплывающие подсказки tooltip

Автор Ирина Старченко
практикующий Seo-специалист
и программист любитель

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *