Доступный интерфейс: Интерфейс доступный каждому: практические рекомендации / Хабр

Разработка удобного интерфейса для пользователей с ограниченными возможностями — Офтоп на vc.ru

Советы от дизайнера компании OpenDNS.

3938
просмотров

Что такое доступность и почему она так важна

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

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

Мы изучили статистику и обнаружили, что 56,7 млн американцев, 18,7% населения страны, живут с одной из форм инвалидности. 38,3 миллиона американцев (12,6% населения) имеют тяжёлую степень инвалидности. Это данные 2012 года, только для одной страны. Если подняться до мирового масштаба, показатели достигнут тревожных значений, и это уже не будет проблемой «меньшинства пользовательской базы».

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

Срезанный пандус

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

«Нажмите, чтобы открыть дверь»

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

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

Хотя закон обязателен к исполнению лишь для некоторых организаций на территории США, многие американские компании стараются помочь этой категории населения в использовании своих продуктов. При этом они опираются на официальное Руководство по обеспечению доступности веб-контента
(WCAG).

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

Современные ассистивные технологии

Прежде чем вникать в закономерности, преимущества и недостатки, посмотрим, как работают в веб-пространстве ассистивные технологии (технологии, которые обеспечивают жизнь и социальную адаптацию людей с ограниченными возможностями — vc.ru). Например, macOS вышла с функцией озвучивания Voice Over, а пользователи Windows могут использовать специальную программу для слабовидящих NVDA (NonVisual Desktop Access).

​Настоятельно рекомендуется тестировать сайт: уменьшить яркость экрана и внедрить ассистивные технологии вроде Voice Over или NVDA. Это поможет дизайнерам понять, что чувствуют пользователи с ограниченными возможностями, когда используют компьютер.

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

Атрибуты значения, роли и имени отображаются в нижней части экрана

Рекомендации по разработке ассистивного интерфейса

1. Цветовой контраст

Первый шаг к ассистивному пользовательскому интерфейсу — это создание правильного цветового контраста.

Рекомендуемый контраст для веб-приложений

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

Инструменты для оценки цветового контраста

Если вы только начинаете свой проект и хотите проверить, какие цвета обеспечивают доступность интерфейса, вам пригодится инструмент Color Safe.

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

Как быстро определить области с недостаточным контрастом

Проверка контраста даже с помощью WebAim — довольно сложная задача. Если же нужно быстро представить возможные проблемы в дизайне, в браузере Chrome есть удобный инструмент Color Contrast Analyzer, разработанный специалистами из Университета Северной Каролины.

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

Color Contrast Analyzer позволяет быстро определить проблемные области. Участки экрана с хорошим контрастом выделены белыми линиями, а области с плохим контрастом обозначены бледными, малозаметными границами.

2. Фокус

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

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

Фокусное подчёркивание должно использоваться только для интерактивных компонентов внутри страницы (элементы формы, кнопки и так далее).​

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

Фокусный контраст

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


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

Внеэкранный контент

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


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

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

Всплывающие окна

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

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

Hover States и фокус


Слева:
после нескольких кликов фокус смещается за пределы всплывающего окна, и пользователь перестаёт контролировать свои действия. Справа: фокус устанавливается на одну из двух доступных опций до тех пор, пока пользователь не закроет это всплывающее окно

Hover States (состояния наведения) и фокус выполняют разные функции. Многие цифровые продукты скрывают под Hover States какие-то действия. В качестве примера можно привести Facebook.

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

Плохой пример — это карточки ProductHunt. Они показывают множественные действия, которые становятся видимыми только в состоянии наведения, а оно недоступно для клавиатурных пользователей.

В ProductHunt выделенные рамкой действия, напротив, показываются только при наведении. Эти действия не доступны для фокуса, поэтому их не могут осуществлять пользователи, которые работают на клавиатуре

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

Сценарии смены фокуса

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

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

3. Целевые действия

Карточки

