Про дизайн профиля вождения

Я Лера Терехина, дизайнер в Яндекс Драйве. Уже больше трёх лет делаю интерфейс клиентского приложения Драйва и других наших продуктов.

В июне 2021 года Драйв запустил новую модель анализа вождения, которая создаёт в приложении профиль каждого пользователя. Алгоритм анализирует последние 200 км поездок (или столько, сколько водитель успел проехать) по ряду ключевых факторов, влияющих на безопасность. Например, резкое вождение (резкое торможение и старт, агрессивное перестроение, крутые входы в повороты) и превышение скорости. В Профиле вождения можно увидеть историю поездок с зафиксированными нарушениями, а также узнать свой статус. От статуса зависят условия доступа к сервису.

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

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

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

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

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

Чем закончится эта история (если лень читать до конца)

Аналитики сервиса выяснили, что с момента запуска Профиля вождения за период с июня по январь (по сравнению с предыдущим полугодием) число резких ускорений уменьшилось на 49%, резких поворотов — почти на 29%, резких торможений — на 28%, а агрессивно перестраиваться стало на 31% меньше водителей сервиса.

Порядка 90% пользователей сейчас ездят аккуратно, и этот процент постепенно растёт.

С чего всё началось?

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

После каждой встречи появлялись новые вводные, ограничения, идеи. С ними я уходила на новый заход и возвращалась обсуждать с командой. В результате получилось вот столько итераций дизайна:

Итерация №1, в которой всё казалось простым

Первый подход к интерфейсу я сделала в марте 2021 года. Стартовали с такой схемы:

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

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

После этого подхода появилось несколько вопросов:

Стало понятно, что оценивать надо количество километров, а не поездок.

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

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

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

Так как алгоритм был совсем новый, мы не хотели показывать этот числовой рейтинг в интерфейсе. Плюс мы не знали, как пользователи воспримут эту фичу, поэтому решили, что безопаснее показывать только название статуса.

Спойлер: числовой рейтинг в интерфейсе всё-таки будет.

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

Какие есть статусы:

Внутри каждого статуса есть прогресс. Пользователь может находиться в самом начале отрезка «Всё нормально», а может быть ближе к повышению цен.

Важно было показать:

К текущему статусу добавили совет: что делать, чтобы оставаться тут дальше или наоборот, как сменить статус.

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

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

Мы несколько раз собирались с командой, чтобы обсудить этот подход. Он не подошел, потому что:

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

Порядок статусов стал такой:

Я собрала все комментарии и изменения. Решила сместить акцент на текущий статус — показывать его ярче.

Здесь текущий статус выделен больше, чем остальные. И прогресс внутри тоже видно лучше. Но всё это выглядит как список задач. И горизонтальный прогресс внутри вертикального — плохое решение.

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

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

Слева от шкалы написан текущий статус, справа — следующий, к нему двигается прогресс. Оставили два блока текста: что происходит в текущем статусе и что может произойти дальше. А ответы на вопросы убрали за кнопку «Что это всё значит».

В какой-то момент мы поняли, что сфокусировались на наказаниях и банах. 80% наших пользователей водят хорошо, поэтому их нужно было поддержать и смягчить коммуникацию. Добавили заголовки «Продолжайте в том же духе» и «Так держать» для тех пользователей, которые водят хорошо. Ещё появились эмодзи. Вместо них потом хотели нарисовать иллюстрации. Но в прод в итоге ушли, конечно же, эмодзи.

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

Эта версия устраивала всех внешне, технически и логически. Плюс у нас были договоренности со страховой по срокам запуска, поэтому времени ещё на один подход не было. Потом вместе с Олесей (она креатор-копирайтер, придумывает разные штуки) написали текст, добавили фазы луны:

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

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

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

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

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

Что нужно было сделать:

Первым делом захотелось «распрямить» шкалу, и тут понеслось:

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

Я думала, что это последняя итерация, потому что она соответствовала всем нашим требованиям.

Предыдущая версия была уже максимально близка к финальной, но Кирилл (руководитель мобильной разработки) сказал, что нужно добавить числовое значение, чтобы легче отслеживать изменения статуса. Намного проще сравнить 72 и 80, чем изменения в прогрессе цветной шкалы, на которой нет засечек.

Звучало убедительно, поэтому я начала добавлять число:

На этой шкале нужно было показать:

Этот вариант явно не упрощал профиль вождения, хоть и решал некоторые наши задачи.

Решение было близко: вместо статуса внутри прогресса из варианта №6 я поставила число. Текущий статус в центре экрана, предыдущий и следующий статусы — по бокам. Это всё можно скроллить в разные стороны и читать, что ещё может произойти. А для «Супер-молодца» и повышенного кешбэка появился отдельный статус.

Сразу захотелось добавить объема и свечения этой визуализации, поэтому пришли к темной подложке:

Больше всего мне нравится как получились баны:

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

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

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