Тестирование и анализ форм быстрого заказа

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

Собственно говоря были выбраны достаточно разные по направлениям сайты (Skillbox, Все Инструменты, Avito, Профи ру) у каждого из них я решил выписать что понравилось, а что нет. После чего в отдельной таблице выписал ещё раз плюсы и минусы и выделил одним цветом повторяющиеся. И напоследок создал ещё одну таблицу (больше таблиц богу таблиц) в которой сравнил исходный сайт с другими подопытными)
Возможно кому-то пригодится при тестировании

Skillbox

Ассортимент: онлайн-образование

Сайт: https://skillbox.ru/

Что хорошо:

• Кнопка заказа хороша видна и понятно подписана (т. е. на кнопке написано «Записаться на курс» и сразу ясно для чего она)

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

• Задний фон затемнён достаточно, для того чтобы не отвлекать от заполнения формы

• Кол‑во полей ввода информации минимально и не заставляет вводить гору ненужной информации (Имя, Телефон, E‑mail)

• Кнопка «Отправить» большая, расположена в самом низу после полей ввода. (Логично что после последовательного заполнения полей информацией сверху вниз в конце будет кнопка отправить)

• В заголовке формы понятно написано для чего заполняется данная форма («Заполните форму, чтобы оформить заказ»)

• Есть пояснение того, что будет происходить после отправки формы («Забронируйте курсы со скидкой, а мы перезвоним, проконсультируем и оформим заказ.»)

• Есть информация о заказываемом продукте (Название, стоимость, время обучения, плашка «хит продаж», информация о скидке, кол‑во оставшихся мест)

• Не нужно отдельно кликать на чек‑бокс согласия с политикой конфиденциальности.(Отправляя форму пользователь автоматические соглашается с политикой, о чём есть поясняющая подпись со ссылками на документы «Нажимая на кнопку, я соглашаюсь на обработку персональных данных и с правилами пользования Платформой»)

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

• В благодарственном сообщении, после отправки формы есть информация о полученном подарке, со ссылкой на мессенджеры компании

  

Что плохо: 

• Необходимо заполнять все поля для отправки формы. Если клиент не пользуется E-mail, а его заставляют обязательно заполнять это поле, то это отталкивает. (Лучше если это поле не является обязательным при условии присутствия поля с номером телефона)

• При вводе номера телефона нет выделения кода оператора скобками, нет разбиения дефисами на двойки (Сложно проверить на правильность номер введенный сплошным текстом)

  

• Постоянное всплывающее сообщение о получении персональной скидки. (Форма с сообщением всплывает поверх остальных форм и раздражает)

• После отправки формы нет информации в течении какого времени со мной свяжутся

• Неудобно реализовано закрытие формы после клика вне формы. (Пример: Пользователь ввёл свой номер телефона и решил поменять его. Для этого он зажимает ПКМ и выделяет мышкой весь номер, а например отпускает ПКМ за пределами формы и форма закрывается, а в сочетании с тем что введенные данные не сохраняются, это очень не удобно) На cable.ru такой проблемы нет

Все Инструменты

Ассортимент: Всё для дома, дачи, строительства и ремонта

Сайт: https://www.vseinstrumenti.ru/

Что хорошо:

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

• Кнопка «Отправить» большая, расположена в самом низу после полей ввода. (Логично что после последовательного заполнения полей информацией сверху вниз в конце будет кнопка отправить)

• В форме быстрого заказа указана цена товара, есть возможность указать количество выбранного товара.

  

• Есть валидация полей, введенный номер телефона разбивается на двойки, код оператора заключается в скобки

  

• В благодарственном сообщении, после отправки формы указывается номер заказа. (Сразу понятно какой у моего заказа номер, можно будет записать его для дальнейшего отслеживания.)

  

• Не нужно отдельно кликать на чек‑бокс согласия с политикой конфиденциальности.(Отправляя форму пользователь автоматические соглашается с политикой, о чём есть поясняющая подпись со ссылками на документы «Нажимая на кнопку, я соглашаюсь на обработку персональных данных и с правилами пользования Платформой»)

• В заголовке формы понятно написано для чего заполняется данная форма («Заявка на покупку товара»)

• В форме есть чек‑бокс для выбора типа покупателя (Физ лицо или Юр лицо)

  

• Для товаров с самовывозом есть возможность прямо в форме самостоятельно выбрать место самовывоза либо заказать звонок менеджера

• Закрытие формы после клика вне формы.

• При попытке отправить форму без заполнения обязательных полей есть явное указание какие поля не заполнены (поля выделяются красным цветом, появляются подсказки «Введите номер телефона»)

  

