Как использовать переменные Figma для тестирования масштабирования шрифта

Сегодня разбираем материал исходного автора о теме «Тестирование масштабирования шрифта для доступности с помощью Figma Variables». Практический разбор с шагами и примерами, который можно быстро применить в своей работе.

Создание культуры цифровой доступности в компании требует настойчивости. Обсуждение доступности часто сводится к клише: это важно для людей и способствует инклюзии, и все специалисты должны быть вовлечены в работу по обеспечению доступности. Эти утверждения редко оспариваются.

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

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

Доступность и дизайн

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

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

Мы не контролируем всё

Другими словами, «наш дизайн» транслируется пользователями в зависимости от их потребностей. Это означает, что они могут адаптировать его так, чтобы взаимодействовать с приложением наиболее удобным для них образом. Если пользователи используют вспомогательные технологии и всё равно не могут получить доступ к приложению, это сигнализирует о проблемах, которые требуют решения.

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

Увеличение размера шрифта

Сколько раз мы слышали жалобы — от друзей, семьи или коллег — о том, что текст слишком мелкий? Текст передает большой объём информации: инструкции, подписи к кнопкам и интерактивным элементам. Если чтение становится затруднительным, общее впечатление значительно ухудшается.

Комфортное чтение текста — непременное требование. Оно может быть облегчено за счёт использования удобных размеров шрифтов. Однако вспомогательные технологии, например, увеличение текста, также могут улучшить читаемость. Согласно данным APPT, 26% пользователей мобильных устройств Android и iOS по умолчанию увеличивают размер шрифта. Это внушительное количество пользователей, что делает такую функциональность необходимой в проектировании.

Соответствие рекомендациям

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

«За исключением подписей и текстовых изображений, текст может быть увеличен без вспомогательных технологий до 200% без потери содержимого или функциональности.» — Критерий успеха 1.4.4, «Изменение размера текста» Руководства по доступности веб-контента (WCAG, Web Content Accessibility Guidelines), версия 2.2

Этот критерий успеха относится к уровню соответствия AA. Это означает, что функция увеличения шрифта является важной согласно законодательству.

Понять значение 200% в этом критере несложно. Если интерфейсы проектируются в масштабе 100%, то увеличение текста до 200% подразумевает его удвоение. Допускаются и другие коэффициенты увеличения: 120%, 140% и так далее. Важно, чтобы пользователи могли увеличивать текст до двойного размера с помощью поддерживающих технологий.

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

Стандартизированный доступ

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

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

iPhone

На устройствах iPhone функция увеличения размера шрифта интегрирована по умолчанию. Чтобы воспользоваться ею, достаточно открыть панель «Настройки», выбрать «Специальные возможности» и в группе параметров «Зрение» перейти к функции «Размер и отображение текста», после чего настроить желаемое увеличение размера шрифта на этом экране.

Google Chrome

Веб-браузеры также предлагают по умолчанию функцию увеличения размера шрифта. Например, в Google Chrome эта функция доступна в панели «Параметры», в разделе «Внешний вид». В списке параметров, отображаемых в этой группе, достаточно выбрать опцию «Размер шрифта». Как правило, будет выбрана опция «Средний — рекомендуется». Эту настройку можно изменить на любой другой доступный размер шрифта. Попробуйте, например, опцию «Очень крупный».

Тестирование в Figma

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

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

Примечание: для проведения этого теста необходимо хорошо разбираться в текстовых стилях Figma, автомакетах (Auto Layout) и переменных (Variables). Эти три инструмента являются фундаментальными для достижения успеха без лишних усилий. Если вы ещё не освоили эти функции, настоятельно рекомендуется начать именно с них. Не пропускайте шаги. Обучение — это постепенный процесс, которому необходимо следовать структурированно, шаг за шагом.

Чего мы хотим достичь?

Тест на увеличение размера шрифта в Figma, который мы хотим провести, прост. Нам нужен набор переменных, доступных для всех текстовых стилей, используемых в интерфейсе, позволяющих выбрать, хотим ли мы видеть интерфейс с текстом в масштабе 100%, 120%, 140%, 160%, 180% или 200%. По мере применения этого набора переменных — подобно применению переменных для светлого и тёмного режима — мы наблюдаем за трансформациями текста в интерфейсе и понимаем, в какой мере необходимы адаптации в каждой версии интерфейса с различными типографическими масштабами.

Как это реализовать?

Чтобы этот тест прошёл гладко, необходимо проделать подготовительную работу. Дизайн-системы могут значительно помочь оптимизировать большую часть этой начальной работы. Но не буду лукавить: чтобы тест работал хорошо, ваш дизайн должен иметь очень серьёзный уровень организации и систематизации.

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

1. Проектирование интерфейсов

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

2. Применение автомакетов ко всем элементам

