Лого vc.ru

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

Как разрабатывался новый дизайн карт 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 помогали нам с этим, и сложилось ощущение, что наша студия влилась в их команду на время проекта. Ещё и специально разработанный инструментарий для отладки стилей карт оказался очень удобным и выдавал результат, который легко было тестировать прямо на мобильном устройстве.

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

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

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

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

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

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

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

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

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

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

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

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

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

Европа:

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

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

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

Нью-Йорк:

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

Лондон:

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

Москва:

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

Париж:

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

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

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

Рим:

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

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

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

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Интересный кейс, но чересчур специализирован и для сегодняшнего дня чересчур Maps.me - и в LinkedIn, и в Facebook, и на ресурсах - везде шаринги про обновления диза бывшим работником Яндекса:).

0

Работа норм.

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

А последняя строчка тот еще прогиб. Вам никто не мешал брать эти данные и работать с ними до мейл.ру Они открыты и доступны для всех. Написали бы как есть: "Благодарим мейл за то, что заплатили нам за стилизацию данных ОСМ. Это было интересно и очень приятно".

Это сейчас модно делать. То спутник, то мейл. Кто следующий?

Вторая статья автора, которая читается на одном дыхании

Вобщем OSM в разы лучше

0

Кстати, может кто-нибудь вспомнит. Два или три месяца назад показали мобильное приложение, которое показывает маршруты общественного транспорта в нескольких городах америки. Пользователь наводил камеру, программа по компасу определяла направление и показывала 3Д схему этой части города с наложенными поверх маршрутами транспортов разных цветов. При повороте смартфона все в реальном времени соответственно показывалось на экране. Также вроде была возможность показа маршрута из А в Б с пересадками. Вот название ну никак вспомнить не могу. У них еще промо ролик такой был сногсшибательный.

Нет, не то. Там не названия были, а линии маршрутов поверх 3D карты города. И не только по Нью-Йорку, а по нескольким городам.

0

Да, это крутой проект!)

0

Мне супер-понравился апдейт, как раз сегодня поставил, СПАСИБО
Надеюсь когда-нибудь появятся маршруты не только от текущей точки, но и между двумя заданными

0

Я не знаю про особенности каждой страны и какие у кого приняты пиктограммы на картах, но во время путешествий много раз по картам Maps.me очень быстро находил аптеки. Зеленый кружок с плюсиком - понятно любому русскому человеку.
Если бы я сейчас не залез в maki, то в самом приложение никогда бы не понял что "+" - это больница, а цилиндр с квадратным окном - аптека. Контринтуитивная пиктограмма, на мой вкус.

0

По поводу аптек:

Типичная аптека в Германии: www.st-helena-apotheke.de/
Типичная аптека в США: www.danthoniadesigns.com/ladhope-pharmacy-sign.html
Типичная в Турции: www.ruzgartabela.com/kutu-harf/eczane-tabelasi-paslanmaz-harf.htm

Зелёный крест, мне кажется, немного мимо.
Аптеки из набора maki аптеки и правда плохо считывались, поэтому в MAPS.ME для аптек сделана более различимая пиктограмма.

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

0

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

0

Сан-Франциское - картинка "после" перепутана и совпадает с "до".
Судя по скриншоту Пушкинской площади, с карты пропали подземные переходы, а они всё же нужны на таком масштабе.

Да, поправится момент с подземными переходами.

0

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

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

Ок, поучусь у Яндекса :)

Лол, не заметил сразу. :) Тогда я не понимаю, как один человек с опытом работы над картами мог выполнить два таких разных по удобству проекта.

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

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

Но почему ни строчки о том: как мы вышли на улицу с новым дизайном, откатали с ним на машине 1000 километров, пешком прошлись несколько десятков километров, в улочках Венеции новая версия позволила добраться до Театра Фениче на 15 минут раньше. Без полевых условий – это просто стиль карты, который нравится вам и знакомым дизайнерам.

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

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

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

Плюс улицы в новом стиле свелись вообще к двум: белые и рыжие. Как понять пешеходная это улица, проспект, или автострада?

0

В тексте выше есть ответ на ваш вопрос.

Спасибо за приложение. Очень крутое! Когда сделаете маршруты для велосипеда? Постоянно на автобаны выводит. Германия.

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

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

Сейчас обсуждают
Izobretatel

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

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
Egor Voinov

Недавно было здесь интервью с их основателем. У них трафик-трекер и биржа трафика.

Avito оказалась единственным российским представителем в рейтинге Deloitte Technology Fast 500
0
Ефим Дутый

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

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
Дмитрий Трипалюк
hyper weapon

Собственно, так и не нашел ответ на вопрос из заголовка ))

Почему бизнес-издание Inc назвало Riot Games лучшей компанией 2016 года
0
Salawat Waliullin

(экологии)

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Показать еще