Обратный звонок
Есть вопросы? Звоните!
‎050-100-39-90
Обратный звонок
Есть вопросы? Звоните!
‎050-100-39-90
 
Разработка сайтов

Usability интернет магазина: 30 вариантов улучшения корзины

По данным исследований 69% потенциальных покупателей не завершают покупки в интернет-магазине, бросая корзину. Эта ситуация мало изменилась с момента, как были проведены первые исследования на эту тему. Причины отказа совершенно разные: от "У вас все сложно" до "Заплакал малыш и я забыла отправить заказ". В статье презентуем 30 пунктов из своего чек-листа для улучшения Юзабилити корзины в интернет-магазине.
Автор: Владимир Завьялов
Опубликовано: 16.07.2018

Кратко о внедрении

У каждой корзины есть свои особенности:
 
  • тематика,
  • страна,
  • технические возможности,
  • дизайн и т.д.
 

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

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

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

Чек-лист от WEBAPEX: 30 UX улучшений корзины в интернет-магазине

Чек лист юзабилити интернет-магазина: как улучить корзину

        Пункт 1: Показывается ли что товар уже в корзине?

        Эта функция крайне простая, но ее нет на большинстве интернет-магазинов. Когда клиент положил товар в корзину, кнопка изменяется с "Купить" или "Положить в корзину" на "Уже в корзине".
        






        Пример функции "Товар уже в корзине"

         

        Функция "Товар в корзине"

         

        Смотрите видео:

        Пункт 2 : УТП в корзине

        УТП (Уникальное торговое преимущество) компании в корзине. Допустим, что вашим преимуществом является Бесплатная доставка товара. В таком случае это стоит продублировать в корзине.
        






        Пример УТП в корзине

        УТП в корзине интернет-магазина

        Пункт 3: Автозаполнение форм в корзине

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






        Пример автозаполнения форм

        Автозаполнение форм в корзине интернет-магазина

        Пункт 4: Использование начислений и бонусов в корзине

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






        Пример использования бонусов

        Использование бонусов и скидок в корзине интернет-магазина

        Пункт 5: Возможность восстановить товар в корзине

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






        Пример функции "Восстановить товар"

        Функция "Восстановить товар в корзине "

         

        СМОТРИТЕ ВИДЕО:

        Пункт 6: Можно ли вернуться для редактирования шагов?

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






        Пример опции "Вернуться и редактировать шаги в корзине"

        Вернуться и редактировать данные в корзине

        Пункт 7: Можно ли отменить промо-код, акцию или бонус

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






        Пример: Отмена промо-кода или бонуса

        Отмена промо-кода или бонуса в коризне

        Пункт 8: Сообщать в случае, если количество превысило склад

        Речь идет про количество товара на складе при заказе. Например, Ваш покупатель хочет 15 авторучек, а у вас на складе всего 8. В таком случае нужно показать ему сообщение об ограничениях на складе, а не сообщать спустя 2 часа как ваш менеджер разберется с этим вопросом.
        






        Пример опция "Ограничения на складе"

        Пункт 9: Возможность отправить на другое лицо (человек, юр.лицо)

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






        Пример функции "Отправить на другого человека"

        Функция "Отправить на подарок или на другого человека"

        Пункт 10: Указать, что это подарок и выбрать коробку

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






        Пример "Заказать на подарок и выбрать упаковку"

        Функция "Выбрать подарочную упаковку"

        Пункт 11: Использование плэйсхолдеров для разъяснения

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





        Однозначно первый вариант является более понятным и имеет больше шансов не сбить покупателя с толку. 
        Мы предпочитаем 3-й вариант. Отвечать в Placeholder на вопрос зачем вам нужны мои данные? По нашим наблюдениям это сильно увеличивает сбор данных о клиенте как в качественном, так и в количественном выражении.

        Пример использования плейсхолдера для разъяснения инфо

        ВАРИАНТ 1:

        Плейсхолдер в корзине интенет-магазина

        ВАРИАНТ 2:

        ВАРИАНТ 3:Плейсхолдер для информации в интернет-магазине

        Пункт 12: Показывайте информацию о дополнительных расходах

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





        В противном случае увеличение конверсии корзины приведет к абсолютному падению на следующем шаге работы менеджера по продажам, когда он сообщит о дополнительных расходах вашему клиенту.
        Только вчера жена заказывала новую мебель на балкон. Все шло хорошо до того момента, как мы узнали, что компания осуществляет доставку со своего склада в Одессе и стоить это будет почти 30% от стоимости не дешевого заказа. На этом наши контакты прекратились и я не стану рекомендовать такую компанию своим знакомым. Недоговорив 1 раз, могут что-то недоговорить и второй, о том что подъем мебели на этаж в лифте стоит еще 30% от суммы мебели:) Я немного преувеличил, но многие из покупателей думают именно так и чувствуют когда им недоговаривают что-то важное.
        Это касается не только доставки, но всего остального. Скажем если у вас на фото диван с подушками и нет объяснения, что подушки идут отдельно. Значит цена указана с подушками.
         
         
        Если вы продаете товар и на сайте фото в определенной упаковке, то стоит сообщить, если она идет за дополнительную цену.
        Не прячьте от клиентов их дополнительные расходы, иначе их ожидания сильно разойдутся с реалиями своего заказа.

        Пример как показать дополнительные расходы

        Показать дополнительные расходы в корзине

        Пункт 13: Покупка без регистрации

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






        Пример "Покупка с обязательной регистрацией"

        Пункт 14: Наглядно показывать прогресс

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






        Пример как показать прогресс

        Эффект прогресса в корзине интернет-магазина

        Пункт 15: Использовать принцип ожидаемого результата

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






        Пример: принцип ожидаемого результата

        Пример: принцип ожидаемого результата

        Пункт 16: Автоматическое обновление в корзине

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






        Пример автоматического пересчета в корзине

        Пункт 17: Cross sale

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






        Пример Cross sale

        Пункт 18: Подсказки при оформлении заказа

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






        Пример вывода подсказок в корзине

        Пункт 19: Возможность перейти в карту товара если остались вопросы

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






        Пример перехода с корзины в товар

        Пункт 20: Сделать предложения в пустой корзине

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






        Пример предложения в пустой корзине

        Пункт 21: Использовать конкретные призывы к действию

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






        Пример конкретного призыва к действию

        Пункт 22: Убрать все посторонние элементы из корзины

        Если клиент перешел в корзину, то на странице ничего не должно отвлекать его от покупки, в основном это касается основного меню сайта, которое присутствует сквозняком у 80% корзин интернет-магазинов. В примере отсутствует меню категорий, поиск, и другие элементы сайта.
        






        Пример

        Пункт 23: Видимые изменения при совершении действия

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






        Пример видимого изменения при нажатии кнопки "купить"

        Пункт 24: Визуальное представление заказа в корзине при наведении

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






         

         

         

         

         

        Пункт 25: Фиксация брошенных корзин и отправка автоматического письма о возврате к заказу

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






        Пример письма "Брошенная корзина"

        Пункт 26: Разные варианты оплаты товара

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






        Пример

        Пункт 27: Короткие шаги при оформлении заказа

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






        Пункт 28: Принцип контраста для выделения элементов корзины

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






        Пример "Принцип контраста"

        Пункт 29: Показывайте фото товара на всех этапах заказа

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






        Пример

         

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

        В проектах, которые ведет наша компания за последние 3 года процент пользователей с мобильных телефонов увеличился с 14% до 65%. А в 2017 году практически во всех проектах заказы с мобильных телефон превысили десктоп. В 2018 г разрыв только увеличивается, поэтому мы и завершаем столь глобальным пунктом. Мобильная корзина должна быть такой же удобной, как и десктопная (на ноутбуках, стационарных компьютерах). 
        





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

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

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

         

        Давайте обсудим?

        Есть светлые мысли по теме? Пишите в комментариях, задавайте вопросы!

        Хочу отправить свой комментарий
        закрыть

        Ваш комментарий успешно отправлен.

        Все материалы, размещенные на сайте являются собственностью компании WebApex. При копировании ссылка обязательна.