ТЕХНИЧЕСКОЕ ЗАДАНИЕ: Спроектировать progressive disclosure для ответов AI-ассистента

1. Цель задачи

Освоить проектирование UI-паттерна progressive disclosure (постепенное раскрытие информации) в контексте AI-системы, где пользователь сначала видит краткий ответ, а затем может развернуть детали по кнопке «Подробнее». Задача направлена на улучшение пользовательского опыта и повышение user engagement (глубины взаимодействия, времени на странице, кликабельности дополнительного контента).

Ключевой результат Рабочий прототип компонента progressive disclosure (HTML/CSS/JS или Figma-интерактивный макет) с измеряемым приростом engagement-метрик (CTR на кнопку «Подробнее» и среднее время просмотра ответа) не менее чем на 20% относительно версии без раскрытия.

2. Исходные данные

Если нет реального инструмента — симулируем:

1. Создайте простой HTML-виджет чата с заранее заготовленными ответами (10–15 вопросов разной сложности).
2. Разделите ответы на краткую версию (один абзац) и полную (2–3 абзаца).
3. Добавьте кнопку «▸ Подробнее» под кратким ответом.
4. Сгенерируйте синтетические «клики» для имитации метрик: запишите время просмотра краткого и полного ответа, частоту нажатия на «Подробнее» (например, 30% в контрольной группе, ожидаем 50% в экспериментальной).
5. Проведите «A/B-тест» на одном пользователе, переключая состояние через URL-параметр ?mode=short / ?mode=full.

3. Технологический стек

4. Этапы выполнения

Этап 1: Исследование и анализ требований к контенту (1 час)

Действия

1. Соберите 10–15 типовых вопросов пользователей к вашему AI-ассистенту (реальные логи или синтетические).

2. Разделите ответы на два уровня

   • Краткий (summary) – 1–2 предложения, ключевой вывод.
   • Полный (details) – 2–4 предложения, контекст, примеры, ссылки.

3. Определите триггеры для progressive disclosure

   • Длина ответа > 500 символов → автоматически сворачивать.
   • Если ответ содержит список, таблицу или код – показывать как детали.

4. Создайте таблицу решений

   Тип вопроса	Краткий ответ	Полный ответ	Показать кнопку?
   «Какой курс доллара?»	«75,6 руб.»	«По данным ЦБ на 10:00 МСК – 75,6 руб. (+0,3%)»	Да
   «Расскажи о квантовых вычислениях»	Сворачиваем до 2 предложений	Развёрнутое объяснение	Да
   «Привет!»	«Здравствуйте!»	(нет деталей)	Нет

Ожидаемый результат этапа Таблица типов ответов с правилами сворачивания/разворачивания.

Этап 2: Дизайн UI-компонента progressive disclosure (2 часа)

Действия

1. Нарисуйте wireframe в Figma (или на бумаге) текущего чата и добавьте кнопку «▸ Подробнее» в конце краткого ответа.
2. Определите визуальные состояния
   • Свернуто: ответ показан полностью (если короткий) или обрезан с многоточием и кнопкой.
   • Развернуто: плавное появление полного текста (анимация height / opacity).
   • Hover: кнопка подсвечивается.
   • Disabled: кнопка отсутствует, если полной версии нет.
3. Создайте интерактивный прототип (Figma с переходами) или сразу реализуйте в HTML/CSS/JS.

Пример кода компонента на React

function AnswerCard({ short, full }) {
  const [expanded, setExpanded] = useState(false);
  const [hasDetails] = useState(full && full !== short);

  return (
    <div className="answer-card">
      <p className="short">{short}</p>
      {hasDetails && (
        <>
          <button
            className="toggle-btn"
            onClick={() => setExpanded(!expanded)}
            aria-expanded={expanded}
          >
            {expanded ? '▲ Свернуть' : '▸ Подробнее'}
          </button>
          <div
            className={`details ${expanded ? 'expanded' : 'collapsed'}`}
            dangerouslySetInnerHTML={{ __html: expanded ? full : '' }}
          />
        </>
      )}
    </div>
  );
}

4. Добавьте CSS-анимацию (transition: max-height 0.3s ease).

Ожидаемый результат этапа Готовый прототип (Figma или код) с рабочим переключателем.

Этап 3: Интеграция с AI-генерацией ответов (1 час)

Действия

