UI-паттерны прогрессивного раскрытия (PDP) - Agentic Design

Loading Agentic Design…

Обзор за 30 секунд

Паттерн: Постепенно раскрывайте слои информации, чтобы избежать когнитивной перегрузки

Почему: Пользователям нужно сложное рассуждение ИИ, но технические детали сразу их перегружают

Ключевая идея: Начинайте просто и раскрывайте по запросу: сводка → детали → техника с четкой визуальной иерархией

Быстрая реализация

1Слои информации:Определите уровни сводка → детали → техника

2UI-триггеры:Элементы клика и раскрытия для каждого уровня

3Учет контекста:Показывайте глубину по типу пользователя

4Визуальная иерархия:Четкая типографика и уровни отступов

5Управление состоянием:Запоминайте настройки раскрытия пользователя

Example: agent_response → [показать рассуждение] → [технические детали] → [полная трассировка]

Что делать и чего избегать

✅Начинайте только с самого необходимого

✅Используйте одинаковые иконки раскрытия и сворачивания во всем UI

✅Делайте плавные анимации переходов

✅Сохраняйте предпочтения раскрытия информации

✅Добавьте опции «развернуть все» / «свернуть все»

❌Показывать всю сложную информацию сразу

❌Использовать вводящие в заблуждение или неясные подписи раскрытия

❌Вкладывать уровни раскрытия слишком глубоко (максимум 3-4)

❌Прятать критичную информацию за несколькими кликами

❌Игнорировать навигацию с клавиатуры для элементов раскрытия

Когда использовать

Используйте, когда

• Нужно объяснить сложное рассуждение
• Обучение пользователей и онбординг
• Знакомство с возможностями агента
• Требуется управление когнитивной нагрузкой

Избегайте, когда

• Простые одношаговые ответы
• Критические оповещения, требующие немедленного внимания
• Линейные процессы без сложности
• Решения в условиях дефицита времени

Ключевые метрики

Когнитивная нагрузка

Время выполнения задачи пользователем

Понимание

% пользователей, понимающих действия агента

Вовлеченность

Частота взаимодействия с раскрытием

Удовлетворенность пользователей

Предпочтение постепенного или полного раскрытия

Доля ошибок

Ошибки из-за нехватки информации

Эффективность обучения

Время на понимание новых возможностей

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

Рассуждение агента: показать сводку → подробные шаги → техническую трассу рассуждения

Знакомство с возможностями: базовые функции → продвинутые инструменты → экспертные функции

Объяснение ошибки: что произошло → почему это случилось → как исправить

Процесс решения: итоговая рекомендация → учтенные факторы → подробный анализ

Онбординг: базовые понятия → средние возможности → продвинутые сценарии

Источники и дополнительные материалы

Углубите понимание с помощью этих подобранных материалов

Научные статьи

Progressive Disclosure in Human-Computer Interaction (Nielsen, 2006)

Cognitive Load Theory and Instructional Design (Sweller, 2011)

Information Seeking Behavior and Progressive Disclosure (Pirolli, 2007)

CHI 2024: Progressive Disclosure in AI Interfaces

Руководства по внедрению

Google Material Design - Progressive Disclosure

Apple Human Interface Guidelines - Disclosure Controls

Microsoft Fluent Design - Progressive Disclosure

Nielsen Norman Group - Progressive Disclosure Guidelines

Инструменты и библиотеки

React Accessible Accordion

Angular CDK Accordion

Headless UI Disclosure (React)

Headless UI Disclosure (React/Vue)

Сообщество и обсуждения

UX Stack Exchange - Progressive Disclosure

Обсуждения в сообществе HCI

Interaction Design Association

A List Apart - Understanding Progressive Enhancement

UI-паттерны прогрессивного раскрытия (PDP) - Agentic Design