Интерфейсные принципы, навигация и типографика

Автор: Дмитрий Малыхин (i@dmalyhin.ru).

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

Интерфейсные принципы

Базовые принципы

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

Контекстные предпросмотры

Контекстный предпросмотр при наведении или клавиатурном фокусе является дополнительным средством ориентирования, а не заменой страницы.

Предпросмотр:

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

Независимость блоков отношений

Структурное сходство, семантика корпусов произведений и семантика собственных карточек авторов/серий отображаются раздельно. Пересекающиеся пары допустимы. Единого «магического рейтинга» не создаётся.

Навигация, сортировка и типографика

Глобальная навигация

Активный раздел имеет CSS-состояние active и aria-current. На главной странице раздела используется aria-current="page", на дочерней странице того же раздела — aria-current="location".

Две строки меню образуют одну визуальную систему; системная ссылка «О системе знаний» вынесена отдельно от предметной навигации.

Главный каталог

На главной доступны:

  • строковый поиск;
  • фильтр формата;
  • сортировка.

Сортировки:

По произведению — значение по умолчанию
По автору
По серии

Выбранная сортировка сохраняется в localStorage отдельно для пути страницы. При отсутствии или повреждении сохранённого значения применяется title.

Натуральная сортировка

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

Алфавитный указатель

Главная сетка произведений и компактный алфавитный указатель являются разными представлениями одного корпуса. Указатель группирует числа, латиницу, кириллицу и прочее.

Русская типографика

Применяются:

  • кавычки «ёлочки»;
  • корректные тире;
  • знак многоточия;
  • неразрывные пробелы в инициалах и коротких сочетаниях;
  • узкий неразрывный пробел перед %;
  • грамматические формы счётчиков.

Длинные содержательные и вводные блоки используют выключку по ширине с отключёнными переносами слов (hyphens:none).

Доступность и состояния

Клавиатура

Все смысловые переходы должны быть доступны без мыши. Контекстный предпросмотр при наведении имеет эквивалентное состояние при клавиатурном фокусе. Элементы управления используют естественные button, a, input, select и соответствующие ARIA-атрибуты.

Видимый клавиатурный фокус

Интерактивные элементы сохраняют видимое состояние :focus-visible. Удаление браузерного outline допускается только при наличии равноценного собственного индикатора фокуса.

Активное состояние

Навигация различает:

  • активный раздел;
  • главную страницу раздела;
  • дочернюю страницу активного раздела.

Пустые данные

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

Очистка поиска

Поисковые поля имеют явное действие очистки с клавиатурно доступной кнопкой. Нативная WebKit-кнопка скрывается, чтобы поведение было одинаковым.

Тема

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