Подумайте о своем любимом веб-сайте или приложении. Что делает его вашим любимым? Теперь подумайте о веб-сайте или приложении, которое вам не нравится. Что вам в нем не нравится? Взаимодействие пользователей с вашим дизайном и их опыт работы с вашим веб-сайтом и приложением могут сильно различаться.
Этот опыт может меняться в зависимости от времени суток, типа используемого устройства, достаточного ли сна у пользователя накануне, плохого ли самочувствия, использует ли он вспомогательные технологии и многого другого. Учитывая, что в мире проживает около восьми миллиардов человек, возможности использования и восприятия ваших разработок безграничны.
Инклюзивный дизайн
Как удовлетворить все потенциальные потребности пользователей одновременно? На помощь приходит инклюзивный дизайн. Инклюзивный дизайн использует человекоцентричный подход, который объединяет инклюзивность, удобство использования и доступность в единое целое.
В отличие от универсального дизайна, который фокусируется на одном варианте, доступном как можно большему числу людей, принципы инклюзивного дизайна сосредоточены на разработке дизайна для конкретного человека или сценария использования, а затем распространении этого дизайна на других.
Существует семь принципов инклюзивного дизайна, ориентированных на доступность:
- Обеспечьте одинаковый пользовательский опыт : убедитесь, что ваш интерфейс предоставляет всем одинаковый опыт, чтобы люди могли выполнять задачи способом, соответствующим их потребностям, без ущерба для качества контента.
- Учитывайте ситуацию : убедитесь, что ваш интерфейс обеспечивает пользователям ценный опыт независимо от их обстоятельств.
- Будьте последовательны : используйте привычные правила и применяйте их логичным образом.
- Предоставьте контроль : обеспечьте людям возможность доступа к контенту и взаимодействия с ним удобным для них способом.
- Предлагайте выбор : Рассмотрите возможность предоставления людям различных способов выполнения задач, особенно сложных или нестандартных.
- Расставьте приоритеты для контента : помогите пользователям сосредоточиться на основных задачах, функциях и информации, расположив эти элементы в предпочтительном порядке в рамках контента и макета.
- Повышение ценности : Учитывайте назначение и значимость функций, а также то, как они улучшают взаимодействие с пользователем для разных категорий пользователей.
Персоны
При разработке нового дизайна или функции многие команды полагаются на пользовательские персоны , которые помогают им в этом процессе. Персоны — это вымышленные персонажи, использующие ваши цифровые продукты, часто основанные на количественных и качественных исследованиях пользователей.
Персоны также предлагают быстрый и недорогой способ тестирования и определения приоритетов этих функций на протяжении всего процесса проектирования и разработки. Они помогают сфокусировать решения, касающиеся компонентов сайта, добавляя в обсуждение элемент реального мира, что способствует согласованию стратегии и созданию целей, ориентированных на конкретные группы пользователей.
Учитывайте инвалидность
«Все люди разные. Я могу говорить только исходя из своего опыта. Если вы встречаете одного глухого человека, то вы встречаете только одного глухого человека, а не всех нас».
Мерил Эванс из ID24 рассказывает о технологиях для глухих: путешествие во времени из прошлого в будущее .
Персоны можно использовать в качестве инструмента инклюзивного дизайна, если вы включаете в свои персоны людей с инвалидностью. Существует множество различных способов сделать это. Вы можете создавать персоны, специфичные для людей с инвалидностью , добавлять инвалидность к существующим пользовательским персонам или даже создавать спектр персон, отражающий динамичную реальность ситуативных, временных и постоянных нарушений здоровья.
Независимо от того, как вы включаете людей с инвалидностью в свои портреты пользователей, они не должны основываться на реальных людях или стереотипах. И портреты пользователей никогда не заменяют тестирование с участием пользователей.
- Имя : Джейн Беннет
- Возраст : 57 лет
- Местоположение : Эссекс, Великобритания
- Профессия : UX-инженер
- Нарушение функций : Тремор рук при болезни Паркинсона с ранним началом (YOPD).
- Цели : использовать ввод речи в текст для упрощения добавления предложений по коду; находить велосипедное оборудование в интернете с минимальным количеством нажатий клавиш.
- Недостатки : веб-сайты, не поддерживающие только клавиатурное управление; приложения для дизайна с небольшими областями для сенсорного взаимодействия.
Как UX-инженер, Джейн проектирует и создает страницы, которые имеют решающее значение для актуальности сайта ее компании. Она оказывает поддержку многим членам команды в течение дня. Она — королева решения технических проблем и незаменимый специалист в отделе, когда что-то неожиданно выходит из строя.
Потеря мелкой моторики из-за тремора делает для нее все более сложным использование мыши. Она все чаще полагается на клавиатуру для навигации в интернете. Джейн всегда уделяла большое внимание своей физической форме. Она любит шоссейные гонки и BMX. Поэтому диагноз «болезнь Паркинсона с ранним началом», поставленный ей в прошлом году, стал для нее еще большим ударом.
Симуляторы инвалидности
Следует проявлять крайнюю осторожность при использовании симуляторов инвалидности для имитации или дополнения ваших персонажей .
Симуляторы инвалидности — это палка о двух концах: они могут вызывать сочувствие или сопереживание — это зависит от конкретного человека, контекста использования симулятора и многих других неконтролируемых факторов. Многие защитники доступности выступают против использования симуляторов инвалидности и рекомендуют искать фильмы, демонстрации, обучающие материалы и другой контент, созданный людьми с инвалидностью, и узнавать об их опыте из первых рук.
«Я думаю, нам нужно быть предельно честными: любая имитационная деятельность никак не влияет на самые важные представления, которые мы хотим донести до зрячих людей. Слепота — это не та характеристика, которая нас определяет, и самым большим препятствием для нас являются недопонимания и заниженные ожидания в отношении слепоты».
Эти недоразумения создают искусственные барьеры, которые мешают нам в полной мере участвовать, и эти ложные ограничения превращаются в нечто, что нас сдерживает.
Марк Риккобоно , президент Национальной федерации слепых.
Эвристические методы обеспечения доступности
При создании портретов пользователей и разработке дизайна стоит включить эвристические методы в свой рабочий процесс. Эвристические методы — это правила проектирования взаимодействия, введенные в 1990 году Якобом Нильсеном и Рольфом Моличем. Эти десять принципов были разработаны на основе многолетнего опыта в области проектирования удобства использования и с тех пор применяются в дизайне и программах по проектированию взаимодействия человека с компьютером.
Перенесемся в 2019 год, и команда дизайнеров Deque создала и представила новый набор эвристических методов, ориентированных на цифровую доступность . Согласно их исследованиям, до 67% всех ошибок доступности веб-сайта или приложения можно избежать, если доступность учитывается в процессе проектирования. Это огромный эффект, которого можно добиться еще до написания первой строки кода.
Подобно исходному набору эвристических правил, существует десять эвристических правил доступности, которые следует учитывать при планировании дизайна.
- Методы и способы взаимодействия : Пользователи могут эффективно взаимодействовать с системой, используя выбранный ими метод ввода (например, мышь, клавиатура, сенсорный экран и т. д.).
- Навигация и ориентирование : Пользователи могут перемещаться по системе, находить контент и определять свое местоположение в любой момент времени.
- Структура и семантика : Пользователи могут понять структуру контента на каждой странице и разобраться, как работать в системе.
- Предотвращение ошибок и состояния : Интерактивные элементы управления содержат постоянные, содержательные инструкции, помогающие предотвратить ошибки, и предоставляют пользователям четкие состояния ошибок, указывающие на суть проблемы и способы ее устранения при возникновении ошибок.
- Контрастность и читаемость : Пользователи могут легко различать и читать текст и другую важную информацию.
- Язык и читабельность : Пользователи могут легко читать и понимать содержание.
- Предсказуемость и согласованность : Пользователи могут предсказать назначение каждого элемента. Понятно, как каждый элемент связан с системой в целом.
- Ограничение по времени и сохранение данных : Пользователям предоставляется достаточно времени для выполнения задач, и они не теряют информацию, если отведенное им время (т.е. сессия) истекает.
- Движение и мерцание : Пользователи могут остановить движущиеся, мерцающие или анимированные элементы на странице. Пользователи не должны отвлекаться или каким-либо иным образом страдать от этих элементов.
- Визуальные и звуковые альтернативы : Пользователи могут получить доступ к текстовым альтернативам для любого визуального или звукового контента, передающего информацию.
Получив базовое понимание этих эвристических принципов доступности, вы можете применить их к персонажу или дизайну, используя рабочий лист с эвристиками доступности и следуя предоставленным инструкциям. Это упражнение будет более познавательным, если вы учтете несколько точек зрения.
Пример эвристической проверки доступности контрольной точки навигации и ориентирования может выглядеть следующим образом:
| Контрольные точки для навигации и ориентирования. | Отлично (+2 балла) | Проходные баллы (+1 балл) | Неудачно (-1 балл) | Н/Д (0 баллов) |
|---|---|---|---|---|
| Отображается ли четкий, видимый индикатор на всех активных элементах по мере того, как они получают фокус? | ||||
| Содержит ли страница осмысленный заголовок, в начале которого представлена информация, относящаяся к данной странице? | ||||
| Элемент заголовка страницы и элемент H1 — это одно и то же или похожие элементы? | ||||
| Есть ли осмысленные заголовки для каждого основного раздела? | ||||
| Определяется ли назначение ссылок только текстом ссылки или же контекстом ссылки? | ||||
| Ссылка для пропуска страницы находится в самом верху страницы и отображается ли она при наведении курсора? | ||||
| Способствует ли организация элементов навигации ориентированию на местности? |
После того, как все члены команды просмотрят страницу или компонент и проведут эвристический анализ доступности, итоговые результаты по каждой контрольной точке суммируются. На этом этапе можно решить, как устранить обнаруженные проблемы или исправить любые упущения, имеющие первостепенное значение для обеспечения цифровой доступности.
Аннотации доступности
Прежде чем передать свой дизайн команде разработчиков, следует добавить аннотации, касающиеся доступности .
Аннотации, как правило, используются для объяснения творческих решений и описания различных аспектов дизайна. Аннотации доступности фокусируются на областях, где разработчики могут принимать более доступные программные решения под руководством команды дизайнеров или специалиста по доступности.
Аннотации доступности могут применяться на любом этапе процесса проектирования, от каркасных моделей до высокоточных макетов. Они могут включать в себя сценарии взаимодействия пользователей, условные состояния и функциональность. Часто для упрощения процесса и сохранения акцента на дизайне используются символы и метки.
Приведенные ниже примеры иллюстраций дизайна взяты из набора аннотаций доступности Indeed.com для Figma.
В зависимости от используемой вами программы для проектирования, у вас должно быть несколько стартовых наборов для аннотирования доступности на выбор. Или, если хотите, вы можете создать свой собственный набор. В любом случае, вам следует решить, какая информация должна быть передана команде, ответственной за ее передачу, и какой формат подходит лучше всего.
К областям, которые следует учитывать при составлении аннотаций, касающихся доступности, относятся:
- Цвет : укажите коэффициенты контрастности всех различных цветовых сочетаний в палитре.
- Кнопки и ссылки : определение состояний по умолчанию, при наведении курсора, активные, в фокусе и отключенные.
- Ссылки для пропуска : выделяют скрытые и видимые элементы дизайна и места, на которые они ведут на странице.
- Изображения и значки : добавьте альтернативные текстовые рекомендации для важных изображений и значков.
- Аудио и видео : выделение областей и ссылок для субтитров, расшифровок и аудиоописаний.
- Заголовки : добавьте программные уровни и включите все, что выглядит как заголовок.
- Выделение ключевых элементов : подсветка различных разделов дизайна с помощью HTML или ARIA.
- Интерактивные компоненты : идентификация кликабельных элементов, эффекты при наведении курсора, область фокусировки.
- Клавиатура : определите, где должен начинаться фокус (буквенная клавиша), и порядок перехода по клавише Tab.
- Формы : добавление меток полей, вспомогательного текста, сообщений об ошибках и сообщений об успешном выполнении.
- Доступные названия : укажите, как вспомогательные технологии должны распознавать этот элемент.