Опубликовано: 09.05.2026 | Источник: ZDNet – Enterprise Software

AI Mode в Chrome: как интегрировать ИИ-интерфейсы в диплом по UX и фронтенду

Поддомен: Frontend / UX-инжиниринг
Роль: Системный аналитик + Архитектор ПО
Семантический анализ завершён. Выбрана структура B.

Введение: почему интерфейс — это не просто «кнопочки»

Google тестирует AI Mode в Chrome — режим, при котором при переходе по результатам поиска страница открывается рядом с выдачей, а не в новой вкладке. Это не просто «удобно». Это снижение когнитивной нагрузки, борьба с «таб-хламом» и пример контекстно-ориентированного UX. Для студента это шанс сделать ВКР не про «ещё один сайт», а про интеллектуальную организацию цифрового пространства. Такие темы защищаемы, потому что опираются на реальные паттерны поведения пользователей, а не на абстрактные технологии. И да — это проще, чем писать про нейросети с нуля.

Темы ВКР: как превратить фичу в диплом

Основная часть: как вписать это в диплом

Глава 1: Анализ и теория — не просто «обзор литературы»

Здесь вы не просто описываете AI Mode. Вы показываете, что это часть макротренда: переход от «открой и забудь» к контекстно-зависимым интерфейсам. Используйте:

• ISO/IEC 25010 — оценка удобства использования (usability), подпункт learnability и operability.
• ГОСТ 34.19-2016 — требования к интерфейсам АС.
• Паттерны проектирования UI: Slide-in Panel, Contextual Overlay, Progressive Disclosure.

Постройте диаграмму C4 (контекст + контейнер), где покажете, как AI Mode взаимодействует с поисковой системой, браузером и пользователем. Это сразу добавит веса.

Глава 2: Проектирование — покажите архитектуру

Даже если вы делаете MVP, нужна схема. Пример архитектуры расширения Chrome:

// manifest.json — минимальная конфигурация
{
  "manifest_version": 3,
  "name": "AI Mode Clone",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab", "scripting"],
  "content_scripts": [{
    "matches": ["https://www.google.com/search*"],
    "js": ["content.js"]
  }]
}

В content.js вы внедряете логику: при клике на результат — не переход, а загрузка контента в боковую панель через fetch() и DOM manipulation.

Для схемы используйте UML-диаграмму последовательности (Sequence Diagram):
Пользователь → Google Search → content.js → fetch(целевая_страница) → DOM (вставка в side-panel)

Глава 3: Тестирование — без метрик не защитите

Не пишите «пользователям понравилось». Измеряйте:

• Time on Task — сколько времени ушло на поиск информации.
• Ошибка выбора — сколько раз пользователь открыл не ту страницу.
• Число вкладок — до и после использования AI Mode-аналога.
• System Usability Scale (SUS) — анкета из 10 вопросов, стандартная метрика UX.

Пример расчёта SUS:

function calculateSUS(answers) {
  let score = 0;
  for (let i = 0; i < answers.length; i++) {
    if ((i + 1) % 2 === 1) {
      score += (answers[i] - 1) * 2.5;
    } else {
      score += (5 - answers[i]) * 2.5;
    }
  }
  return score; // Максимум 100
}

Чему вы научитесь

• Проектировать UX-потоки с учётом когнитивной нагрузки.
• Создавать расширения для браузеров с использованием современных API.
• Оценивать эффективность интерфейсов по ISO/IEC 25010 и SUS.
• Оформлять архитектурные диаграммы в C4 и UML.
• Проводить A/B-тестирование и интерпретировать метрики.

FAQ: реальные вопросы студентов

Какие инструменты использовать для прототипирования?

Для UI — Figma или Adobe XD. Для MVP — Web Components + Chrome Extension API. Не усложняйте: цель — показать концепт, а не создать продукт уровня Google.

Нужно ли писать много кода?

Достаточно 300–500 строк на JavaScript. Главное — работающий прототип и объяснение, как он решает проблему из статьи. Код в приложении, логика — в тексте.

Как оформить схемы по ГОСТ?

ГОСТ не регламентирует UML или C4, но требует единообразия и подписей. Все диаграммы — с номерами («Рисунок 2.1 — Диаграмма последовательности»), пояснения — в тексте. Используйте PlantUML или Mermaid для генерации.

Можно ли использовать данные из статьи как источник?

Да, но только как подтверждение актуальности. Нельзя строить анализ на одном ZDNet. Используйте Google Scholar, ACM Digital Library, IEEE Xplore для теории.

Источник: How Google's updated AI Mode will ease your tab clutter when you search (опубликовано 2026-04-16)