Карточки очень популярны в современных цифровых продуктах. Material Design содержит множество руководств и шаблонов для их изготовления. Важно, чтобы эти карточки соответствовали принципу доступности, потому что они могут быстро усложняться при различных манипуляциях.

Карточки, которые используются на странице ProductHunt, — пример плохой доступности. Только представьте, как вы будете просматривать их без использования мыши.

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

Отличный пример доступных карточек — это Google Inbox.

  • Когда вы на них переходите, им присваивается особое фокусное состояние.
  • Действие наведения заканчивается в состоянии фокуса.
  • Фокусируются только целевые действия, а не все элементы на карточке.​

Целевые области

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


Слева:
слишком узкая (и поэтому труднокликабельная) целевая область. Справа: более доступная для нажатия область

4. Быстрый доступ к контенту

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

Пользователю придётся пройти множество ссылок, пока он доберётся до нужного контента

Сайт Airbnb — пример того, как можно обеспечить быстрый доступ к продукту.

5. Обобщение информации

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

  • Бронирование авиарейса.
  • Поиск с фильтрацией по каким-то опциям.
  • Добавление элементов на карточку и их проверка.

Важно дать пользователю краткую сжатую информацию перед тем или после того, как он перейдёт к целевому действию.​

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

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

Пользователю доступно быстрое перечисление выбранных им значений на сложных полях ввода

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

6. Тумблер доступности

У большинства продуктов есть небольшая, но всё же очень важная аудитория, которой требуется более доступный интерфейс. Тумблер доступности, который переключается между режимом по умолчанию и более ассистивным режимом, обеспечит им удобное взаимодействие с сайтом и не затруднит работу для большинства пользователей.

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

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

Доступность интерфейсов. Доступный сайт — это сайт, доступ к… | by Дмитрий Давришов

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

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

Проблемы доступности можно разделить на четыре широкие категории:

· Зрительный аппарат

· Слуховой аппарат

· Опорно-двигательная система

· Когнитивность

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

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

Зрение

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

Слух

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

Опорно-двигательная система

Нарушения моторики и ловкости могут повлиять на способность пользователя использовать мышь, сенсорный экран или другое устройство манипуляции. Некоторые пользователи могут полагаться на альтернативные устройства ввода для доступа к контенту. Эти устройства могут включать в себя клавиатуру, программное обеспечение для отслеживания головы или глаз, переключающие устройства, «sip-and-puff» девайсы или голосовой доступ.

Когнитивность

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

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

Теперь, когда у вас есть общее представление о доступности, пришло время углубиться в более конкретные детали.

В ближайшее время здесь появятся статьи.

Разработка интерфейсов для обеспечения доступности и интеграции

Время чтения: 16 минут

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

Майк Майлз, заместитель директора PHP in Genuine

Ян Макрей — мужчина с нарушениями зрения. Его история появилась в номере The Guardian в 2015 году. Ян использует программное обеспечение VoiceOver для навигации по сети так, как это делает большинство людей. Голосовой помощник в основном «читает» интерфейсы и позволяет ему незаметно взаимодействовать с веб-сайтом.

Чтобы понять, как Иэн видит Интернет, он рекомендует включить программу VoiceOver на вашем Mac (или любую программу чтения с экрана, доступную для вашей системы), а затем попытаться перейти на популярный сайт. «Не обманывай и смотри», — увещевает он. «Я использую Amazon каждый день, чтобы найти Kindle Daily Deals. Для этого мне нужно пройти через все заголовки, прежде чем я доберусь до того, что хочу, а затем я должен пройти через каждый элемент в этом заголовке, чтобы добраться до списка книг».

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

Универсальный дизайн — это концепция, предложенная американским архитектором Рональдом Л. Мейсом. Его 7 принципов универсального дизайна описывают, как строить объекты для «всех возрастов и способностей». Он считал, что легкий доступ к зданиям и урбанистическая свобода передвижения сделают жизнь проще для всех людей, а не только для людей с ограниченными возможностями. Селвин Голдсмит преобразовал идею Мейса в своей книге « Дизайн для инвалидов » и первым предложил эту концепцию, переименованную в «свободный дизайн». Затем эти термины стали известны как инклюзивный и доступный дизайн. Итак, в чем разница между ними?

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

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

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

