Точка, линия, фигура, текст: как картографические дизайнеры переносят реальный мир на карту
Содержание
Мы пользуемся картами почти каждый день, а иногда и по нескольку раз. Дизайн всех этих зданий, дорог и разметок, входов в метро настраивает команда картографических дизайнеров. Они же делают так, чтобы картами было удобно пользоваться. Миша Лукашин рассказывает, как дизайнеры работают с данными, зачем исследовать шрифт и контрастность парковок, а ещё сколько карт в Яндекс Картах.
Хотелось делать что-то живое, настоящее
По образованию я графический дизайнер и до Яндекса попробовал разное: проектировал интерфейсы, игры, пользовательские сценарии, занимался виртуальной и дополненной реальностью и интерактивным дизайном в целом. Например, мы делали продукт с недвижимостью в VR — чтобы люди могли посмотреть на ещё не построенный объект и решить, подходит им будущая квартира или нет.
Но мне не хватало масштаба: хотелось делать что-то более продуктовое, настоящее, для людей. Поэтому в 2019 году я пришёл в Яндекс Карты. Одну половину времени делал задачи по AR-проекту, а вторую — интерфейсы, поиск, заправки, карточки организаций, фильтры.
Затем я переключился на 3D-дизайн, в котором у меня большой опыт из геймдева. Мы начали делать коммерческий продукт с 3D-новостройками на карте — визуализацию домов. Позже это переросло в большой проект по созданию 3D-достопримечательностей на карте.
В итоге я стал хорошо разбираться, что и как устроено в картах, и мне предложили должность лида команды дизайна. Вот уже 2 года я этим занимаюсь.
Картографическому дизайнеру нужно мыслить продуктово
Сама профессия картографа очень старая. Сначала это были люди, которые умеют показывать местность в масштабе на бумажных картах. Сейчас картографический дизайнер — это человек, который в том числе продуктово мыслит. То есть думает о пользовательских сценариях, когда выбирает объекты, которые отображаются на карте в приложении. Кроме того, ему ещё нужно быть немного техническим дизайнером — уметь работать с данными. Так что современный картографический дизайн — это гибрид из трёх частей: графики, техники и продуктового мышления.
У меня в команде пять дизайнеров. Все талантливые мультиспециалисты. И код пишут, и бэкенд знают, и контент умеют, и в фигме ковыряют, и графику рисуют — и дизайнеры хорошие. У всех в команде есть картографическое образование, но для индустрии сейчас не так критично, чтобы каждый дизайнер был со специальным образованием, поскольку продуктовой составляющей стало больше, чем глубокой специфики классической картографии. Однако такие люди в команде обязательно нужны, ведь карта всё ещё остаётся картой, и при всей широте взглядов, экспертиз и школ мысли мы во многом опираемся на основы основ картографии.
Мы делаем живой продукт, а не статичную карту, у нас много масштабов: все подписи двигаются, сталкиваются, происходят коллизии объектов. Чтобы навести порядок и расставить приоритеты, надо мыслить пользовательски.
Например, пешеходу нужно видеть подземные переходы, лестницы, вывески организаций. А водителю не так важен цвет линий метро, зато необходима разметка и более крупные подписи: он не может приблизить экран, чтобы что-то рассмотреть.
Поэтому дизайнер должен не просто красиво разместить подписи, а решить, что показать, чтобы пользователь быстро сориентировался. И так в каждом сценарии продукта, с каждым объектом на карте.
На самом деле карта не одна, их шесть
Каждая карта состоит из системы слоёв, на которых отображены разные типы данных. Мы пользуемся пятью основными: текст, картинка, линия, точка, полигон (фигура). Из них состоит всё в Яндекс Картах. Всего у нас шесть карт:
Базовая. Её видно при открытии приложения. На этом этапе мы не знаем, с чем к нам пользователь пришёл, поэтому карта сделана так, чтобы решать любые задачи и по дефолту помогать в навигации и поиске.
Для водителя. Те же данные настроены иначе по приоритетам: мы скрываем лишние подписи, делаем шрифты крупнее, увеличиваем контраст для дорог и добавляем разметку. Ещё мы скрываем или понижаем в приоритете показы объектов, которые для автонавигации необязательны, чтобы фокус водителя оставался только на важном.
Транспортная. Предназначена для людей, которые едут на метро или другом общественном транспорте. На ней меньше внимания уделяется дорогам и больше — линиям метро, номерам выходов, автобусным остановкам.
Спутниковая. Тут очевидно — отображаем данные со спутников.
Гибридная. Накладываем векторную графику поверх картинки со спутника, чтобы дополнительно подсветить дорожки и дома. Здесь важно, с одной стороны, не мешать разглядывать спутниковый снимок, а с другой — уточнять его там, где остаются сомнения.
Контекстная. Это любые комбинации предыдущих карт, которые настраиваются под более узкие задачи пользователя. Например, при дискавери-поиске, когда человек открыл «шторку» с персональными рекомендациями, он увидит сильно изменённую и почти пустую версию базовой карты. В ней всё сделано для того, чтобы фотографии ресторанов и прочих рекомендованных мест были в фокусе и позволяли изучать контент на карте без конкуренции с другими объектами. И таких карт существует великое множество.
Задача дизайнера — настроить каждую из карт под цели пользователя
Иными словами, необходимо сделать так, чтобы результаты, которые относятся к поисковому запросу человека, были заметны, а остальные элементы бледнели и не выделялись, чтобы не мешать.
За каждым сценарием закреплён конкретный дизайнер, и любую задачу он решает во всех шести картах. Например, есть дизайнер, который отвечает за навигацию — пешеходную и автомобильную. Отдельные дизайнеры настраивают подписи. А есть ребята, которые отвечают за географическую карту — как мы показываем горные хребты, моря.
Почти над каждым проектом работает кросс-функциональная команда
Мы занимаемся продуктом, поэтому всегда есть стартапный дух и немного хаоса. Но при этом всем понятно, что надо делать, чтобы дойти от идеи до готовой фичи. Расскажу на примере задачи, над которой мы работаем прямо сейчас.
Нам нужно разработать визуальный концепт беззапросного поиска. То есть придумать, как выдавать пользователю подборку мест на основе AI-анализа интересов, поисковой активности и посещений.
За эту задачу отвечает дизайнер, который уже работал с подобными вещами — занимался визуализацией пинов на карте. К тому же это человек с сильными хард-скилами, и он может накодить любой прототип. А значит, сможет быстро запустить эксперимент и посмотреть, есть ли в беззапросном поиске какая-то бизнес-метрика, которая будет действительно растить количество взаимодействий пользователя с картой, выражать пользовательский интерес к сценарию и корректировать его.
Ответственный дизайнер собирает кросс-функциональную команду из картографических и продуктовых дизайнеров: кто-то будет настраивать карты, кто-то — рисовать в фигме кружочки с фотографиями, кто-то — отвечать за интерфейсную часть и так далее.
Затем команда генерирует огромный список гипотез, какие объекты нужно отображать в беззапросном поиске, а какие нет. Далее запускаем эксперименты, качественные и количественные, смотрим на действия пользователей и то, как они сказываются на метриках, удовлетворяется ли задача пользователя, решается ли цель бизнеса. Если таким образом наши продуктовые гипотезы подтверждаются, это встаёт как проект на рельсы развития: каждые полгода или чаще мы итеративно добавляем что-то новое.
Чтобы создавать интуитивно понятные карты, мы проводим много исследований
Проверяем каждую маленькую деталь: на контраст, скорость чтения и многие другие параметры, ведь многое можно измерить.
Качественные исследования
Для них всегда пишется сценарий, что мы хотим узнать от испытуемого, как построить процесс так, чтобы не давать подсказки, но снять модель поведения. Такие исследования помогают понять, обо что в сценарии спотыкается человек, где не может справиться с задачей.
Например, мы что-то сделали в автомобильной навигации и хотим проверить. Исследование будет заключаться в том, что мы катаемся с людьми в машине, смотрим за их поведением и снимаем на камеру. Иногда делаем айтрекинг-тесты: отслеживаем, куда человек смотрит на экране в реальном времени, чтобы понять, хорошо ли мы всё показываем на карте. Такой тип исследования, конечно, полезен на всех этапах разработки дизайна, но жизненно важен на начальных.
Количественные исследования
Проводим, когда мы запускаем эксперимент на какой-то процент аудитории и смотрим только на метрики. Вот несколько примеров.
Наш шрифтовой дизайнер Серёжа Николаев сделал масштабное исследование, чтобы проверить, будут ли быстрее читаться надписи, если строчные буквы вытянуть повыше. До него мало кто задавался этим вопросом, чаще всего все просто использовали стандартные шрифты. Но в отличие от интерфейсных шрифтов подписи на карте мельче и требуют особого внимания к формам букв в таких размерностях. Серёжа разработал специальную картографическую версию шрифта для Яндекс Карт, которая должна читаться лучше и быстрее.
В эксперименте участвовало около 10 тысяч человек, они на время искали нужные слова. Так вот, в результате выяснилось, что в более вытянутой версии шрифта люди находят нужное слово на 5% быстрее. Кажется, что разница небольшая, но если посчитать, сколько времени люди используют приложение в год, то она становится весьма ощутимой. При этом пользователи не понимают, что именно изменилось, — просто им стало удобнее.
Сейчас мой день на 80% состоит из встреч: с разработкой, с дизайном, с менеджерами, с руководителями. Моя главная цель — сделать так, чтобы все команды следовали общему вектору развития Карт и чтобы у моих дизайнеров были все данные для работы.
Сначала я переживал из-за того, что стал меньше что-то делать руками. Но понял, что большая команда позволяет сделать существенно больше, а возможности для персонального вклада всегда остаются — как в общих проектах, так и в индивидуальных. Я кайфую от этого осознания, потому что в конечном счёте мне надо, чтобы Карты становились ещё лучше.
