Дизайн оформления заказа интернет-магазина «Озон»
Новый дизайн решает основные проблемы текущего чекаута: недостаточной информированности на этапах оформления заказа и невозможности редактировать параметры заказа. Чтобы решить эти проблемы, интерфейс стал одностраничным, а в верхней части страницы появился прогресс-бар. Прогресс-бар даёт чётко понять, на каком шаге находится человек и сколько ещё осталось до завершения. В процессе оформления прогресс-бар даёт только необходимую информацию. Второстепенная информация выводится на последнем этапе, этапе подтверждения заказа.
В новом дизайне радио-баттоны стали кнопками-плитками, с информационными слоями и без подтверждающих действий (кроме некоторых этапов).
Доставка курьером
Доступны 3 способа доставки, в зависимости от региона: в пункт выдачи, курьером или почтой.
Интерфейс пытается общаться на человеческом языке — задаёт вопросы и предлагает на них ответить. Необязательные поля скрыты и доступны по клику.
Если клиент оформляет доставку в Москву, система предлагает выбрать дату и время доставки. Никаких интерфейсных бегунков или линеек, только большие кнопки с датой и диапазоном времени.
Заголовок в прогресс-баре на текущем шаге выделяется жирным, последующий — серым. Предыдущие шаги доступны для редактирования и выделяются ссылкой.
На этапе выбора способа оплаты система предлагает предпочтительные — это большие кнопки с крупными заголовками. Остальные сгруппированы по смыслу.
На этапе подтверждения заказа выводится второстепенная информация, которую заполнял клиент на предыдущих этапах. В строке «Стоимость заказа» отображаются начисленная скидка, стоимость доставки и стоимость товаров без учёта стоимости доставки. Заказанные товары по-умолчанию скрываются и доступны по клику на кнопку «Показать товары в заказе».
Заказываемые товары красиво оформлены в виде плиток.
Доставка в пункт выдачи
Карта пунктов выдачи — удобный инструмент поиска ближайшего пункта: по улице, метро, названию, на карте, по кластерам. Особенность сервиса в непрерывном и цельном взаимодействии со списком и картой. Список так же выполняет функцию карточки пункта.
Поиск по станции метро.
Поиск по улице.
В карточке пункта подробности: период хранения и как найти пункт. Чуть ниже ближайшие пункты.
Быстрое оформление заказа
Если человек ранее оформлял покупки на Озоне, система предложит быстро оформить заказ. В новом дизайне добавились 2 колонки: «Дата доставки» и «Получатель».
По клику на строку доступны все параметры заказа, с возможностью изменить доступные.
Как и на этапе оформления заказа, список товаров доступен по клику.
Разработанный гайд определяет стиль и механику работы интерфейсных элементов.
Спасибо Сергею Сергееву.