Не только Dota и GTA: мини-карта в навигаторе 2ГИС

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

Изначально никто не ставил задачу «сделать мини-карту». Мы хотели добавить предсказуемости — чтобы водители не передвигали и отдаляли карту для просмотра следующих манёвров, а быстро понимали детали будущего маршрута и могли сконцентрироваться на дороге.

Этот пост — о том, как мы её делали: с чего начинали, какие ошибки собрали, как тестировали и к чему хотим прийти. Но сначала — что такое мини-карты, откуда они к нам пришли и как они развивались.

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

В зависимости от типа игры и задач меняется и мини-карта. Где-то с высокой детализацией, а где-то — только дороги. Кто-то добавляет события, POI, чек-поинты, показывает соперников и врагов, компас или стрелку направления движения.

В общих моментах они, конечно же, похожи, но сравнивать мини-карту в Age of empires, Dota, Oblivion и в NFS всё-таки не стоит — слишком разные задачи.

В Dota, как и в CS, локация сильно ограничена — и мини-карта берёт на себя информирование о местоположении союзников и противников. А в том же Warcraft 3 и задачи другие, и карта побольше, поэтому к информационной роли мини-карты добавляется и задача быстрого перемещения в зону активных действий.

Иногда мини-карту намеренно не добавляют, чтобы погрузить в созданный мир: Ghost of Tsushima, Dark Souls, Far Cry 5, Fallout. По этому поводу даже проводилось исследование, где выяснилось, что мини-карта забирает на себя ориентирование, а геймеры, которые ей пользуются, не запоминают окружение и не погружаются в атмосферу игры.

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

Одно из первых упоминаний мини-карт мы нашли в игре Pitstop 1983 года.

Если смотреть не гоночки, то есть мини-карта в Quackshot, 1984 года.

А в Turbo Esprit 1986 года нашли мини-карту города. Правда, она вызывается отдельным контролом, а не всегда на экране. Но это уже похоже на навигацию по условно открытому миру.

Первую «честную» мини-карту, которая всегда на экране, мы нашли в Lombard RAC Rally 1988 года. Там же — первый прогресс-бар прохождения пути!

В том же 1988 году вышла Grand Prix Circuit. В ней на мини-карте видно положение соперников.

1989 год, Vette! — первый большой мир. Никаких ограничений, игрок сам выбирает, как добраться до финиша. Мини-карта вызывается контролом.

А в 1991 году вышел Hunter. Игра, в которой можно было перемещаться по огромной 3D-карте на разной технике: катерах, танках, джипах, вертолетах и даже на велосипеде. Карту сделали псевдорельефной — короткий маршрут можно построить уже не совсем наугад.

В Virtua Racing (1992) мини-карта поворачивается относительно направления движения машины.

В Ridge Racer (1993) направление движения на мини-карте показывается уже привычным нам геомаркером — стрелкой.

В 1993 году в GP-1 к мини-карте добавили указатель направления и сложности поворота

А в Network Q RAC Rally того же года появляется и голосовой штурман.

1999 год, в Midtown Madness появляется мини-карта и AR-стрелка, показывающая направление.

А ещё в 1999 году вышел Driver, у которого на мини-карте появился индикатор приближения к цели.

2001 год, Grand Theft Auto III — мини-карта меняет масштаб в зависимости от скорости, добавили положение севера и контекстные POI.

2010 год — Crash Time 4, добавляется информация о расстоянии до цели.

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

Дальше расскажем, что из этого могло появиться на мини-карте в 2021 году, но не в игре, а в автомобильном навигаторе.

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

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

У каждой команды получился свой вариант, но все решения объединяло две мысли — в интерфейсе необходим прогресс маршрута и хочется видеть больше карты.

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

Вообще, навигатор — это трансформер, который собирается из множества элементов под конкретную дорожную ситуацию: маневр и расстояние до него, данные ЕТА, улица, на которую едем, полосность, спидометр и ограничение скорости, прогресс-расстояния до камеры. Кроме этого — набор контролов: зум, парковки, пробки, компас, геопозиция, добавление дорожных событий, настройки. И вот в это всё нужно было добавить некое графическое пятно, которое увеличит область видимости на карте.

