Дизайн, UX и доступность

Понимать дизайн, UX и доступность

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

81 понятий с определениями и практическими советами.

Искать во всём глоссарии

Иллюстрация, созданная ИИ — Понимать дизайн, UX и доступность — Иллюстрация, созданная ИИ

Путь чтения

1. Ориентировать чтение

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

2. Описать взаимодействия

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

3. Наблюдать использование

юзабилити
Удобство, с помощью которого пользователи могут понимать интерфейс, выполнять задачи и избегать или восстанавливать ошибки.
Отзывчивый дизайн
Разработка адаптации макета, носителя и взаимодействия к различным размерам и условиям экрана.
Cumulative Layout Shift (CLS)
Метрика визуальной стабильности на основе наибольшей группы неожиданных сдвигов макета.

Полезные различия

Альтернативный текст / Доступное имя

Альтернативный текст передаёт функцию изображения; доступное имя обозначает элемент. Изображение-команда должно объяснять действие.

каркас / Макет

Каркас исследует структуру; макет уточняет представление. Ни один не доказывает работоспособность пути в браузере.

Учебный пример

Использовать понятия для решения

Ситуация

Ошибка видна, но нужное поле трудно найти с клавиатуры.

Перед решением

Проверьте имя, связь сообщения и порядок. Одно изменение цвета не объясняет исправление.

Конкретная проверка

Повторите с неверным значением без помощи автора интерфейса.

Все понятия этой темы

Ссылки открывают полное определение на алфавитной странице. Сокращения и синонимы доступны в поиске основного глоссария.

Первичные справочные документы

Документы объясняют технические понятия. Пути чтения и примеры — редакционные методы для адаптации к проекту.

Иди на тренировку