Доработка интерфейса навигатора 2ГИС

У дизайнера нет цели, есть только путь — сделать мир лучше. Он ищет и исправляет то, что не работает или работает плохо.

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

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

Исследования: в чём пользователи видят проблему

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

Список вопросов:

1. Как часто ты ездишь на машине?

2. Как часто ты помогаешь водителю ориентироваться в дороге? В каких ситуациях это обычно происходит?

3. Какие сложности возникают, когда ты помогаешь водителю с навигацией?

4. Как часто ты при этом пользуешься навигатором?

5. Как давно ты ездил по незнакомому маршруту?

6. Зачем ты строишь маршрут до знакомого места?

7. Чем построенный навигатором маршрут отличался от привычного тебе?

8. Почему не пользуешься навигаторами?

9. Почему пользуешься этим навигатором? Пробовал ли другие? Что оттолкнуло?

10. Что могло бы сподвигнуть тебя попробовать другой навигатор?

11. Как давно ты ездил на далекие расстояния за рулем? Как при этом планировал маршрут?

12. Чем ты руководствуешься, когда выбираешь между двумя‑тремя маршрутами?

13. Тебе свойственно делать остановки в дороге или заезжать куда‑то?

14. На что ты обращаешь внимание, когда выбираешь места, где остановиться?

15. Расскажи про свою последнюю поездку с остановками.

16. Были случаи, когда пришлось сильно отклоняться от маршрута для остановки? Почему так произошло?

17. Каковы последствия этой ситуации?

Результаты интервью

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

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

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

Также я изучила недовольства людей касаемо навигатора 2ГИС в отзывах App Store. Там я нашла следующее мнение: «При построении маршрута и добавлении промежуточного пункта вываливается список ближайших, а я ищу на маршруте».

Все вышеперечисленное подтвердило мои гипотезы:

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

2. Если такие места будут находиться близко к маршруту (например, в пределах пяти минут), это значительно упростит жизнь водителям и повысит их доверие к приложению.

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

Навигатор, который думает за вас: остановки по пути

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

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

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

Анализ текущего сценария: что мы можем улучшить

Прежде, чем что‑то улучшить, нужно понять, как оно устроено. Я построила текущий процесс поиска точек для остановки в навигаторе 2ГИС:

Что не так с текущим сценарием?

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

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

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

Пример неудачного поиска

Хотим доехать до Победы, но сначала покушать в Rostic's. Проблема в том, что мы не знаем, какой именно филиал нам нужен. Выбираем самый ближайший и получаем маршрут в 15 минут и 7.5 километров. Но есть филиал, который находится дальше — через 3 километра от места отправления. И маршрут через него получается быстрее на 2 минуты и короче на 1.6 км. Из‑за того, что мы не видим добавочное время в пути, трудно оценить удобство остановки.

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

Анализ конкурентов

При анализе конкурентов я заметила, что поиск места по пути уже есть у карт Google и Apple. Также в результатах отображено добавочное время. Это сигнал о том, что функция востребована.

Внесённые изменения: как я улучшила поиск остановок

Основной поиск: цветные рубрики и консистентность

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

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

Поиск при построении маршрута

Следующим шагом я доработала интерфейс добавления остановок на этапе построения маршрута. Изменения:

1. Категории заведений. Я добавила рубрики с изменённым приоритетом: во время поездки чаще всего нужны АЗС, СТО, туалеты и места, где можно перекусить.

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

3. Поиск среди филиалов. Раньше в списке результатов отображались только конкретные места. Теперь добавлена возможность искать среди филиалов, что особенно полезно для сгруппированных результатов.

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

5. Добавочное время в пути. При построении маршрута важную роль играет не только расстояние, но и время (вспомните себя в пробках, когда едете сто метров в течение тридцати минут). Это время должно учитывать текущую ситуацию на дорогах.

6. Иконки категорий. Вместо стандартной лупы у каждой точки теперь отображается иконка, соответствующая категории места (например, бензоколонка для АЗС). Это помогает пользователям быстрее ориентироваться в результатах и делает интерфейс более визуально привлекательным.

Интерфейс выбора филиалов

Если пользователь выбирает группу филиалов, появляется шторка со списком результатов. Здесь я добавила фильтр «По пути», который показывает заведения, расположенные вдоль маршрута. В карточке заведения отображается самая необходимая информация, которая может меняться в зависимости от категории (например, стоимость топлива для АЗС или средний чек для кафе). Также в карточке есть кнопка «Заехать» с иконкой из дизайн‑системы 2ГИС. При нажатии на карточку вне области кнопки открывается подробная карточка заведения.

Поиск во время вождения

Интерфейс поиска во время вождения почти идентичен основному поиску, но с изменённым приоритетом рубрик.

В текущей реализации после выбора категории нам открывается карта в формате навигатора, то есть приближенная, и на ней отображаются точки по заданной категории. Отсутствие списка с результатами плохо сказывается на времени поиска точки для остановки: водителю придётся искать по карте нужное заведение, без возможности отфильтровать подходящие. Изначально мы видим только то, что находится рядом, хотя рядом может находиться неудобное для проезда место. Решением стало добавление списка результатов и фильтра «По пути». Эта шторка такая же, как в предыдущем разделе про филиалы, то есть одна доработка используется повторно.

Side-by-side тестирование: как пользователи оценили изменения

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

В итоге большинство выбрало новый интерфейс, отметив несколько ключевых моментов:

1. Цветные рубрики. Пользователи оценили, что категории стали более заметными и визуально привлекательными.

2. Наличие туалетов в рубриках. Это оказалось важным дополнением, особенно для длительных поездок. Люди отметили, что теперь не нужно долго искать, где можно остановиться по нуждам.

3. Расчет времени в дороге. Участникам понравилось, что навигатор теперь показывает, сколько времени добавится к маршруту, если свернуть на ту или иную остановку. Это помогло им принимать решения быстрее и увереннее.

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

Не стоит забывать про бизнес

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

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

Бонус: панель управления маршрутом

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

В навигаторах конкурентов шторка визуально выглядит как шторка, а кнопка выглядит как кнопка и её соответственно нельзя развернуть. Внешний вид элементов совпадает с ожиданиями пользователей.

Вот как я изменила панель управления маршрутом:

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

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

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

Эпилог

Иногда путь к улучшениям оказывается непростым — я не смогла найти дизайн‑систему 2ГИС и воссоздала ее с нуля, ориентируясь на продакшен, а не на макеты дизайнеров в Figma.

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

А что бы вы изменили в навигаторах?