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

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

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

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

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

{% 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 Toolkit.

«Люди все разные. Я могу говорить только со своей позиции. Когда вы встречаете одного глухого человека, вы встретили одного глухого человека — но не всех нас».
Мерил Эванс из доклада ID24 Deaf Tech: путешествие во времени из прошлого в будущее.

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

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

{% Details %} {% DetailsSummary %} Персона: Джейн Беннет Пример персоны, поддерживающей конкретные пользовательские сценарии. {% endDetailsSummary %}

{% 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)
Есть ли чёткий видимый индикатор на всех активных элементах при фокусе?	✅
Есть ли у страницы осмысленный заголовок title, где информация, специфичная для страницы, идёт первой?			✅
Совпадают ли элемент title страницы и 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" %}

У трёх иконок выделен альтернативный текст. Иконки «сохранить вакансию» и «неинтересно» работают как кнопки, поэтому alt‑текст критичен для понимания действия. Иконка рядом с «Отклик с резюме Indeed» носит декоративный характер и не требует alt‑текста.

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

С каждым полем может быть связано несколько подписей, чтобы помочь пользователям понять контекст.

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

Вот на что стоит обратить внимание в аннотациях по доступности:

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