поиск

Попробуем 2 варианта поиска:

Первый вариант

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

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

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

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

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

Вывод фильтрации.

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

Чтобы пользователь не путался в закрытой фильтрации, проиллюстрируем состояние фильтров иконками.

Сортировку выводим над краточками.

Второй вариант

Есть еще второй вариант — сделать просто модалкой через иконку поиска в хедере

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

Но, как мне кажется, вариант номер один будет работать намного лучше.

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

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

Прототип

https://www.figma.com/file/V3kATOHEojTLY6y2oXDTJC5E/Autobooking-order-prototype?node-id=0%3A1 по ссылке можно посмотреть прототип детальнее.