UX-блоки

User Experience — элементы, которые делают магазин удобным: навигация, подсказки, кросс-продажи и удержание.

Из чего состоят UX-блоки

UX-блоки — это «невидимые помощники» магазина. Они не продают напрямую, но без них покупатель теряется, уходит или покупает меньше, чем мог бы.

1

Хлебные крошки — Breadcrumbs

Это навигационная цепочка, которая показывает путь от главной страницы до текущей. Выглядит как последовательность ссылок, обычно вверху страницы под шапкой.

Главная → Каталог → Обувь → Кроссовки

Для магазина

  • Улучшение навигации. Покупатель может уйти в родительскую категорию и продолжить выбор.
  • SEO. Хлебные крошки помогают поисковикам понять структуру сайта и связи между страницами.
2

Теги

Это текстовые метки или ключевые слова, которые присваиваются товарам для их группировки и упрощения поиска. Они не являются частью структуры каталога (как категории), а служат дополнительным слоем навигации.

В отличие от категорий, которые имеют строгую иерархию (например, «Обувь → Мужская обувь → Кроссовки»), теги не имеют иерархии. Это просто «ярлыки», которые вы навешиваете на товар.

Зачем они нужны магазину

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

Примеры тегов для интернет-магазина

Свойства
хлопок кожа водонепроницаемый беспроводной
Сезонность
лето зима демисезон
Назначение
для бега для офиса подарок
Маркетинг
новинка хит распродажа эксклюзив
3

Виджет онлайн-консультанта

Плавающий блок в углу экрана (обычно справа снизу), через который покупатель может связаться с магазином в реальном времени. Там может отвечать техподдержка, ИИ или бот. Это создаёт возможность быстро отвечать на вопросы покупателей, поднимает доверие и снимает сомнения.

💬
Поддержка магазина
онлайн
Подойдёт ли размер 42?
Да, на ваш рост и вес 42 будет в пору. Есть в наличии.

Для магазина

  • Рост конверсии. Мгновенные ответы на вопросы перед покупкой напрямую влияют на решение. По данным кейсов, внедрение чата давало рост конверсии на 30% и сокращение брошенных корзин на 20%.
  • Аналитика. Виджет показывает, какие вопросы задают чаще всего — это подсказка для улучшения карточек товаров и FAQ.

Для покупателя

  • Быстрый ответ. Не нужно искать контакты, звонить или писать на почту — можно спросить прямо на месте.
  • Снятие сомнений. «Подойдёт ли размер?», «Есть ли в наличии?», «Когда доставите?» — ответы помогают решиться на покупку.
  • Удобство.
💡
Технически: чаще всего виджет — это сторонний сервис (Cackle, Jivo, Bitrix24, Carrot quest). Вы вставляете JS-код на сайт, и он рисует кнопку и окно чата.
4

Кросс-сейл, Апсейл, Даунсейл

Три техники допродажи, которые увеличивают средний чек и удерживают покупателя. Работают в связке, но каждая решает свою задачу.

Cross-sell
Кросс-сейл
Продажа сопутствующих или дополняющих товаров вместе с основным. Покупатель пришёл за одной вещью, а ему предлагают ещё несколько, которые логично дополняют покупку.
📱 Телефон → чехол, стекло, зарядка
👟 Кроссовки → носки, средство для ухода
💻 Ноутбук → мышь, сумка, подставка
Правило: предлагает то, что дополняет, а не заменяет основной товар.
Upsell
Апсейл
Предложение товара с более хорошими характеристиками за большую стоимость. Покупатель пришёл за одной вещью, а ему предлагают версию получше.
📱 128 ГБ → 256 ГБ
💻 Базовая модель → мощный процессор
💳 Эконом → премиум тариф
Правило: предлагает то же самое, но лучше, а не сопутствующий товар.
Downsell
Даунсейл
Предложение товара с более простыми характеристиками или меньшей стоимостью. Противоположность апсейлу: покупатель хотел дорогое, но не готов — ему предлагают доступный вариант.
📱 80 000 ₽ → модель за 40 000 ₽
💳 Премиум → базовый с нужными опциями
📦 Большая упаковка → маленькая на пробу
Правило: не теряет покупателя, а сохраняет его, предлагая альтернативу.
5

Announcement bar / Notification bar

Это тонкая полоса-баннер, которая появляется в верхней части сайта для отображения важных сообщений, акций или уведомлений. Элемент представляет собой горизонтальную полосу, закреплённую вверху страницы (или иногда внизу). Он не перекрывает контент, а как бы «садится» поверх него, привлекая внимание посетителя к важной информации.

