Как не надо оформлять корзины магазинов

В предыдущей статье цикла об электронной коммерции "Рекомендации по оформлению корзин интернет магазинов" мы рассказали об основных правилах оформления страниц корзин. Изначально  там планировалось сделать подборку корзин популярных магазинов и на их основе продемонстрировать общие правила и закономерности, но реальность внесла жесткие коррективы. Из топовых 20 магазинов рунета по рейтингу "Коммерсантъ" только некоторые могут похвастаться качественным и проработанным дизайном, а остальные вызывают ужас и непонимание.

Ниже мы постараемся поделиться своим опытом в создании корзин для электронных магазинов и постараемся выявить основные недоработки.

* * *

ozon.ru ozon.ru

Ozon.ru не зря является самым известным и крупным русским интернет магазином. Функциональность и дизайн корзины этого сайта тщательно проработаны. Ничто не отвлекает покупателя от основной цели – совершения покупки, кнопка оформления заказа четко видна, и при этом и не режет взгляд. Особенно удачно выполнена схема рекомендаций дополнительных товаров. Основное предложение для дополнения покупки находится справа, и добавить книгу в заказ можно в один клик. Кроме того, сам подбор рекомендуемой книги очень удачен. Она совпадает с уже добавленной в корзину по тематике и по общему духу, а по цене несколько ниже, так что покупатель легко может заинтересоваться ей. Остальные предложения расположены ниже и их легко увидеть при прокрутке страницы.

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

* * *

Sotmarket.ruSotmarket.ru

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

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

* * *

UTI-note.ru UTI-note.ru

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

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

Дополнительную путаницу вызывает возможность изменения типа обслуживания. По умолчанию стоит "Стандарт", но пояснений чем отличаются "Бизнес" и "Премиум" нет.  Вместо того, что бы перейти к следующей фазе оформления заказа приходиться разбираться в дополнительных услугах.

Здесь каталог выглядит уже не так навязчиво, как в предыдущем примере, но все равно целесообразность его расположения на странице корзины сомнительна. В большинстве случаев пользователь оказывается в корзине уже для оформления заказа.

* * *

Citilink.ruКорзина

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

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

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

При просмотре страницы возникает четкое ощущение ее незавершенности.

* * *

Vasko.ru vasko.ru

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

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

Хорошим решение является размещение банера с рекламой проводимых акций возле информации о заказе.

* * *

Fifty.ru fifty.ru

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

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

* * *

Techhome.ru techhome.ru

Удивление вызывает банер страховой компании, который находится слева ниже списка категорий. Если магазину приходится зарабытывать деньги на показе банеров, то можно ли им вообще доверять?

Правая колонка с банерами ведет на внутренние страницы магазина с предложениями товаров от конкретных производителей. Даже если предположить, что там находятся самые покупаемые и прибыльные для магазина товары, то схема все равно требует пересмотра. Рекомендовать изучить ассортимент хлебопечек при покупке фонаря кажется несколько странным. Кроме того, на этой странице мы снова видим бесполезный в корзине каталог.

* * *

Boutique.ru Boutique.ru

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

Ниже приведенной на скриншоте корзины находится "бесконечный" список брендов представленных в магазине.  Большинству пользователей было бы гораздо удобнее, если бы к выбираемому элементу одежды предлагались схожие по стилю сопутствующие элементы, например, юбка к упомянутым выше сапогам, или же другие другая обувь, которая будет дополнять гардероб.

* * *

Top-shop.ru Top-shop.ru

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

* * *

Electroklad.ru Electroklad.ru

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

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

* * *

Toool.ruToool.ru

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

* * *

Kolomenka.ru Kolomenka.ru

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

* * *

Bigtv.ru BIGTV.RU

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

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

* * *

Tehnozona.spb.ru tehnozona.spb.ru

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

* * *

Komfortbt.ru KomfortBT.RU

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

* * *

Allcables.ruAllcables.ru

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

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

* * *

Playback.ruPlayBack.ru

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

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

* * *

eAfisha.rueAfisha.ru

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

* * *

Shina-online.ruShina-online.ru

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

 * * *

Tehnoman.ruTehnoman.ru

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

* * *

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

* * *

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

Понимая, что даже на очевидно полезные рекомендации в изменении интерфейсов администрации крупных ресурсов трудно решиться, мы рекомендуем пользоваться возможностями Google Website Optimizer для их проверки на части аудитории. Это позволит провести анализ эффективности предлагаемых решений и избежать рисков связанных с неприятием основной аудиторией таких изменений.


Илья Скрипка

Профессионал, и этим все сказано! В интернет-маркетинге уже более 10 лет. Начинал с написания постов, занимался разработкой маркетинговой стратегии выхода на рынок, в последствии возглавлял целый Promo отдел по продвижению продукции на маркетплейсе TemplateMonster. Сейчас же Илья профессиональный маркетолог, с огромным опытом, который всегда готов помочь коллегам не словом, а делом. Ищите Илью в LinkedIn.