UX-эксперимент: создали впятером интерфейс беспилотного такси, чтобы переосмыслить командный дизайн

Управляющий партнер Александр Шульгин рассказывает о том, как дизайнеры Purrweb за день решили придуманную задачу и какие выводы сделали.

Погружаемся в тему

Сперва поделюсь условным «дано».

Участниками эксперимента стали 5 дизайнеров и 1 проектный менеджер. На все про все отвели 8 часов (главный фокус Purrweb — MVP-разработка, поэтому сжатые сраки сроки не показались нам чем-то необычным). Рабочей «песочницей» стала Figma — жутко удобный инструмент, которому мы остаемся верны уже долгое время. Ну и главное условие — разработать интерфейс в рамках дизайн-системы продуктов «Яндекса».

В качестве рабочей стратегии дизайнеры выбрали Jobs To Be Done. Это помогло ограничить «полет фантазии» и спроектировать интерфейс, фокусируясь на целях и задачах, которые ставят перед собой пользователи. Такой подход подразумевает, что условный Иван Кошкин «нанимает» беспилотник для того, чтобы тот помог с выполнением конкретной «работы». «Нужно с комфортом добраться в аэропорт», «хочу слушать Billie Eilish в дороге», «не хочу разговаривать с водителем» — эти мотивации и стали для нас jobs to be done.

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

Затем провели экспресс-анализ конкурентов: прямых (беспилотники Lyft, Uber и Waymo) и косвенных (Tesla с их контролем полосы и автопилотом). Дизайнеры изучили навигацию, элементы управления, а после выписали все плюсы и минусы. Так, например, выяснилось, что ни один из конкурентов не использует функцию «Глазами Машины» (о том, что это такое, расскажу позже).

Под конец 20-минутного брейншторма дизайнеры устроили разбор потенциального продукта, с представлением каждого действия пассажира: как он вызывает такси, садится в машину, едет, прибывает в пункт назначения. Коллективное «Сработает? Если нет, почему?» помогло отсеять ерунду и остановиться на адекватных, практически применимых гипотезах.

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

Настроение — боевое!

Берем фирменный стиль

Подробно останавливаться на этом этапе не буду. Просто еще раз отмечу, что мы изначально поставили задачу создать интерфейс в рамках дизайн-системы «Яндекс».

Шрифты и цветовую стилистику определила стилистика «Яндекса» и его продуктов

Знакомим пользователя с беспилотником

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

Зачем он нужен? Вот три главные причины:

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

  • Произвести впечатление. Чтобы пользователь влюбился в продукт и не захотел пользоваться чем-то другим.

  • Выделить среди конкурентов. Чем продукт отличается от пяти похожих?

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

Анастасия Мартьян, UI/UX-дизайнер

Ниже варианты, которые получились на выходе.

1. Графический UI

Частью этого интерфейса стали привычные Emoji

Онбординг, где пользователь сможет обратиться к «Алисе». Как это сделано в «Яндекс.Навигаторе»
Незаконченная версия без Алисы. Тестировали другое цветовое решение

2. Голосовой UI

За голосовыми интерфейсами будущее, определенно стоило пофантазировать в этом направлении:

Этот вариант онбординга похож на обычный чат с голосовым помощником

Прорабатываем функциональность

1. Поиск автомобиля

Поиск прибывшего такси часто вызывает боль. Косяки могут случаться из-за сбоев GPS или плохого интернета. Иногда машина просто не может остановиться в «нужной» точке — в случае с беспилотниками это станет еще большей проблемой.

Илья Саблин, UI/UX-дизайнер

Допустим, пользователь вызвал беспилотник. Автомобиль прибыл. Как подсказать, куда именно, если водителя нет? Коллективный брейншторм внутри дизайн-команды и беседы с коллегами по офису помогли найти решение — им стала функция «Глазами машины», позволяющая увидеть панораму места, где припаркован автомобиль.

Обзор на 360° поможет быстро найти прибывший беспилотник

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

