Максоптра — это система для планирования и оптимизации маршрутов транспорта. Максоптрой пользуются компании, которые занимаются дистрибуцией, инкассацией, курьерскими доставками. Вот ссылочка на сайт Максоптры 👉maxoptra.com. Продукт состоит из веб-приложения для диспетчеров и мобильных приложений для водителей (АйОС и Андроид).

Как это работает — диспетчер в ручную создает заказы или загружает их из сторонней системы. Потом эти заказы планируются на водителей, ручками или средствами волшебной кнопки «планировать». Готовые маршруты фиксируются и отправляются водителям. Водители видят маршрут в мобильном приложении и отмечают в нём свои действия. Диспетчер, видит всю обстановку в веб приложении, может контролировать флот и быстро реагировать на возникающие проблемы.

Предпосылки к редизайну

Максоптре около 10 лет. За это время, благодаря запросам клиентов, продукт успел обрасти кучей фич. В стремлении быстро добавить необходимую функциональность, на интерфейс немного подзабили, и в 2017 году он выглядел как поношенные дедовские трусы. А еще, систему стало технически сложно поддерживать.

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

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

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

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

Элементы, которые редко используются диспетчером: изменение роли, языка, настройки и выход из системы — были спрятаны в выпадающее меню.

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

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

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

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

Такая же проблема была и в типографике: 7 стилей для лейблов, 11 стилей для значений и 6 стилей для ссылок.

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

При редизайне мы избавились от излишнего оформления. Интерфейс стал контрастнее и удобнее для людей с плохим зрением. Теперь цвет несет смысловую нагрузку, а на «главных» действиях расставлены акценты, благодаря которым пользователь экономит свое время. Пользователю больше не нужно задумываться на какую кнопку надо нажать. Теперь он делает клик на самое яркое пятно.

В старой версии размер и пропорции компонентов были хаотичными. Теперь все компоненты, формы и страницы строятся по 4-х пиксельной сетке и подчиняются нескольким простым правилам:

• базовый размер иконок 16×16 пикселей
• базовый размер текста — 12 пунктов, высота строки — 16 пунктов
• базовая высота кнопок, инпутов, дропдаунов, комбобоксов и т. п. — 24 пикселя
• размеры и отступы кратны 4-м пикселям

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

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

Теперь это можно сделать одним кликом.

Раньше в таблицах для настройки видимости колонок использовалось контекстное меню. У него были некоторые минусы: в него было сложно попасть, а после настройки нельзя было одним кликом сбросить все до дефолта.

Теперь для настроек видимости колонок мы имеем отдельный режим. В дальнейшем его можно расширить, например добавить фильтр.

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

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

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

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

Также мы планируем добавить каркасную загрузку страниц и форм.

Продолжение следует...