При этом было много неизвестных. Как интерфейсных, например:

• Должно ли это графическое пятно всегда быть на экране?
• Это отдельная сущность или дополнение к уже существующим блокам?
  
• Если можно добавить к существующим, то к чему?
  
• Должны ли мы в нём показывать полный маршрут, или только часть?
  
• Если маршрут показывается полностью, то как он должен располагаться? Если строго на север, то как вписывать длинные маршруты в область мини-карты? Снизу вверх, или слева-направо?
  

Так и физические — мы же говорим про управление и взаимодействие за рулем на дороге:

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

В интерфейсе навигатора точно необходимо видеть прогресс маршрута. И так как «градусник» — это история про весь маршрут, то его хорошо дополняют ЕТА-данные: время в пути, расстояние и время прибытия в точку Б.

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

Для экономии пространства в экране, попробовали срастить «градусник» с ЕТА и блоком манёвра. Так в одном месте будет информация про следующий манёвр, ситуацию с пробками и прогноз оставшегося времени в пути.

С этого и строилась первоначальная концепция. Но дать «градуснику» много внимания и не дать ему дополнительные возможности было бы нечестно. Решили, что градусник будет ещё и открывать некую, пока абстрактную, мини-карту — как маршрут целиком в дополнение к основной карте. Экспериментировали:

• с видом: сделать её тёмной или светлой;
• насыщенностью элементов: дорог, POI и мега-POI, метро, лесов, гидрографии;
  
• с расположением и пропорциями мини-карты относительно экрана ведения;
• с направлением, позиционированием маршрута и гео-маркера внутри мини-карты.

Поэкспериментировали и получили вот какие проблемы:

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

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

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

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

Решили попробовать сделать из мини-карты отдельную сущность, поискать ей ещё место на экране, при этом сохранив связь с ЕТА. Подобные ходы влияли на весь вид навигатора: попутно пересобирали практически все элементы заново, но это вполне нормально для старта разработки. Безумная вариативность решений только прибавляла сил и желания во всём этом разобраться.

Конструкция в совокупности с ЕТА продолжала быть тяжеловесной и трудносчитываемой. При этом где-то ещё должен быть выход из навигатора и кнопки дополнительных действий — пробок или парковок.

В какой-то момент мы поняли, что не понимаем, какой вариант хорош только как картинка, а каким будет удобно пользоваться за рулём. И единственное решение этой дилеммы — собрать прототипы и испытать их в реальных условиях.

Как мы затаскивали все варианты в приложение и учились показывать карту на карте — тема для отдельной статьи. Если коротко, на помощь пришли наша MapGL-карта и максимально дешёвые и прямолинейные решения, позволяющие быстро вносить изменения. Другими словами — костылили прототипы поверх основного приложения, чтобы каждый раз не отвлекать команды разработки.

В тестирование взяли несколько вариантов, сознательно разделив ЕТА и мини-карту, но оставив их рядом.

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

С этим видом продолжили работать и до конца смогли сформулировать основную концепцию мини-карты:

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

Начали пробовать разные механики. В одном из вариантов, мини-карта была ориентирована строго на север. Как оказалось, мозг взрывается, когда по основному навигатору машина едет, например, снизу вверх, а на мини-карте — вбок или вообще назад!

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

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

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

И, конечно, детализация. Если прорисовывать всё, как на основной карте, то карта получится абсолютно нечитаемой в таком размере. Убрали дома, но предположили, что было бы неплохо оставить станции метро, ведь это хорошие ориентиры. Ошибку осознали в районе Китай-города — всю мини-карту обсыпало выходами метро, которые совсем не помогали сориентироваться.

В итоге пока оставили только вокзалы и аэропорты. Ещё показываем реки как естественный географический ориентир. А видимость мелких зависит от зума.

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

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

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

Чтобы запустить новый навигатор, обновите 2ГИС (или скайчайте из сторов: iOS, Android) и переключитесь в настройках на новый интерфейс. Хорошей дороги!