Неверные представления о доступности и инклюзивности веб-сайтов

Миф №1: Инклюзивный дизайн ориентирован на группы, подвергшиеся дискриминации

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

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

Кроме того, инвалидность не всегда постоянна. Они могут быть временными или ситуативными. Инструментарий Microsoft Inclusive Design признает, что одни и те же решения могут помочь людям в разных обстоятельствах. Слепые люди и водители автомобилей могут извлечь выгоду из вспомогательных технологий. Скрытые титры могут быть одинаково полезны для людей с нарушениями слуха и тех, кто испытывает трудности с пониманием иностранного языка.

Другими словами, инклюзивный дизайн не делает ваш продукт доступным исключительно для людей с различными — явными и/или невидимыми — нарушениями. Кроме того, он уменьшает и прогнозирует все неудобства, которые могут возникнуть у большого и разнообразного сообщества пользователей.

Миф №2: инклюзивный дизайн стоит дорого и не стоит того

Говоря простым языком, инклюзивный и доступный дизайн — это дизайн, созданный в соответствии с рекомендациями, изложенными в документах консорциума World Wide Web Consortium (W3C) для создания доступных интерфейсов. В идеале рекомендуется внедрять эти стандарты под наблюдением экспертов по доступности и проверять их на основе отзывов аудитории. Время, затраченное на соблюдение рекомендаций W3C, и стоимость предлагаемых экспертных советов являются основными аргументами против внедрения инклюзивного дизайна. Но команды дизайнеров и разработчиков могут разделить ответственность и повысить уровень в создании доступного и инклюзивного продукта. В рамках эффективного сотрудничества, координируемого компетентным менеджером, эти усилия будут более полезными и эффективными и менее затратными, чем наем эксперта. Вся команда будет вовлечена в определенный способ создания продукта. Вскоре эта практика станет привычкой — и полезной.

Миф №3: инклюзивный дизайн объединяет пользовательский опыт

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

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

Рекомендации по обеспечению доступности веб-контента (WCAG) 2.0

В то время как правила соответствия ADA помогают сделать физическую среду более удобной для людей с ограниченными возможностями, виртуальные интерфейсы имеют свои собственные принципы, которым необходимо следовать. Рекомендации по доступности веб-контента или WCAG 2.0 — это общие рекомендации, разработанные W3C для того, чтобы сделать Интернет более доступным. Первая версия этих принципов, введенная в 1999, с тех пор они были проверены и отредактированы многими разработчиками программного обеспечения, дизайнерами и организациями по всему миру для создания технического стандарта.

Документ разделен на 12 руководств, организованных по четырем принципам: Воспринимаемый, Удобный, Понятный и Надежный (POUR). Каждое руководство имеет три уровня критериев успеха (A, AA и AAA), указывающих на соответствие стандарту.

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

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

Контрольный список доступности UX: ограничивайте себя, а не пользователя

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

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

Зрение опыт. Сюда входят формы, цвета, контрасты, размер текста и графических частей вашего интерфейса.

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

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

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

Скорее всего, у вас уже есть по крайней мере одна личность покупателя — вымышленное представление вашего клиента, важное для понимания целей маркетинга и UX/UI. Персонаж многих компаний — это обычный Джо, здоровый американец европеоидной расы среднего класса среднего возраста. Чтобы обратиться к гораздо более широкой аудитории, вам также необходимо сделать своих персонажей более разнообразными. Вы, несомненно, найдете это описание 7 разных персонажей от Barclays очень полезным.

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

1.

Примите тот факт, что пользователи не являются дизайнерами

Если мы посмотрим на результаты поиска Google по запросу «монитор для дизайнера», то вот что первая ссылка рекомендует в качестве отображения для «творческой работы»:

