Кейс: Как разрабатывался новый дизайн карт Maps.me

Экс-руководитель службы дизайна геоинформационных сервисов «Яндекса», основатель студии Urbica Design, разработавшей дизайн карт Maps.mе, Адрей Кармацкий рассказал в своём блоге на Medium о процессе работы.

Редакция vc.ru публикует текст с разрешения автора.

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

Maps.me — как раз тот случай удачного применения данных OpenStreetMap. Это популярное мобильное приложение c офлайн-картой всего мира, Maps.me скачали и установили более 20 миллионов пользователей.

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

Детально смотрим на то, с чем нам нужно поработать:

Карта Maps.me до редизайна:

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

Свободная стена в студии на время проекта превращается в аналитический центр

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

Далее, нужно понять, как используют Maps.me. Помимо стандартной статистики поиска и популярности устройств, просим команду разработчиков поделиться статистикой скачивания карт из разных стран: какую страну и откуда пользователи скачивают. Данных много, нужно как-то их упаковать в понятный вид. Визуализируем.

Распределение загрузки карт, в процентах от общего числа

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

Доля локальных загрузок карт от общего числа

Выясняются интересные открытия: например, Австрию скачивают из Германии чаще, чем из самой Австрии. Наиболее вероятно, что немцы приезжают на горнолыжные австрийские курорты.

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

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

Создание картографического стиля

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

В итоге, получаем такой концепт:

Карта центра Барселоны в обновлённом стиле

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

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

Пиктограммы для карты Maps.me

Отображение ориентиров переработано, выбраны наиболее важные категории POI (point of interest). Также применяется более жёсткая фильтрация объектов — это избавляет от ощущения перегруженности, а по мере увеличения масштаба карты включаются менее важные категории объектов. Для большой части пиктограмм POI используется набор Maki — они прекрасно унифицированы и подходят для использования на карте, при этом, для обозначения метро и различных видов транспорта мы разработали набор иконок специально для этого проекта.

Мадрид. Нормальное зрение

Мадрид глазами человека с нарушенным цветовосприятием

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

Цвета карты были подобраны так, чтобы их различали все пользователи, в том числе и люди с нарушением цветового восприятия (дальтонизм). Это важно, так как ~8% мужчин и ~0.5% женщин не различают некоторые цвета.

Концепт дизайна ребятам из Maps.me понравился, однако, всё оказалось не так просто, ведь впереди внедрение стилей на многомиллионную аудиторию, и сделать это нужно безболезненно для пользователей: так чтобы обновление стилей воспринималось не как тотальный редизайн, а очередное обновление.

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

Три стиля карты (сверху вниз): прежние стили, промежуточный вариант (запустился сейчас), концепция дизайна в будущих версиях:

Сегодня Maps.me обновили версию приложения с разработанным нами дизайном карты и активно собирают обратную связь.

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

И раз речь идёт о редизайне, хочется показать, что получилось у нас в сравнении с прежними стилями (было/стало, слева направо).

Европа:

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

Западное побережье Северной Америки:

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

Нью-Йорк:

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

Лондон:

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

Москва:

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

Париж:

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

Минск:

Учтён важный для пешеходов момент — точное расположение выходов из метро и их обозначение. Как правило в OpenSteetMap станция метро отмечается на месте платформы под землёй (в стороне, до полукилометра от реального входа), но, чтобы туда попасть, человеку с поверхности нужно найти вход в метро на карте.

Сан-Франциско:

Упрощать подачу информации — отсекать ненужное на каждом масштабе карты и оставлять только важные для пользователя объекты.

Рим:

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

И ещё одна приятная деталь: в обновлённом приложении есть «ночной» режим — цвета которого подобраны так, что карта на экране не слепит в тёмное время суток. Режим можно включить, набрав «?dark» в строке поиска (и «?light», чтобы вернуть «дневную» карту обратно).

Берлин — дневной и ночной режимы карты:

Сейчас в картах Maps.me показывается 385 миллионов различных объектов в нескольких сотнях различных категорий. Благодарим ребят из Maps.me за возможность поработать с таким большим и интересным массивом данных. Это было очень интересно.