---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2024-07-16
publishYear: 2015
name: Autotransinfo
title: Дизайн формы поиска для грузоперевозчиков
excerpt: Создали дизайн интерфейса формы для поиска грузов или транспорта, существенно повысив конверсию в заказы.
context: У клиента уже была похожая форма, но слишком сложная. Часть пользователей не могла в ней разобраться, поэтому ошибалась при заполнении полей. Для сайта каждая ошибка — это неверно оформленный заказ.
logo:
src: ~/assets/images/portfolio/autotransinfo/logo.svg
alt: Autotransinfo logo
link: https://ati.su/
image: ~/assets/images/portfolio/autotransinfo/autotransinfo.png
imageAlt: Дизайн формы поиска для грузоперевозчиковИнтерфейс мобильного приложения
thumbnail:
src: ~/assets/images/portfolio/cards/autotransinfo.svg
alt: Собака Павлова • АвтоТрансИнфо • Дизайн формы поиска для грузоперевозчиков
tags:
- log
- ux-design
- new-features
- prof
tags2:
- IT для бизнеса
- Профессиональные интерфейсы
- Дизайн интерфейсов
- Дизайн формы поиска
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-design) и [добавление новой функциональности](/services/new-features), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-design
- collection: services
page: new-features
- text: |
### Наша экспертиза
368 интерфейсных проектов и более [120 проектных кейсов](https://sobakapav.ru/portfolio).
### Статьи об интерфейсах для транспорта
collection: post
page: city-transport-design
- collection: post
page: logistics-design
- collection: post
page: osago
- collection: post
page: rzd-consult
- text: |
### Хотите уметь так же?
Научим делать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: foodtrucks
- collection: portfolio
page: simetra
- collection: portfolio
page: loglab
- collection: portfolio
page: boracase
- collection: portfolio
page: gormost
- collection: portfolio
page: pgk
- collection: portfolio
page: sindbad
- collection: portfolio
page: viking-line
result:
- src: ~/assets/images/portfolio/link.png
text: Готовый сайт
link: http://loads.ati.su/
- src: ~/assets/images/portfolio/rp.png
text: Интерактивный прототип
link: https://ytnvvg.axshare.com/#p=800_v2
budget: ~ 240 000 ₽
director: Пользователи стали меньше ошибаться. Конверсия формы выросла, а неверно оформленных заказов стало меньше.
metadata:
canonical: https://sobakapav.ru/portfolio/autotransinfo
title: Дизайн интерфейсов • Дизайн формы поиска для грузоперевозчиков
description: "Создали дизайн интерфейса формы для поиска грузов или транспорта, существенно повысив конверсию в заказы."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/autotransinfo/aautotransinfo.png'
width: 1220
height: 1202
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import PhoneMockup from '~/components/widgets/PhoneMockup.astro';
<TOC>
[Вводные](#anchor1) • [Проблема](#anchor2) • [Задача](#anchor3) • [Плюсы и минусы](#anchor4) • [Процесс](#anchor5) • [Осмысление](#anchor6) • [Дизайн интерфейса](#anchor7) • [Результат](#anchor8) • [Смысл](#anchor9) • [Отзыв, цены, сроки](#anchor10)
</TOC>
## <a name="anchor1" />Вводные
[«АвтоТрансИнфо»](http://www.ati.su/) — система обмена информацией между перевозчиками, экспедиторами и грузоотправителями. В базе данных — заявки на перевозку грузов, сообщения о свободном транспорте и информация об участниках рынка. Ежедневно на сайте размещается более 25 000 заявок на перевозки по России, Украине, странам Балтии и Европы.
Каждый месяц на сайт приходит миллион посетителей, общая нагрузка — 50 миллионов просмотров. Бо́льшая часть траффика приходится на форму поиска грузов, оттого эта форма вынесена на отдельный домен и отдельный сервер. И по этой же причине заказчик решил изменять только ее, а похожую форму поиска транспорта оставить старой.
Предыдущая версия формы поиска грузов не сохранилась, но выглядела она примерно так.
_Пока форма выглядит просто. Но это если без нюансов. Увы, их полно примерно у каждого груза_
И точно так же уточнить результат поиска можно было с помощью узкого длинного фильтра (выделен красным).
_Проблема не в высоте фильтра и не в его расположении, а в отсутствии нужных полей_
## <a name="anchor2" />Проблема
Из-за сложной реализации и запутанной формы даже опытные пользователи сайта не знали всех возможностей поиска или не понимали, как работают те или иные параметры. В результате — низкая конверсия формы и недовольство пользователей.
_Так выглядит негодование, когда пользователь не может найти в фильтре важные поля_
## <a name="anchor3" />Задача
Перепроектировать форму поиска груза, не изменяя функционал.
## <a name="anchor4" />Плюсы и минусы
>+ **Есть цифры**
>У заказчика были данные Яндекс. Метрики и внутренняя статистика — это помогло строить гипотезы
>+ **Вовлеченность заказчика**
>Клиент подробно рассказывал о работе формы, а сотрудник службы поддержки мог предоставить ключевые, по мнению пользователей, проблемы и вопросы
>+ **Функционал известен**
>Не нужно изобретать решений на уровне возможностей формы, долго обсуждать это с программистами и т. п.
>- **Низкая грамотность пользователей**
>Интерфейс по своей сути профессиональный. А значит — сложный. Но у пользователей сравнительно низкий уровень компьютерной грамотности. Существенно меняя привычное расположение кнопочек и ссылок, мы могли потерять пользователей
>- **Точечное решение**
>Изменение формы поиска не решит все проблемы клиентов на сайте. Это самое узкое место, но не единственное
>- **Темп**
>На весь проект у нас было чуть более месяца. Дедлайн — Новый год.
## <a name="anchor5" />Процесс
Проекты вида «нужно спроектировать одну форму» не подразумевают масштабной аналитики. Но совсем без этого этапа нельзя. Мы разобрались в логике работы системы, посмотрели на цифры в статистике, узнали отзывы пользователей с форума, собрали информацию о потребностях клиентов со слов заказчика. Все это превратилось в сценарии использования.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
_Это только кажется, что груз достаточно погрузить, отвезти и выгрузить. У каждого перевозчика есть свой специфичный ряд требований_
## <a name="anchor6" />Осмысление
Основная трудность: форма (и поисковая выдача) — профессиональный интерфейс, которым ежедневно пользуется огромное число консервативных пользователей с невысоким уровнем компьютерной грамотности. Это значит, что перемещение ссылки на 20 пикселей влево кому-то парализует работу как минимум на день. А изменение цвета кнопки выведет пользователей из строя на неделю.
Совместно с заказчиком решили, что для уменьшения урона пользователям заказчик будет внедрять форму шагами.
1. Показывать новую форму в двух вариациях (новой и прежней) для разных пользователей.
2. В новой форме сделать ссылку для перехода на привычную старую.
3. Наблюдать за действиями пользователей и при явных проблемах оперативно реагировать.
## <a name="anchor7" />Дизайн интерфейса
Проектировали в три итерации. После каждой — встречались с клиентом, неработающие решения отсеивали, тут же предлагали альтернативные варианты и уходили на вторую итерацию.
Изначально мы выделили основные параметры в горизонтальный фильтр…
_Пример с выбранными датами и раскрытым блоком типа кузова_
_Дополнительные параметры, поиск по фирмам, выбор дат и валидация_
_Выбор направления/геообъекта и списка_
_…а в вертикальный блок вынесли персональные списки и сохраненные фильтры._
_Помимо прототипов — описали логику работы интерфейса._
Следующий этап — сопровождение внедрения. Тем временем концепция чуть изменилась — сохраненные фильтры ушли из вертикального блока во вкладку блока горизонтального.
_Фильтры переехали из основной формы поиска во вкладку_
_Фильтр — это сохраненный маршрут с уже заявленными условиями перевозки_
Оставшееся от проекта время мы потратили на перепроектирование формы на главной странице. Увы, заказчик так и не собрался ее изменить.
## <a name="anchor8" />Результат
На сайте www.loads.ati.su появилась новая форма поиска грузов. Про бизнес-результат заказчик нам ничего не ответил, однако мы умеем делаем выводы. Если бы новая форма оказалась хуже старой, от нее отказались бы через месяц. Но нет, уже четвертый год на сайте результаты нашей работы.
## <a name="anchor9" />Смысл
Профессиональные интерфейсы сложны, и работать с ними нужно очень осторожно. Перед проектированием обязательно надо выяснить уровень компьютерной грамотности пользователей, их потребности — как со слов заказчика, так и по статистике. Тогда есть все шансы сделать новый интерфейс похожим на привычный и не вызвать негодования пользователей.
## <a name="anchor10" />