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

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

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

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

Зачем нужен профиль вождения?

  • Стоимость страховки

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

  • Улучшение алгоритма

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

  • Непрозрачная система банов

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

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

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

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

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

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

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

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

Первая версия

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

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

  • Анализируем N поездок пользователя. Пусть будет две модели: агрессивный и неагрессивный водитель.
  • Отмечаем агрессивные поездки в истории поездок. Объясняем, чего делать не стоит и что агрессивные поездки могут плохо повлиять на профиль вождения.
  • Если, например, 3 из 5 поездок были с признаками агрессии — предупреждаем пользователя, что скоро он станет агрессивным.

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

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

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

  • Что делать с хранением поездок 120 дней? Раньше в приложении можно было посмотреть поездки только за этот период. Сейчас мы показываем историю за всё время.
  • Получается, что можно сделать несколько агрессивных поездок, потом не ездить 120 дней, и профиль снова станет хорошим?
  • А если статус не будет восстанавливаться и будет хранить все агрессивные поездки? Тогда пользователи не смогут посмотреть, что они сделали не так раньше, чем 120 дней назад?
  • Что считать поездкой? Можно 10 раз взять машину, проехать по 5 метров или просто посидеть в машине и профиль вождения станет хорошим?

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

Итерация №2, в которой я разобралась, как это работает

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

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

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

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

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

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

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

  • Всё хорошо
  • Цены выше
  • Ограничение доступов к некоторым машинам
  • Временный бан
  • Вечный бан

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

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

  • Текущий статус
  • Прогресс внутри этого статуса, чтобы повышение цен или смена статуса не были неожиданностью
  • Предыдущий и следующий статусы
  • Блок с ответами на популярные вопросы

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

Итерация 3: моя любимая цветная шкала

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

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

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

  • Баны работают нелинейно: сначала пользователь попадает в бан на 3 дня, в следующий раз — на 7 дней, дальше — на 10 дней, после — навсегда. Два раза попасть в бан на одно и то же количество дней не получится.
  • Непонятно, какой сейчас у пользователя статус.

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

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

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

Итерация 4: горизонтальная шкала внутри вертикальной

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

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

Итерация 5: фазы луны

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

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

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

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

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

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

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

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

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

Вторая версия

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

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

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

Итерация 6, на которой всё могло закончиться

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

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

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

Итерация 7, в которой появилось число

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

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

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

  • Текущее числовое значение
  • Начало и конец других статусов и их числовые границы
  • Название текущего статуса
  • Описание этого статуса
  • Описания и названия других статусов

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

Итерация 8, последняя

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

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

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

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

Что дальше?

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

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

0
152 комментария
Написать комментарий...
Павел

Так то молодцы, но это же не вернет Драйв в Казань, хоть 100 итераций редизайна будет. В первую очередь нужно, чтобы поставки авто и запчастей вернулись в РФ, а для этого нужно, чтобы дизайн как-то способствовал прекращению украинских событий

Ответить
Развернуть ветку
Rnatery

Надо сделать драйв на ладе с карбюратором

Ответить
Развернуть ветку
149 комментариев
Раскрывать всегда