• Предупреждение об условиях акции, всплывающее при изменении кол‑ва товаров

Что плохо:

• Быстрый заказ для товаров с самовывозом не работает на главной странице. В магазине реализована логика, что для товаров с самовывозом доступен только быстрый заказ и их нет возможности заказать из корзины. При этом после клика на кнопку покупки товара с главной страницы, этот товар добавится в корзину, а в корзине кнопки заказа будут заблокированы. Заказать эти товары можно только из листинга и карточки товара. Пояснений для пользователя об этом нет, что очень сильно запутывает.

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

• При указании кол‑ва товара большего, чем есть на складах не появляется предупреждение об этом

• Нет поля для ввода дополнительного способа связи (E‑mail)

• Вся информация введенная в форму не сохраняется после закрытия (Нет защиты от случайного закрытия формы, если случайно закрыл, вводи заново)

• Недостаточное затемнение заднего фона. (Отвлекается внимание от формы, форма выглядит как‑то необязательно)

• После отправки формы нет информации в течении какого времени со мной свяжутся

• Неудобно реализовано закрытие формы после клика вне формы. (Пример: Пользователь ввёл свой номер телефона и решил поменять его. Для этого он зажимает ПКМ и выделяет мышкой весь номер, а например отпускает ПКМ за пределами формы и форма закрывается, а в сочетании с тем что введенные данные не сохраняются, это очень не удобно) На cable.ru такой проблемы нет

  

Avito

Ассортимент: Доска объявлений

Сайт: https://www.avito.ru/

Что хорошо:

• Кол‑во полей ввода информации минимально и не заставляет вводить гору ненужной информации (Имя, Телефон, E‑mail)

• Присутствует поле для ввода промокода. (Что побуждает пользователя начать поиск промокодов для сайта и возможно увеличит посещаемость рекламных страниц или соц. сетей в которых эти коды размещены)

• Не нужно отдельно кликать на чек‑бокс согласия с политикой конфиденциальности. (Отправляя форму пользователь автоматические соглашается с политикой, о чём есть поясняющая подпись со ссылками на документы «Нажимая на кнопку, я соглашаюсь на обработку персональных данных и с правилами пользования Платформой»)

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

  

Что плохо:

• В зависимости от кол‑ва фотографий в превью объявления в листинге, кнопки обратной связи находятся в разных местах, что путает пользователя

  

• Кнопки обратной связи в листинге никак не выделены (обычный шрифт, белый фон), не привлекают внимания.

• При попытке отправить форму без заполнения всех полей (E-mail) нет явного указания (поле не выделяется, не появляется предупреждающее сообщение) на то что поле с почтой не заполнено и поэтому форма не отправляется.

Профи ру

Сайт: https://www.avito.ru/

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

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

Некоторые ответы влияют на список вопросов в последующих этапах анкеты

Что плохо:

• В некоторых категориях неоправданно большое число этапов с вопросами, которые выглядят ненужными. (Надоедает заполнять и хочется покинуть ресурс)

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

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

  

Кабель РФ

Ассортимент: Всё для дома, дачи, строительства и ремонта
Сайт: https://cable.ru/

1. Поле ввода номера разделено на три секции. Неудобно редактировать уже введённый номер, необходимо кликать мышкой в каждую секцию при удалении номера.

2. Чек‑бокс у согласия на обработку персональных данных лучше убрать. Лишнее движение при заказе, нужно попасть по чек‑боксу. Лучше сделать подпись «Нажимая на кнопку, я соглашаюсь на обработку персональных данных и с правилами пользования Платформой»

3. Не помешает дополнительное поле для ввода электронной почты

4. Мало информации касающейся заказа конкретной категории товаров. Например, у кабеля мин. ограничение заказа 5 метров.

5. Кнопка «Отправить» слишком маленькая. Расположена не в удобном месте

6. Нужно чтобы заголовок соответствовал сути формы. Например «Быстрый заказ»

7. Мало информации о заказываемом товаре. Сделать больше изображение? Подписать основные хар‑ки или расшифровку? Цену, если имеется. Информацию о наличии, скидках. Возможно оценку товара

8. Задний фон, при открытии формы, затемнять еще сильнее, для того чтобы ничего не отвлекало от заполнения полей.

Сама форма небольшого размера, теряется и размазывается на заднем фоне.

• Отсутствует в результатах поиска кнопки «Быстрый заказ»

• Кнопка быстрого заказа в листинге не обозначена явно. Нет подписи, пока не наведешь на неё непонятно что это быстрый заказ

• Нужна нормальная адаптивная версия формы для мобилок.

Здесь табличка с плюсами и минусами выделенными разными цветами

А здесь табличка сравнение с исходным сайтом