Рекомендации по оформлению корзин интернет магазинов

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

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

  • купить
  • оформить заказ
  • отправить заказ
  • перейти к оформлению

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

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

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

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

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

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

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

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

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

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

9. Переход к оплате – самая важная кнопка на странице. Основным заданием дизайнера является привлечение внимания пользователя к ней. Можно выделить ее на странице цветом или увеличить размер. Надпись на ней должна призывать к действию. “Купить сейчас” или “Оформить заказ” могут стать очень удачными вариантами.

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

Изначально в этом посте планировалось опубликовать подборку симпатичных дизайнов корзин русских интернет магазинов.  Когда встал вопрос составления такого списка, то самым полным и авторитетным рейтингом из всех, которые мы нашли в открытом доступе, стал рейтинг составленный журналом «Коммерсантъ».  Он включает 100 крупнейших по обороту ресурсов, но детальное их изучение показало, что только единицы из них выглядят достойно. К сожалению, оказалось, что в подборку включать просто нечего! Такое плачевное состояние вещей побудило нас начать подготовку серии материалов об электронной коммерции.  Следующий пост серии будет посвящен детальному анализу и критике дизайна корзин магазинов занимающих лидирующие места в упомянутом выше рейтинге. Пока что вы можете посмотреть удачные примеры корзин западных магазинов в нашем англоязычном блоге.

4 комментариев

  1. Макс

    http://www.borey.com.ua/
    можно получить конструктивную критику на данный проект.
    Ланный проект уже работает но постоянно дорабатывается

  2. Еще предложение в тему поста: конструктивная критика 5-закладочной корзины.
    Пример корзины: http://demo.imperacms.ru/cart?theme=IdealGift
    Интересует не обсуждение стилистического решения, а именно насколько удобна такая корзина, когда сделана на закладках со скроллингом.

    Теперь ответ на просьбу Макса по поводу borey.com.ua:

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

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

    Флажки “в сравнение”. Кликаются, но не понятно, как попасть на страницу сравнения товаров. То есть отправить товары в сравнение. Также у флажков желательно сделать кликабельным и текст.

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

    Html код страницы. Удалите трассировочную информацию в комментариях. Видны все выполнявшиеся MySQL запросы.

    Понравившиеся идеи:
    – кнопка “Купить” в модальном окне увеличенной фотографии на странице товара;
    – логотип производителя в правой части страницы товара и мини карточках товаров (когда “показывать: списком”), однако логотип почему-то не кликабельный (как посмотреть товары одного бренда, не пользуясь фильтром?).

    • По поводу корзины. Много движений для заказа. Учитесь у лучших. “Не заставляйте посетителя думать”, а думать в вашем случае нужно долго.
      1. Много полей для заполнения
      2. Лучше, чтобы это была пошаговая процедура, чем все и сразу. Некоторые вовсе не додумаются нажать на закладки.
      3. При введении данных в форму и последующим ее закрытием, данные в форме не сохраняются.
      4. Форма не проверяется на валидность введенных данных…

      Это то, что было замечено за 30-40 секунд. Извините, больше времени не могу уделить.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>