Как сделать корзину интернет магазина

Идеальная корзина, или «не заставляйте меня думать»

Начнём с того, что ничего идеального в этом мире не существует. Однако нет предела совершенству, поэтому стремиться к идеалу, бесспорно, необходимо.

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

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

Наиболее частой проблемой, связанной с количеством заказов (если, конечно, не брать в расчет отсутствие посещаемостиッ), является брошенная корзина. Покупатель кладет товар в корзину, переходит к оформлению, а затем покидает сайт, так и не совершив покупку.

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

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

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

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

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

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

И начнем мы не со страницы самой корзины, а с ее внешнего представления.

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

Не мудрите с расположением корзины. Она должна находиться там, где ее ожидают увидеть посетители, а именно — в правом верхнем углу.

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

Это своего рода мини-корзина, которая призвана решать ряд определенных задач, а именно — дать пользователю возможность:

ознакомиться с содержимым корзины;

изменить количество того или иного добавленного в корзину товара.

удалить ненужный товар;

узнать итоговую сумму покупок;

О последних двух пунктах подробнее.

Исключение товара из списка покупок должно происходить быстро и безболезненно.

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

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

При осуществлении манипуляций с товаром (добавление/удаление/изменение количества) в корзине посредством всплывающего окна, сумма заказа, а также содержимое корзины должны меняться с лёту.

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

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

Чтобы у посетителя не возникло вопросов, покажите, что товар теперь добавлен в корзину.

Реализовать это можно так:

«Летящий» в корзину товар.

Анимация перемещающегося в сторону корзины товара:

2. Смена надписи/цвета на кнопке, либо и то и другое вместе.

3. Всплывающее окно.

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

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

Перейдем на страницу корзины.

Тут есть 2 варианта:

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

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

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

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

Корзина – Выбор доставки – Выбор оплаты – Подтверждение заказа

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

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

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

Предложите пользователю выбор: регистрироваться или нет.

А еще лучше создайте аккаунт покупателя автоматически, выслав доступы с информацией о заказе на указанный пользователем email или телефон.

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

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

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

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

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

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

Для поля ввода телефона это формат type=”tel”, для поля ввода email-адреса — type=”email”.

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

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

Теперь поговорим о наполнении страницы корзины.

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

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

Выбор количества позиций.

Цену каждого добавленного товара.

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

Блок сопутствующих товаров. С помощью данного блока можно совершать дополнительные продажи.

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

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

Что желательно сделать:

Добавить кнопку быстрого оформления заказа. Дайте клиенту возможность сэкономить время, позволив ему ввести лишь имя и телефон. Также время пользователя сэкономит кнопка «Купить в 1 клик», расположенная в карточке товара.

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

Реализовать промокоды. Кто не хочет сэкономить? Используйте поле для ввода промокода. И не забывайте раздавать их или разыгрывать.

Кратко рассказать о каждом способе доставки и оплаты.

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

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

Предоставить на выбор больше способов доставки и оплаты.

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

Уведомляйте покупателя об изменении статуса заказа. Например, о том, что заказ передан курьеру, или о том, что заказ прибыл в пункт самовывоза. Так клиент поймет, что его заказ в обработке, и сам не забудет о нем.

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

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

Необходимо, чтобы корзина в интернет-магазине работала без сбоев 24/7. Для этого нужно постоянно мониторить ее работоспособность. В идеале — тестировать с помощью фокус-групп.

Не лишними будут и постоянные улучшения, но обязательно после проведенных тестов.

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

Ведущий SEO-специалист компании RACURS

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

Даже если доставка на 3-15 дней дольше?

Просто как вариант

А как связаны удобство корзины и скорость доставки?

точно также, как связана цена товара с удобством корзины)

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

Разбивка оформления заказа на несколько шагов:

Это становиться не актуально. Пользователей, которые не заканчивают оформление все больше и больше. Пользователи хотят оформить заказ быстрее не тратя свое время.

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

Источник

UX-дизайн интернет-магазина: пять свежих фишек для корзины

Мы провели исследование: взяли 20 крупнейших e-commerce в России и рассмотрели их дизайн под микроскопом. В статье собрали короткие видео с новыми UX-приёмами, которые можно применить в корзине онлайн-магазина.

В Ratio мы занимаемся веб-разработкой: создаём на заказ сайты и веб-сервисы, в том числе для e-commerce. В этом году провели исследование, чтобы понимать, в какую сторону развивается UX в онлайн-торговле.

Я директор и участвовал в исследовании как консультант, а сотрудники Ratio собирали и анализировали UX-решения. Данные актуальны на октябрь 2020 года.

Этот материал — часть цикла. Уже вышли статьи про главную страницу и про карточку товара, на очереди материалы про каталог и раздел с акциями.

Статьи будут публиковаться на разных площадках, так что подписывайтесь на телеграм-канал @panfilovonline — там я буду выкладывать ссылки по мере их появления.

Корзина и чекаут — чуть ли не самая важная часть сайта. Именно здесь пользователь принимает окончательное решение: купить или забыть.

Крупные e-commerce используют следующие UX-приёмы:

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

Что вы подумаете, если увидите на сайте две корзины? А если их будет пять?

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

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

С дополнительными корзинами удобно готовиться к праздникам. Если до Нового года ещё далеко, а идеальный подарок попался на глаза сейчас — можно сразу добавить его в новогоднюю корзину.

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

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