Наши дизайнеры не остановились на одном решении и придумали альтернативные способы обнаружить уже прибывший беспилотник. Так, кнопка «Звуковой сигнал» помогла бы найти автомобиль по звуку. А в вечернее время выручила бы функция «Световой сигнал» — это когда по нажатию кнопки включается аварийка.

2. Смена маршрута

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

Выручит «Алиса»!

Центральная кнопка «Алисы» — индикатор, который сообщает, что «Алиса» слышит запрос пассажира

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

Илья Уткин, UI/UX-дизайнер

По статистике, на текущий момент голосовыми помощниками пользуются 24% семей в США (что уже неплохо), но на территории СНГ процент гораздо меньше. Голосовой ассистент — вариант с перспективой на будущее, стоило также проработать альтернативные варианты взаимодействия пользователя с интерфейсом.

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

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

Альтернативный вариант ручной смены маршрута — вызов бэкдропа

Тапнув кнопку «Добавить Остановку» (+), пользователю будет предложена возможность выбрать остановку на карте (иконка «Яндекс.Карт») или вбить адрес вручную, используя экранную клавиатуру.

Делаем темную тему

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

Такой интерфейс помогает не ослепнуть ночью

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

Как делали темную тему? Интерфейсная часть выглядит так, как и в других «Яндекс»-решениях (решили ведь не отходить от гайдлайнов). Что касается экрана с визуализацией поездки, дизайнер просто заменил все светлые цвета на темные. «Дневная тема» очень ограничена в цветовой палитре, так что это было несложно.

Заботимся о безопасности

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

3D визуализация отображает положение автомобиля в пространстве

Чтобы создать ощущение безопасности, дизайнеры визуализировали работу датчиков (лидаров), построение маршрута и объектов, которые встречаются на пути. Показать то, как «мыслит» машина на ходу — отличный способ снять страх и тревогу у пассажиров.

Развлекаем пассажира

Если в такси у пользователя освобождаются руки, его можно нужно развлекать.

Как не дать пассажиру заскучать? Можно предложить залипнуть в социальных сетях, подкинуть контент с YouTube или stories от «Яндекса». Такие плюшки помогают отвлечься и расслабиться — человеку, который в первый раз сел в беспилотник, это и нужно.

Дизайн-команда предпочла развить тему с музыкой. Почему? Да потому что водителя нет, а кайфовать от песен, которые тебе по душе, приятно всегда. Особенно в дороге!

Только представьте, никакого «Радио Дача» и Лепса!

Для удобства пользователей приложение берет данные из аккаунта «Яндекса» (он привязан к номеру телефона) и включает медиатеку. Пассажир может собрать музыкальную подборку самостоятельно, используя «Яндекс.Музыку».

Пока дизайнеры проектировали плеер, появилась гипотеза: «Должны ли элементы управления медиа визуально отличаться от элементов навигации?»

Разобраться с ответом помог командный опрос в Slack-чате

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

Определяем точки входа

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

Вадим Субботин, UI/UX-дизайнер

Когда пользователь «Яндекс.Музыки» попадает на главную страницу, он видит баннер «Создать плейлист дня». На его месте появился баннер в стиле «Яндекс.Беспилотник», с приглашением создать треклист для поездок в беспилотном такси.

Сперва намекнули, а после подтолкнули рекламой :)

А это вариант точки доступа в офлайн-режиме.

Такой баннер можно встретить на автобусных остановках

Вместо вывода

Что это дало нам? Объяснять действительность, вбрасывая пафосные и высокопарные фразы, совсем не хочется. Просто отмечу, что было сложно. А еще полезно: такой эксперимент помог сплотить дизайнеров и переосмыслить текущие дизайн-процессы — недавно мы начали тестировать гипотезу «Один проект — два дизайнера». Расскажу, как получим первые результаты.

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

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

2. Методология JTBD больше подходит для продуктовых спринтов, потому что фокус идет не на создание Customer Journey Map (карты следования пользователей), а на выявление проблем и поиск решений.

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

4. Для командного дизайна нужен человек, который выступит в роли продукт оунера. Такой участник не закопается в проработку своего дизайн-кусочка и возьмет на себя ответственность за ревью и постановку задач. Будет вести команду, опираясь на ограничения (например, коммерческие) и в соответствии со своим видением.

