Хлебные крошки показывают положение текущего объекта в иерархии и дают короткий путь к родительским уровням. Они полезны как дополнительная навигация, но не заменяют название страницы, локальное меню и историю действий. основание Для темы «как проектировать хлебные крошки и контекст положения» артефакт «схема ориентации в иерархии» связывает компонент «Тип иерархии» с этапом «Определить устойчивую иерархию»; неподтверждённые рекомендации остаются редакционными гипотезами темы «как проектировать хлебные крошки и контекст положения».
Задача и проверяемые основания
Пример W3C представляет хлебные крошки как навигационный регион с упорядоченным списком ссылок и обозначением текущей страницы. основание
USWDS называет breadcrumb вторичной навигацией, помогающей понять положение на сайте, и рекомендует тестировать реализацию в контексте продукта. основание
W3C указывает, что навигационные средства помогают пользователю исследовать структуру и восстанавливать ориентацию. основание
Обзор NN/g включает breadcrumbs и локальную навигацию в набор способов цифрового ориентирования. основание
В артефакте «схема ориентации в иерархии» вопрос «Отражает ли цепочка структуру, а не историю кликов?» хранится отдельно от решения «Согласовать названия» и ограничения «объекты с несколькими родителями требуют правила».
Рабочая модель
Тип иерархии. В теме «как проектировать хлебные крошки и контекст положения» этот элемент означает структурная принадлежность объекта, а не случайный маршрут последнего перехода. В артефакте «схема ориентации в иерархии» связь с компонентом «Родительские уровни» проверяют сценарием темы «как проектировать хлебные крошки и контекст положения».
Родительские уровни. В теме «как проектировать хлебные крошки и контекст положения» этот элемент означает значимые контейнеры, к которым можно вернуться и продолжить работу. В артефакте «схема ориентации в иерархии» связь с компонентом «Текущий элемент» проверяют сценарием темы «как проектировать хлебные крошки и контекст положения».
Текущий элемент. В теме «как проектировать хлебные крошки и контекст положения» этот элемент означает название страницы без ссылки, согласованное с главным заголовком. В артефакте «схема ориентации в иерархии» связь с компонентом «Разделители» проверяют сценарием темы «как проектировать хлебные крошки и контекст положения».
Разделители. В теме «как проектировать хлебные крошки и контекст положения» этот элемент означает визуальные знаки, не озвучиваемые как часть названия. В артефакте «схема ориентации в иерархии» связь с компонентом «Адаптивность» проверяют сценарием темы «как проектировать хлебные крошки и контекст положения».
Адаптивность. В теме «как проектировать хлебные крошки и контекст положения» этот элемент означает сокращение длинной цепочки без потери ближайшего родителя и контекста. В артефакте «схема ориентации в иерархии» связь с компонентом «Смежная навигация» проверяют сценарием темы «как проектировать хлебные крошки и контекст положения».
Смежная навигация. В теме «как проектировать хлебные крошки и контекст положения» этот элемент означает локальное меню для переходов, не выражаемых иерархией. В артефакте «схема ориентации в иерархии» связь с компонентом «Тип иерархии» проверяют сценарием темы «как проектировать хлебные крошки и контекст положения».
Порядок проектирования
1. Определить устойчивую иерархию. Команда применяет шаг к теме «как проектировать хлебные крошки и контекст положения»: решить, какой родитель является структурным при нескольких путях входа. Результат уточняет компонент «Тип иерархии», а спорные варианты темы «как проектировать хлебные крошки и контекст положения» остаются в артефакте «схема ориентации в иерархии».
2. Согласовать названия. Команда применяет шаг к теме «как проектировать хлебные крошки и контекст положения»: использовать одинаковые термины в меню, заголовках и карточках. Результат уточняет компонент «Родительские уровни», а спорные варианты темы «как проектировать хлебные крошки и контекст положения» остаются в артефакте «схема ориентации в иерархии».
3. Выбрать уровни. Команда применяет шаг к теме «как проектировать хлебные крошки и контекст положения»: убрать технические контейнеры и оставить полезные точки возврата. Результат уточняет компонент «Текущий элемент», а спорные варианты темы «как проектировать хлебные крошки и контекст положения» остаются в артефакте «схема ориентации в иерархии».
4. Спроектировать длинные цепочки. Команда применяет шаг к теме «как проектировать хлебные крошки и контекст положения»: проверить вложенные объекты, узкие экраны и локализацию. Результат уточняет компонент «Разделители», а спорные варианты темы «как проектировать хлебные крошки и контекст положения» остаются в артефакте «схема ориентации в иерархии».
5. Настроить доступную разметку. Команда применяет шаг к теме «как проектировать хлебные крошки и контекст положения»: обозначить навигационный регион, список и текущую страницу. Результат уточняет компонент «Адаптивность», а спорные варианты темы «как проектировать хлебные крошки и контекст положения» остаются в артефакте «схема ориентации в иерархии».
6. Проверить ориентацию. Команда применяет шаг к теме «как проектировать хлебные крошки и контекст положения»: дать глубокую ссылку и попросить объяснить положение и соседний путь. Результат уточняет компонент «Смежная навигация», а спорные варианты темы «как проектировать хлебные крошки и контекст положения» остаются в артефакте «схема ориентации в иерархии».
Практический пример
Редакционный пример: пользователь открывал документ по прямой ссылке из уведомления и видел только его название. Проект и папка были указаны мелким текстом без переходов. Команда добавила структурную цепочку «Рабочее пространство → Проект → Папка → Документ», оставив текущий документ без ссылки. На мобильном экране показывались ближайший родитель и текущий уровень, а полная цепочка раскрывалась по запросу. Локальное меню отвечало за соседние документы, не перегружая breadcrumbs.
Пример показывает, как «схема ориентации в иерархии» помогает раньше обнаружить ошибку «показывать путь браузерной истории» и проверить критерий «иерархия устойчива» для темы «как проектировать хлебные крошки и контекст положения».
Контрольные вопросы
- Отражает ли цепочка структуру, а не историю кликов? Ответ фиксируют в артефакте «схема ориентации в иерархии» и связывают с компонентом «Тип иерархии»; мнение отмечают как допущение темы «как проектировать хлебные крошки и контекст положения».
- Можно ли перейти к полезному родителю? Ответ фиксируют в артефакте «схема ориентации в иерархии» и связывают с компонентом «Родительские уровни»; мнение отмечают как допущение темы «как проектировать хлебные крошки и контекст положения».
- Совпадает ли последний элемент с заголовком? Ответ фиксируют в артефакте «схема ориентации в иерархии» и связывают с компонентом «Текущий элемент»; мнение отмечают как допущение темы «как проектировать хлебные крошки и контекст положения».
- Что увидит пользователь по глубокой ссылке? Ответ фиксируют в артефакте «схема ориентации в иерархии» и связывают с компонентом «Разделители»; мнение отмечают как допущение темы «как проектировать хлебные крошки и контекст положения».
Типовые ошибки
- Показывать путь браузерной истории. В артефакте «схема ориентации в иерархии» для темы «как проектировать хлебные крошки и контекст положения» ошибка искажает компонент «Родительские уровни»; рядом записывают последствие, обнаружение и исправление.
- Делать текущую страницу активной ссылкой. В артефакте «схема ориентации в иерархии» для темы «как проектировать хлебные крошки и контекст положения» ошибка искажает компонент «Текущий элемент»; рядом записывают последствие, обнаружение и исправление.
- Включать технические уровни. В артефакте «схема ориентации в иерархии» для темы «как проектировать хлебные крошки и контекст положения» ошибка искажает компонент «Разделители»; рядом записывают последствие, обнаружение и исправление.
- Дублировать основное меню целиком. В артефакте «схема ориентации в иерархии» для темы «как проектировать хлебные крошки и контекст положения» ошибка искажает компонент «Адаптивность»; рядом записывают последствие, обнаружение и исправление.
- Обрезать цепочку без понятного контекста. В артефакте «схема ориентации в иерархии» для темы «как проектировать хлебные крошки и контекст положения» ошибка искажает компонент «Смежная навигация»; рядом записывают последствие, обнаружение и исправление.
Критерии качества
- Иерархия устойчива. В артефакте «схема ориентации в иерархии» критерий темы «как проектировать хлебные крошки и контекст положения» проверяют после шага «Определить устойчивую иерархию»; рядом сохраняют результат и ответственного.
- Названия согласованы. В артефакте «схема ориентации в иерархии» критерий темы «как проектировать хлебные крошки и контекст положения» проверяют после шага «Согласовать названия»; рядом сохраняют результат и ответственного.
- Текущий уровень обозначен программно. В артефакте «схема ориентации в иерархии» критерий темы «как проектировать хлебные крошки и контекст положения» проверяют после шага «Выбрать уровни»; рядом сохраняют результат и ответственного.
- Разделители не создают шум. В артефакте «схема ориентации в иерархии» критерий темы «как проектировать хлебные крошки и контекст положения» проверяют после шага «Спроектировать длинные цепочки»; рядом сохраняют результат и ответственного.
- Мобильная версия сохраняет ориентацию. В артефакте «схема ориентации в иерархии» критерий темы «как проектировать хлебные крошки и контекст положения» проверяют после шага «Настроить доступную разметку»; рядом сохраняют результат и ответственного.
- Прямая ссылка проходит тест понимания. В артефакте «схема ориентации в иерархии» критерий темы «как проектировать хлебные крошки и контекст положения» проверяют после шага «Проверить ориентацию»; рядом сохраняют результат и ответственного.
Ограничения применимости
- Объекты с несколькими родителями требуют правила. Ограничение сужает вывод по теме «как проектировать хлебные крошки и контекст положения» и требует повторно задать вопрос «Отражает ли цепочка структуру, а не историю кликов?»; границу решения сохраняют в артефакте «схема ориентации в иерархии».
- Плоским продуктам цепочка может быть не нужна. Ограничение сужает вывод по теме «как проектировать хлебные крошки и контекст положения» и требует повторно задать вопрос «Можно ли перейти к полезному родителю?»; границу решения сохраняют в артефакте «схема ориентации в иерархии».
- Breadcrumbs не показывают последовательность процесса. Ограничение сужает вывод по теме «как проектировать хлебные крошки и контекст положения» и требует повторно задать вопрос «Совпадает ли последний элемент с заголовком?»; границу решения сохраняют в артефакте «схема ориентации в иерархии».
- Длинные названия требуют адаптации. Ограничение сужает вывод по теме «как проектировать хлебные крошки и контекст положения» и требует повторно задать вопрос «Что увидит пользователь по глубокой ссылке?»; границу решения сохраняют в артефакте «схема ориентации в иерархии».
- Локальное меню остаётся отдельной задачей. Ограничение сужает вывод по теме «как проектировать хлебные крошки и контекст положения» и требует повторно задать вопрос «Отражает ли цепочка структуру, а не историю кликов?»; границу решения сохраняют в артефакте «схема ориентации в иерархии».
Вывод
Для темы «как проектировать хлебные крошки и контекст положения» команда связывает компонент «Тип иерархии» с этапом «Определить устойчивую иерархию», проверяет критерий «иерархия устойчива» и учитывает ограничение «объекты с несколькими родителями требуют правила». Артефакт «схема ориентации в иерархии» сохраняет основания выбора и позволяет пересмотреть решение после новых наблюдений.
