Usability.by » Blog Archive 10 советов по проектированию корзины | Usability.by
Улучшаем взаимодействие пользователей с вашим сервисом Повышаем конверсию
в продажи, заявки или
звонки
Проектируем
новые
продукты
Компания 1Point осуществляет весь спектр услуг в области юзабилити, дизайна, user experience
и веб-аналитики

10 советов по проектированию корзины

Артём Янцевич Артём Янцевич

Перевод статьи, опубликованной на Webdesignerdepot, «10 Tips to Design Usable Shopping Carts»


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

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

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

1. Полностраничный и мини-вариант корзины.

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

Хороший пример «мини-корзины».

Её функции сводятся к отображению в реальном времени покупок пользователя. Минимум информации, только самая важная. Кроме того, необходимо, что бы она имела связь со своим «страничным» вариантом.

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

Пример (мини-корзина – правый верхний угол, на странице — полноценный вариант):

2. «Оформить заказ»: шаг за шагом или одна страница

Использование поэтапного метода делает процесс оформления заказа достаточно простым. Посмотрим на Apple.com : вся процедура уместилась в 4 этапа — Sign In (Вход), Billing & Shipping (Состояние счёта), Payment (Платежи) и Verify/Edit (Подтверждение/Изменение).

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

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

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

3. Иконка корзины

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

4. Сделайте кнопки заметными

При разработке следует учесть факт расположения и внешнего вида кнопок типа : «Добавить в корзину», «Оплатить», «Заказать» т.д. Лучше увеличить эти кнопки, сделать их очевидными и доступными. Убедитесь, что текст на кнопках написан чётко и понятно, что нет грамматических ошибок. Одним из вариантов расположения подобных кнопок – под информацией о продукте.
И помните, если клиент не сможет найти или распознать кнопку «Оформить заказ» или другую, то он не сможет купить ваш продукт!

5. Используйте таблицы

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

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

6. Ссылка «Продолжить покупки»

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

Обратите внимание, на сколько просто реализована эта идея. «Оформить заказ» и «Продолжить покупки» совершенно одинаковы… «Быть может мне купить, что-то ещё?» — подумает клиент.

7. Избегайте использования большого количества полей

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

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

8. Спасение утопающих — дело рук самих утопающих

Если вы руководствовались при проектировании таким принципом, то можете смело начинать всё с начала. Потому что клиенту необходимо на странице максимально помочь, чуть ли не сделать всё за него.

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

9. Визуальная поддержка

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

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

10. Проверка/изменение заказа

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

Дополнительные примеры:

IconDock — очень удобная Корзина. Всё, что вам нужно сделать — это перетащить элемент на панель. Она автоматически посчитает сумму заказа.



Media Temple — табличная структура отображения цен, отличное оформление кнопки «Оформить заказ».



Early Learning Centre — 2 варианта корзины, пошаговая процедура оформления заказа, с спользованием изображений.



Roxy — лаконичное отображение информации о покупках.



Mia & Maggie — хорошее оформление корзины.



Mia & Maggie — реализация пошагового оформления заказа на одной странице.



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



Evel — ещё один вариант корзины.



Design by Humans — отличная организация страницы заказов : подсказки, примеры, группы.



Bridge55 — использует иллюстрации товаров.



Cosmic Soda — хорошее использование двух вариантов корзины.



Incase — отличный вариант организации полей ввода информации.



Shoon — вариант исполнения корзины в виде всплывающего окна.



Wunderbloc — lightbox-вариант корзины.



Bored of Southsea — ещё один вариант корзины.



Subnormals — использование двух видов корзины, пошаговой схемы оформления заказа.



AlphaStore — табличная структура отображения товаров в Корзине, использование иконок.



Me & Mommy-to-be — отображение схемы ценообразования.

Полезные материалы:

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

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua


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

  1. Lewis:

    спасибо за перевод

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

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

  4. Guy:

    .

    спс….

Комментировать