Вкладки Система дизайна

Переключение между областями контента на одном уровне.

Пунктов проверки: 7 · Групп: 3

Содержание чек-листа

Прогресс проверки

Структура и значение

Сравните информацию и представление в контексте использования.

Назовите содержимое каждой вкладкиИспользуйте короткие, различимые названия и избегайте общих названий.Вкладки соответствуют областям с одинаковым контекстом; Страницы разных уровней должны использовать навигацию.Пример Детали проекта включают «Обзор», «Участники» и «Деятельность».Указывает текущую выбранную вкладкуОбъедините метку или акцентную линию с цветом, чтобы идентифицировать текущий контент.Выбранная в данный момент вкладка должна быть четко обозначена и связана с видимой в данный момент панелью; Немного более светлого цвета обычно недостаточно.Связать вкладку с панельюУкажите правильную роль, имя и статус средства поддержки.В потоке клавиатуры должно участвовать только содержимое текущей вкладки; Метка и статус должны отражать правильную панель.

Взаимодействие и удобство использования

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

Прокрутка по вкладкамИспользуйте клавиши со стрелками между вкладками и Tab, чтобы перейти к содержимому.Обратная связь при передаче контентаЕсли вам нужно загрузить, оставьте имя вкладки и статус ожидания ясными, не отображайте данные старой вкладки как новую вкладку.Если для загрузки переключения вкладок требуется время, укажите, какой контент ожидает, и не допускайте ошибочного принятия старых результатов за новые вкладки.Сохраняйте вкладку «Специальные возможности» на узких экранахПозволяет прокручивать или выполнять другой выбор, распознавая при этом открытые вкладки.Попробуйте длинные метки и увеличьте текст; Последние вкладки по-прежнему нуждаются в способе их поиска и выбора, не теряя при этом открытую вкладку.

Завершите опыт

Проверьте детали, которые легко упустить при вводе проекта в эксплуатацию.

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

Прогресс автоматически сохраняется в этом браузере.

РЕКОМЕНДАЦИИ

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

Назовите содержимое каждой вкладки

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

ПРИМЕРЫ

Примеры использования

Назовите содержимое каждой вкладки

Детали проекта включают «Обзор», «Участники» и «Деятельность».

Раздел назначения и выбранная вкладка

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

Смените тему и проверьте вкладки с длинными названиями: отметка выбора должна соответствовать нужному содержимому.

Пример Вкладка счетов подчёркнута, когда отображается её содержимое.

Ваш проект

Загрузка содержимого вкладки

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

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

Пример При просмотре истории поздний ответ раздела обзора не меняет содержимое.

Ваш проект

Фокус, выбор и недоступность

Различайте фокус и выбранную вкладку; причину недоступности должно быть легко найти.

Используйте Tab и стрелки: программа экранного доступа должна правильно сообщать выбранную вкладку.

Пример Обводка фокуса может находиться на отчётах, пока обзор остаётся выбранным.

Ваш проект

Вкладки Система дизайна

Структура и значение

Взаимодействие и удобство использования

Завершите опыт

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

Назовите содержимое каждой вкладки

Примеры использования

Назовите содержимое каждой вкладки

Раздел назначения и выбранная вкладка

Загрузка содержимого вкладки

Фокус, выбор и недоступность

Найти чек-лист

Чек-листы не найдены

Вкладки Система дизайна

Структура и значение

Взаимодействие и удобство использования

Завершите опыт

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

Назовите содержимое каждой вкладки

Примеры использования

Назовите содержимое каждой вкладки

Варианты и сценарии использования

Раздел назначения и выбранная вкладка

Загрузка содержимого вкладки

Фокус, выбор и недоступность