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

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

В предыдущих сериях

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

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

  • В третьей статье разобрали главные элементы каталога: фильтрацию и карточки. Я рассказал, почему IKEA использует горизонтальный фильтр-бар и как исправить главные ошибки выпадающих списков.
  • В четвертой статье продолжили говорить про каталог и обсудили грех быстрого просмотра у WildBerries и Lamoda. Главной темой была страница продукта.
  • Главный гость пятого выпуска — корзина.

Корзина

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

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

70% заказов
остаются в корзине навсегда

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

Мини-корзина

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

Пример мини-корзины  Один из наших проектов

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

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

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

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

50% онлайн-корзин
брошены из-за дополнительных расходов. Например, доставки.

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

Почему пользователи бросают свои электронные корзины Исследование Baymard Institute

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

Карточка в корзине

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

Советы

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

Важную информацию вынесли в корзину, но фотографию товара лучше сделать побольше Интернет-магазинг hm.com

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

Эйчик с зарой ходят парой. Здесь смогли решить проблему изображений вертикальной ориентацией карточки. С другой стороны, для пользователя это непривычно Интернет-магазин zara.com

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

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

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

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

Рейд по спортивным интернет-магазинам

Vans делают прекрасные кеды, но продают их на сайте с крайне плохим дизайном. Изменить нельзя ничего. Хорошо, что хоть кнопка удалить вынесена отдельно, а не количество нужно выкрутить на 0 Интернет-магазин vans.ru
У дизайнера adidas нашлось место на 2 кнопки «Оформить», но не нашлось на изменение расцветки внутри карточки или хотя бы размера Интернет-магазин adidas.
Nike дают возможность поменять размер. Выпадающий список при этом стоит кастомизировать, а изменить расцветку в корзине по-прежнему никак нельзя Интернет-магазин nike.com
На сайте Reebok постарались исправить ошибку старшего брата. Зачем-то закостылили все с помощью подобия быстрого просмотра. Выпадающий список, уходящий за пределы окна — без комментариев :) Интернет-магазин reebok.ru
Интересное решение с добавлением размеров для примерки. Хорошо, что можно менять размер (хотя анимация божественна просто — попробуйте сами) Интернет-магазин newbalance.ru
Кнопка изменить у Puma вышлет тебя обратно на продуктовую страницу, где ты сможешь изменить любой параметр. Параметров всего три — за что такие мучения? Может быть, где-то есть товары с большим количеством параметров. Я не нашел Интернет-магазин puma.com

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

Упрощаем

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

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

Так мы делать не рекомендуем Интернет-магазин ozon.ru
А так рекомендуем. Минимум деталей для максимальной сосредоточенности на задаче «Оформить заказ» Интернет-магазин mvideo.ru

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

Не только доставка

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

Дизайнер asos решил держать нас в неведении и обойтись строчкой «всего». Интернет-магазин asos.com

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

Связной показывает, как считается стоимость. Для итоговой стоимости есть строчка с  Интернет-магазин svyaznoy.ru

Проверьте мобильную версию, снова

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

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

Корзина на правильном месте Интернет-магазин svyaznoy.ru

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

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

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

Один из наших проектов

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

  • вы уменьшите количество контента до минимума, чтобы поместить все на небольшом экране -- расставляйте приоритеты осознанно;
  • постарайтесь, чтобы мобильная версия не уступала вебу по функциям.

Снова не конец

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

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

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

0
36 комментариев
Написать комментарий...
Стройиндустрия

По поводу выбора цвета в корзине.
Это скорее осознание решение.
Покупатель уже решил что хочет и возможность поменять цвет заставит задуматься над тем тот ли цвет я выбрал или может другой, что провоцирует отложить и обдумать. В то время как размер это лишь важен, 41,5 и 42 ощутимая разница для ежедневного использования

Ответить
Развернуть ветку
Antro
Автор

Интересная гипотеза, но даже размер дают не везде менять :)

Ответить
Развернуть ветку
Стройиндустрия

По размерам в принципе верно написано, только с поправкой что рассмотрены магазины моно бренды. Возможно есть свои мотивы.
Более показательны мульти брендовые средней руки. А также разбор мобильных версий, да покупки могут быть и стационраного. Но первый контакт это все же мобильный в 7/10 случаев (не имхо, а статистика)

Ответить
Развернуть ветку
Antro
Автор

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

Например, во второй статье довольно много про навигацию в мобильных версиях.

