«Куда поедем?»: дизайнер Uber об обновленном интерфейсе приложения

Главный дизайнер в компании Uber Дидье Хилхорст рассказал в своем блоге на Medium о том, почему прежний интерфейс приложения изжил себя, и как команда разрабатывала новый — каких добивались целей, как был устроен процесс и к чему пришли.

Редакция vc.ru публикует перевод материала.

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

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

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

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

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

«Куда поедем?»

Иногда, чтобы быстро добраться из пункта A в пункт B, надо замедлиться и посмотреть, что впереди. И если раньше Uber просил людей думать только о том, как получить поездку, то сейчас мы спрашиваем у пользователей «Куда поедем?».

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

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

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

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

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

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

Добираемся на места назначения

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

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

Если вам кажется, что все под контролем, это значит что вы движетесь недостаточно быстро

Марио Андретти

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

Наслаждаемся поездкой

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

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

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

Особая благодарность Питеру Ыну, Брайанту Джоу, Нику Крюге и всей команде Uber Design. Кроме дизайна мне доставляет особое удовольствие работать с удивительной командой инженеров-разработчиков и менеджеров по продукту, которые воплотили это все в жизнь. Не только дизайнер отвечает за дизайн приложения, мы все участвуем в этом.


0
29 комментариев
Написать комментарий...
Pavel Doronin

Я вроде бы уже привык к новому интерфейсу. Чисто субъективно приложение стало менее удобным по крайней мере в двух местах:
— добраться до «булавки», которая задаёт местоположение стало намного сложнее (пару дней я вообще не мог понять, куда она делась). Это довольно критично, если едешь из большого торгового центра и Убер определяет моё местоположение на другом конце квартала. Или на Петроградской стороне в Питере ошибка определения может быть вообще в пару кварталов. Бегать за машиной совсем не хочется :)
— если я не оценил водителя сразу, то могу подсказка с оценкой может потом вовсе не отобразиться.

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

а еще убрали коэффициенты, это тоже сильно раздражает((

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

ну, финальная стоимость с учётом коэффициентов всё-таки удобнее. Мне всегда сложно было в уме умножить приблизительную сумму на 2,4, например :)

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

я "жмотился" и ставил ожидание снижения коэффициента))

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

Очень и очень советую приложение Surge для айфона (на иконке написано 2x). Пользуюсь с момента обновления убера, всё очень точно.

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

я думал, что у меня что-то заглючило, а оказывается - это новый интерфейс!

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

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

Ответить
Развернуть ветку
Евгений Лазарев

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

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

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

Ответить
Развернуть ветку
Яков Сомов

Опять же. Некоторые адреса ты знаешь не по номеру дома, а примерно. Ну типа "пять углов" или парковка на углу Староколпакского и Куваевской.

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

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

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

Я вообще только из комментов увидел, что ее не убрали совсем.

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

Захожу вчера в Убер. Я неопытный пользователь. Но это же крутейшее приложение в мире.
Хочу просто тыкнуть на карте в нужный дом "я тут", потом тыкнуть в другой "хочу сюда". Так можно выбирать только пункт отправления. А пункт назначения нужно вбивать ручками, писать адрес. Значит, я сначала должна открыть яндекс.карты или 2Гис, найти нужный дом, запомнить его адрес, потом открыть Убер и там его ввести. При этом Яндекс.Такси спокойно позволяет "Указать на карте" и не прессует "включи GPS, включи GPS".
Пункт отправления - это ИЗ. Тут же под ним "Отправиться к значку", я это читаю как "поехать сюда", а не "поехать отсюда".
Если целая толпа людей старалась ради этого удобства, то я даже не знаю, как их отблагодарить...

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

Комментарий удален модератором

Развернуть ветку
Svetlana Ryzhkova

Гетт точно так же не позволяет выбрать место на карте. Если нужно узнать стоимость заранее, нужно вбивать адрес прибытия.
Вообще если лозунг компании "Куда поедем?", казалось бы, надо сделать акцент на простоту и удобство выбора пункта назначения, сделать несколько вариантов, кому что удобнее.

Ответить
Развернуть ветку
Леонид Пустов

Почему просто не сказать, что прося указать адрес, Uber оптимизирует загрузку водителей? Так было бы честно. Мне как раз нравилось, что адрес не нужно указывать.

Ответить
Развернуть ветку
Яков Сомов

Всё именно так. Вот, к примеру, я еду в Ленэкспо. Вызываю убер. И раньше он просто приезжал. А теперь мне придётся два раза указывать адрес. При заказе и при посадке, когда выяснил точный павильон. Понятно, что Уберу так удобнее. Но мне - лишние клики

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

Комментарий удален модератором

Развернуть ветку
Evgeny Kruglov

Что-то на vc сегодня одна месячной давности новость за другой :)

Ответить
Развернуть ветку
Константин Панфилов

Ты про что?

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

Новость про видео, которое Эпл выложила месяц назад, теперь перевод статьи с медиума, которую там разместили месяц назад =))

Я без претензий, если что, просто забавно.

Ответить
Развернуть ветку
Константин Панфилов

Сегодня нет ни одной новости месячной давности, это неправда. То, что ты перечислил — это расширенные материалы, там нет такой привязки к датам.

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

Ну ок, прошу прощения.

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

Вот с «чем заняться в пути», уже перебор.

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

Всегда напрягали всякие внутренние платформы.

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

Комментарий недоступен

Ответить
Развернуть ветку
Антон Кузьмин

Куда поедем?)))

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

Это не приложение, это всего лишь короткий номер с оператором.

Интерфейс, который уделывает очередной инновационный высер от Убер.

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

Переехал на зиму в провинцию. Тут нет Убер, нет Гетт, Яндекс не дождешься. Зато есть такси Максимка, но тут редизайн уже не поможет. К тому же приезжают на вызов ведра с гайками, даже если позвонить и попросить оператора прислать свежую иномарку бк - приедет альмера позапрошлого выпуска. В общем, зажрались вы, господа, кому ревизий не ок! )))

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

Редизайн *

Ответить
Развернуть ветку
Яков Сомов

Уберок - не ок.

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

Автлматом прикрепил карту из Apple Pay, не давая возможности выбрать другую, две минуты помучался на морозе и вызывал за пару секунд Яндекс.

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

Комментарий удален модератором

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