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