Качества дисплея дизайнера

Итак, если люди, которые создают интерфейсы, в основном оснащены мониторами 4K и дисплеями Retina, обычные пользователи работают на ноутбуках, iPad и экранах телефонов. Самыми популярными физическими разрешениями дисплея являются 360×640 (28,86%) для мобильных устройств и 1366×768 (90,87 процента) для настольных компьютеров и ноутбуков, согласно опросу W3Counter, проведенному в марте 2017 года.

Дизайнеры творческие люди, и, конечно же, большинство из них с нетерпением ждут разработки полезных и красивых интерфейсов. Разницу между точками зрения дизайнера и пользователя точно описала дизайнер специальных возможностей Корделия МакГи-Табб в своем посте для блога Salesforce UX Projectors Don’t Lie. Она утверждает, что то, что обычно видят пользователи, больше похоже на тусклое изображение на проекторе, чем на изображение на наших экранах с высоким разрешением.

2. Сделайте свой веб-сайт адаптивным

Мы много говорили об адаптивном дизайне в наших предыдущих постах. Чтобы получить более глубокое понимание, взгляните на наш отчет, в котором представлены 17 основных моментов, которые помогут сделать ваш веб-сайт отзывчивым для всех пользователей и устройств. Итак, как насчет адаптивного дизайна с точки зрения инклюзивности?

Тест на мобильных устройствах. Самый простой способ понять разницу между оборудованием пользователя и оборудованием дизайнера — использовать симуляторы, такие как режим устройства в Chrome. Они позволяют понять, как интерфейс выглядит на разных устройствах. Его можно включить в левом углу окна инструментов разработчика (F12 или Ctrl+Shift+I в Windows или Cmd+Opt+I в Mac). Обратите внимание, что такое тестирование доступности может быть не на 100% правильным, поэтому вам все равно придется наблюдать за своим сайтом на реальных устройствах.

Убедитесь, что содержимое вашего ресурса можно масштабировать. Многие люди не могут в полной мере воспринимать все красивые интерфейсы. В исследовании Всемирной организации здравоохранения (ВОЗ) в 2014 году говорится о 246 миллионах человек, страдающих нарушениями зрения (близорукость, дальнозоркость, астигматизм и т. д.). И хотя большинство людей с плохим зрением используют очки или линзы, дизайн доступности ориентирован на тех, кто не может их себе позволить или решил не использовать их.

Войти в полноэкранный режим из фото Facebook

Используйте инструменты оценки доступности и оптимизации. Хорошим выбором является WAVE, инструмент Webaim для обнаружения ошибок доступности и предупреждений. Пользователям предлагается поставить ссылку на свой сайт, чтобы проверить его. Каждое предлагаемое предостережение подробно объясняется. WAVE уведомит вас об отсутствии альтернативного текста, пустой ссылки или отсутствии заголовка первого уровня.

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

3. Настройка параметров цвета и контрастности

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

Сайт, с которым легко работать, соответствует критериям приемлемости, работоспособности и понятности из правила POUR для доступного дизайна. Для цвета и контраста в интерфейсах эти рекомендации указаны в стандартах WCAG 2.0. Какие основные моменты следует учитывать?

Разрабатывайте дизайн для различных сред и разумно выбирайте коэффициент контрастности. Исследование Statcounter 2016 года показало, что 51,3 процента интернет-трафика приходится на мобильный. Это означает, что заходя на ваш сайт, пользователь может стоять посреди солнечной улицы и смотреть на глянцевый дисплей с заметным непониманием. Если ваш интерфейс не имеет достаточной контрастности, пользователь может просто его не увидеть.

Тексты с разной контрастностью

Коэффициент контрастности — это показатель, определяющий разницу в яркости между самым темным черным и самым светлым белым цветами. С точки зрения типографики это означает разницу в яркости между цветом текста и цветом его фона. Стандартное соотношение составляет 4,5:1 для текста нормального размера (около 18,66 пикселей) и 3:1 для крупного текста (более 24 пикселей). Дизайнеры используют инструмент Color safe для создания цветовых узоров с доступным контрастом и Webaim для проверки цветового контраста.

