UX улучшения для вас
Чтобы повысить продажи на вашем сайте, мы хотим, чтобы пользователи имели беспрепятственный путь от корзины к кнопке оформления заказа для повышения коэффициента конверсии. Для этого в статье ниже приведены различные UX улучшения с описанием.
Вот несколько вещей, о которых стоит задуматься, чтобы повысить конверсию на вашем сайте.
- Из-за чего некоторые пользователи могут столкнутся с проблемами при успешной оплате на вашем веб-сайте?
- Что побуждает их совершать покупки?
- Что может вызвать разочарование у новых или постоянных покупателей?
- Не перегружаете ли вы поле оформления заказа лишними уточнениями??!

Если клиент решил сделать покупку с вашего сайта, дерзайте! Вы должны максимально упростить ему работу.
Когда мы обговорили, насколько важен процесс оформления заказа, позвольте мне рассказать вам как улучшить UX в вашем интернет-магазине на примере.
Краткое описание проекта
Клиент в основном сталкивался с проблемой низких показателей конверсии на своем существующем веб-сайте электронной торговли, где он продавал книги и другие канцелярские товары в США и Канаде.
Примечание. В этом примере я не собираюсь охватывать весь UX в области электронной коммерции. Я буду решать проблемы, с которыми сталкиваются пользователи после того, как они выбрали и добавили свой продукт в корзину для покупки.
Существующие проблемы на сайте
На сайте было две основные проблемы:
- Высокий процент выпадения: были случаи, когда пользователи выпадали со страницы корзины на страницу доставки. После чего следовало перебрасывание пользователей со страницы доставки на страницу оплаты, что приводило к низкому коэффициенту конверсии.
- Излишняя озабоченность в отношении безопасности платежей: не было никаких гарантий безопасности оплаты на веб-сайте. Ничто не могло гарантировать, что деньги клиента находятся в безопасности и отправляются через безопасный платежный шлюз.
Исследования: подробное раскрытие проблем
Я наблюдал за аналитическими данными, которые владелец магазина собирал у своих пользователей. Важно было понять, ПОЧЕМУ эти проблемы существуют на сайте.
С чего я начал?
- Я начал с эвристического анализа всех страниц, которые пользователь должен пройти, чтобы завершить оформление заказа. Это было сделано для выявления проблем во время оформления заказа, расчёта количества кликов, необходимых для размещения заказа и выявления потенциальных проблем с удобством использования.
- Я провёл некоторый конкурентный анализ, чтобы понять общие тенденции быстрого оформления заказа.
- Провел многократные собеседования с заинтересованными сторонами, которые напрямую общались с клиентами, чтобы понять проблемы, с которыми они сталкиваются в текущем процессе оформления заказа.
Хорошо, теперь давайте погрузимся в UX улучшения.
Страница корзины
Содержимое на странице корзины требовало визуальной перестройки, чтобы подчеркнуть важные детали продукта, такие как название продукта и цена, а также количество, так как они являются наиболее важными деталями, которые интересуют пользователей при рассмотрении их заказа в корзине.
На странице корзины были обнаружены две основные проблемы:
Первое: сохранение корзины на будущее. Кнопка сохранения корзины была расположена прямо под сводкой о заказе. Казалось, что он боролся за внимание с разделом, резюмирующим заказ.
Сохранение корзины на будущее не подчеркивается и отображается мелким шрифтом рядом с каждым элементом корзины. Пользователи могут выбрать эту функцию для каждого элемента отдельно. Это была общая схема сохранения функциональности корзины. Её можно увидеть на других популярных сайтах электронной коммерции как Amazon и Walmart.
Второе: использование купонов. Предложения, относящиеся к продуктам корзины, мигали на странице корзины, но поля для применения купонов отсутствовали . Фактически, приложение купона было доступно только на последнем этапе оформления заказа. Это означает, что пользователи должны запомнить код купона и использовать его на последнем этапе.
Решение: Имея опцию кода купона на самой странице корзины, мы позволяем пользователям видеть, какую скидку они получают и сколько сэкономят на своем заказе. Если на странице корзины отображается скидка, мы должны упростить применение этих кодов и использование купонов.
Страница авторизации и регистрации
- На странице входа в систему я хотел очистить интерфейс и расположить всё в соответствии с важностью каждого элемента на этом экране.
- Здесь основное внимание уделяется входу в систему, который сходу не бросается пользователю в глаза, поскольку он находится в правом углу. Промежуточный итог заказа на этой странице не требовался и поэтому я решил перенести его на страницу оформления заказа.
Страница доставки
В старом дизайне у страницы доставки было 2 основных проблемы:
- Форма доставки была очень длинной, пользователям приходилось тратить уйму времени, для заполнения всех деталей, касающихся доставки.
- Сводка заказа размещалась как внизу, так и вверху страницы. Это создало некоторую избыточность информации для пользователей.
Подобный контент может быть объединён, чтобы не вводить пользователя в ступор.
Решение: Форма адреса доставки была сокращена, сохранив достаточное количество деталей для успешной доставки. Например: поле с названием организации было пропущено, так как оно здесь необязательно.
Я объединил промежуточный и финальный результаты заказа в правой части страницы. Это не только экономит место, но и объединяет связанную информацию вместе.
Гарантии доставки товара после оплаты были размещены под сводкой заказа для пользователей, которые скептически относились к покупкам в интернете.
Я также трансформировал индикатор прогресса, чтобы лучше оптимизировать пространство и дать визуальные подсказки пользователю по завершению определённых шагов.
Страница оплаты
- Придерживаясь макета страницы доставки, я также поддерживал согласованность интерфейса и на странице оплаты.
- Я добавил функцию безопасного сохранения карты для более быстрой проверки, когда пользователи будут возвращаться за очередной покупкой.
Просмотр заказа
В старом дизайне пользователи должны были ждать последнего шага, чтобы применить промокод. Это означает, что они должны держать код в голове на протяжении всех этапов, чтобы использовать его в самом конце. Для некоторых пользователей это может быть весьма утомительно.
Решение: я перенёс ввод / выбор промокода на страницу корзины, как и упоминал ранее.
Если пользователи хотят обновить информацию о доставке или оплате, они могут сделать это, используя опцию редактирования, представленную на странице.
Окончательная сумма заказа отображается, когда пользователи собираются произвести оплату. Я изменил текст кнопки с «Разместить заказ» на «Подтвердить и оплатить», чтобы сообщить, что на следующем шаге они будут направлены к оплате.
Измерение успеха UX улучшений
Вот, что мы сделали для оценки качества изменений на сайте. Мы сократили следующие ключевые показатели эффективности (KPI), чтобы измерить успех UX:
- Частота отказа от корзины покупок: нет людей, которые добавляли товары в корзину, но покидали сайт без совершения покупки.
- Пользователь выходил со страницы оформления заказа: никто из тех, кто зашёл на страницу оформления заказа, не уходил, без покупки.
Это все UX улучшения для данного сайта
Что вы думаете о путях улучшения конверсии на различных сайтах?Есть ли у вас какие-нибудь мысли или идеи по этому поводу? Делитесь своими идеями в комментариях!
Читайте также: 10 лучших принципов | Теории UX
3 Comments
9 советов по дизайну интернет-магазинов - DesignGlory
(06.05.2020 - 12:48)[…] Читайте также: Как повысить продажи интернет-магазина […]
Как нанять дизайнера вашей мечты? | UX-дизайнер - DesignGlory
(14.05.2020 - 15:41)[…] Читайте также: Как повысить продажи интернет-магазина […]
Как создать привлекательный лендинг - DesignGlory
(16.05.2020 - 11:41)[…] Читайте так же: Как повысить продажи интернет-магазина […]