Дизайн и пользовательский опыт¶

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

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

Инклюзивный дизайн¶

Как мы можем одновременно удовлетворить все потенциальные потребности пользователей? Здесь на помощь приходит инклюзивный дизайн. Инклюзивный дизайн использует человекоориентированный подход, который объединяет инклюзивность, удобство использования и доступность в одно целое.

{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/VqMZDtfUQpH0At8n2PF8.png", alt="Диаграмма Венна, где доступность, инклюзивность и удобство использования пересекаются в центре как инклюзивный дизайн.", width="400", height="390" %}

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

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

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

Персоны¶

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

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

Включение инвалидности¶

{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/SmtiiRRpAImfG7MI6ku4.png", alt="Инвалидность может быть постоянной, временной или ситуационной. Эта инвалидность может влиять на осязание, зрение, слух и речь.", width="350", height="573" %}

Спектр персон из набора инструментов Microsoft Inclusive 101.

«Все люди разные. Я могу говорить только исходя из своего опыта. Когда вы встречаете одного глухого человека, то вы встретили одного глухого человека — не всех нас».
Мерил Эванс из доклада ID24 Deaf Tech: Travel Through Time from Past to Future.

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

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

{% Details %} {% DetailsSummary %} Персона: Джейн Беннет Ознакомьтесь с примером персоны, которая поддерживает конкретные случаи использования.

{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/ysBmXtLrbxScFwocWF8f.png", alt="Джейн Смит высокая с длинными темными волосами, одета в серую рубашку с длинными рукавами и джинсы", width="150", height="362" %}

Имя: Джейн Беннет
Возраст: 57 лет
Местоположение: Эссекс, Соединенное Королевство
Профессия: UX-инженер
Инвалидность: Тремор рук от болезни Паркинсона с ранним началом (YOPD)
Цели: использовать ввод речи в текст, чтобы упростить добавление предложений кода; найти велосипедное оборудование онлайн с минимальным количеством нажатий клавиш.
Разочарования: веб-сайты без поддержки только клавиатуры; приложения для дизайна с небольшими областями для сенсорного взаимодействия.

Как UX-инженер, Джейн проектирует и создает страницы, которые жизненно важны для поддержания актуальности сайта ее компании. Она поддерживает множество членов команды в течение дня. Она королева устранения технических неполадок и незаменимый человек в отделе, когда что-то неожиданно ломается.

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

{% endDetails %}

Симуляторы инвалидности¶

Будьте крайне осторожны при использовании симуляторов инвалидности для эмуляции или дополнения ваших персон.

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

«Я думаю, нам нужно быть полностью честными в том, что любая симуляционная деятельность не влияет на некоторые из самых важных пониманий, которые мы хотим, чтобы зрячие знали в своем сердце и голове. Слепота — это не характеристика, которая определяет нас, недопонимание и низкие ожидания относительно слепоты — наше самое большое препятствие.
Эти недопонимания создают искусственные барьеры, которые мешают нам полноценно участвовать, и эти ложные ограничения перерастают во что-то, что нас сдерживает».
Марк Риккобоно, президент Национальной федерации слепых

Эвристики доступности¶

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

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

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

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

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

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

Контрольные точки для навигации и ориентирования	Отлично (+2 балла)	Проходит (+1 балл)	Провалено (-1 балл)	Н/П (0 баллов)
Установлен ли четкий, видимый индикатор на всех активных элементах при получении ими фокуса?	✅
Имеет ли страница значимый текст заголовка с информацией, специфичной для страницы, в начале?			✅
Одинаковы ли или похожи элемент заголовка страницы и H1?		✅
Есть ли значимые заголовки для каждого основного раздела?		✅
Определяется ли назначение ссылок только из текста ссылки или ее непосредственного контекста?				✅
Предоставлена ли ссылка пропуска в самом верху страницы и отображается ли она при фокусе?			✅
Способствует ли организация навигационных элементов ориентированию?	✅

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

Аннотации доступности¶

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

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

Следующие примеры иллюстраций дизайна взяты из набора аннотаций доступности Indeed.com для Figma.

{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/C365JZBXSoqHkSq068sy.png", alt="Иллюстрация дизайна визуальных модификаций, используемых для различных возможных состояний кнопки.", width="350", height="232" %}

Дизайн кнопки действия различается в зависимости от состояния: по умолчанию, фокус, наведение, активная и отключенная.
{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/sRwFc6CeeqXVbY8XT7k6.png", alt="Иллюстрация дизайна трех различных иконок, используемых на карточке вакансии.", width="350", height="232" %}

Три иконки имеют выделенный альтернативный текст. Иконки для «сохранить работу» и «не интересует» действуют как кнопки, поэтому альтернативный текст критически важен для понимания действия. Иконка рядом с «Подать заявку с вашим резюме Indeed» является чисто декоративной и поэтому не нуждается в альтернативном тексте.
{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/Xvw23qkfel5KeqQoh7cE.png", alt="Иллюстрация связи, которую должны иметь метки форм с их связанными полями ввода для месяца и года.", width="350", height="232" %}

Несколько меток ввода могут быть связаны с каждым полем ввода, чтобы помочь пользователям понять контекст.

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

Некоторые области для рассмотрения аннотаций доступности включают:

Цвет: включите коэффициенты контраста всех различных комбинаций цветов в палитре.
Кнопки и ссылки: определите состояния по умолчанию, наведения, активное, фокуса и отключенное.
Ссылки пропуска: выделите скрытые/видимые аспекты дизайна и то, куда они ведут на странице.
Изображения и иконки: добавьте рекомендации альтернативного текста для важных изображений/иконок.
Аудио и видео: выделите области/ссылки для субтитров, транскриптов и аудиоописаний.
Заголовки: добавьте программные уровни и включите все, что выглядит как заголовок.
Ориентиры: выделите различные разделы дизайна с помощью HTML или ARIA.
Интерактивные компоненты: определите кликабельные элементы, эффекты наведения, область фокуса.
Клавиатура: определите, где должен начинаться фокус (альфа-остановка) и следующий порядок табуляции.
Формы: добавьте метки полей, вспомогательный текст, сообщения об ошибках и сообщения об успехе.
Доступные имена: определите, как вспомогательные технологии должны распознавать элемент.