Порекомендовал бы я кому-нибудь такой формат? Аутсорс-командам — определенно. Такой эксперимент — это как минимум рабочий способ поддерживать тонус процессов взаимодействия. Каждый участник на день вылезает из-за своего моника и фокусируется на решении одной и той же проблемы. Больше совместной работы → больше идей извне → круче выхлоп на финише.

0
22 комментария
Написать комментарий...
Игорь Мыслинский

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

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

аж захотелось пересмотреть)

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

«Только представьте, никакого «радио Дача» и Лепса»

Когда делаете массовый продукт, не стесняйтесь интересов обычных людей, когда-то Лепс был самым популярным исполнителем на Яндекс.Музыке  :)

Ответить
Развернуть ветку
Александр Фудин

Выглядит интересно, но ...

В тексте не увидел описание устройства для которого делался интерфейс (за исключение доработок в интерфейсе такси).

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

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

Вы проделали интересную работу, но как это и свойственно для mvp, оставили больше вопросов, чем ответов.

Как внутрикорпоративная тренировка дизайнеров - крутой кейс!

Ответить
Развернуть ветку
Дима Перегон

Сейчас в них вроде стоит последний iPad Pro и его используют как основное устройство для управления и мониторинга. 

Ответить
Развернуть ветку
Александр Фудин

Да, я знаю. 
Надо понимать что сейчас у яндексе это даже не mvp, это внутренний эксперимент. 

Ребята же в статье, попытались представить как это будет выглядеть в продакшене, от того и мои вопросы...

Ipad pro - будут тащить на право и налево из машин)

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

Ответить
Развернуть ветку
Александр Шульгин

Для эксперимента мы выбрали устройство, на котором Яндекс тестируют беспилотники — это iPad. Мультимедийную систему для авто Яндекс уже разработали, будет ли на ней работать беспилотник — пока остается вопросом :) 

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

За похвалу крепкое спасибо! Эксперимент был во многом заточен на командную работу и переосмысление текущих процессов. В команде поработали, выводы сделали, двигаемся дальше :)  

Ответить
Развернуть ветку
Виталий Ильницкий

Сегодня немного опоздал на работу ожидая пока зарядится зубная щетка.
Не терпится попробовать беспилотное такси! 

Ответить
Развернуть ветку
Паронормальный

беспилотникам интерфейс не нужен. Я там спать буду или бухать

Ответить
Развернуть ветку
Руслан Фатихов

круто

Ответить
Развернуть ветку
Александр Казанский

Расскажите, что будет делать беспилотник, если на месте "остановки" нет свободных парковочных мест?) Круги по району наматывать?)

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

можно об этом поподробнее?

Ответить
Развернуть ветку
Александр Шульгин

Попробую кратко:) 

Что делал наш менеджер? Перелопачивал кучу ресурсов и искал ответы на вопросы (начиная с самых попсовых). Как работают беспилотные автомобили, каким образом получают данные о движении на дороге, почему беспилотникам в России нужен человек, который будет сидеть за рулем, для чего в салоне авто нужна красная кнопка. 

 Менеджер рассказывал ребятам о том, как устроено внимание водителя при разной скорости движения автомобиля. Он же делился деталями касательно того, как Mercedes-Benz, Volkswagen, Toyota и Tesla внедряют системы тач управления автомобилем.  

Ответить
Развернуть ветку
Андрей Игнатов

Что будет делать беспилотник, если он проколит колесо?

Ответить
Развернуть ветку
Гэрри Ли

"Потому что за рулем слепящий экран телефона отвлекает человека, ответственного за перевозку." - так этож беспилотник, какой ещё за рулём

Ответить
Развернуть ветку
НечеловеческаяЛогика

Слабо

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

Молодцы 😎

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

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

Ответить
Развернуть ветку
Гриша Булыжников

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

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

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

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

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

Ответить
Развернуть ветку
Михаил Гурьев

Будет интересно как ребята из Waymo продумывали похожий вопрос

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