В каждом создаваемом дизайне экрана необходимо убедиться, что автомакеты (Auto Layout) применены безупречно. Это очень важный шаг. Именно последовательное применение автомакетов ко всей структуре и элементам дизайна впоследствии гарантирует масштабируемость интерфейса, когда мы начнём тестировать увеличение размера шрифта. Нельзя недооценивать этот шаг. Если не уделить ему должного внимания, при тестировании типографического масштабирования в интерфейсах всё рассыпается, словно слон в посудной лавке.

3. Структурирование и применение текстовых стилей

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

4. Определение набора переменных для 100%

Этот тест требует достаточно высокой степени оптимизации. На практике это означает, что придётся использовать переменные Figma (Figma Variables) для всех характеристик текстовых стилей, имеющихся в интерфейсе. На этом этапе необходимо определить переменные Figma типа «число» как минимум для font-size и line-height текстовых стилей, применённых к рисунку. С помощью этого шага вы определяете значения масштаба увеличения размера шрифта для модели визуализации 100%, то есть исходной и эталонной версии рисунка. Важно структурировать эти переменные для каждого текстового стиля в рисунке, потому что впоследствии придётся учитывать масштаб увеличения каждого из этих текстовых элементов.

5. Применение переменных к текстовым стилям

Определив переменные для текстовых стилей масштаба 100%, необходимо теперь применить их к элементам уже созданных текстовых стилей. Не забудьте применить переменные как минимум к характеристикам font-size и line-height. Если у вас есть дополнительные типографические переменные — отлично. Но как минимум переменные должны быть применены именно к этим двум параметрам. Это действительно очень важно.

6. Определение переменных для увеличения размера текста

Теперь, когда переменные применены к текстовым стилям масштаба 100%, следующий шаг — создать переменные для других масштабов увеличения размера шрифта. На практике необходимо создать переменные, которые будут сообщать системе, до какого размера шрифта будет увеличиваться каждый текстовый стиль при масштабе увеличения 120%, 140%, 160% и так далее.

Чтобы определить значения font-size и line-height, достаточно умножить исходное значение на процент масштаба. Например, если текстовый стиль имеет font-size 16px, размер для масштаба 120% будет равен 16 × 1,2 = 19,2. Повторите этот расчёт для всех значений font-size и line-height для выбранных процентов масштаба увеличения размера шрифта.

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

7. Применение переменных к различным версиям масштаба

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

В качестве ориентира можно использовать проценты увеличения 120%, 140%, 160%, 180% и 200%. Если хотите упростить, можно сократить количество процентов масштабирования, с которыми вы работаете. Независимо от их количества, всегда следует работать как минимум с масштабами 100% и 200%.

8. Выявление областей для улучшения

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

При анализе различных экранов учитывайте несколько важных моментов:

• Тот факт, что текст выглядит огромным, не является проблемой и не «портит» дизайн. Помните, что это может означать разницу между тем, сможет ли кто-то использовать конкретный продукт или услугу, или нет.
• Проблема доступности возникает тогда, когда увеличение размера шрифта делает невозможным для пользователя чтение определённых текстов или активацию определённых элементов управления.
• Для текстовых элементов, которые уже очень крупные, увеличение размера шрифта может не иметь смысла. Это может сделать такие элементы непропорциональными, что не улучшит читаемость и займёт совершенно излишнее пространство.
• Если есть элементы, которые, кажется, выходят за пределы экрана, первый шаг — убедиться в правильности применения автомакета. Многие дизайнерские проблемы можно легко решить с помощью правильного использования Auto Layout.
• Независимо от масштаба увеличения размера шрифта, необходимо сохранять визуальную иерархию типографики, поскольку эта читаемость важна для восприятия различных уровней информации, присутствующих на экране.
• Этот тест может помочь выявить элементы, которым могут потребоваться корректировки непосредственно в коде для корректной работы при заданном масштабе увеличения. Не всё можно решить только средствами дизайна, и это совершенно нормально. Доступность — это по существу командная работа.

9. Внесение исправлений и корректировок в дизайн

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

10. Вернитесь к началу и повторите процесс

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

Роль дизайн-систем

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

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

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

Типичные ошибки при тестировании масштабирования шрифта

На практике я вижу несколько повторяющихся ошибок, которые сводят на нет всю пользу от теста. Первая — пропуск шага с автомакетами. Без корректно настроенного Auto Layout интерфейс при масштабировании просто разваливается, и вместо теста доступности вы получаете тест на прочность нервов. Вторая ошибка — тестирование только крайних значений: 100% и 200%. Промежуточные масштабы — 120%, 140%, 160% — часто выявляют проблемы, которые не видны на полюсах.

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

Пример файла

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

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

Ответы на эти вопросы могут быть для вас полезными

Почему критерий WCAG 1.4.4 требует именно 200%, а не другого значения?

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

Нужно ли добавлять в интерфейс собственную кнопку увеличения шрифта, чтобы соответствовать WCAG?

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

Что делать, если при масштабировании 200% элементы выходят за пределы экрана?

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

Можно ли проводить этот тест без дизайн-системы?

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

Как часто нужно проводить тест на масштабирование шрифта в рамках одного проекта?

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