Не только 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 года нашли мини-карту города. Правда, она вызывается отдельным контролом, а не всегда на экране. Но это уже похоже на навигацию по условно открытому миру.
В том же 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-карта и максимально дешёвые и прямолинейные решения, позволяющие быстро вносить изменения. Другими словами — костылили прототипы поверх основного приложения, чтобы каждый раз не отвлекать команды разработки.
В тестирование взяли несколько вариантов, сознательно разделив ЕТА и мини-карту, но оставив их рядом.
Делали ставку на небольшую квадратную карту. Но откатав довольно много километров с разными вариантами по настоящим маршрутам, поняли, что именно круглая карта показывает достаточно от будущего маршрута, при этом аккуратна по отношению к линии основного маршрута и к интерфейсу в целом.
С этим видом продолжили работать и до конца смогли сформулировать основную концепцию мини-карты:
Поездка за рулём более комфортна и предсказуема, если можно увидеть несколько следующих манёвров, пробки на них, а также понимать, из-за чего произошла пробка, не прикасаясь к экрану и не отрывая рук от руля
Всё, что можно показать на основной карте, в крупном размере при приближении к тому или иному событию, должно быть показано на основной карте. А быстрый просмотр всего маршрута и предсказание того, что ожидает впереди, ложится на плечи мини-карты.
Что внутри мини-карты
Начали пробовать разные механики. В одном из вариантов, мини-карта была ориентирована строго на север. Как оказалось, мозг взрывается, когда по основному навигатору машина едет, например, снизу вверх, а на мини-карте — вбок или вообще назад!
Чтобы выбрать универсальный алгоритм поведения мини-карты, мы катались вживую и в эмуляторе в разных городах и между ними — по развязкам, пробкам, спальным районам и промзонам.
На этом этапе заметили — маркер ведения на мини-карте важно сместить вниз, чтобы большая часть маршрута занимала как можно большую площадь. Но на крутых поворотах и разворотах его лучше сдвигать к центру, чтобы показать часть маршрута, которая может оказаться сзади.
Потом перешли к настройке внешнего вида мини-карты. В первых итерациях она была в таком же стиле, как основная, а к финалу сделали её контрастнее, но так, чтобы она не выглядела чужеродно. Подбирали толщину линий, их оттенок и всё ещё экспериментируем со стилем мини-карты в ночном режиме навигатора.
И, конечно, детализация. Если прорисовывать всё, как на основной карте, то карта получится абсолютно нечитаемой в таком размере. Убрали дома, но предположили, что было бы неплохо оставить станции метро, ведь это хорошие ориентиры. Ошибку осознали в районе Китай-города — всю мини-карту обсыпало выходами метро, которые совсем не помогали сориентироваться.
В итоге пока оставили только вокзалы и аэропорты. Ещё показываем реки как естественный географический ориентир. А видимость мелких зависит от зума.
Подумали и про тех, кто не захочет использовать мини-карту — добавили возможность переключиться на традиционный «градусник».
Как попробовать
В самом начале мы переживали, что мини-карта получится улучшением ради улучшения. После первой обратной связи стало спокойнее — участники тестов говорили, что теперь не нужно «чесать экран». С картой появляется чувство контроля и понимания, что ждёт дальше в пути.
Теперь нам хочется узнать ваше мнение. И вы сильно поможете, если попробуете новый навигатор и поделитесь обратной связью.
Осталось только прих*ярить карту
Это очень прикольно, но такое массивное описание — оверхед.
Я надеюсь, что вам не платят зарплаты за количество символов.
Комментарий недоступен
Устал листать до комментов
2GIS: расписывает «feature building» мини-карт с прикольными отсылками к старым играм
Комьюнити VC 2021:
Я надеюсь вам не платят зарплаты за количество символов лучше бы починили медленную загрузку на iOS Осталось только прих*ярить карту Не старадайте фигней со своими играми На экранах с большим разрешением спидометр мал "мы понимаем что это никому не упало, но оправдать бабло на разработку нужно" :D А навигатор уже перестал самостоятельно скидывать тебя с траектории? 2ГИС до сих пор не умеет работать одновременно на магнитоле и телефоне Лучше разберитесь, почему серые автосалоны которые кидают людей, накручивают полезные отзывы в вашем приложении. Оренбург, салон карлов
Салон карлов, Карл!
Кидают людей в Оренбурге!
Бегом, туда, @2ГИС 😈
*рукалицо*