«Этот маленький остров меняет все» — опыт проектирования Live Activity в Lyft

Переломный момент для системы поездок

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

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

До появления Live Activities push-уведомления были единственным способом доставки критически важных обновлений водителям, но при использовании в Lyft уведомления были далеко не идеальны. Канал push-уведомлений является:

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

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

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

Для нас Live Activities — это не просто новый виджет, мы рассматриваем его как совершенно новый способ получить удовольствие от поездки с Lyft на iOS.

Море вариантов

Самым уникальным и мощным свойством Live Activities является их способность принимать различные формы в различных контекстах. Каждая Live Activity имеет четыре варианта представления в зависимости от того, где она появляется:

• Минимальная: Одна маленькая поверхность, плавающая рядом или внутри Динамического острова; используется, когда несколько Живых активностей активны и делят пространство.
• Компактная: Две небольшие поверхности по обе стороны от динамического острова, образующие единое целостное представление; используется при наличии только одного Живого действия.
• Расширенная: Большая единая поверхность, которая расширяется от динамического острова для отображения обновлений Live Activity (или когда пользователь удерживает ее нажатой).
• Экран блокировки: Появляется на экране блокировки, а при разблокировке телефона также отображается в виде баннера-уведомления для доставки обновления.

Такая гибкость хороша тем, что она позволяет Live Activity и критически важной информации, содержащейся в ней, проникать сквозь всю iOS, но она также требует от дизайнеров разработки четырех различных версий каждого состояния Live Activity 😅. Это может не быть проблемой, если у вашей Live Activity одно состояние, как у табло в спортивной игре, но у нашей есть 26 различных возможных состояний…

Охват 26 различных состояний поездки, каждое из которых имеет 4 различных представления, означает разработку 104 уникальных Живых активностей.

Разработка 104 вариантов чего бы то ни было — дело непростое, но изменчивость презентации представляет собой уникальную задачу. Поскольку Live Activities могут плавно переключаться между форматами во время поездки (например, переходить с экрана блокировки на динамический остров, когда пользователь разблокирует свой телефон), существует практически бесконечное количество путей, которые пользователь может пройти через эту сетку дизайнов.

Наш предварительный прототип

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

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

• Пять круглых кнопок в верхней части позволяют рецензенту перемещаться по вертикали, переключаясь между различными презентациями живой активности (MIN = минимальная, COM = компактная).
• Две большие кнопки внизу позволяют рецензенту перемещаться по горизонтали вдоль «золотого пути» (Ожидание > Прибытие > и т.д.).

(Примечание: пустое пространство в верхней части позволяет устройствам без динамического острова имитировать его)

• Чтобы облегчить эту навигацию, я включил drawer меню, которое позволяет рецензенту переходить к определенным этапам опыта.
• Чтобы помочь нашим рецензентам определить, какой из 126 дизайнов еще нуждается в обратной связи, я создал систему флагов обратной связи с цветовой кодировкой («Готово», «Требуется изменение» и т.д.).
• Чтобы помочь рецензентам дать более качественную обратную связь по WIP-дизайнам, я также включил кнопку «показать альтернативы», которая показывает другие рассматриваемые варианты.

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

Максимальное использование минимума

 

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

Как предоставить клиентам необходимую информацию, если у вас окружность в 36px?

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

В результате критики возникли две школы мышления для работы с минимальным состоянием:

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

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

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

Визуализация прогресса

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

Как мы можем сориентировать пассажиров и визуализировать ход поездки без использования карты?

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

Механика продвижения

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

Когда пассажир получает водителя, он получает первоначальное расчетное время прибытия, которое сообщает ему, сколько времени осталось до прибытия машины. Быстрое понимание этого времени (ETA) очень важно для пассажиров, но это становится еще сложнее, если каждый раз при подборе водителя начинать индикатор прогресса с 0%. Такое постоянство начального положения не дает пассажиру визуального представления о том, насколько далеко находится водитель — «1 мин. до прибытия» и «21 мин. до прибытия» выглядят одинаково, а также заставляет автомобиль двигаться со значительно разной скоростью в зависимости от начального ETA (см. ниже).

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

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

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

Мы увидели возможность использовать привычную визуализацию карты и привнести эту дополнительную функциональность в Live Activities.

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

Уроки проектирования Live Activity

• Примите свои ограничения: Живые активности — это удивительное дополнение к iOS, но они имеют существенные ограничения по размеру, анимации и функциональности. Вместо того чтобы пытаться растянуть ограничения, воспользуйтесь этими ограничениями и позвольте им расставить приоритеты в отношении контента, который вы можете (а часто не можете) эффективно обслуживать.
• Вы не одиноки на Dynamic Island: По мере распространения (и, в конечном счете, заполонения) экосистемы iOS живыми действиями, это означает, что динамический остров будет делиться все большим количеством приложений и функций. Поскольку пространство в минимальной презентации ограничено, дизайнерам становится все труднее и важнее убедиться, что пользователи могут определить, какое Live Activity принадлежит их приложению. Для Lyft постоянное использование уникального розового цвета нашего бренда сыграло неоценимую роль в поддержании идентифицируемости на протяжении всей поездки.
• Важные изменения: В условиях ограниченного пространства вам придется принимать сложные решения о том, какому контенту отдать предпочтение, но помните, что наиболее важный контент часто меняется в течение всего времени использования. Вы можете донести больше информации при меньшем пространстве, если найдете нужный контент для нужных моментов и будете динамически менять его.
• Не забывайте о доступности: Эта тема достойна отдельного полноценного поста в блоге (слишком много аспектов, чтобы охватить их здесь), но не стоит позволять новизне функции отвлекать вас от того, чтобы сделать ее максимально доступной. Мы потратили много времени на это — оптимизировали дизайн и содержание каждого экрана для поддержки всех динамических размеров текста в iOS, обеспечили соответствие всех цветов контрасту WCAG AA, а также доработали голосовое сопровождение, чтобы основной контент был понятен и эффективно воспринимался на слух.

Заключительные мысли

Live Activities подходят не для каждого приложения iOS, но для некоторых они меняют правила игры, и rideshare — определенно одно из них. Мы хотим выразить благодарность команде Apple за создание Live Activities, а также за то, что они решили расширить возможности дизайнеров, сделав их очень настраиваемыми.

Мы в Lyft очень рады тому, что Live Activities внедряется сегодня, и с нетерпением ждем будущих улучшений.

Источник