Задумались ли вы о том, что некачественный визуальный дизайн может послужить одной из причин возникновения трудностей в получении положительного пользовательского опыта?
Всемирная организация здравоохранения сообщает, что около 4% населения земли являются слабовидящими, еще 4% не обладают 100%-ым зрением, а 0,6% вовсе не видят. Таким образом, порядка 500 млн. человек не смогут получить информацию о предложении, размещенном на интернет-ресурсе, ввиду его недостаточной доступности для них.
При разработке сайта всегда следует помнить о том, что он будет доступен для максимально широкой аудитории.
Визуальный интерфейс – это та область, которой в первую очередь следует уделить внимание при решении вопроса доступности сайта. Всего лишь некоторые правки дизайна способны изменить сайт таким образом, чтобы не отталкивать особые категории пользователей.
Говоря о веб-доступности, мы имеем в виду не только 8,6% людей с нарушенными зрительными функциями, но и людей без особенностей зрения. Дело в том, что многие сайты и приложения весьма сложны, поэтому, адаптируя их под пользователей с особым зрением, мы зачастую делаем их более удобными и для обычных людей.
На что же можно повлиять, чтобы создать более дружественный интерфейс для особых групп населения?
Во-первых, мы можем использовать цвет. Ведь он в большей степени влияет на то, как выглядит интерфейс, и, кроме этого, способствует в кластеризации контента, установлении структуры и информировании о предполагаемом пользовательском поведении и алгоритмах действий на сайте. Цвет является сильнейшим дизайнерским инструментом, однако следует помнить, что для эффективного владения им важно знать его возможности и ограничения.
Это означает, что следует:
- учитывать дальтонизм в процессе назначения цветовых схем;
- не отдавать цвету ведущее значение при обозначении чего-либо важного и пояснять цветовую информацию пиктограммами, а лучше всего текстом;
- проверять, что ссылки из текста не сливаются с окружающим их контентом.
Во-вторых, имея в виду то, что наиболее часто встречающейся проблемой, с которой встречаются люди с особенным зрением, является определение оттенков цвета, следует все-таки отдавать ведущую роль контрасту яркости, а не цвету. Этот прием поможет эффективно отличать элементы друг от друга.
Не следует использовать исключительно цвет сообщения пользователю той информации, которую нужно донести. Цвет должен являться не более, чем подсказкой.
Еще следует учитывать, что обширная цветовая гамма, повышает вероятность того, что пользователь спутает оттенки, поэтому рекомендуют уменьшать количество используемых цветов. К примеру, палитра из 15 цветов создаст более серьезные ограничения для людей с дальтонизмом в сравнении с палитрой из 5 цветов.
Для выделения контраста также можно прибегать к использованию текстур и узоров. Так, дальтоникам может быть трудно читать графики и диаграммы, однако контрастные узоры для заливки и текстовые пояснения помогут им справиться с этой задачей.
Для кнопок CTA не следует использовать такие цветовые сочетания, которые люди с дальтонизмом могут не различать (красный — зеленый, синий — желтый). Напомним, что данные кнопки также должны содержать четкий, видимый текст или иконки, поясняя цель их существования.
Разделение цвета и дизайна тоже полезно для проверки функциональности последнего. Когда функциональность целиком определяется цветом, возникают проблемы с логикой. К примеру, минималистичные интерфейсы будут доступными не всем, если исключить у них визуальные функции, однако при этом абсолютно минималистичный дизайн способен точно сообщить идею благодаря применению форм, цвета и контраста, чтобы акцентировать внимание на значимых элементах.
Если отказаться от модных и непрактичных дизайнов, а создать функциональный UI, то можно получить более эффективный вариант интерфейса.
Не следует полагаться полностью на цветность сообщения, являющегося индикатором действия.
Ориентируясь в том числе и на людей с нарушениями зрительной функции следует сопровождать размещаемые изображения тегами alt, поясняющими содержание картинки, а коме этого, подписями и ярлыками, восполняющими недостающий контекст.
Для видео- и аудиоинформации следует использовать HTML5-видео- и аудиотеги, которые дают возможность браузеру идентифицировать, что за контент размещен на странице.
В процессе заполнения форм у людей, пользующихся экранными дикторами, могут возникнуть трудности, если не обеспечить для таких пользователей возможность альтернативного получения требующейся для заполнения формы информации.
В HTML5 существует возможность определять тип данных для поля. Зная требуемые типы данных, браузер предоставит оптимальную возможность ввода для этого типа данных (клавиатуру с цифрами для набора чисел или календарь для указания даты).
Доступность контента важна не только для пользователей с нарушениями зрения. От правильной проработки подачи информации выигрывают абсолютно все: и владельцы бизнеса, и клиенты.
Мы разработали для NIGMA модули, которые, проверяя страницу по разработанному на основе машинного обучения чек-листу, помогут вам:
- Анализировать цветовые контрасты; и в случае их отсутствия предоставят рекомендации по их внедрению;
- Проверить, во всех ли общепринятых случаях цвета и изображения сопровождаются текстовыми подсказками;
- Проанализировать доступность иконок и дадут рекомендации для правки при необходимости (например, иконки с заливкой воспринимаются лучше иконок с обводкой; а иконки с обводкой-кругом распознаются хуже, чем силуэтные изображения);
- Проверить наличие достаточной площади пустого пространства вокруг области, предназначенной для клика, дадут рекомендации его по увеличению/уменьшению в случае необходимости;
- Проверить понятность и точность формулировок (например, «Посмотреть портфорлио» будет понятнее, чем «Фотографии»);
- Проверить, что фокус внимания для текстовых ссылок акцентирован благодаря точным идентификаторам (к примеру, подчеркивания);
- Проверить, что JavaScript- и CSS-элементы не препятствуют изменению яркости, которое часто используют пользователи с целью получения более резкого контраста;
- Проверить еще 50+ параметров, на основании которых вы сможете выполнить улучшение пользовательских характеристик вашего ресурса.