Я, естественно, посмотрел не только эти магазины, но и другие. В большинстве рассмотренных дают менять только количество товаров. Характеристики — нет. 

Ответить
Развернуть ветку
Павел

В том же woocommerce это можно сделать через такие костыли, даже представить тяжело....

Ответить
Развернуть ветку
Antro
Автор

Понимаю вас :)

Мы тоже сталкиваемся с ограничениями во время разработки: бюджет, сроки и инструменты далеки от идеала. Главное, всегда пытаться достичь максимально хорошего UX.

Ответить
Развернуть ветку
Сергей Ковалев

Отличный материал пишите. Жду продолжение.

Ответить
Развернуть ветку
Antro
Автор

Спасибо, Сергей :)

Вы как раз вовремя, следующая статья, возможно, будет последней из цикла :) 

Ответить
Развернуть ветку
Millsey

Интересно, почему указанные в статье компании этого не понимают. Есть какая-та причина, почему они не делают корзины по-человечески? 

Ответить
Развернуть ветку
Кирилл Вихарев

Работая с крупными компаниями, я понял что они ни чем не отличаются от мелких и средних.

Во многих крупных компаниях точно так же есть некомпетентные менеджеры и точно так же есть фокусы на опте. А для розницы и так сойдёт.

Ответить
Развернуть ветку
Antro
Автор

И это очень грустно :( Хотим, чтобы люди начали заботиться о других людях и своей прибыли. Пусть и с розницы.

С кем вам удалось поработать, если не секрет?

Ответить
Развернуть ветку
Владимир Сон

А вы не рассматривали эти ошибки с позиции "не ошибок"?
То есть, может быть у магазина есть обоснованные мнения, почему сделано именно так?  Ведь согласитесь, продавать и рисовать, условно, не одно и то же. Возможно вы не знаете чего-то?
Есть ли тут эксперт с обратной стороны?

Ответить
Развернуть ветку
Павел

Микро и малый бизнес, мне кажется, ставит в приоритет розницу, по крайней мере в моём опыте.

Ответить
Развернуть ветку
Antro
Автор

Я думаю, что здесь определения размера бизнеса довольно субъективны.

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

К сожалению, у микро- и малого бизнеса часто мало ресурсов, а сайты сделаны 10 лет назад: дизайн устарел во всех смыслах и код превратился в помойку от постоянных доработок. 

Все можно исправить, но иногда приходится начинать с нуля.

Ответить
Развернуть ветку
Antro
Автор

Есть гипотеза о специфике инструментов разработки, но вряд ли условный adidas не может себе что-то позволить.

Судя по сайту Vans, они на него просто забили. Какую-то прибыль приносит и ладно.

Ответить
Развернуть ветку
Millsey

В моём укладе мира это не состыковывается 😁

Ответить
Развернуть ветку
Ed Lee

Отличная серия вышла, доходчиво и понятно, с примерами. Благодарю вас

Ответить
Развернуть ветку
Antro
Автор

Спасибо, Эд :)

Еще одна статья точно будет. Потом посмотрим.

Ответить
Развернуть ветку
Ed Lee

Ох жду, надеюсь и дальше будете писать, прям услада для мозга

Ответить
Развернуть ветку
Antro
Автор
Ответить
Развернуть ветку
Odry

Причем здесь дизайн??? Я, например, сотни раз оставляла в корзине товары, так как меня не устраивал пункт выдачи, или невозможность оплатить картой, или стоимость доставки. И в ПОСЛЕДНЮЮ очередь меня волновал дизайн корзины. 

Ответить
Развернуть ветку
Antro
Автор

Думаю, мы понимаем профессию дизайнера по-разному, Екатерина.

Мы проектируем интерфейс от начала до конца. Выделяем и согласуем функциональность. Определяем, что показывать, а что нет. Мы не только рисуем картинки :) Иногда даже советуем, какие платежки подключать и объясняем клиентам, что оплата картой — мастхэв.

Вы привели в пример хороший кейс про стоимость доставки. Если магазины показывали бы вам минимальную стоимость доставки заранее, то вы бы даже не добавили в корзину товар со слишком дорогой доставкой. Верно? Или проблема была иной?)

Ответить
Развернуть ветку
Yes, Your Grace
Мы не только рисуем картинки :)

Осталось только убедить в этом остальных х)

Ответить
Развернуть ветку
Павел

Mojo, вы невероятно кстати, я завтра буду наверстать корзину, а потом страницу оформления заказа, 80% я и так знаю и делаю, а остальные 20% взял на заметку и записал к себе. 😘     ❤

