Дизайн интернет-магазина: что учесть, чтобы не облажаться, часть пятая

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

В других местах ошибаться тоже не стоит. Для этого прочитайте третью и четвертую части.

Клиент нашел товар, отфильтровал и нажал на заветную кнопку «Добавить в корзину». Рано расслабляться — добавление в корзину не означает покупку.

Институт Бэймарда говорит, что почти 70% заказов так и остаются в корзине.

Давайте обсудим причины, связанные с дизайном. Начнем с очевидного.

Корзины бывают разные. Одни совмещают корзину с оплатой заказа, другие ограничиваются небольшим выпадающим списком. Второй вариант называют «мини-корзина».

В мини-корзине нет ничего плохого. Она обеспечивает быстрый доступ, легко грузится и не путает пользователя в отличие от «быстрого просмотра».

Главная проблема мини-корзины — ограничения в размере. Они заставляют ограничивать и контент. Мини-корзиной нельзя заменить полноценную страницу.

Корзина — пользовательский «рубикон». Клиент последний раз проверяет список покупок, изучает финальную стоимость, проверяет обещанные скидки и бонусы.

Если вы где-то обманете его, то прощения ждать не стоит.

Посмотрим на инфографику исследования Baymard о причинах бросить корзину, помимо «Я просто посмотреть».

Все причины рассмотрим позже, когда перейдем к оформлению заказа.

Никакой сложно арифметики. Показывайте характеристики, которые влияют на решение о покупке.

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

Пользователи используют корзину для сравнения товаров. Тяжело сравнивать одежду, если изображение слишком мало.

Изображения важны. Товар на фото должен быть в выбранном пользователем варианте. Особенно, если варианты по-разному выглядят на фото.

По клику на карточку переводите пользователя на страницу товара.

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

Дальше случился рейд по корзинам спортивных интернет-магазинов в поиске «идеальной» карточки. Будет много картинок.

Можно только предположить, что выбор цвета слишком сложен в разработке.

Хэдер и футер несут большое количество информации и даже CTA. Большие футеры — хорошо и удобно, подробный хэдер — прекрасно, но не в корзине.

Наша цель — минимизировать количество отвлекающих факторов. Футер и хедер упрощаются до логотипа с телефоном, политики конфиденциальности или других документов.

Не забывайте про кнопку или ссылку, которая ведет обратно к привычным страницам с подробными хэдером и футером.

Конечная стоимость не менее важна, чем стоимость доставки.

Мы рекомендуем объяснять пользователю «как так вышло». Например, с помощью формул.

Примерно 70% трафика в наших последних проектах интернет-магазинов приходит с мобильных. В мобильной версии корзина всегда должна быть на видном месте.

Предпочтительно оставить ее в правом верхнем углу, хотя достижимость этой зоны и не идеальна.

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

Сделайте контрастную, но не кричащую кнопку удаления. Меняйте заказ динамически, без необходимости обновлять корзину или сохранять изменения.

Не забудьте показывать саммари заказа и в мобильной версии.

Большинство советов для мобильной версии заключаются в двух простых шагах:

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

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

Всегда отвечаю на все комментарии и сообщения в личке. Мне очень важна обратная связь от вас :)

#интернетмагазин