Студия Турум-бурум

9 распространенных ошибок интерфейса интернет-магазинов, которые легко превратить в зоны роста

9 распространенных ошибок интерфейса интернет-магазинов, которые легко превратить в зоны роста
738

Команда Турум-бурум проводит десятки юзабилити аудитов ежемесячно и составила очередной список распространенных ошибок интерфейса интернет-магазинов. На примере двух e-commerce проектов смотрите проблемы юзабилити, которые влияют на ключевые метрики сайта.

Эти 9 ошибок мы выявили в ходе экспресс UX-аудита интернет-магазина одежды Gorgany и интернет-магазина мебели Mebelini, пройдя путь пользователя от главной страницы до страницы оформления заказа. Рекомендации к каждой ошибке будут полезны для любого e-commerce проекта.

1. Нерациональное размещение кнопки “Купить”

В интернет-магазине мебели Mebelini на странице выдачи непонятно к какому товару относится кнопка «Купить»: к нижнему или к верхнему. 

 Ошибки интерфейса на странице выдачи интернет-магазина Mebelini

Ошибки интерфейса на странице выдачи интернет-магазина Mebelini

Рекомендация

Для удобного восприятия переместить кнопку «Купить» к конкретному товару или сделать ее только при наведении. Увеличить расстояние между рядами товаров.

2. Неинформативная карточка товара

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

Дизайн карточки товара интернет-магазина Mebelini

Дизайн карточки товара интернет-магазина Mebelini

Рекомендация

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

Карточка товара должна быть полезной. Это место, где пользователь хочет видеть исчерпывающую информацию о продукте и его характеристиках. Ответьте пользователям на вопросы: почему именно этот товар? почему именно у вас? что будет после того, как я куплю этот товар?

3. Рекомендуемых товаров нет в наличии

Блок “Рекомендуем” содержит много товаров, которых нет в наличии. Это создает путаницу для покупателя и снижает его уровень доверия к магазину.

Блок “Рекомендуем” содержит много товаров, которых нет в наличии.

Рекомендация

Для блока “Рекомендуем” доработать логику вывода товаров - использовать только товары, которые есть в наличии.

4. Лишние шаги в воронке

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

В интернет-магазине Gorgany при добавлении товара пользователю отображается попап-корзина, где ему предлагают снова перейти в корзину

В интернет-магазине Gorgany при добавлении товара пользователю отображается попап-корзина, где ему предлагают снова перейти в корзину

Эта ошибка встречается во многих магазинах, например, она была также была выявлена при кратком UX-анализе интернет-магазина “Эра Электроники”, а также в интернет-магазине Интертоп.

Рекомендация

Добавить дополнительную кнопку “Оформить заказ” в выпадающем поп-апе. Таким образом можно оптимизировать движение пользователя по воронке, минуя лишний шаг. 

Или второй вариант: при добавлении товара в корзину сразу переводить пользователя на полноценную страницу, где будет предусмотрена возможность быстро перейти к оформлению заказа.

Пример реализации

Добавить дополнительную кнопку “Оформить заказ” в выпадающем поп-апе.

5. Нерелевантные товары в блоке  «С этим товаром покупают»

Покупателю кресла в интернет-магазине Mebelini вряд ли понадобится сразу еще одно кресло. Такая ошибка интерфейса делает наличие блока “С этим товаром покупают” неэффективным. Здесь важно разместить элементы допродаж на сайте, которые повышают средний чек.

Реализация инструмента допродаж в интернет-магазине Mebelini 
Реализация инструмента допродаж в интернет-магазине Mebelini

Рекомендация

Доработать блок cross-sell. Например, пользователям которые покупают кресло, рекомендовать подставку для ног, а для покупателей кровати – матрас.

Пример реализации

В интернет-магазине обуви Pratik под пару женских туфель покупателю предлагается несколько сумочек соответствующей цветовой гаммы и материала
В интернет-магазине обуви Pratik под пару женских туфель покупателю предлагается несколько сумочек соответствующей цветовой гаммы и материала

Такой инструмент cross-sell мотивирует посетителей совершить дополнительные покупки и увеличить средний чек интернет-магазина магазина.

6. Отсутствие подсказок для полей ввода на этапе оформления заказа

На этапе оформления заказа в интернет-магазине Mebelini в полях ввода не предусмотрена валидация. Пользователь может в поле «Мобильный телефон» указать емейл или любые другие символы, а в поле «Имя Фамилия» – цифры. При нажатии на подтверждение заказа нет уведомления, что поля заполнены неверно и ничего не происходит. Это повышает шанс того, что пользователь введет что-то неверно, и не зная что дальше делать, уйдет с сайта.

Ошибки интерфейса на странице оформления заказа в интернет-магазине Mebelini

Ошибки интерфейса на странице оформления заказа в интернет-магазине Mebelini

Рекомендация

В поле «Мобильный телефон» вставить маску ввода номера, ввод символов – запретить. В поле «Имя Фамилия» запретить ввод цифр. Добавить подсказки в формах, которые помогут понять, в каком формате должен быть ответ. При неправильном вводе подсвечивать ошибку красным цветом.

7. Отсутствие адаптивной версии

Покупатели все чаще просматривают контент и совершают покупки с телефонов и планшетов. Процент продаж с мобильных устройств превышает показатели десктопа в сфере e-commerce, но все равно остается большое количество интернет-магазинов без адаптивной версии. Например, мы уже проводили краткий анализ юзабилити сайта детских товаров Toys.com.ua, для которого адаптив является огромной зоной роста, как и для проекта Mebelini.

Отсутствие адаптивной версии 

Рекомендация

Реализовать адаптивную версию сайта для двух разрешений (смартфон и планшет). 

8. Размеры элементов страницы в адаптиве не сочетаются

В мобильной версии интернет-магазина Gorgany кнопка связи перекрывает важную информацию на странице, в том числе основной номер телефона и сумму заказа в корзине. При использовании всего сайта в целом привлекает слишком много внимания, отвлекая от поиска товара.

Размеры элементов страницы в адаптиве не сочетаютсяРазмеры элементов страницы в адаптиве
Так выглядит страница адаптив интернет-магазина Gorgany

Рекомендуем

Дать пользователю возможность закрыть эту кнопку, либо убрать ее для адаптивной версии сайта.

9. Основное меню не адаптировано к мобильной версии

Основное меню не помещается на главном экране и не скролится вниз.

Основное меню не адаптировано к мобильной версии    

Рекомендация

Доработать меню, чтобы оно полностью помещалось на первом экране без необходимости скролла.

Чем полезен экспресс UX-аудит сайта

Это лишь некоторые ошибки, которые удалось выявить при беглом анализе сайтов Gorgany и Mebelini, которые часто повторяются и в других интерфейсах e-commerce проектов.

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

У вас есть возможность получить аналогичный UX-аудит своего сайта. Для этого свяжитесь с нами.

Команда Турум-бурум выберет самые интересные кейсы, укажет на критические ошибки и даст советы по их устранению.




Оставьте номер и мы перезвоним
Спасибо!
Мы скоро свяжемся с Вами.
Напишите нам
Выберите направление:
    Спасибо!
    Мы скоро свяжемся с Вами.