;

Кейсы

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

4
4

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

Задание

Нам надо продать:

1. несколько изданий в качестве отдельных номеров;

2. несколько изданий с разными периодами подписки;

3. как одному, так и нескольким пользователям;

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

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

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

Шаг 1

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

1. Корзину совмещаем с «избранным».

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

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

Шаг 2

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

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

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

Тонкости

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

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

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

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

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

В кнопке оформления заказа лучше использовать глагол

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

Выбор периода подписки

Шаг 3

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

Перемещаем все выбранное пользователем в корзину

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

Шаг 4

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

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

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

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

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

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

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

Обнаружили ошибку? Выделите ее и нажмите Ctrl + Enter.

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

  1. 0
    6 лет назад

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      • 0
        Action
        6 лет назад

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

  2. 0
    6 лет назад

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

  3. 0
    6 лет назад

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

    • 0
      Ivan
      6 лет назад

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

  4. 0
    6 лет назад

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

  5. 0
    6 лет назад

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

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

Подписаться

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

Самое

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

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