Обновлённый шрифт Яндекс Карт: как мы изменением формы букв ускорили считывание подписей

Привет! Меня зовут Сергей Николаев, я дизайнер картографии в Яндекс Картах, и я хочу рассказать, как мы изменением формы букв... а, в заголовке уже всё написано, извините.

В конце июля у подписей в Яндекс Картах поменялся шрифт. Мы подправили форму букв, чтобы подписи на карте считывались лучше, но шрифт ощущался тем же самым. Так что неудивительно, что изменение получилось малозаметным. Даже на расположенных рядом скриншотах «было — стало» разницу обнаружить трудно.

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

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

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

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

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

В подложке Карт используется тот же шрифт, что и в интерфейсе, — Yandex Sans (сокращённо YS). Он применяется во всех сервисах Яндекса, почитать о нём подробнее можно в статье и интервью, которые анонсировали выпуск YS. У шрифта есть стили на все случаи жизни: от YS Display для афиш и заголовков до YS Text для небольших подписей. Мы задумались: «А как бы выглядела его версия для совсем маленьких подписей, свойственных карте?»

Для ответа на этот вопрос нужно понять, что влияет на различимость букв.

На восприятие букв влияют два процесса: считывание и распознавание.

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

Как только знак проецируется на сетчатку, мозг начинает распознавать букву. Тут важно, чтобы проекция была похожа на те образцы букв, на которых нейросеть в голове училась их распознавать. Например, чем больше считанный рисунок буквы «п» будет похож на увиденные в течение жизни миллиарды образцов буквы «п», тем проще мозгу будет её узнать. И наоборот, похожесть рисунка с сетчатки на образцы других букв (например, «л») затруднит считывание, увеличит неопределённость и вероятность ошибки.

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

Во-первых, шрифту необходимо обладать открытой апертурой, буквы не должны стремиться «замкнуться». Например, если кончики буквы «с» слишком приблизятся друг к другу, глазу будет сложнее разглядеть узкий зазор между ними (прямо как в тесте на зрение!), и букву будет легко перепутать с «о».

Другой немаловажный фактор — постоянная толщина штрихов (на профессиональном языке — минимальный контраст). Если этим пренебречь, глаз просто не сможет считать узкие места буквы, и визуально она развалится на несвязные части. Минимальный контраст между штрихами помогает не спутать, например, «н» и «и».

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

Подобное решение нарушит и другое важное требование к шрифту — визуальное отличие похожих букв. Из-за растяжения вертикальные линии начинают доминировать в рисунке букв и превращают слово в «частокол». Лучше, наоборот, подчёркивать их уникальность: увеличивать хвостик у «щ» (чтобы усилить отличие от «ш») и, опять же, развести кончики у «с» (чтобы усилить отличие от «о»).

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

Yandex Sans удовлетворяет всем перечисленным критериям хорошо различимого шрифта. Но есть ещё один важный параметр, на который хочется обратить внимание, — высота строчных букв. Рассмотрим его на примере:

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

Всё дело в высоте строчных (маленьких) букв относительно прописных (заглавных). У шрифта справа этот показатель составляет 75,6%, а у левого — всего 63,3%. Чем выше строчные буквы, тем крупнее внутри них зазоры между штрихами (например, сравните пространство внутри буквы «е»). Это заметно улучшает читаемость и визуально увеличивает подпись, не меняя её габариты.

У Yandex Sans высота строчных букв — 72,4%. Это обычное значение, примерно столько же у привычных нам шрифтов Arial, Helvetica, PT Sans, Myriad Pro. Но если оценивать YS как шрифт для карт и сравнивать со шрифтами из других картографических сервисов, то ситуация уже не очень:

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

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

Мы решили не отказываться от своего шрифта, а модифицировать его. Для начала посчитали, как увеличение высоты строчных букв поднимет YS в приведённом выше рейтинге.

Но нашей задачей было не победить в выдуманном нами же хит-параде, а сделать Карты удобнее. Поэтому мы собрали экспериментальную версию Yandex Sans с увеличенными строчными буквами и пошли проверять, как изменение в шрифте повлияет на пользовательский опыт.

Мы сделали два идентичных макета карты с разными шрифтами и попросили пользователей Яндекс Заданий найти на них различные объекты. Засекая затрачиваемое на это время, мы получали эффективность обновлённого шрифта.

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

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

Внутри исследования провели почти сотню тестирований. В итоге на основе 4253 ответов мы выяснили, что увеличение высоты строчных букв на 7% ускоряет поиск надписей на 4,8% (медиана). Так как чтение подписей на карте — это базовое взаимодействие для всех пользователей Яндекс Карт, суммарная экономия времени за год исчисляется, вероятно, человеко-месяцами.

Подтвердив гипотезу о пользе повышения высоты строчных букв, мы обратились за помощью к профессиональным дизайнерам шрифта. Они сделали для нас YS Maps — шрифт для Яндекс Карт с четырьмя используемыми на картах начертаниями.

Шрифт вариативный, в нём регулируется как увеличение высоты строчных букв, так и длина их выносных элементов (например, хвостики у «у», «б» и «р»). Последнее необходимо, чтобы у подписей в несколько строк выносные элементы увеличенных строчных букв не цеплялись друг за друга.

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

Обновлённый шрифт поддерживает увеличение высоты строчных букв до 12% относительно классического YS. Пока мы остановились на 8%. Кажется, что дальнейшее увеличение высоты строчных усиливает уже упомянутый «эффект частокола» вертикальных линий и делает буквы менее узнаваемыми.

Получилось вот такое «было — стало»:

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

С конца июля обновлённый шрифт YS Maps используется для всех подписей объектов в Яндекс Картах. Надеюсь, он вам понравился, а даже если вы не заметили разницу, теперь вы находите подписи на карте чуть быстрее. Для этого всё и было задумано.