[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Редакция vc.ru", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","\u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d","uber"], "comments": 32, "likes": 14, "favorites": 10, "is_advertisement": false, "section_name": "default", "id": "20169" }
Редакция vc.ru
5 617

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


#Интерфейсы #Дизайн #редизайн #uber #интерфейсы

Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления