Клуб API Карт

Дизайн Яндекс.Карт как наука и увлечение — часть 1

tekunova
10 июля 2013, 17:44
Дизайн Яндекс.Карт как наука и увлечение — часть 1

(Оригинал текста опубликован на Хабре одним постом).

Меня зовут Андрей Кармацкий, и я руковожу работой над дизайном Яндекс.Карт. Весной я ездил в Новосибирск на конференцию Codefest 2013, на которой рассказывал о том, как мы разрабатываем дизайн Яндекс.Карт. Это была хорошая возможность структурировать накопленные знания в небольшую историю.

Почему я люблю карты?


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

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

Carta Marina братьев Магнусов

Сегодня, спустя много-много лет, технологии и алгоритмы позволяют творить в картографии невероятные вещи.

Watercolor от Stamen Design. 

Watercolor от Stamen Design
Map tiles by Stamen Design. Data by OpenStreetMap

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

Но карта — это не просто картинка. Правильное представление информации помогает принимать важные решения. 



Чем аккуратнее и полнее представлена информация, тем вернее будут принятые решения. Например, рабочая карта командира.

image
Из книги «Рабочая карта командира» И.Д.Помбрика и Н.А.Шевченко 

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

image

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

image

И таких историй — когда правильно сделанная карта помогала людям — множество.

Итак, почему же мне нравится заниматься картами? Картографический дизайн — это дизайн информации, а информационный дизайн это: 

  1. Сложность. Мы работаем с большими объёмами данных. Нужно принимать решения не только о том, какие из них нужны, но и о том, как их использовать максимально полезно.
  2. Междисциплинарность. Чтобы разрабатывать удобные карты, нужно быть не только дизайнером или картографом. Нужно быть исследователем, психологом и экспертом в нескольких областях. Иногда нам даже приходится привлекать сторонних экспертов.
  3. Эксперименты. Это невероятно круто: не только делать что-то, но и видеть, что в итоге получается, и наблюдать за тем, как люди это используют. Работа с картами — это множество экспериментов и практически неограниченные возможности создать что-то новое.


Некоторые ребята объясняют смысл веб-картографии примерно так:

Tim Wallace

B это очень близко к тому, что делаем мы. Итак, дизайн Яндекс.Карт. Расскажу, о чём нам нужно знать, чтобы делать хорошую карту.

Контекст и среда


Я уже говорил, что карта — это данные, и без какого либо дизайна, она будет выглядеть вот так. 



Всего лишь слой улиц. А если добавить реку и слой зданий, то так.



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

Как менялся дизайн Яндекс.Карт

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

Другие карты тоже меняются

Другие карты тоже меняются

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

Это все мои карты

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



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

Разные слои на Яндекс.Картах

Нашу карту используют на мобильном телефоне: и в солнечный день, и ночью. И, конечно, сотни тысяч водителей смотрят на неё так в салоне автомобиля.



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

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

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

Пользователи



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

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

Тепловая карта запросов

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

  1. Человек смотрит на мир целиком. Он хочет найти и распознать континенты, чтобы найти интересующую его страну.
  2. Человек смотрит на страну (как на картинке выше). Его интересует расположение городов и связи между ними.
  3. Человек смотрит на весь город. Ему важно видеть районы и основные магистрали: главные артерии магистралей делают крупные города узнаваемыми и различимыми между собой.
  4. Человек смотрит на район. Ему важны улицы и более локальные части района.
  5. Человек смотрит на квартал или рассматривает улицу. Его интересует «последняя миля» его маршрута/интереса поиска.


image

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

image

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

image

Наличие двух разных «карт Москвы» можно проиллюстрировать картинкой ниже.

Разница между пешеходами и автомобилистами

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

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

Так ориентируются по карте водители

А на второй картинке нарисовал свою «пешеходную» Москву: районы где мне не нужна карта для ориентирования.

Так ориентируюся по Карте пешеходы

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

image
Центральная часть Новосибирска: районы, метро и улицы

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

Так мы обычно представляем себе карту

Кроме памяти, у человека есть зрение. Поэтому обязательно нужно принимать во внимание зрительные способности человека. По разным оценкам, до 10% мужского населения планеты имеют нарушения цветовосприятия. Среди женщин они встречаются гораздо реже — только у 0,5%.

Как видят Яндекс.Карты люди с обычным зрением и цветоаномалы