Дизайн для тех, кто плохо видит

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

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

Зачем упрощать визуальное

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

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

Если хочется, чтобы дизайн выглядел простым и был читабельным для всех, выбирай лаконичность:

• — минимальный набор цветов, не больше двух-трех (и между ними должен быть ощутимый контраст)
• — простую верстку, без лишних блоков и колонок
• — минимум шрифтов, двух вполне хватит.
•  

Посмотреть курс

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

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

Близорукость и дальнозоркость

Согласно отчету ВОЗ за 2021 год, от дальнозоркости или близорукости страдают как минимум 2,2 млрд людей в мире, или более 20% населения. Люди с такими нарушениями видят нечетко (вдали, вблизи или в целом), но далеко не все из них носят очки постоянно. Лучше держать в голове, что в какой-то момент часть аудитории увидит твой дизайн размыто. 

Чтобы им все-таки было удобно считывать дизайн, следуй нескольким правилам:

Выбирай шрифты без засечек. Антиквенные шрифты хороши для восприятия больших текстов — но это касается людей с хорошим зрением. Людям с низким зрением засечки создают лишний «шум» и осложняют чтение. То же касается и декоративных шрифтов с нестандартной формой букв. Лучше выбирать простые гротески: Roboto, Open Sans, Gilroy и San Francisco — их часто используют в современных интерфейсах.

Печатай крупно. Считается, что минимальный размер основного текста на сайте — 16 pt. На многих ресурсах эту цифру увеличивают до 22–24 pt — как в дайджесте банка «ВТБ Онлайн». Тем, кто видит плохо, такой текст читать комфортно, при этом людям с нормальным зрением он не кажется слишком крупным.

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

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

В типографике уделяй внимание тональному контрасту: показывай темный текст на светлом фоне, а светлый — на темном.

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

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

Нарушение периферического зрения

Все, что человек видит перед собой, — это поле зрения. Если нарушений зрения нет, это 

поле — круглое, в центре мы видим предметы четко, а на периферии — размыто. 

Если у человека есть, например, воспаление зрительного нерва или отслоение сетчатки, на зрительном круге появляются «слепые» участки по сторонам или в центре. Соответственно, поле зрения сужается: человек не может одним взглядом охватить все, что перед ним.

Люди с такими особенностями могут видеть, например, правую половину абзаца текста, а левую — нет. Это нарушение встречается реже, чем дальнозоркость или близорукость, но тоже сильно осложняет визуальное восприятие.

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

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

Дальтонизм

От дальтонизма (цветовой слепоты) разной степени страдают 8% мужчин и около 1% женщин. Обычно дальтоники не могут различать зеленый и красный цвета, но встречаются и более тяжелые случаи — когда зрение полностью черно-белое. 

Чтобы людям с такой особенностью зрения дизайн не казался одноцветным пятном, придерживайся таких принципов:

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

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

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

В интерфейсах цветные элементы (призывы к действию на кнопках или названия разделов меню) почти всегда подписывают. Если хочешь что-то объяснить людям через картинки, дублируй суть нарратива текстом. Хорошие примеры того, как это сделать, есть в журнале «Инфографика».

Дислексия

При дислексии возникают проблемы с точностью и скоростью распознавания слов — в частности, при чтении. По данным Йельского центра, это нарушение есть у 20% людей в мире.

Чтобы людям с дислексией было проще воспринимать информацию в дизайне: 

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

По простым пиктограммам — например, «телефонная трубка» или «сердечко» — легко угадать функцию кнопки, даже не вчитываясь. А более детализированные иллюстрации хоть и не заменяют слова, но задают контекст, и это тоже помогает восприятию. 

Вот как с этим работает сервис медитации Headspace в своем приложении: тут «говорят» и иконки, и иллюстрации:

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

Используй лаконичные надписи. Чем многословнее фразы, тем сложнее людям с дислексией их прочитать. Пусть слова в твоем дизайне будут короткими и простыми, а предложения состоят не из 10–15, а из 6–8 слов.

Как делать дизайн доступнее

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

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

• #1 Делать тона контрастными. Легче рассмотреть черное на белом, чем темно-серое на светло-сером.
• #2 Группировать контент. Информацию проще воспринимать небольшими объемами.
• #3 Быть минималистичным. Чем больше воздуха между элементами, тем проще их различить (но тут важно не увлекаться — элементы все еще должны восприниматься как группа).
• #4 Миксовать картинки и текст. Дислексикам проще воспринимать разноцветные иконки, а дальтоникам нужны подписи. Можно использовать и то и другое.
•