В строительных магазинах Петрович и ВсеИнструменты.Ру в корзине можно воспользоваться дополнительным полем поиска. С его помощью удобно добавлять товары в корзину без перехода в каталог.

Поле поиска будет полезной частью корзины профессионального магазина.

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

На сайте Asos можно поменять размер одежды прямо в корзине, через выпадающий список. Удобно, ничего не скажешь.

Быстрое изменение характеристик товара в корзине будет уместно смотреться не только в магазинах одежды. Тем же способом можно менять цвет и количество памяти iPhone или размер матраса в IKEA.

В DNS у покупателя есть выбор: получить товар из запасов в магазине или заказать его со склада. Иногда за покупку со склада полагается скидка.

В крупных ecommerce-проектах, у которых есть магазины в офлайне.

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

М.Видео и Эльдорадо за дополнительную плату предлагают отправить товар с таксистом — это быстрее, чем ждать фирменного курьера.

Предложением нельзя воспользоваться, если покупаете что-то крупногабаритное или в рассрочку/кредит.

Везде, где товары лёгкие и помещаются в такси.

Конечно, если вы крупная сеть и не боитесь брать на себя дополнительные риски по доставке таксистами. Всё-таки качество работы своих курьеров контролировать проще.

Чтобы не пропустить другие материалы с результатами исследования, подписывайтесь на мой телеграм-канал @panfilovonline. Не все статьи будут опубликованы на vc.ru, поэтому телеграм-канал — единственный способ собрать их все.

Следующие материалы будут посвящены каталогу и разделу со скидками.

Основной контент исследования: Артём Полтавцев — редактор, UX-писатель. Оформление статей: Катя Шведюк — дизайнер.

Источник

Урок 34. Настройка интернет магазина. Часть 4. Корзина и заказы

Настройка заказов и корзины в интернет магазине uCoz: минимальные сумма и позиции заказа, номер следующего заказа, автоперенос пользователя в группу, типы корзины, эффекты при добавлении товара в корзину, автодобавление товаров

Сергей 19.03.2014 23527 4.4 из 5.0 (8)

Цель урока

Выполнить настройки заказов и корзины. Познакомиться с возможными ограничения для заказов в магазине uCoz. Рассмотреть виды корзины и эффекты при добавлении товаров. Настроить автодобавление товаров.

Введение

Вспоминаем, на чем остановились в прошлый раз. Пропустим пункт «Баланс пользователей», так как это очень объемный урок и требует отдельного рассмотрения, а также «Авторегистрация пользователей», т.к. ее мы рассматривали на уроке 31.

Настройки заказов

Следующим в настройках интернет магазин идет блок опций для заказов:

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

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

Ограничение аналогично «минимальной сумме заказа», создает препоны для покупателя. Если нет острой необходимости, то лучше его не применять. При невозможности оформить заказ пользователю показывается уведомление.

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

Давайте нажмем по галочке напротив «Переносить пользователя в группу при достижении количества заказов», появятся дополнительные настройки:

Настройки корзины

После настроек для заказов идет блок опций для корзины:

Тип корзины. Доступно два значения «Простой» и «Расширенный». Отличия в том, что в расширенном виде корзины помимо суммы и количества позиций, указываются товары, которые ранее добавлены в корзину.

Сокращать названия товаров в корзине до. Заметили на предыдущем скриншоте многоточия в конце товаров у расширенной корзины? Опция позволяет сократить текст, если он не убирается в ширину. Иногда это полезно.

Использовать визуальный эффект при добавлении товара в корзину. Эффект возникает при нажатии на кнопку «Добавить в корзину» и перемещает рамку или изображение от фотографии товара к корзине.

Есть возможность не использовать никаких визуальных эффектов. Но это актуально для тех, кто сам может добавить такой эффект, например всплывающее окно с текстом «Товар добавлен» и предложением перейти к оформлению заказа.

При отсутствии эффекта пользователь может прийти в замешательство и приступить к решению вопроса «Что делать дальше? Закрыть вкладку или еще подумать?». Лучше до этого не доводить.

Часто возникают вопросы «В настройках стоит «Парящее изображение, но при добавлении товара ничего не происходит. Почему?». Ответ такой: ваш шаблон не предусматривает такой возможности. Чтобы все работало как надо, нужно чтобы у изображения и кнопки добавления товара были заданы определенные идентификаторы id=»$BLOCK_PREF$-gphoto-$ID$» для изображений и id=»$BLOCK_PREF$-$ID$-basket» для кнопки добавления в корзину. О том, как их добавить мы поговорим позже.

Выводить наценку при отображении выбранных опций товара в корзине. Опции мы рассматривали на 16-ом уроке.

Перенаправлять на сайт платёжной системы после нажатия на кнопку «Оформить заказ». Эта настройка помогает направить пользователя сразу к оплате, может снизить количество оформленных, но неоплаченных заказов. Используется только для модулей электронных платежей.

Очищать корзину от ранее добавленных товаров при нажатии на кнопку «Купить сейчас». Кнопка «Купить сейчас» это один из вариантов добавления товара в корзину в интернет магазине uCoz. Все способы приведены ниже в таблице. Данная опция может реализовать собой «Покупку в один клик».

Дополнительно возможно указать количество добавляемых товаров через двоеточие после ID товара. Если количество не указано, подразумевается: 1. Например: 423:2, 171:3, 89, 714

Упражнения

Источник