Как упростить UX оформления заказа в интернет-магазине. Повышаем конверсию из корзины в оплату
Меня зовут Даниил Петров, 6+ лет занимаюсь проектированием и дизайном интерфейсов и сайтов. В этой статье я поделюсь процессом и результатами UX-исследования для магазина Hellride
Задача:
Провести UX-исследование интернет-магазин самокатов и упростить оформление заказа.
Вводные:
- Сайт
- Яндекс.Метрика
- Вебвизор
Я разделил исследование на 4 этапа:
- Изучаем задачу и текущую реализацию оформления заказа
- Смотрим Вебвизор, изучаем поведение пользователей
- Фиксируем трудности, с которыми сталкивается покупатель
- Накидываем гипотезы по улучшению процесса
Далее приступаем к практической части:
- Составляем пользовательские сценарии
- Выстраиваем логику и архитектуру оформления заказа
- Рисуем первичный прототип
- Созваниваемся с командой проекта, обсуждаем обновления и возможность их реализации на текущем стеке
- Составляем интерактивный прототип для тестирования
- Отрисовываем и адаптируем макеты для передачи разработчику
Изучив задачу, интерфейс оформления заказа и около 70 визитов через Вебвизор, я понял, что архитектура оформления заказа недостаточно дружелюбна к покупателю.
Мы разбиваем варианты доставки на подрядчиков, так проще сделать интеграцию по api и передавать данные, но это облегчает лишь жизнь разработчиков. Клиенты сталкиваются со следующими проблемами:
- трудно сравнить стоимость доставки, приходится постоянно заполнять данные, сначала СДЕК, потом Боксбери, потом Почту и т.д- трудно найти ближайший пункт выдачи, возможно, СДЕК ближе к твоему дому, чем Боксбери, но, чтобы узнать это, необходимо сначала заполнить данные в СДЕК, а потом в Боксберри и все запомнить
- на карте или списком показываются только пункты одной транспортной
Плюс много деталей, улучшение которых сделает интерфейс более дружелюбным к покупателю, например:
- клавиатура смартфона перекрыла ввод данных
- введенные данные не сохраняются, если юзер вышел, например, на другую страницу и вернулся
- не нашел свой город или адрес
Пользовательский сценарий
По каким критериям оценивать "теперь удобно" или "нет"?
Сценарии решают эту задачу. Все становится просто: составляем возможный запрос, например, "сравнить стоимость доставки разными ТК", выстраиваем путь его решения:
- выбрал город
- выбрал способ доставки до ПВЗ
- нашел адрес на карте
Получился сценарий, где мы показываем, какие запросы есть у покупателей и как они их будут решать.
Таких сценариев прописываем столько, сколько сможем прописать. Иногда их 10-15, иногда 50, это зависит от особенностей продукта и интерфейса.
Теперь понятно
На основе всех исследований у меня сложилось конкретная картинка в голове, как должно быть. Я отрисовал 1 экран, который отображал масштаб изменений.
Мы провели созвон, на котором обсудили результаты исследования, обсудили возможность реализации новой архитектуры и всех предложенных фич. Ребята из Hellride согласились со всеми комментариями.
Поэтому я приступил к отрисовке интерактивного прототипа, чтобы провести тестирование на этапе прототипа. Это сильно сэкономит время и ресурсы на разработку, если недочеты появятся, когда макеты будут сверстаны и запрограммированы.
Спойлер: да, недочеты появились.
Что я сделал — поправил их в прототипе. У меня это заняло минут 20. Если бы мы не провели тестирование, это могло занять десятки часов программистов.
Далее прошелся еще раз по всем сценариям. Понял что все "бьется", после чего мы провели повторный созвон, где совместно прошлись по сценариям.
Логика готова. Тесты проведены. Можно дизайнить
На этапе дизайна мы внедрили еще несколько микро-деталей.
После отрисовки и согласования мобайла, я провел финальное тестирование на соответствие сценариев.
Все супер, очень круто. Может тогда и десктоп с планшетом сразу сделаем?
— Нет проблем)
Рекомендации, если вы хотите улучшить UX в своем проекте:
- Аналитика — musthave
- Анализ подобных решений
- Проводите тестирование на этапе прототипа, это экономит ресурсы и ускоряет запуск
- Тестируйте прототип на людях
Хотя бы опросите знакомых и друзей - Пропишите пользовательские сценарии
- Грамотно подбирайте референсы
В случае Hellride было бесполезно анализировать ozon, wb, мвидео и прочих гигантов из ecom. Их логистика выстроена через собственные пункты выдачи заказов и магазины
Поставил минус, поясню за что:
Была неплохая понятная форма которую нужно было лишь немного допилить, а получился сложный невнятный интерфейс с проблемной навигацией, излишними и дублирующимися элементами вроде "радио кнопок" не несущих никакого смысла в "визарде" и двух контролов выбора города. Про нейминг диалогов шагов вводящий в диссонанс и вовсе промолчу.
Слабо, очень слабо, особенно для спеца с "6+ годами опыта". Нужно еще пару итераций сделать, провести тестирование на реальных юзерах и только потом писать статью. Без негатива, успехов.
Нет самого главного - результата работы. Что в итоге случилось с метриками, они выросли или упали?
Если метрики на продакшене не выросли, то вся-вся работа умножается на ноль.
С предыдущим комментом соглашусь.