Меня зовут Максим, я веб-разработчик. Представьте: два человека заходят на один и тот же сайт интернет-магазина электроники. Первый — IT-специалист, который точно знает, что ему нужен «NVMe SSD Samsung 990 Pro 2TB». Второй — бабушка, которая хочет «подарить внуку что-нибудь для компьютера». Оба видят одинаковую главную страницу с баннером «Скидки на ноутбуки!». Первый — пролистывает мимо и ищет поиск. Вторая — теряется в каталоге с 15 000 позиций.

Генеративный UX — это подход, при котором интерфейс сайта адаптируется не просто по параметрам (город, устройство), а фундаментально перестраивается под задачу и уровень экспертизы конкретного посетителя. В 2026 году это уже не фантастика — расскажу, как это работает.

Чем генеративный UX отличается от персонализации

Классическая персонализация — это замена элементов: показать другой баннер, изменить порядок товаров, подставить имя в приветствие. Структура страницы остаётся фиксированной — меняется только контент внутри неё.

Генеративный UX идёт дальше: меняется сама структура интерфейса. Не «какой баннер показать», а «нужен ли вообще баннер». Не «в каком порядке расположить блоки», а «какие блоки вообще показывать». Не «какой текст написать на кнопке», а «нужна ли кнопка или лучше поисковая строка».

Примеры:

Для IT-специалиста: минимум визуального контента, акцент на поисковую строку с автодополнением по артикулам, таблица характеристик вместо маркетинговых описаний, фильтры — развёрнуты по умолчанию.

Для неопытного пользователя: визуальные категории с иконками и описаниями, помощник-подборщик («Расскажите, для чего вам нужен компьютер — мы подберём»), крупные карточки товаров с простыми описаниями, кнопка «Помощь» на видном месте.

Как это реализуется технически

Определение профиля посетителя

На входе система определяет — кто перед нами. Источники данных:

Поведение в текущей сессии. Первые 10–15 секунд на сайте дают массу информации: использует ли посетитель поиск (значит, знает, что ищет), как быстро скроллит (опытный пользователь скроллит быстро), нажимает ли на фильтры (профессионал) или на крупные категории (новичок).

Источник трафика. Пришёл из Яндекса по запросу «NVMe SSD Samsung 990 Pro 2TB» — это профессионал с конкретной потребностью. Пришёл по запросу «подарок компьютерщику» — это другой профиль.

Историческое поведение. Если посетитель авторизован или определён по cookie — его прошлые визиты, покупки, просмотры формируют профиль.

Устройство и контекст. Мобильный = на ходу, вероятно, быстрый поиск. Десктоп = возможно, вдумчивый выбор. Время суток, день недели — тоже сигналы.

Система правил или ML-модель

На основе профиля система выбирает вариант интерфейса. Два подхода:

Rule-based (на правилах). Набор if-then правил: «Если источник = поисковый запрос с артикулом → показать layout "Эксперт"». «Если первое действие = клик по категории "Подарки" → показать layout "Гид"». Проще в реализации, прозрачнее в отладке.

ML-based (на машинном обучении). Модель обучена на исторических данных: какой layout давал лучшую конверсию для какого типа посетителей. Модель предсказывает оптимальный layout в реальном времени. Сложнее, но точнее.

На практике я начинаю с правил (5–7 ключевых сегментов), а ML добавляю, когда накоплено достаточно данных для обучения.

Компонентная архитектура

Сайт строится не как набор фиксированных страниц, а как библиотека компонентов, из которых собираются разные варианты:

Атомарные компоненты. Кнопка, поле поиска, карточка товара (компактная / расширенная / визуальная), фильтр (свёрнутый / развёрнутый), блок рекомендаций, помощник-подборщик.

Шаблоны layouts. «Эксперт» = поиск + фильтры + табличный вид каталога. «Гид» = визуальные категории + подборщик + крупные карточки. «Покупатель со списком» = быстрый заказ по артикулам + корзина.

