Что можно и чего нельзя делать при разработке мобильной корзины для покупок: 6 практических разборок (подробное руководство по мобильной коммерции)

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

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

Ожидается, что к 2021 году продажи мобильной коммерции составят 52,9% от всех продаж электронной коммерции. Тем не менее, в 2017 году средний уровень отказа от корзины покупок с мобильных устройств составил колоссальные 85,65%.

Это означает, что из всех клиентов, которые добавили товар или товары в корзину, почти 9 из 10 остались, не совершив покупки.

# Ожидается, что к 2021 году продажи мобильной коммерции составят 52,9% от всех продаж электронной коммерции. #EcommerceStats Click To Tweet
Мобильные клиенты бросают корзину. Помните, что агрегированные данные, как на графике выше, не учитывают значительных различий между отраслями. Источник.
В этом посте мы рассмотрим шесть примеров страниц с обзором корзины. Первые три используют надежные методы проектирования, которые вам следует рассмотреть, повторить, в то время как остальные примеры включают элементы, которых лучше избегать.

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

1. Делайте: Amazon

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

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

Совет по оптимизации # мобильных # тележек: сделайте один четкий #CTA в верхней части страницы контрастирующим цветом. #ecommerce #optimization Нажмите, чтобы написать твит
CTA всплывает вверху экрана, когда пользователь прокручивает страницу вниз.
Совет № 2: CTA занимает весь экран, поэтому его легко использовать как для левшей, так и для правшей.
Совет № 3: Повторяйте бесплатную доставку вверху страницы, чтобы развеять любые сомнения и «сделать сделку еще более приятной».
Совет № 4: изображения и названия продуктов ссылаются на страницу описания для тех, кто хочет еще раз проверить сведения о продукте.
Совет № 5: есть четкие и удобные кнопки для изменения суммы заказа, удаления элементов и сохранения их на будущее.
Совет № 6. Уведомление «В наличии» убеждает покупателей, что им не придется ждать товар.
# Мобильный совет по оптимизации тележки: уведомление "В наличии" убеждает # клиентов, что им не придется ждать товар. #ecommerce Нажмите, чтобы написать твит
Совет № 7: Amazon демонстрирует продукты, которые были «Сохранены на потом», с простой кнопкой «Переместить в корзину» внизу.
Элементы, сохраненные на будущее, хорошо видны.
Совет № 8: Добавьте сопутствующие товары - «Клиенты также делали покупки» - которые можно добавить в корзину, не покидая страницы. Дополнительный плюс для дизайна этого элемента, так как третий элемент показан не полностью и, следовательно, предполагает смахивающее движение.
Совет № 9: много белого пространства и отсутствие ненужных деталей-заполнителей. Amazon включил только то, что абсолютно необходимо.
Совет № 10: сделайте ссылку на «Верх страницы» в нижнем колонтитуле.

Хотите больше подобных идей?

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

на Я прочитал политику конфиденциальности и принимаю условия рассылки.

Установите этот флажок, чтобы продолжить

Woohoo! Вы только что зарегистрировались. Проверьте свой почтовый ящик, чтобы подтвердить подписку.

2. Сделайте: скрепки

Прелесть тележки Staples в ее простоте. Продукты можно просмотреть за секунды. В результате больший акцент делается на включенных опциях.
Прелесть тележки Staples в ее простоте. Одна из лучших тележек для мобильной электронной коммерции.
Совет №1. Как и Amazon, обращает на себя внимание тот факт, что товар будет доставлен бесплатно как вверху страницы, так и в сводке платежа. Более того, текст зеленого цвета, что выделяет уведомление. Также указана точная дата «ожидаемой доставки».
Совет № 2: Дизайн очень простой, и в нем отлично используется пустое пространство. Клиенты могут быстро проверить свои заказы, внести необходимые изменения, не покидая страницу, и проверить общую сумму.
Совет № 3: Поле «Купоны и награды» ненавязчиво. Также предоставляется важная опция «забрать в магазине», не отвлекая внимание от основного CTA.
Совет №4 . Слово «безопасный» включено в CTA при оформлении заказа.
Совет № 5: Нижний колонтитул был удален.

Что-то не так? Хотя Staples во многом прав, одна проблема с этим дизайном тележки - это простота заголовка, который не включает расширяемое меню или форму поиска. Если компания продает только один продукт, это может быть жизнеспособным решением. Однако для сайтов с несколькими продуктами всегда стоит дать клиентам возможность снова просмотреть, если они захотят.

3. Делайте: Sears

Sears предлагает множество дополнительных опций, включая планы оплаты, самовывоз в магазине, варианты подарков и промо-акции. Их корзина является хорошим примером для розничных продавцов, которые хотят объединить множество различных элементов на одной странице, не разрушая дизайн, который предотвращает отказ от мобильной корзины покупок.
Дизайн мобильной тележки Sears содержит множество элементов, но при этом остается простым.
Совет №1: CTA указывается вверху страницы рядом с промежуточным итогом. Значок замка еще больше укрепляет доверие, и также предлагается возможность оплаты через Paypal.
Совет № 2: В качестве дорогостоящего пункта включены планы платежей, чтобы развеять любые сомнения на этом этапе.
Совет № 3. Снижение продаж выделено красным цветом в разделе сводки заказа, побуждая клиентов переходить по ссылке, чтобы оформить заказ, создавая как срочность, так и уменьшая сомнения.
Совет №4. Предоставляется ссылка для входа в схему лояльности, которая служит дополнительным стимулом для новых клиентов. Важно отметить, что это не ссылка для создания учетной записи магазина без каких-либо преимуществ, которую было бы лучше включить в форму оформления заказа.
Совет № 5: печать «безопасного оформления заказа» находится внизу страницы.
Что-то не так? Их просто многовато, и эффект, вероятно, рассеивает внимание некоторых клиентов. Например, нет необходимости предлагать подписку на журнал и ссылку на программу лояльности внизу.

