Не выразить словами, как волнительно и, чего уж там, страшно презентовать редизайн Яндекс Карт!
Работая над сервисом, которым ежедневно пользуются члены твоей семьи, репетитор по английскому, ребята из футбольной команды и ещё десятки миллионов человек, чувствуешь особую ответственность. Ведь при таких масштабах даже самое мелкое изменение влияет на опыт взаимодействия с картой огромного количества людей.
Угодить всем тяжело, так что отслеживание и пропуск через себя «болей» тех, кому наши изменения поломали привычки или просто пришлись не по вкусу, — не самая приятная, но важная часть нашей работы. Однако страх и желание любой ценой никого не обидеть способны парализовать, и порой надо быть смелым, чтобы внести изменения, необходимость которых уже назрела.
Сегодня мы обновили внешний вид Яндекс Карт. Одно из главных изменений затронуло отображение дорог: они обзавелись детальной разметкой и сменили привычный жёлтый цвет на серый — как в реальной жизни. Хочу рассказать о процессе поиска дизайн‑решений и раскрыть, почему были сделаны эти и другие изменения, а их в редизайне довольно много.
Зачем вообще что-то менять
На самом деле дизайн Карт меняется постоянно. Тихо и незаметно изо дня в день увеличивается контраст подписей, перерисовываются иконки объектов и правится толщина линий. Но со временем накапливаются потребности, которые не удовлетворить малыми изменениями, — надо засесть и заново перенастроить базовое устройство карты.
Последний такой значимый редизайн Яндекс Карт был в 2020 году. Тогда сильно поменялись цвета, а визуальный приоритет был сдвинут с дорожной сети на остальное наполнение карт.
Если же заглянуть ещё дальше в прошлое, динамика изменения дизайна Карт станет ещё более очевидной: мы постепенно отходим от Карт как от оцифрованного атласа автодорог в сторону Карт как сервиса о городе, где всё не ограничивается проспектами и переулками. Как следствие, картографическая основа становится более светлой, чтобы внимание переключилось на расположенные поверх слои информации. Тёмно‑оранжевые цвета дорог постепенно сменились на жёлто‑бежевые, жёлтый фон кварталов — на почти белый.
Движение в этом направлении продолжается, карта превращается в основу для новых информационных слоёв, вроде появившихся недавно фотометок рекомендованных мест. И картографическая основа должна дружить с новыми оверлеями, быть готовой к ним.
О другом важном направлении развития карт — увеличении детализации и переходе от абстракции к большему реализму — мы заявили ещё на YaC 2022. Тогда мы показали концепцию карт нового поколения, где они не нуждаются в переводе с картографического языка с пунктирами и условными обозначениями, а становятся естественным отображением реального мира.
От отображения плана местности мы постепенно переходим к отображению самой местности. Но, конечно, без переизбытка подробностей и перекоса в фотореализм (хотя среди пользователей Яндекс Карт есть и фанаты гибридного режима с его гипердетализацией).
С тех пор уже были внедрены первые элементы упрощённого реализма: высокодетализированные дороги для водителей, 3D‑модели достопримечательностей и деревья.
Нынешний редизайн — следующий шаг на этом долгом пути к заявленному ориентиру. В процессе работы мы придерживались следующих целей:
Добавить больше реалистичности, уменьшить абстрактность карт.
Добиться того, чтобы новые сущности (3D‑достопримечательности, деревья, детализированные дороги) хорошо считывались и при этом не выглядели чужеродно на картографической основе.
Придерживаться принципа непрерывности дизайна Карт через все масштабы. То есть карта не должна при изменении масштаба «щёлкать» и резко менять правила отображения объектов: все изменения по мере изменения масштаба должны происходить плавно, чтобы дизайн оставался цельным, без «раздвоения личности».
Сделать так, чтобы карта выдерживала высокую плотность информации, хорошо читалась и при этом не слишком «шумела». При увеличении детализации карты это становится особенно важным: без надлежащего контроля за соотношением «сигнал/шум» картой станет тяжело пользоваться из‑за переизбытка деталей, и тогда новые порции информации вместо добавления пользы только всё испортят. Как и во всём, тут важен баланс.
Что мы поменяли: детальное дорожное полотно для всех пользователей
Самые большие изменения, пожалуй, коснулись дорог. Уже полтора года как в Яндекс Картах появились детализированные автодороги, но всё это время они были доступны только в режиме автонавигации, так как в первую очередь мы отнесли дорожную разметку главным бенефициарам её отображения — водителям.
Но повышение детализации дорог не только помогает водителям выжить на Таганской площади или не промахнуться мимо нужного съезда с эстакады. Подробное дорожное полотно в целом повышает уровень соответствия карты реальности и облегчает узнавание городского пространства в изображении на экране. В условиях нестабильного определения геолокации устройством возможность быстро самостоятельно сопоставить карту с окружающим миром особенно важна для ориентирования.
То есть HD‑дороги помогают в ориентировании не только водителям, но ещё и пешеходам, велосипедистам, курьерам, самокатчикам, пассажирам общественного транспорта и всем остальным. Поэтому теперь подробное дорожное полотно стало доступно не только автомобилистам в режиме навигатора, но и всем пользователям Яндекс Карт из сорока крупнейших городов России и некоторых зарубежных крупных городов (Минска, Стамбула, Дубая), где детальные дороги уже оцифрованы. Уже сейчас это 70% пользователей Карт, и по мере продолжения оцифровки дорог в городах поменьше эта доля будет продолжать расти.
Детализация дорог может показаться избыточной для пешеходов, но это следствие поэтапного внедрения концепции Карт высокого разрешения: подробная разметка сейчас контрастирует с простыми формами большинства домов, детализация которых ещё не повышалась. В концепции уже была объявлена цель повышения детализации и у домов с остановками, так что со временем уровень детализации объектов разного вида на карте синхронизируется.
Подробные подземные переходы
Новые широкие дороги потребовали пересмотреть способ отображения подземных переходов. Теперь они «просвечивают» через дорожное полотно, а входы дополнительно помечаются пиктограммами с уточнением типа подъёма: пологий спуск, лестница, лестница с пандусом для колясок и велосипедов.
Обновлённые пробки
С новыми дорогами не очень хорошо дружил старый способ отображения пробок, ведь белую обводку вокруг стрелок легко спутать с дорожной разметкой. Мы аккуратно подобрали новый стиль пробок, который лучше работает с детализированными дорогами.
А ещё мы доработали оттенки разных классов пробок, чтобы они сильнее отличались друг от друга. Теперь с серыми дорогами удалось сделать пробки жёлтого цвета светлее и отвести дальше от зелёных участков пробок без риска сливания жёлтых участков пробок с дорогами. Это решение работает и при проблемах цветовосприятия.
Подписи дорог
Названия дорог теперь набраны прописными буквами, то есть капсом, чтобы они выделились в отдельный визуальный слой и не путались с остальными подписями. Этот ход позволил использовать чуть более крупные (прописные) буквы без увеличения длины подписей, а ещё благодаря «блочной» структуре капса мы эффективнее используем ограниченное по ширине пространство дорожного полотна. Типовые слова вроде «ул.» и «бульв.» остаются набраны строчными буквами, чтобы взгляду было легко отделить смысловую часть названия от второстепенной.
Серые и жёлтые дороги
Что же, пора перестать игнорировать слона в комнате: вместе с детальным дорожным полотном из режима навигатора в базовое состояние Карт переехал и цвет дорог. Они теперь серые на всех масштабах.
Хочется подробно обсудить это изменение, ведь жёлтые дороги всегда были основой стиля и узнаваемости Карт — это, казалось бы, и есть Яндекс Карты.
Немного о жёлтом цвете
Это правда, что в Яндекс Картах дороги до этого всегда были разных оттенков жёлтого. Мы уже разглядывали скрины выше, но можно взглянуть на них ещё раз.
Но это не исключительная фишка Яндекс Карт. Кажется, что практически все картографические сервисы на разных этапах эволюции дизайна задействовали или продолжают использовать дороги жёлтых оттенков.
Тянется это решение ещё из печатных атласов.
Причины такой любви картографов к жёлтому цвету понятны: этот цвет уникален тем, что он очень насыщенный (saturation) и одновременно очень светлый (lightness). Благодаря этому жёлтые объекты выделяются в отдельный очень заметный, практически светящийся визуальный слой, при этом не слишком тёмный и тяжёлый: чёрные надписи на нём остаются прекрасно различимыми. Согласно инструменту анализа читабельности текста APCA, контраст между чёрным и жёлтым цветами лишь едва уступает самой контрастной чёрно‑белой цветовой паре: 101,4 против 106.
За это свойство жёлтый цвет ценил мастер информационного дизайна Эдвард Тафти.
…для обрамления полей подходящий цвет должен быть светлым (приглушать эффект 1 + 1 = 3) и в то же время относительно интенсивным и насыщенным (чтобы давать сильный визуальный сигнал для активного окна). Жёлтый — единственный цвет, удовлетворяющий этим требованиям. Таким образом, двухмерная задача отображения решается двумя визуальными измерениями одного цвета…
За это свойство жёлтый цвет ценил классик навигационного дизайна Пол Мийксенаар, сделавший жёлтые лайтбоксы практически стандартом навигации в аэропортах.
И это та причина, почему жёлтый цвет — самый популярный оттенок маркеров‑выделителей: он выделяет текст, не подавляя его, слова остаются контрастными и различимыми.
Особенность жёлтого цвета можно увидеть и «в вакууме» — на трёхмерной визуализации цветовой модели OKLCH, учитывающей особенности человеческого восприятия цвета. В отличие от других цветовых моделей, вроде HSL, здесь пространство цветов не растянуто для равномерного заполнения куба или цилиндра, и поэтому на визуализации можно увидеть особенности разных оттенков, пики светлоты и насыщенности, в том числе и «выступ» жёлтого цвета — он дотягивается по оси светлоты практически до белого цвета.
Вернёмся к дорогам
Что же, причины использования жёлтого цвета для обозначения дорог на картах понятны, это не случайность и не ошибка. Но зачем же тогда от него отказываться?
Несмотря на все наши попытки как‑нибудь сохранить жёлтый цвет дорог, он не выживает в концепции реалистичных карт будущего, неизменной частью которых является подробное дорожное полотно с разметкой.
Какие‑то наши принципы, несовместимые с жёлтыми дорогами, я уже проговаривал выше, но давайте ещё раз перечислим причины отказа от жёлтых дорог:
Мы хотим большего соответствия карты реальности на уровне восприятия. На крупных масштабах с детализированными дорогами это означает дорожное полотно цвета асфальта.
На жёлтых дорогах не выживает белая дорожная разметка, а совсем инвертировать схему и рисовать разметку тёмными линиями — значит ещё дальше уходить от реальности в сторону абстракции, когда мы стремимся в обратном направлении.
Мы хотим бесшовные карты, которые играют по единым правилам и соблюдают важный принцип непрерывности дизайна. Дороги не должны резко менять цвет, как при смене масштаба, так и при переходе от детализированных участков к обычным.
Мы хотим чистые цвета на всех масштабах, поэтому не можем делать плавный переход от жёлтых дорог к серым по мере приближения карты: в промежутке окажется много грязно‑коричневых оттенков, а мы не можем пожертвовать одними масштабами в угоду другим.
Дорожная сеть нейтральных оттенков позволяет активнее использовать цветные акценты и задействовать магические свойства жёлтого цвета в других информационных слоях. Например, усилить отличия в оттенках пробок разных классов.
Как уже было сказано, жёлтые дороги выделяются за счёт насыщенности оттенка, а этот вид контраста не всегда работает при аномалиях цветовосприятия. Выделение за счёт контраста светлоты (дороги темнее или светлее, чем фон под ними) — более надёжный с точки зрения инклюзии способ выделения дорог, особенно когда они проходят рядом с зеленью. Это видно при симуляции нарушений цветовосприятия:
Да и без цветоаномалии серые дороги более заметны:
Конечно же, с отказом от жёлтых дорог Яндекс Карты что‑то потеряют, как минимум ламповость, но это тот размен, на который мы готовы пойти.
К слову, многие картографические сервисы, о которых мы говорили выше, также постепенно переходят на серые дороги. Кто‑то пока ещё только в режиме автомобильной навигации или на крупных масштабах, а кто‑то везде. Так что на многих скриншотах выше с жёлтыми дорогами на самом деле изображены старые версии карт, а более актуальные версии выглядят уже так:
Такие совпадения ожидаемы: картографические сервисы сталкиваются с похожими вызовами и зачастую приходят к похожим решениям. Немного расстраивает, что мы не успели выкатить свой редизайн первыми, но при этом такое единодушие даже немного успокаивает: не мы одни пришли к тем же выводам.
Цветовая палитра
Вероятно, вы уже заметили, что цвет изменился не только у дорог.
Последние годы на карте преобладали бледные пастельные оттенки, но на такой основе появившиеся ранее яркие 3D‑модели достопримечательностей и деревья выглядели немного чужеродно, да и серые дороги с ней не очень ладили. Чтобы подружить друг с другом элементы карты и сделать её более цельной, цвета объектов природы — в первую очередь гидрографии и растительности — стали насыщеннее. При этом внутри городских кварталов мы отошли от тёплой палитры и «земляных» оттенков и пришли к более нейтральной основе и чистым цветам.
На межгородских масштабах более явная демонстрация лесных массивов позволяет точнее передать характер местности. Если город утопает в лесу, то так он теперь выглядит и на карте.
Это также позволяет лучше увидеть границы городской застройки.
Пожалуй, на обзорных масштабах больше всего заметно, насколько ярче и «сочнее» стала карта.
Точки интереса
Редизайн Карт не ограничился перекрашиванием. Так что пора уделить внимание и другим изменениям.
Главные городские ориентиры — Super‑POI (расшифровывается как «Super points of interest») — вместо серых иконок теперь показываются кликабельными кругляшами, внутри которых помещён парадный рендер 3D‑модели этого объекта.
Такое двойное использование 3D‑модели позволяет экономить на отрисовке индивидуальных иконок и быстрее добавлять такие объекты на карту. Немного об этом рассказывал Миша Лукашин в статье о 3D‑моделях зданий.
Косметические изменения коснулись и обычных точек интереса, в них был пересмотрен баланс между иконкой и подписью. Раньше в этой паре доминировала иконка, а название было будто бы лишь мелкой припиской к ней. Теперь это сбалансированная конструкция равноценных объектов: подписи стали крупнее на 12,5%, а цветные кругляши иконок — чуть меньше. При этом у глифов внутри них по возможности сохранён размер для различимости и узнаваемости рубрики.
Изменён и приоритет расположения подписей. Размещение их справа от иконки делает конструкцию POI визуально проще, менее громоздкой и быстрее считываемой: глаз проделывает меньше усилий по поиску начала названия после обнаружения иконки.
Выравнивание текста по центру POI же добавляет некоторую торжественность, поэтому мы оставили его для подписывания самых солидных объектов на карте, тех же Super‑POI или памятников.
Ещё мы обратили внимание, как пользователи с плохим зрением инстинктивно зумят карту в надежде увеличить привычным жестом размер подписей. Раньше они получали в ответ только более детализированную информации о месте — более крупный масштаб с большим количеством объектов, — но с подписями того же кегля. Теперь же, помимо уже упомянутого увеличения стандартного размера подписей на 12,5%, они на самых крупных масштабах увеличиваются ещё сильнее — до 22% — без потерь в количестве отображаемых объектов.
Различимость надписей и борьба с шумом
Борьба за читабельность надписей не ограничилась увеличением размеров букв. Раньше многие надписи на карте набирались начертанием Regular или даже Light. Чтобы такие тонкие буквы оставались считываемыми на непредсказуемом фоне, их приходилось агрессивно «защищать» обводками. Из‑за этого суперконтрастная обводка пестрела и бросалась в глаза чуть ли не сильнее самой подписи, общее изображение из‑за обильного использования таких приёмов сильно «шумело».
Использование более толстых начертаний Medium или Bold увеличивает различимость подписи и уменьшает потребность в яркой заметной обводке.
Вообще это касается не только подписей. Ради повышения соотношения «сигнал/шум» мы постарались избавиться от тонких и ярких защитных обводок у иконок, дорог, шильдов трасс — везде где только смогли. По той же причине избегания лишней визуальной зашумлённости мы постарались чаще использовать сплошные линии вместо пунктирных, в первую очередь это коснулось пешеходных дорожек. В пользу этого решения сыграло и наше стремление уйти от абстрактности карты: пунктирная линия — это какое‑то условное обозначение из мира контурных карт и чертежей, сплошная линия — это уже реальная дорожка из физического мира.
Ночная тема
Изменения коснулись и ночной темы, хоть и не так сильно, ведь она уже обновлялась год назад.
В ночной версии белые глифы иконок сильно засвечивали карту, а с подробным и большим по площади дорожным полотном баланс яркостей нарушился бы ещё сильнее. Поэтому теперь у ночных иконок внутри кругляшей глифы чёрные — так карта немного подуспокоилась.
Режимы автонавигации и общественного транспорта
Условия пользования режимом автонавигатора отличаются от обычного пользования картами: закреплённый на приборной панели автомобиля смартфон находится почти в два раза дальше от глаз пользователя. Поэтому в режиме автонавигации Яндекс Карт все подписи и иконки последние годы были чуть крупнее. Однако, судя по обратной связи, и этого было недостаточно — пользователи всё равно жаловались на слишком маленькие подписи дорог. В новом дизайне они стали значительно крупнее.
В режиме общественного транспорта остановки теперь отображаются на более ранних масштабах в виде небольших, но заметных точек. Это позволяет оценить границы городских маршрутных сетей и с одного взгляда понять, какие улицы обслуживаются общественным транспортом.
На средних масштабах остановки общественного транспорта теперь также показываются в упрощённом виде точек‑маркеров. Опыт показал, что использование полноценных иконок в таких условиях превращает карты в хаотичный паттерн синих пятен, который забирает слишком много внимания у остальной карты.
Названия остановок общественного транспорта в этом режиме теперь отображаются на более ранних масштабах.
За последние годы мы проделали большую работу. Теперь в Картах есть детализированные дороги, насыщенная и контрастная цветовая палитра, улучшения в типографике и различимости надписей, переосмысленные способы отображения достопримечательностей — всё это должно улучшить опыт пользования Картами.
Но как мы проверяем, что действительно сделали лучше? Для этого мы пользуемся множеством способов:
Эксперименты. Мы «раскатываем» новый дизайн на устройства коллег и небольшие доли пользователей, а потом собираем обратную связь. Ну и, конечно, сами пользуемся.
Объективные показатели и метрики. Замеряем уровни светимости и контраста между объектами разных слоёв, размеры букв, количество отображаемых подписей, нажатий на интерактивные элементы, промахов мимо поворотов во время ведения по маршруту.
Субъективные опросы. Предлагаем участникам выбрать из двух картинок ту, которая нравится больше.
Объективные тесты. Просим респондентов найти объект на карте (и замеряем необходимое для этого время) или нарисовать на карте предполагаемый маршрут между двумя точками для оценки различимости элементов дорожной сети.
Дневниковые наблюдения и подробные интервью с пользователями.
Экспертность. На основе своего опыта и знаний мы отбираем варианты, которые нам нравятся, и мы можем объяснить, почему они нам нравятся.
Однако эти методы не гарантируют бесшовный редизайн. Новый дизайн непривычен и, как и любое большое изменение, требует времени на адаптацию к нему. Забавно, что для меня непривычной выглядит уже карта с жёлтыми дорогами. Работа над редизайном заняла больше полутора лет, и мы уже настолько насмотрелись на новый дизайн в макетах и на личных устройствах, что он воспринимается нормой, а жёлтый дизайн вызывает ностальгическое удивление: «Ого, какими, оказывается, были Карты». Так что я уже прошёл этот путь привыкания и зову вас с собой.
Надеюсь, мне удалось объяснить мотивацию принятых решений. В любом случае мы будем рады обратной связи, ведь наверняка мы что‑то недоглядели, и на горизонте уже виднеется этап хотфиксов и работы над ошибками.