Движок сборки. Серверный компонент, который на основе профиля посетителя выбирает шаблон и наполняет его подходящими компонентами. В Next.js это реализуется через серверные компоненты с динамическим импортом.

Пример кода (концепция)

На серверной стороне (Next.js Server Component):

// Определяем профиль посетителя
const profile = await detectVisitorProfile(request);

// Выбираем layout
const LayoutComponent = profile.expertise === 'expert' 
  ? ExpertLayout 
  : profile.intent === 'gift' 
    ? GiftGuideLayout 
    : DefaultLayout;

// Рендерим с соответствующими компонентами
return <LayoutComponent products={products} filters={filters} />;

Каждый layout — это React-компонент с собственной структурой, стилями и логикой.

Реальные сценарии применения

Интернет-магазин: три лица одного сайта

Layout «Эксперт». Посетитель пришёл из Яндекса по точному запросу с артикулом. Видит: крупную поисковую строку, результат поиска с техническими характеристиками в таблице, кнопку «В корзину» без лишних шагов, похожие товары по характеристикам (не «с этим покупают», а «аналоги с лучшими характеристиками»).

Layout «Гид». Посетитель пришёл по общему запросу «подарок геймеру». Видит: визуальные подборки («Подарки геймеру до 5 000 руб», «Подарки геймеру до 15 000 руб»), короткие описания простым языком, рейтинг «Хит продаж», кнопку «Спросить консультанта».

Layout «Повторный покупатель». Авторизованный клиент, который покупал раньше. Видит: «Ваши предыдущие покупки» с кнопкой повторного заказа, рекомендации на основе истории, персональные скидки, статус бонусных баллов.

B2B-портал: разные роли — разные интерфейсы

Закупщик. Фокус на прайсе, наличии, сроках. Минимум визуала, максимум данных. Возможность загрузить спецификацию из Excel.

Инженер. Фокус на технических характеристиках, чертежах, документации. Фильтры по техническим параметрам.

Руководитель. Фокус на аналитике: объёмы закупок, динамика цен, сравнение поставщиков. Дашборды вместо каталога.

Медицинский портал

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

Врач-партнёр. Профессиональная терминология, протоколы лечения, научные публикации, система направлений.

Как измерить эффективность

[A/B-тест](/blog/ab-testirovanie-sajta) layouts. Сравниваем конверсию разных layouts для одного сегмента аудитории. Статистическая значимость — минимум 95%.

Сегментный анализ. Конверсия «экспертов» на layout «Эксперт» vs на стандартном layout. Конверсия «новичков» на layout «Гид» vs на стандартном.

Метрики вовлечённости. Время на сайте, глубина просмотра, bounce rate — для каждого layout отдельно.

Бизнес-метрики. Выручка, средний чек, возвраты — в разрезе layouts.

Ограничения и риски

Сложность разработки. Вместо одного интерфейса нужно создать 3–5 вариантов. Это увеличивает стоимость разработки и тестирования.

Неправильное определение профиля. Если система решила, что посетитель — эксперт, а на самом деле нет — он увидит непонятный интерфейс. Решение: всегда давать возможность переключиться на другой вид (кнопка «Упрощённый режим» / «Профессиональный режим»).

Каноничность для SEO. Разные layouts для одной страницы — как это влияет на SEO? Ответ: серверный рендеринг показывает поисковому роботу стандартный layout (canonical). Персонализация применяется только для реальных пользователей, не для ботов.

Стоимость внедрения

Базовый генеративный UX (2–3 layout-варианта на основе правил, серверное определение профиля). Срок: 1–2 месяца (поверх существующего сайта). Бюджет: 300–700 тысяч рублей.

Продвинутый (5+ layouts, ML-определение профиля, A/B-тестирование, аналитика по сегментам). Срок: 3–5 месяцев. Бюджет: 700 тысяч — 2 миллиона рублей.

Генеративный UX — это следующий шаг после персонализации. Не «показать другой баннер», а «создать другой опыт». Если ваша аудитория неоднородна (а она почти всегда неоднородна) — это направление стоит рассмотреть.

Если хотите обсудить — обращайтесь.