1. Настройте эндпоинт AI-ассистента (OpenAI, YandexGPT) для возврата двух полей: summary и details.

2. Используйте системный промпт

   Ты — ассистент. Для каждого вопроса предоставь два варианта ответа:
   - "summary" (коротко, до 50 слов, только главное)
   - "details" (развёрнуто, до 200 слов, с контекстом)
   Ответ верни в JSON формате: {"summary": "...", "details": "..."}
   

3. Допишите обработку на фронтенде получив JSON, передайте в компонент AnswerCard.

4. Добавьте fallback если details пуст или совпадает с summary, кнопка не показывается.

Ожидаемый результат этапа AI-ассистент возвращает структурированный ответ, фронтенд корректно отображает краткий и полный варианты.

Этап 4: Сбор метрик engagement (1.5 часа)

Действия

1. Внедрите аналитические события
   • progressive_disclosure_view – при загрузке ответа с кнопкой.
   • progressive_disclosure_click – клик на «Подробнее».
   • progressive_disclosure_collapse – клик на «Свернуть».
   • answer_view_time – время просмотра краткого и полного ответа (через visibilitychange + таймер).
2. Настройте PostHog / GA4
   • Создайте дашборд с метриками: CTR кнопки, среднее время просмотра ответа, процент пользователей, развернувших хотя бы один ответ.
3. Проведите A/B-тест
   • Контрольная группа (A): ответ выводится сразу полностью (без сворачивания).
   • Экспериментальная группа (B): ответ свёрнут с кнопкой.
   • Соберите данные минимум от 5 пользователей (или 50 сессий симуляции).

Ожидаемый результат этапа Лог событий, дашборд с метриками, возможность сравнить engagement между группами.

Этап 5: Анализ и итерация (1 час)

Действия

1. Сравните метрики A и B

   • CTR кнопки (целевое > 40%).
   • Среднее время на ответе (B должно быть выше на 20%+).
   • Количество ответов, просмотренных полностью (в B выше за счёт раскрытия).

2. Вычислите прирост engagement по формуле

   Lift (%) = (Metric_B - Metric_A) / Metric_A * 100
   

3. Проведите качественную оценку

   • Спросите у тестовых пользователей: удобно ли? Не потеряли ли они важную информацию?
   • При необходимости измените порог сворачивания (например, не сворачивать ответы короче 300 символов).

4. Задокументируйте результаты в отчёте

Ожидаемый результат этапа Численные метрики, решения по доработке, финальный прототип.

5. Критерии приемки (Definition of Done)

• Компонент progressive disclosure реализован и корректно работает (сворачивание/разворачивание).
• Ответы от AI-ассистента приходят в структурированном виде (summary + details).
• Кнопка «Подробнее» отображается только когда есть детали (details != summary).
• Анимация раскрытия плавная (длительность ≤ 0.3 с).
• События аналитики отправляются в PostHog/GA4 (как минимум click и view).
• Проведено A/B-тестирование (контрольная vs экспериментальная группа) с зафиксированными метриками.
• Прирост engagement (CTR и/или время просмотра) в экспериментальной группе составил ≥ 20%.
• Документация (отчёт) включает описание дизайна, метрик и выводов.

6. Ожидаемый результат

Основной артефакт Папка с проектом, содержащая:

• Исходный код компонента (HTML/CSS/JS или React/Vue).
• Интеграцию с AI-эндпоинтом (пример запроса/ответа).
• Скрипт аналитики (или конфигурация PostHog).
• Отчёт в формате Markdown/PDF: описание дизайна, результаты A/B-теста, рекомендации.

Дополнительно (по желанию):

• Figma-файл с интерактивным прототипом.
• Видеодемонстрация работы компонента.

7. Возможные сложности и их решение

8. Бюджет времени (оценка)

Примечание Для первого раза рекомендуется заложить ещё 2 часа на отладку и ознакомление с инструментами аналитики.

9. Связанные вопросы из базы знаний

10. Чек-лист самопроверки

• Я определил, какие типы ответов требуют сворачивания, и реализовал правило.
• Компонент корректно отрабатывает состояния: свёрнуто, развёрнуто, hover, disabled.
• Аналитические события отправляются и видны в дашборде.
• Я провёл A/B-тест и зафиксировал метрики до/после.
• Отчёт содержит измеримый прирост engagement и рекомендации по улучшению.