Коэффициент контрастности цвета фона и текста, определяемый Color Safe

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

Навигация от проекта MakeItOk для людей с протанопией, дихроматический вид; пример создан с Coblis

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

Режим «Дальтоник» в игре Color 6: Blitz by Tigrido : цветовой контраст поддерживается различными текстурами

Не делайте цвет единственным способом передачи важных сообщений. Например, если незаполненная форма выделена красным цветом, убедитесь, что за ней следует предупреждающий текст, например «Заполните форму» или «Добавьте свое имя».

Делайте напоминания, сопровождаемые текстом (Facebook)

4. Позаботьтесь заранее о читабельности

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

Пишите во время разговора. Часто этот совет звучит как «упростите текст», но это не совсем об этом. Вам нужно разработать речевой поток текста. Делая это, вы можете сделать даже сложные вещи понятными. Чтобы убедиться, что ваша копия понятна, используйте приложение Hemingway. Hemingway выделяет предложения, которые трудно или очень трудно читать из-за оговорок или сложной пунктуации. Он также выделяет пассивный залог и предлагает более простые синонимы для редко используемых слов.

Узнайте уровень образования вашей аудитории и сопоставьте контент с ним. Чтобы проверить, сколько лет формального образования потребуется вашему читателю, чтобы полностью понять ваш текст, используйте средства проверки доступности веб-сайта, такие как инструмент Readability Text от WebpageFX. Этот инструмент проверяет индекс тумана Ганнинга и поддерживает тесты Флеша-Кинкейда на удобочитаемость.

  • Индекс тумана Gunning — это тест на удобочитаемость текстов на английском языке. Индекс подсчитывает количество предложений и слов в текстах и ​​определяет среднюю длину предложений. Затем он подсчитывает «сложные» слова (состоящие из более чем трех слогов), вычисляет их процентное содержание и умножает число на 0,4. Результаты показывают, сколько лет формального образования нужно пользователю, чтобы понять текст с первой попытки. Индексный балл 8 считается идеальным для универсального информационного текста. Вы должны знать возраст и уровень образования вашей аудитории.
  • Тесты Флеша-Кинкейда на удобочитаемость также показывают, насколько сложным является текст на английском языке. Во-первых, тест Флеша-Кинкейда проверяет легкость чтения. Всего слов, предложений и слогов являются основными параметрами в расчете. В основном, легкость чтения в данном случае зависит от количества слов и слогов в каждом предложении. Предложение с несколькими словами и слова с одним или двумя слогами получит высокий балл по шкале Флеша-Кинкейда. Например: «У меня есть ручка. У меня есть яблоко», легкость чтения Флеша-Кинкейда оценивается в 107,6, что означает, что эти два слова могут быть прекрасно поняты 4- или 5-летними детьми.
  • Второй тест Флеша-Кинкейда проверяет уровень класса , то же, что и индекс тумана Ганнинга, но расчет зависит не от количества сложных слов, а от общего количества слогов.

5. Сделайте свой интерфейс совместимым со вспомогательными технологиями

Совместимость, которая соответствует «надежности» из правила POUR для доступного дизайна, означает, что любое устройство, которое люди используют для взаимодействия с интерфейсом, они получат одинаково хороший опыт. Согласно исследованию Центра Филлипса, еще в 2009 г.50 процентов граждан США считают новые технологии стрессовыми. Ситуация, похоже, улучшается с ростом популярности умных помощников, таких как Siri, Amazon Alexa и Google Home. Но ни эти, ни другие недавние достижения не решили проблему совместимости.

