Создание дизайна «Яндекс.Авто»

Как идея пересечения разных сервисов «Яндекса» в автомобилях повлияла на дизайн «Яндекс.Авто».

Сервисы «Яндекса» с годами накопили множество данных о пользователях. Такой опыт часто влияет на развитие продуктов и позволяет скрещивать их, получая новые. Идея сделать что-то для автопрома выросла не на пустом месте.

Исторически интерфейсам внутренних медиасистем автомобиля уделялось не очень много внимания. Модельный ряд обновляется, но на борту всё ещё ощущается начало 2000-х.

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

Нехватка инноваций во встроенных мультимедиа-системах в последние годы породила предложения от мировых медиагигантов, и «Яндекс» — не исключение.

Невозможно оставаться в стороне, когда в компании есть «Карты», «Навигатор», «Музыка», «Погода», «Поиск», голосовые технологии и многое другое; если совместить всё это, может родиться что-то полезное.

Что требуется за рулём? Сколько людей, столько и мнений, но обычно всем нужны навигация, музыка и рекомендательные сервисы.

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

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

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

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

Если проанализировать основные запросы, скелет продукта можно выстроить из трёх составляющих:

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

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

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

Поэтому, говоря о музыке, мы закладываем понятие набора сущностей, воспроизводящих её. FM-радио, музыка из браузера, AUX, Bluetooth, флешка, «Яндекс.Музыка» и другие источники, — всё вместе — огромный музыкальный комбайн, который нужно учесть.

Если навигация и музыка нужны почти всем, то остальной набор сервисов на борту может меняться в зависимости от человека. Кто-то любит смотреть на статистику автомобиля и делать выводы, кто-то жить не может без навигатора или любит запускать в браузере видео из интернета. Это индивидуальные предпочтения, поэтому у них более низкий приоритет, так как для поездок они необязательны.

Если разобрать поездку на составляющие, то путь из пункта А в пункт Б в архитектурном сценарии интерфейса будет выглядеть примерно так:

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

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

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

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

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

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

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

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

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

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

Многовариантность сущностей музыки разделила всё на два шаблона. Первый — для FM-радио с эволюционной итерацией радиошкалы, второй — с красивой обложкой, которую возможно показывать не только для «Яндекс.Музыки», но и для песен с флешки или подключённого по Bluetooth телефона. Достаточно корректного названия исполнителя и песни, чтобы ушёл онлайн-запрос на поиск обложки.

Предварительно концепция определила базовый набор приложений на борту. С нуля нужно было разработать FM-радио, звонки, настройки и систему обновления приложений.

От «Яндекса» взяты «Навигатор», «Радио», «Погода», «Браузер» и голосовой помощник. С этими ребятами предстояло адаптировать мобильные Android-версии под разрешение экрана головного устройства(1024 на 600 пикселей) с учётом правил относительно кликабельности и читаемости элементов.

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

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

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

Прикидываем простейший прототип, который бы отразил базовые действия:

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

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

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

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

Ещё был сформулирован один принцип работы — не дублировать текстом ответы помощника, так как это будет отвлекать водителя. Отсюда был смысл отображать только команды водителя, чтобы можно было проверить правильность распознания команды.

Если смотреть на панель автомобиля, то ночной режим смотрится роднее, так как «торпеды» обычно чёрные или тёмные. Черный цвет на экране днём начинает отражать светлое дневное окружение и экран становится неконтрастным и плохо читабельным.

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

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

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

К первому серийному запуску с Toyota в сентябре 2017 года интерфейс, постоянно корректирующийся по живой вёрстке, имел уже более отточенный вид. Внедрили простейшую систему обновлений для будущих релизов.

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

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

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

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

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

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

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

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

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

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

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

В этой итерации были доработаны звонки, расширенные настройки головного устройства, адаптирована полная Android-версия «Яндекс. Музыки», улучшены система обновлений и взаимодействие с «Алисой». Подробнее о том, про уже что доступно в продаже.

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

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

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

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

Telegram-канал про дизайн в «Яндексе», где команда пишет об изменениях в сервисах и даёт полезные советы.

#яндексавто #машины #ui