Открываем последние секреты и рассказываем, как не облажаться с корзиной. Как обычно, мы в Mojo собрали для вас лучшие практики и подкрепили их исследованиями.
В предыдущих сериях
- В первой статье мы обсудили психологию восприятия специально для адептов мнения «дизайн не помогает продавать». В конце я даю простые и универсальные советы для ecommerce-проектов.
- Во второй статье начали долгий путь с обратной связи и навигации в интернет-магазине. Ошибешься в навигации — будет плохо всю дорогу.
В других местах ошибаться тоже не стоит. Для этого прочитайте третью и четвертую части.
- В третьей статье разобрали главные элементы каталога: фильтрацию и карточки. Я рассказал, почему IKEA использует горизонтальный фильтр-бар и как исправить главные ошибки выпадающих списков.
- В четвертой статье продолжили говорить про каталог и обсудили грех быстрого просмотра у WildBerries и Lamoda. Главной темой была страница продукта.
- Главный гость пятого выпуска — корзина.
Корзина
Клиент нашел товар, отфильтровал и нажал на заветную кнопку «Добавить в корзину». Рано расслабляться — добавление в корзину не означает покупку.
Институт Бэймарда говорит, что почти 70% заказов так и остаются в корзине.
70% заказов
Давайте обсудим причины, связанные с дизайном. Начнем с очевидного.
Мини-корзина
Корзины бывают разные. Одни совмещают корзину с оплатой заказа, другие ограничиваются небольшим выпадающим списком. Второй вариант называют «мини-корзина».
В мини-корзине нет ничего плохого. Она обеспечивает быстрый доступ, легко грузится и не путает пользователя в отличие от «быстрого просмотра».
Главная проблема мини-корзины — ограничения в размере. Они заставляют ограничивать и контент. Мини-корзиной нельзя заменить полноценную страницу.
Корзина — пользовательский «рубикон». Клиент последний раз проверяет список покупок, изучает финальную стоимость, проверяет обещанные скидки и бонусы.
Если вы где-то обманете его, то прощения ждать не стоит.
50% онлайн-корзин
Посмотрим на инфографику исследования Baymard о причинах бросить корзину, помимо «Я просто посмотреть».
Все причины рассмотрим позже, когда перейдем к оформлению заказа.
Карточка в корзине
Никакой сложно арифметики. Показывайте характеристики, которые влияют на решение о покупке.
Советы
Маст-хэв: изображение и выбранные пользователем характеристики (цвет, размер, мощность оперативной памяти и т.п.). Информации должно быть не меньше, чем на карточке в каталоге.
Пользователи используют корзину для сравнения товаров. Тяжело сравнивать одежду, если изображение слишком мало.
Изображения важны. Товар на фото должен быть в выбранном пользователем варианте. Особенно, если варианты по-разному выглядят на фото.
По клику на карточку переводите пользователя на страницу товара.
Дайте пользователю изменить характеристики заказа: размер, цвет или количество. Вдруг он ошибся при добавлении в корзину.
Дальше случился рейд по корзинам спортивных интернет-магазинов в поиске «идеальной» карточки. Будет много картинок.
Рейд по спортивным интернет-магазинам
Можно только предположить, что выбор цвета слишком сложен в разработке.
Упрощаем
Хэдер и футер несут большое количество информации и даже CTA. Большие футеры — хорошо и удобно, подробный хэдер — прекрасно, но не в корзине.
Наша цель — минимизировать количество отвлекающих факторов. Футер и хедер упрощаются до логотипа с телефоном, политики конфиденциальности или других документов.
Не забывайте про кнопку или ссылку, которая ведет обратно к привычным страницам с подробными хэдером и футером.
Не только доставка
Конечная стоимость не менее важна, чем стоимость доставки.
Мы рекомендуем объяснять пользователю «как так вышло». Например, с помощью формул.
Проверьте мобильную версию, снова
Примерно 70% трафика в наших последних проектах интернет-магазинов приходит с мобильных. В мобильной версии корзина всегда должна быть на видном месте.
Предпочтительно оставить ее в правом верхнем углу, хотя достижимость этой зоны и не идеальна.
Упростите изменение и удаление из корзины. Передумать в процессе нормально, не мешайте пользователю оставить в корзине только нужные товары.
Сделайте контрастную, но не кричащую кнопку удаления. Меняйте заказ динамически, без необходимости обновлять корзину или сохранять изменения.
Не забудьте показывать саммари заказа и в мобильной версии.
Большинство советов для мобильной версии заключаются в двух простых шагах:
- вы уменьшите количество контента до минимума, чтобы поместить все на небольшом экране -- расставляйте приоритеты осознанно;
- постарайтесь, чтобы мобильная версия не уступала вебу по функциям.
Снова не конец
Часть про корзину вышла довольно длинной. Историю про оформление заказа сокращать не хочется, поэтому впереди еще одна статья цикла.
Спасибо, что читаете. Добавляйте в закладки, чтобы не потерять. Подписывайтесь, чтобы не пропустить новую статью.
Всегда отвечаю на все комментарии и сообщения в личке. Мне очень важна обратная связь от вас :)
По поводу выбора цвета в корзине.
Это скорее осознание решение.
Покупатель уже решил что хочет и возможность поменять цвет заставит задуматься над тем тот ли цвет я выбрал или может другой, что провоцирует отложить и обдумать. В то время как размер это лишь важен, 41,5 и 42 ощутимая разница для ежедневного использования
Интересная гипотеза, но даже размер дают не везде менять :)
По размерам в принципе верно написано, только с поправкой что рассмотрены магазины моно бренды. Возможно есть свои мотивы.
Более показательны мульти брендовые средней руки. А также разбор мобильных версий, да покупки могут быть и стационраного. Но первый контакт это все же мобильный в 7/10 случаев (не имхо, а статистика)
Да, часто бывает что и больше 70% с мобильного. В большинстве случаев мобильные версии — урезанные полноценные, но иногда я затрагиваю их в цикле специально и фокусируюсь на отдельных моментах.
Например, во второй статье довольно много про навигацию в мобильных версиях.
Я, естественно, посмотрел не только эти магазины, но и другие. В большинстве рассмотренных дают менять только количество товаров. Характеристики — нет.
В том же woocommerce это можно сделать через такие костыли, даже представить тяжело....
Понимаю вас :)
Мы тоже сталкиваемся с ограничениями во время разработки: бюджет, сроки и инструменты далеки от идеала. Главное, всегда пытаться достичь максимально хорошего UX.
Отличный материал пишите. Жду продолжение.
Спасибо, Сергей :)
Вы как раз вовремя, следующая статья, возможно, будет последней из цикла :)
Интересно, почему указанные в статье компании этого не понимают. Есть какая-та причина, почему они не делают корзины по-человечески?
Работая с крупными компаниями, я понял что они ни чем не отличаются от мелких и средних.
Во многих крупных компаниях точно так же есть некомпетентные менеджеры и точно так же есть фокусы на опте. А для розницы и так сойдёт.
И это очень грустно :( Хотим, чтобы люди начали заботиться о других людях и своей прибыли. Пусть и с розницы.
С кем вам удалось поработать, если не секрет?
А вы не рассматривали эти ошибки с позиции "не ошибок"?
То есть, может быть у магазина есть обоснованные мнения, почему сделано именно так? Ведь согласитесь, продавать и рисовать, условно, не одно и то же. Возможно вы не знаете чего-то?
Есть ли тут эксперт с обратной стороны?
Микро и малый бизнес, мне кажется, ставит в приоритет розницу, по крайней мере в моём опыте.
Я думаю, что здесь определения размера бизнеса довольно субъективны.
Действительно, по нашему опыту многие небольшие магазины и сети уделяют внимание рознице. Есть и крупные ребята, которые не забивают.
К сожалению, у микро- и малого бизнеса часто мало ресурсов, а сайты сделаны 10 лет назад: дизайн устарел во всех смыслах и код превратился в помойку от постоянных доработок.
Все можно исправить, но иногда приходится начинать с нуля.
Есть гипотеза о специфике инструментов разработки, но вряд ли условный adidas не может себе что-то позволить.
Судя по сайту Vans, они на него просто забили. Какую-то прибыль приносит и ладно.
В моём укладе мира это не состыковывается 😁
Отличная серия вышла, доходчиво и понятно, с примерами. Благодарю вас
Спасибо, Эд :)
Еще одна статья точно будет. Потом посмотрим.
Ох жду, надеюсь и дальше будете писать, прям услада для мозга
Причем здесь дизайн??? Я, например, сотни раз оставляла в корзине товары, так как меня не устраивал пункт выдачи, или невозможность оплатить картой, или стоимость доставки. И в ПОСЛЕДНЮЮ очередь меня волновал дизайн корзины.
Думаю, мы понимаем профессию дизайнера по-разному, Екатерина.
Мы проектируем интерфейс от начала до конца. Выделяем и согласуем функциональность. Определяем, что показывать, а что нет. Мы не только рисуем картинки :) Иногда даже советуем, какие платежки подключать и объясняем клиентам, что оплата картой — мастхэв.
Вы привели в пример хороший кейс про стоимость доставки. Если магазины показывали бы вам минимальную стоимость доставки заранее, то вы бы даже не добавили в корзину товар со слишком дорогой доставкой. Верно? Или проблема была иной?)
Осталось только убедить в этом остальных х)
Mojo, вы невероятно кстати, я завтра буду наверстать корзину, а потом страницу оформления заказа, 80% я и так знаю и делаю, а остальные 20% взял на заметку и записал к себе. 😘 ❤
Очень рад, что смог помочь!
К сожалению, оформление заказа придется ждать до понедельника :(
💙
Прочитал весь цикл статей, понравилось. Сделайте, пожалуйста, отдельно о мобильной версии.
Вы мой герой! (Особенно, если везде лайк поставили, а то там третья статья проседает)
Из этого цикла точно еще будет статья об оформлении заказа. Про мобилку как раз думаем сейчас :)
Mojo, а как насчёт сделать нижнюю панель-бар, как в приложениях и отказаться от мини корзины, так будет по идее быстрее. Например как у ozon) И еще важная деталь, будет ли это юзабильно без ajax, то есть страницы будут загружаться с перезагрузкой, а не в фоне.
Я сам часто не замечаю на сайтах эти нижние панели. Вроде позволяет сделать дизайн компактным, но по факту это неудобно раз приходится искать
Не компактным, а удобным. Как можно их не замечать??? В каждом втором приложении панель-бары...
Нижнюю панель-бар для десктопа я плохо представляю :)
Для мобилки мы не считаем нужным использовать мини-корзины вообще. Используем ту же логику, что и в исследованиях для расширенной карточки.
Расширенная информация в карточке по наведению — хорошее решение, но в мобильных интерфейсах будет мешать. Как минимум, потому что onHover в мобилке (пока?) отсутствует.
Соответственно, можно просто отправлять пользователя в корзину.
Насчет панель-баров для мобильных версий или в рамках адаптивной верстки — сложно. Думаю, панель-бары победили бургер-меню. Тут ничего особенно странного. Бургер-меню — скрытая навигация и находится в труднодоступном для пальца месте.
К сожалению, панель-бар тоже не выглядит, как панацея:
1. Сайт открывается в браузере и привычную нижнюю часть занимает интерфейс браузера. При скролле вниз он пропадает, при скролле вверх возникает снова. Панель-бар будет прыгать.
2. На айфоне панель-бар может конфликтовать с хоум-индикатором, превратившимся в тонкую полоску в самом низу экрана.
3. В андройдах есть разные решения, но проблемы примерно те же.
Когда разрабатывается приложение, то все эти проблемы решаются :)
Что можно делать в версии для смартфонов? Например, добавить навигацию на главную страницу мобильной версии и в футер.
Подробно про всю навигацию я писал во второй статье. Вот ссылка :)
Что скажете по поводу одновременного существования и корзины, и виш-листа?
Не снижает ли наличие дополнительной опции конверсию, за счёт размытия пути пользователи и\или удлинения шага сделки ещё на один этап?
Зачастую пользователи используют корзину как виш-лист. Это не очень хорошо для маркетологов бизнеса, потому что невозможно посчитать реальную конверсию. Частично, страшное число в 70% завязано и на этом.
Виш-лист — не очень хорошее название, я об этом писал в третьей статье. Лучше использовать «Избранное».
У NNG есть еще идея с функцией отложить, но она для российского рынка очень непривычна. Я прям крайне редко встречаю её на локальных сайтах.
Исследования тех же NNG показывают, что это просто способ помочь пользователю не искать товары несколько раз. Особенно это важно, когда количество товара ограничено. В корзине он зарезервирован и другой человек не может его купить. В избранном лежит просто ссылка на товар.
По этой причине многие магазины перемещают товары в избранное автоматически. Важно давать пользователям возможность пользоваться и корзиной, и избранным без регистрации и авторизации. Этого никто не любит :)
Если в корзине добавить возможность менять параметры, например как в обуви цвет и размер, то как будет решаться ситуация, когда товаров более одного? Не думаю, что писать что-то по типу 2 штуки белого цвета 42 размера, 1 штука черного цвета 41 размера совсем удобно. В таком случае логично будет добавлять отдельные позиции в корзине. Надеюсь, вопрос понятен :)
А за статьи огромное спасибо, очень интересно и полезно. Отдельная благодарность за ссылки на источники.
Как раз решаем такую проблему сейчас для одного из наших клиентов — крупного интернет-магазина товаров для гигиены полости рта. Пока тестируем механику на жизнеспособность, так что рассказывать и хвастаться еще рано.
Вы на нас уже подписаны, так что не пропустите :з
+1