4. Нельзя: Vitacost

Хотя Vitacost использует множество элементов, описанных выше, их реализация часто бывает ошибочной. В результате получается плохо спроектированная страница корзины, на которой, скорее всего, произойдет увеличение конверсии корзины покупок с помощью нескольких небольших настроек.
Vitacost использует множество элементов, описанных выше, но их реализация часто бывает ошибочной.
Ошибка №1: добавление навязчивой панели поиска, которая уводит людей со страницы корзины. Хорошей идеей будет добавить значок панели поиска (как в примере с Amazon) для людей, которые хотят продолжить просмотр. Но не делайте его слишком большим.

Совет по оптимизации # Mobile #cart: не включайте навязчивую строку поиска, которая уводит людей от корзины. #ecommerce Нажмите, чтобы написать твит
Ошибка № 2: Автоматическое включение нечеткого продукта «BOGO» (купите один, получите половину цены), что может смутить или раздражать клиентов.
MIstake # 3: Навязчивая строка промокода. Это отвлекает внимание от основного призыва к действию и побуждает клиентов покидать корзину и искать промо-акции в Интернете. Промо-коробки должны быть видны, но не слишком сильно. Они обязательно должны быть после призыва к действию.
MIstake №4: Стоимость доставки установлена ​​как «TBD», что вызывает сомнения (вообще говоря, вам следует избегать сокращений).
Ошибка № 5: нижний колонтитул слишком большой. Желает ли Vitacost, чтобы клиенты завершили покупку или загрузили приложение?
Ошибка № 6: варианты продуктов - для удаления или увеличения элементов - слишком малы, и их трудно использовать.
Ошибка № 7: плавающая полоса, которую можно увидеть прямо в нижней части скриншота, занимает слишком много места на экране на небольших телефонах.

5. Не делайте этого: Lonely Planet

Там, где страница Staples эффективно использует минималистичный дизайн, Lonely Planet исключает слишком много элементов. Здесь нет функций, позволяющих уменьшить колебания и завоевать доверие, нет рекомендаций или предложений по продукту, которые увеличивали бы ценность покупки, и многие кнопки трудно нажимать.
Lonely Planet исключает слишком много элементов. У них осталось много места, которое можно было бы использовать для улучшения ux тележки.
Ошибка №1: Плохо используется пространство. Было бы лучше, чтобы корзина заполняла всю страницу и использовала пустое пространство, а не всплывала поверх текущего содержимого.
Ошибка №2: не указана информация о доставке, скидках или способах оплаты. Это, вероятно, уменьшит сомнения и опасения неуверенных клиентов.
Ошибка № 3: нет предложений по продукту.
Ошибка №4: кнопки увеличения или уменьшения количества товаров настолько малы, что их практически невозможно нажать.
Ошибка № 5: CTA - «Перейти к оформлению заказа» - не похож на кнопку.
Ошибка № 6: формат всплывающего окна затрудняет нажатие на призыв к действию слева. Позвольте клиентам использовать оба пальца!

6. Нельзя: Nike.

Основная проблема со страницей Nike заключается в том, что различные элементы были включены случайным образом, при этом не было очевидных размышлений о том, как они могут работать, если разместить их вместе или в разных точках страницы. Также существует путаница с CTA.
На странице Nike были случайным образом включены различные элементы.
Ошибка №1: Скидки на доставку доступны только участникам. Это добавляет ненужных трений и, вероятно, станет сдерживающим фактором для тех клиентов, которые не хотят присоединяться, которые будут думать, что они проигрывают. Предложите клиентам возможность войти в систему на этапе оформления заказа, а также возможность подписаться на новых клиентов. Страница корзины должна быть предназначена исключительно для просмотра заказов.

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

Ошибка № 3: «Принятые типы платежей» не указаны рядом с призывом к действию на кассе. Рекомендуется разместить эти значки на странице корзины, особенно если вы не так хорошо известны, как Nike, но нижний колонтитул для них не место.

Ошибка №4: термин «гость» может ввести в заблуждение, если клиенты не идентифицируют себя таким образом (можете ли вы стать участником, если совершаете покупки в качестве гостя?)

Завершение дизайна мобильной корзины для покупок

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

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

Получите контрольный список оптимизации электронной торговли из 115 пунктов

Опираясь на восьмилетний опыт, мы собрали все наши главные идеи в одну книгу: Контрольный список оптимизации электронной торговли для интернет-магазина из 7+ цифр. Если вы хотите повысить производительность всех своих страниц - от домашней страницы до оформления заказа, возьмите свою копию здесь.