Разновидности по цели

Promo bar
Промо-акции и скидки. Стимулирует покупку: скидки, бесплатная доставка, промокоды.
«Скидка 20% на всё до конца недели»
Увеличивает покупательную способность на 10–25%.
Announcement bar
Обновления и новости. Информирует: новости, изменения в работе, обновления.
«Мы запустили новый раздел»
Изменения в графике работы на праздники.

Разновидности по способу отображения

Simple
Одно сообщение, которое просто висит в полосе. Не движется, не меняется.
«Бесплатная доставка при заказе от 3000 ₽»
Running Line / Marquee
Текст непрерывно прокручивается горизонтально. Позволяет показать длинное сообщение.
Скидки до 50% • Бесплатная доставка от 3000 ₽ • Новинки каждую неделю •
Slider / Rotating
Несколько сообщений сменяют друг друга автоматически.

Разновидности по расположению

Top Bar
Классика — полоса в самом верху, над шапкой сайта.
«Бесплатная доставка от 5000 ₽»
Bottom Bar
Полоса внизу экрана. Часто для cookies или важных уведомлений.
«Мы используем cookies…»
Cart Page Bar
Показывается только в корзине. Задача — дожать покупателя перед оплатой.
«До бесплатной доставки осталось 500 ₽»
6

Мультигорода

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

Для покупателя
  • Актуальные цены. Один и тот же товар может стоить по-разному в Москве и Челябинске из-за логистики и налогов.
  • Правильные условия доставки. Покупатель видит сроки и стоимость именно для своего региона.
  • Релевантный ассортимент. Если товара нет на местном складе, система покажет это.
Для магазина
  • Единый сайт вместо десятков. Не нужно создавать отдельный сайт для каждого города — всё управляется из одной админки.
  • SEO в регионах. Можно создавать поддомены или URL с префиксом города (/kazan/catalog/) и продвигаться по локальным запросам.
7

Всплывающие окна — Pop-up

Это модальные окна, которые появляются поверх контента сайта и требуют от пользователя действия: закрыть, подписаться или перейти по ссылке. Это один из самых спорных, но одновременно эффективных инструментов интернет-маркетинга.

🎁
Скидка за подписку
Пользователю предлагают скидку на первый заказ в обмен на email.
Средняя конверсия ~3%
У лучших до 9%
🛒
Брошенная корзина
Срабатывает, когда посетитель с товарами в корзине пытается уйти с сайта. Это «сеть безопасности» для покупателя.
Exit-intent 2–4%
AI-алгоритмы 6,88%+

Как это работает технически

Ключевой элемент — триггер (момент появления):

  • Скидка за подписку — таймер (через 10–15 секунд) или скролл (прокрутка 50% страницы).
  • Брошенная корзина — Exit Intent (курсор движется к закрытию вкладки) или AI-скрипт, анализирующий поведение.
8

Кнопка «Поделиться товаром»

Виральный охват и бесплатный трафик. Когда покупатель делится товаром со своими друзьями или подписчиками, он фактически выступает в роли рекомендателя. Это работает как сарафанное радио в цифровом формате: доверие к совету знакомого обычно выше, чем к обычной рекламе.

💡
Плюс для SEO: это ещё и элемент SMO (оптимизации для соцсетей). Чем чаще контент сайта распространяется в социальных сетях, тем лучше сигналы для поисковых систем и больше точек входа для новой аудитории.
9

Блок «Недавно просмотренные»

Это список товаров, которые посетитель уже открывал на сайте, но, возможно, не купил. Он показывается обычно внизу страницы товара, в корзине или в личном кабинете.

🖼
Кроссовки Nike Air
4 990 ₽
🖼
Футболка Oversize
1 490 ₽
🖼
Рюкзак городской
3 200 ₽
  1. Главная цель — вернуть покупателя к тому, что его уже заинтересовало.
  2. Напоминание. Человек зашёл, посмотрел кроссовки, отвлёкся и ушёл. Через некоторое время он возвращается на сайт за чем-то другим, а тут ему на глаза снова попадаются те самые кроссовки. Это работает как мягкое напоминание: «Ты это хотел, помнишь?»
  3. Экономия времени. Покупателю не нужно заново искать товар через поиск или каталог. Он сразу видит то, что уже смотрел.
  4. Повышение конверсии. Часто люди принимают решение о покупке не сразу. Они сравнивают, думают, советуются. Блок «Недавно просмотренные» помогает вернуться к выбору и завершить покупку.