Ответить
Развернуть ветку
Antro
Автор

Очень рад, что смог помочь!

К сожалению, оформление заказа придется ждать до понедельника :(

💙

Ответить
Развернуть ветку
ViktorVa

Прочитал весь цикл статей, понравилось. Сделайте, пожалуйста, отдельно о мобильной версии.

Ответить
Развернуть ветку
Antro
Автор

Вы мой герой! (Особенно, если везде лайк поставили, а то там третья статья проседает)

Из этого цикла точно еще будет статья об оформлении заказа. Про мобилку как раз думаем сейчас :)

Ответить
Развернуть ветку
Павел

Mojo, а как насчёт сделать нижнюю панель-бар, как в приложениях и отказаться от мини корзины, так будет по идее быстрее. Например как у ozon) И еще важная деталь, будет ли это юзабильно без ajax, то есть страницы будут загружаться с перезагрузкой, а не в фоне.

Ответить
Развернуть ветку
тест тестов

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

Ответить
Развернуть ветку
Павел

Не компактным, а удобным. Как можно их не замечать??? В каждом втором приложении панель-бары...

Ответить
Развернуть ветку
Antro
Автор

Нижнюю панель-бар для десктопа я плохо представляю :) 

Для мобилки мы не считаем нужным использовать мини-корзины вообще. Используем ту же логику, что и в исследованиях для расширенной карточки.

Расширенная информация в карточке по наведению — хорошее решение, но в мобильных интерфейсах будет мешать. Как минимум, потому что onHover в мобилке (пока?) отсутствует.

Соответственно, можно просто отправлять пользователя в корзину.

Насчет панель-баров для мобильных версий или в рамках адаптивной верстки — сложно. Думаю, панель-бары победили бургер-меню. Тут ничего особенно странного. Бургер-меню — скрытая навигация и находится в труднодоступном для пальца месте. 

К сожалению, панель-бар тоже не выглядит, как панацея:
1. Сайт открывается в браузере и привычную нижнюю часть занимает интерфейс браузера. При скролле вниз он пропадает, при скролле вверх возникает снова. Панель-бар будет прыгать.
2. На айфоне панель-бар может конфликтовать с хоум-индикатором, превратившимся в тонкую полоску в самом низу экрана.
3. В андройдах есть разные решения, но проблемы примерно те же.

Когда разрабатывается приложение, то все эти проблемы решаются :)

Что можно делать в версии для смартфонов? Например, добавить навигацию на главную страницу мобильной версии и в футер.

Подробно про всю навигацию я писал во второй статье. Вот ссылка :)

Ответить
Развернуть ветку
Илья Ефимов

Что скажете по поводу одновременного существования и корзины, и виш-листа?
Не снижает ли наличие дополнительной опции конверсию, за счёт размытия пути пользователи и\или удлинения шага сделки ещё на один этап?

Ответить
Развернуть ветку
Antro
Автор

Зачастую пользователи используют корзину как виш-лист. Это не очень хорошо для маркетологов бизнеса, потому что невозможно посчитать реальную конверсию. Частично, страшное число в 70% завязано и на этом.

Виш-лист — не очень хорошее название, я об этом писал в третьей статье. Лучше использовать «Избранное».

У NNG есть еще идея с функцией отложить, но она для российского рынка очень непривычна. Я прям крайне редко встречаю её на локальных сайтах.

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

По этой причине многие магазины перемещают товары в избранное автоматически. Важно давать пользователям возможность пользоваться и корзиной, и избранным без регистрации и авторизации. Этого никто не любит :)

Ответить
Развернуть ветку
Никита Шуплецов

Если в корзине добавить возможность менять параметры, например как в обуви цвет и размер, то как будет решаться ситуация, когда товаров более одного? Не думаю, что писать что-то по типу 2 штуки белого цвета 42 размера, 1 штука черного цвета 41 размера совсем удобно. В таком случае логично будет добавлять отдельные позиции в корзине. Надеюсь, вопрос понятен :)

А за статьи огромное спасибо, очень интересно и полезно. Отдельная благодарность за ссылки на источники.

Ответить
Развернуть ветку
Antro
Автор

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

Вы на нас уже подписаны, так что не пропустите :з

Ответить
Развернуть ветку
Айсулуу Аманкулова

+1

Ответить
Развернуть ветку
33 комментария
Раскрывать всегда