Подписи к изображениям обычно остаются незаметными до тех пор, пока они не понадобятся. Они играют важную роль, помогая пользователям быстрее просматривать страницу и получать основную информацию с первого взгляда. Также они повышают доступность продукта, позволяя пользователям программ экранного доступа воспринимать визуальный контент. При правильном оформлении подписи могут дополнительно отражать визуальный стиль бренда.
Назначение подписей
В типографической иерархии подписи имеют наименьший размер шрифта на странице и обычно меньше основного текста. Они представляют собой краткие пояснения к визуальному контенту. Подписи могут также включать ссылки на автора или правообладателя фотографий, изображений, иллюстраций, графиков и т.п.
Подписи работают как якорные точки, помогая пользователям сканировать контент и быстро выбирать наиболее актуальную информацию. Кроме того, подписи дают дополнительный контекст и помогают пользователям с нарушениями зрения или когнитивными ограничениями.
Совет! Предоставляйте подписи для всех изображений, кроме декоративных, которые используются исключительно для визуального оформления и не несут смысловой нагрузки.
Выбор шрифтов для подписей
При выборе шрифта для подписей учитывайте, что он должен оставаться читаемым при очень маленьких размерах (от 6 до 9 пунктов).
Обратите внимание на следующие критерии:
- Гротескные шрифты (sans serif) лучше читаются при малых размерах, чем антиквы (serif).
- Шрифт должен иметь тонкие начертания, которые лучше воспринимаются при маленьком размере.
- Шрифт должен иметь большую высоту строчных букв (x-height).
- Шрифт должен иметь открытые внутренние просветы (counters).
Шрифт должен иметь свободный межбуквенный интервал.
Стилизация подписей
Обычно подписи выглядят минималистично: чёрный или серый текст, расположенный сбоку или под изображением. Для визуального разнообразия дизайнеры используют курсив и экспериментируют с цветами, применяя светлые оттенки на тёмных фонах. Иногда подписи появляются при наведении курсора на изображение.
Решив придать подписям больше индивидуальности, учитывайте доступность. Подписи должны оставаться читаемыми и соответствовать рекомендациям WCAG по цветовому контрасту. Вместо курсива, который затрудняет восприятие людям с дислексией, используйте жирное начертание для акцентирования и контраста.
Размер подписей
Поскольку подписи — второстепенный текст, они должны быть менее заметными. Как правило, размер подписей примерно на 2 пункта меньше основного текста, ясно подчёркивая их меньшую значимость. Например, если основной текст имеет размер 16px, подпись может быть 14px. Если сделать их больше, подписи будет сложнее отличить от обычного текста.
Расположение подписей
Главная задача подписи — сопровождать и кратко дополнять визуальный контент. Именно поэтому подписи должны располагаться под изображениями, фотографиями или иллюстрациями. Такое расположение позволяет подписям не отвлекать пользователей без нарушений зрения или когнитивных особенностей от восприятия основного визуального материала.
Доступность подписей
Подписи и альтернативный текст (alt text) служат одной цели: они помогают пользователям, которым сложно воспринимать визуальный контент, а также людям, использующим программы экранного доступа. Не повторяйте в подписи ту информацию, которая уже представлена в alt-тексте или очевидна из изображения, чтобы пользователям не приходилось слышать одно и то же дважды.
Сложные изображения, содержащие большое количество информации (графики, диаграммы, инфографики), особенно нуждаются в подписях и развёрнутых описаниях, которые поясняют ключевые моменты и заголовки.
Совет! Если подписи очень подробные, альтернативный текст можно сделать короче.
Регистр для подписей
Любой текст длиной более 2-3 слов, набранный прописными буквами, воспринимается пользователями как крик. Такой текст сложно читать, и пользователи быстро теряют интерес. Почему это происходит?
Существует несколько теорий, объясняющих это явление. Согласно одной из них, люди читают не буквы по отдельности, а целые слова, узнавая их по характерным контурам восходящих и нисходящих элементов букв. В тексте, набранном прописными буквами, эти контуры отсутствуют, что затрудняет чтение длинных фраз.
Независимо от выбранной вами теории, текст, набранный прописными буквами, выглядит непривычно и значительно сложнее воспринимается пользователями. Кроме того, программы экранного доступа зачастую читают такой текст по буквам, создавая неприятный пользовательский опыт. Использование прописных букв допустимо для заголовков, подзаголовков, меток и коротких фраз, однако для подписей это не лучший выбор, поскольку такие подписи становятся трудночитаемыми и требуют значительных усилий для восприятия.
Предложный регистр, напротив, выглядит естественно и привычно для большинства людей, так как именно в этом формате мы привыкли читать.
Совет! Заглавный регистр (title case) подходит только для заголовков, подзаголовков и других коротких текстовых фрагментов. Для подписей его использование нецелесообразно, так как выглядит непоследовательно.