Между тем, отчеты об инвалидности и функционировании за 2014 и 2015 годы Национального центра статистики здравоохранения США сообщают нам, что:

  • 22,9 миллиона взрослых имеют проблемы со зрением (9,4 процента)
  • 39,6 миллиона взрослых имеют некоторые двигательные нарушения (16,3 процента)
  • 74,8 миллиона взрослых в возрасте 18 лет и старше (32,4 процента) и 26,1 миллиона взрослых в возрасте 65 лет (60,5 процента) и старше имеют «по крайней мере одну базовую трудность действий или сложные ограничения деятельности».

В то же время 54 процента взрослых из всех групп с ограниченными возможностями пользуются Интернетом.

Пользователям с нарушениями зрения и двигательными проблемами часто приходится изучать контент:

  • с использованием вспомогательных устройств (AD). К ним относятся программное обеспечение для распознавания речи, программы для чтения с экрана и приложения для увеличения экрана
  • .

  • работает без указывающего устройства — это пользователи только с клавиатурой.

Вот основные принципы, которым необходимо следовать при создании дизайна, совместимого со вспомогательными устройствами:

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

Ресурс Nextgov без кнопки «Перейти к содержимому» и с четким приоритетным контентом, навигация с помощью расширения Chrome Vox. Вы также можете использовать NVDA (Windows), Apple Voice Over (MacOX) или Orca (Linux)

Активные элементы Focus. Ссылки или формы с контрастной рамкой помогут пользователям клавиатуры перемещаться с помощью кнопки Tab.

Форма в фокусе на сайте American Airlines

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

Кнопка «Перейти к содержимому» в The New York Times

Систематизируйте содержимое и расставляйте приоритеты. Используйте теги разделов

,

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

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

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

Убедитесь, что каждая ссылка правильно указывает свое «назначение». Это относится не только к обычным гиперссылкам, но и к любым формам, которые должны заполнять пользователи. Например, форма поиска также должна быть помечена.

Поле поиска в Википедии

6. Убедитесь, что ваши медиафайлы видны и эффективны

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

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

Подпись под фотографией в статье из The New York Times

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

Сделать анимацию предсказуемой. Инклюзивная анимация — гораздо более сложная функция, чем статические изображения. Анимация веб-страниц по-прежнему в тренде в 2017 году, поскольку многие дизайнеры предлагают визуальные элементы на основе движения. И в этом нет ничего плохого, если эти элементы анимированы осознанно. Моушн-дизайнер должен учитывать, что мерцание и мерцание гифок, SUDDEN как появление Caps Lock, или быстрое исчезновение элементов, и вообще все непредсказуемое может быть тревожным, контрпродуктивным или даже опасным. Например, мерцающая анимация может вызвать эпилептические припадки. Кроме того, симптомы вестибулярного расстройства могут быть вызваны расширенными функциями дизайна, такими как параллаксная прокрутка, карусель или другие методы прокрутки. К сожалению, даже хорошо зарекомендовавшие себя предприятия иногда не в состоянии это проверить.

7. Оптимизация для минимальной скорости

Восемьдесят девять процентов пользователей считают быстрый доступ к ресурсу основным требованием. Средняя скорость интернета по всему миру составляет 7 Мбит/с (данные за 4 квартал 2016 года). Чтобы создать быстро реагирующий продукт, вы должны оптимизировать свой сайт для бесперебойной работы как на мобильных, так и на широкоэкранных устройствах.

Учитывайте типичную скорость подключения к Интернету в целевых регионах. Информацию о различных подключениях к Интернету можно найти в FastMetric или в отчете Akamai о состоянии Интернета. Например, средняя скорость интернета в Америке составляет 16 Мбит/с, но если вы создаете продукт для африканской аудитории, вы можете рассмотреть оптимизацию под среднюю скорость Египта 3 Мбит/с.

Протестируйте интерфейс, имитируя низкую скорость соединения. Chrome DevTool предлагает эту опцию. Перейдите на вкладку «Сеть» и измените метку «Без дросселирования» в раскрывающемся списке на скорости, которые вы хотите, чтобы ваш сайт был обеспечен. Скорости настраиваются, поэтому вы можете добавлять любые значения Download/Upload/Latency. Вы также можете попробовать инструмент Sloppy Java или замедлить скорость с помощью Fiddler, используя опцию «имитация модема».

