Блог про интернет-маркетинг для бизнеса

Кейсы

Оформление заказа в корзине. От сложного к простому

21
16
1
4

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

Задание

Нам надо продать: 1. несколько изданий в качестве отдельных номеров; 2. несколько изданий с разными периодами подписки; 3. как одному, так и нескольким пользователям;

4. "безболезненно" переместить в корзину "избранное".

Условие: это надо представить на одной странице, экономно по площади, и при этом так, чтобы всё было интуитивно понятно среднестатистическому пользователю.

Итак, приступим.

Шаг 1

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

3. Кнопка с суммой символизирует переход на страницу с оформленим заказа.

Шаг 2

Оформление заказа для одного человека.

Здесь надо дать свободу пользователю легко снизить стоимость своего заказа.

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

Тонкости

Если выбрана подписка - отображается не один листок, а несколько.

Кнопка оформления заказа должна быть:

1. хорошо заметна;

2. желательно выделена другим цветом;

3. лучше использовать глагол (сказать прямо, что мы хотим от пользователя).

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

Шаг 3

Перемещаем все выбранное ("избранное") пользователем в корзину. Эти модули должны быть как можно ближе друг к другу, чтобы при перемещении избранных товаров тут же можно было оформить заказ. Пример, как это можно сделать:

Можно выбрать либо все, либо выборочно некоторые издания в корзину (используя чекбокс). При клике по кнопке «В корзину», таб «Корзина» подсвечивается зеленым цветом и индикатором количества изданий.

Шаг 4

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

Для этого напротив издания можно сделать слайдер.

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

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

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

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

Комментарии (10)

  1. 0
    4 года назад

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

    Несколько вопросов: 

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

    Что означает крестик? закрыть виджет? удалить товар?

    В принципе не очень ясна суть задачи. Почему в сайдбаре необходимо просматривать содержимое корзины? Вы наверное просто не про все требования упомянули...

    Почему именно виджет? Может быть, некоторый функционал нужнее пользователю  до того, как положить товар в корзину (выбор подписка-за номер)? 

    "Клиенту нет необходимости возвращаться на страницу и тратить дополнительное время."
    Ну допустим. Но опять же, почему нужно иметь возможность сделать это в любой момент нахождения на сайте? Почему не предоставлять этот функционал в корзине?

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

    На 4 иллюстрации куда-то потерялась суммарная цена заказа.

    Не подумайте, ни в коем случае, что я хочу Вас затролить. Мне очень понравились некоторые Ваши решения. Например листинг товаров, если это все-таки вариант с виджетом обоснован, и товаров в корзине среднего покупателя не очень много.
    Или совершенно замечательная идея со смешением контролов для выбора срока подписки. 
    Правда вот выпадашка в выпадашке (год в подписке) - это смелое решение! Немного настораживает, цветовое решение для цены в этой же выпадашке.

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

    • 0
      Сергей Туманов
      4 года назад

      Сергей, спасибо за комментарий.

      1. Реальная ширина виджета - от 250 px. Можно ненамного расширять в зависимости от контекста превью. 
      Будет вполне читаемо
      2.  Крестик удаляет текущий товар из избранного/корзины по вашему усмотрению. Надо дать пользователю отменить людую операцию
      3.  Необходимость в экономии места была основной причиной просмотреть содержание тут же.
      4. "Может быть, некоторый функционал нужнее пользователю  до того, как положить товар в корзину (выбор подписка-за номер)"
      Этот функционал мы делали на страницах товаров до отправления в избранное/корзину. Можеть оказаться так что цена на все станет заоблачной и может покинуть корзину. В данном случае в виджете он сможет с меньшей вероятностью ее покинуть.
      5.  Мы делали комплексный анализ сайта. По поведению пользователей, откладываются не более 5.
      6.  "Я бы иконки удаления товаров сделал либо красными, либо краснеющими при наведении." - Принято к рассмотрению :)
      7.  "На 4 иллюстрации куда-то потерялась суммарная цена заказа" Спасибо за наблюдение. Обязательно обновим в ближайшее время.
      8. "Немного настораживает, цветовое решение для цены в этой же выпадашке" - это наглядно показывает пользователю сколько но заплатит за каждый "тарифный план".

      • 0
        Action
        4 года назад

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

  2. 0
    4 года назад

    Спасибо за инфу ))

  3. 0
    4 года назад

    Каков результат?

    • 0
      4 года назад

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

  4. 0
    4 года назад

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

    • 0
      Ivan
      4 года назад

      Иван, мы в след. итерациях подумаем как это сделать грамотно и с минимальным "информационным мусором" для гостя магазина. Спасибо за рекомендацию.

  5. 0
    4 года назад

    Многие недооценивают важность таких деталей. Хороший пост.

  6. 1
    4 года назад

    Отличная статья!

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

Подписаться

на самую полезную рассылку по интернет-маркетингу

Самое

обсуждаемое популярное читаемое