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

action

24 Янв 2012

1 129

Мы не станем вдаваться в теорию о том, что такое корзина и какова ее важность в процессе оформления заказа.

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

Удобная и даже универсальная корзина позволит разгрузить службу поддержки и увеличить количество продаж. А кроме того – будет легче отслеживать поведение пользователей онлайн.

Задание

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

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

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

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

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

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

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

Шаг 1

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

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

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

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

Клиенту нет необходимости возвращаться на страницу и тратить дополнительное время.

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

Шаг 2

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

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

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

Тонкости

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

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

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

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

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

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

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

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

Шаг 3

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

Пример, как это можно сделать:

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

Можно выбрать либо все, либо выборочно некоторые издания в корзину (используя чекбокс).

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

Шаг 4

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

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

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

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

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

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

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