Сокращение присутствия элементов CSS и JS и оптимизация медиафайлов. Оптимизация медиафайлов особенно важна для форматов .PNG и .GIF. Вы можете проверить параметр с помощью инструментов gifsicle, jpegtran или pngquant. Оптимизированные изображения уменьшат вес вашего сайта, поэтому он будет загружаться быстрее. То же самое работает для сокращения элементов JS и CSS.

8. Обеспечение сознательного взаимодействия с пользователями

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

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

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

Есть еще несколько вещей, которые UX-консультанты AltexSoft рекомендуют установить в рамках ответственного взаимодействия с пользователями:

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

Тайм-аут Uber

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

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

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

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

Доступный дизайн интерфейса. Часть 1: Проектирование с помощью специальных возможностей… | by Nick Babich

Часть 1: Проектирование с использованием доступных цветов

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

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

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

Четкая цель и универсальность использования

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

Изображение предоставлено: Material Design

Дизайн для ясности и упростить пользовательский интерфейс вашего приложения с помощью:

  • Четко видимых ключевых элементов.
  • Достаточный контраст и подходящий размер.
  • Четкая иерархия важности.

Надежная конструкция и простота взаимодействия

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

Изображение предоставлено: techcompose

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

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

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

Доступная цветовая палитра и коэффициенты контрастности

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

В соответствии с рекомендациями W3C по обеспечению доступности веб-контента (WCAG), small текст должен иметь коэффициент контрастности не менее 4,5:1 по отношению к фону, а крупный текст (14 pt жирный/18 pt обычный и выше) должен иметь коэффициент контрастности не менее 3:1. Это правило помогает людям с различными типами цветового дефицита видеть и читать текст на вашем экране.

Слева: строки текста плохо читаются на их фоне. Справа: строки текста соответствуют рекомендациям по цветовому контрасту и легко читаются. Кредиты изображений: Дизайн материалов.

Иконки или другие важные элементы также должны использовать рекомендуемые выше коэффициенты контрастности.

Справа: эти значки соответствуют рекомендациям по коэффициенту цветовой контрастности и легко читаются. Кредиты изображений: Дизайн материалов.

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

Color Safe создает доступные цветовые палитры для вашего сайта или приложения на основе рекомендаций по доступности веб-контента (WCAG).

Google Material design предлагает ограничить выбор цветов тремя оттенками из основной палитры и одним акцентным цветом из вторичной палитры.

Пример цветовой палитры и приложения цвета пользовательского интерфейса. Кредиты изображений: Дизайн материалов.

Но если вы уже выбрали цвета, WebAIM Color Contrast Checker поможет вам их протестировать.

Средство проверки цветового контраста WebAIM.

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

Элементы в отключенном состоянии и декоративные элементы

Элементы, находящиеся в настоящее время в отключенном состоянии, освобождаются от стандарта цветового контраста: сюда входят кнопки в отключенном состоянии или неактивные элементы меню.

Неактивное состояние кнопки. Кредиты изображений: Материальный дизайн.

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

Слева: нет необходимости искажать логотип, чтобы обеспечить контрастность. Кредиты изображений: Дизайн материалов.

Не полагайтесь только на цвет

Дальтонизмом страдает примерно 1 из 12 мужчин (8%) и 1 из 200 женщин в мире. Если для передачи информации используется только цвет, люди, которые не могут различать определенные цвета, и пользователи устройств с нецветными или невизуальными дисплеями не получат информацию.

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

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

Изображение предоставлено: cruxcollaborative

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

Изображение предоставлено: cruxcollaborative

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

Форма регистрации Facebook

Логотип Facebook и синяя цветовая схема были специально выбраны, поскольку Марк Цукерберг не различает красный и зеленый цвета и лучше всего видит синий цвет. «Синий цвет для меня самый насыщенный. Я вижу все синее».

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