{"id":14294,"url":"\/distributions\/14294\/click?bit=1&hash=434adac65d5ae5d3e2e945d184806550325dd9068ef9e9c0681ca88ae4a51357","hash":"434adac65d5ae5d3e2e945d184806550325dd9068ef9e9c0681ca88ae4a51357","title":"\u0412\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0418\u0418 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u043c \u043c\u0438\u043b\u043b\u0438\u0430\u0440\u0434\u044b \u0432 \u0433\u043e\u0434","buttonText":"","imageUuid":""}

Обновлённая транспортная выдача в 2ГИС — готовимся к новым видам транспорта

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

Потребность доехать из точки А в точку Б — одна из самых популярных для жителей городов. Ежемесячно В 2ГИС строится 470 млн маршрутов для всех видов транспорта.

Возможность построить маршрут в мобильном 2ГИС появилась довольно давно: в 2012 году приложение уже помогало пользователям в поездках на общественном транспорте и на автомобиле.

В 2016 году мобильная версия 2ГИС обновилась, экран выбора маршрутов изменился и стал учитывать пробки, предлагать альтернативные способы проезда. Появляется полноценный навигатор для автомобилей, пешеходная навигация, возможность сравнения цен в такси. Позже мы выпустили навигаторы для грузовиков, велосипедов и самокатов.

И каждый раз, когда мы вносили изменения, осознавали, что старый интерфейс нас ограничивает.

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

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

UX-исследование

Перед нами стояла нетривиальная задача:

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

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

Для первого рабочего прототипа провели полноценное UX-тестирование. Сначала опросили жителей Новосибирска, а потом пообщались с жителями Москвы, так как они живут в самом сложном с точки зрения транспорта городе страны. Транспортная задача, решённая в столице, почти автоматически будет работать везде.

Исследование проводили на двух группах: из тех, кто часто водит машину, и из тех, кто в основном передвигается на общественном транспорте.

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

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

Что получилось

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

Новая транспортная выдача учитывает все виды транспорта и помогает выбирать наиболее удобные и быстрые маршруты

Таб «Маршруты»

Освежили структуру экрана, для удобного использования на больших телефонах поля ввода и истории поездок опустили ближе к пальцу .

У каждого вида транспорта появились контекстные опции. Например, для проезда на общественном транспорте можно активировать слой с автобусами в реальном времени или метро на карте, а у автонавигатора — режим freeroam.

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

Сравнение маршрутов

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

Всем видам транспорта сразу без перехода во вкладку показываем время в пути.

Выбор маршрутов

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

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

Карточки маршрутов

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

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

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

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

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

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

Промежуточные точки

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

Или указать её при редактировании точек маршрута.

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

Такси

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

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

Пешеходы, велики и самокаты

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

Грузовая навигация

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

Контекстные настройки и подсказки

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

К подъезду

Из-за геометрии зданий и их большой площади на пути могут быть препятствия, например, детская площадка или бетонные блоки, которые преграждают сквозной проезд (да, такую информацию тоже можно найти в 2ГИС).

Маршрут к первому подъезду и четвёртому проходит по разным улицам

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

Дома-гиганты в Москве, Санкт-Петербурге и Новосибирске, до которых 2ГИС проложит лучшие маршруты к каждому подъезду

На парковку

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

Что дальше

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

Хороших вам поездок! 💚

0
3 комментария
Дмитрий В

Таб маршруты.
1. Почему при смене адресов отказались от стрелочки в пользу долгого нажатия?
2. Почему отказались от зеленого цвета в табах выбора транспорта? Белая плашка табов не контрастна к фону, как на скринах ниже.
3. Как теперь указать точку Б? На карте которая так мало места занимает на экране?
4. Если флажек указывает на избранные места, то почему он идентичен кнопке «добавить в избранное»?
5. А куда кнопка "назад" делась? в примере с маршрутами ниже у вас есть кнопка закрытия модалки, а здесь почему нет?

Ответить
Развернуть ветку
Дмитрий В

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

Без перехода во вкладку время - это круто прям, да!
Почему функции заехать нет для автобусного маршрута из быстрых дейстивий?
Кнопка «заехать» у вас добавляет конечную точку? или в середину адрес "заезда" вставляет?

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

Когда впервые увидел - ошалел от количества информации. Как будто стало сложнее. До сих пор не привык

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