Дизайн оформления заказа интернет-магазина «Озон»

2015-08-09

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

В новом дизайне радио-баттоны стали кнопками-плитками, с информационными слоями и без подтверждающих действий (кроме некоторых этапов).

Доставка курьером

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

Интерфейс пытается общаться на человеческом языке — задаёт вопросы и предлагает на них ответить. Необязательные поля скрыты и доступны по клику.

Если клиент оформляет доставку в Москву, система предлагает выбрать дату и время доставки. Никаких интерфейсных бегунков или линеек, только большие кнопки с датой и диапазоном времени.

Заголовок в прогресс-баре на текущем шаге выделяется жирным, последующий — серым. Предыдущие шаги доступны для редактирования и выделяются ссылкой.

На этапе выбора способа оплаты система предлагает предпочтительные — это большие кнопки с крупными заголовками. Остальные сгруппированы по смыслу.

На этапе подтверждения заказа выводится второстепенная информация, которую заполнял клиент на предыдущих этапах. В строке «Стоимость заказа» отображаются начисленная скидка, стоимость доставки и стоимость товаров без учёта стоимости доставки. Заказанные товары по-умолчанию скрываются и доступны по клику на кнопку «Показать товары в заказе».

Заказываемые товары красиво оформлены в виде плиток.

Доставка в пункт выдачи

Карта пунктов выдачи — удобный инструмент поиска ближайшего пункта: по улице, метро, названию, на карте, по кластерам. Особенность сервиса в непрерывном и цельном взаимодействии со списком и картой. Список так же выполняет функцию карточки пункта.

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

Поиск по улице.

В карточке пункта подробности: период хранения и как найти пункт. Чуть ниже ближайшие пункты.

Быстрое оформление заказа

Если человек ранее оформлял покупки на Озоне, система предложит быстро оформить заказ. В новом дизайне добавились 2 колонки: «Дата доставки» и «Получатель».

По клику на строку доступны все параметры заказа, с возможностью изменить доступные.

Как и на этапе оформления заказа, список товаров доступен по клику.

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

Спасибо Сергею Сергееву.