Интерфейс курьерского виджета

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

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

В новом варианте убрали лишнее:

Покупатель ошибается, забывает, торопится. Это нормально. Нельзя узнать как он будет вводить адрес: город или улицу с домом, а в случае курьерской доставки — квартиру или офис? В старом виджете заказы отправлялись без улицы и номера дома:

Мы предусмотрели эту возможную ошибку. В зависимости от того, что введёт покупатель, виджет покажет разные сценарии. Если только город, то добавит поле с улицей и домом. Если адрес — скроет это поле:

Мы не показываем ошибку, а предугадываем. Если окажется, что покупателю нужен пункт выдачи, то и поле с адресом ему можно не заполнять. Когда поля заполнены и компания выбрана, кнопка подтверждения становится активной.

При выборе пункта выдачи, в старом виджете список мешает выбору пункта выдачи. Фильтры спрятаны на другом экране, что там — неизвестно:

В новом виджете во вкладке пунктов выдачи, ниже открывается карта с метками. Карта позиционируется на адресе или городе покупателя. Ничего не мешает найти пункт выдачи или постамат:

Фильтры сразу видны на карте и меняют параметры в этом же окне:

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

На широких экранах сделали ограничение в 1000 пикселей:

Дизайнер

Виталий Шалетри