4 правила доступного интерфейса, которые спасут пользователей от мучений

Нет повести печальнее на свете, чем повесть о юзере, который не понимает куда кликать, где и что заполнять и почему кнопки не нажимаются. Избежать такой ситуации помогут 4 правила доступного интерфейса. Разобраться в них нам помогала UX/UI дизайнер ЦЕХа Тати Набокова.

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

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

Существует три критерия оценки доступности: А, АА и ААА. Рассмотрим каждый из них поподробнее.

А — это минимальный порог, при котором даже у людей без нарушений могут возникать проблемы с использованием продукта.

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

ААА — big boss, этот критерий означает, что интерфейс доступен для всех людей, независимо от их когнитивных, физических и технических возможностей.

Основные критерии ААА:

Теперь посмотрим на 4 правила доступного дизайна. За доступность отвечают разработчики и UX/UI-дизайнеры, круто, если уже на старте работы они направляют фокус на людей с ограниченными возможностями. Это помогает сделать удобный и функциональный интерфейс, который не придется пересобирать на финальной стадии согласования. Вот несколько советов, на что обратить внимание перед началом работы над интерфейсом.

1. Контрастность

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

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

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

При дизайне интерфейса лучше прогонять цвета через призму дальтонизма. Для этого можно использовать специальные сервисы. Например, расширение для Chrome Web Disability Simulator или Funkify. Ниже сравнили интерфейсы двух интернет-магазинов.

2. Размер элементов

Если вы когда-нибудь не попадали по кнопке на сайте с первого раза, дело скорее всего не только в вас. Размеры элементов должны быть заметными, особенно в мобильной версии. Кнопка — это объект, с помощью которого пользователь совершает целевое действие. Чем она будет больше и удобнее, тем быстрее юзер ее найдет.

3. Понятный текст

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

4. Четкие подсказки-состояния

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

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

1. Плагины для Figma

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

Первый — HCL Easy. C его помощью можно создавать цветовые палитры, проверять контрастность между цветами и адаптировать их для людей с дальтонизмом.

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

2. Бесплатное расширение для Google Chrome

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

Мы желаем вам больших кнопок, контрастных цветов и лояльных пользователей. А примеры интерфейсов, которые создавали команды ЦЕХа, смотрите на нашем Behance. В комментариях делитесь, все ли правила доступности мы упомянули, а может рассказать о каких-то подробнее?