Формат сторис работает потому что пользователь уже обучен - Instagram, VK, Telegram. Тот же паттерн на сайте даёт вовлечённость которую баннер и карусель не дадут никогда. Виджет показывается на любой странице кроме критичных - корзина, оформление заказа. Не мешает основному сценарию, но работает на каждом шаге до него.

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

К сожалению, здесь нельзя публиковать видео. Через фото полностью не передать функционал, но вы можете посмотреть как работает виджет на сайте boosterpro.ru

UX и производительность

Главная проблема - найти баланс между качеством и производительностью.

- Картинки без сжатия весят много, а со сжатием - выглядят мыльно, особенно слайды с текстом; - GIF - низкое качество, недостаточный FPS, большой вес, отсутствие управляемости; - Видео на мобильных - отдельная головная боль с автовоспроизведением и браузерными ограничениями, этот формат лучше оставить соцсетям.

Моё решение: - Для информационных слайдов - Lottie-анимации, сделанные в After Effects, 30fps. Смотрится плавно, нет удара по производительности на телефонах, на пк вообще летает без проблем. Но при необходимости можно снизить до 24fps если слайдов много. - Для продающих слайдов с товарами - HTML через iframe: Сама сцена также собрана с помощью Lottie, CSS-анимации, фото в avif/webp/svg, стикеры с прямым переходом на страницу товара.

Из отдельных фич - музыка через Web Audio API. Не mp3-файлы, а живой синтез звука в браузере по заданным паттернам и темпу. Зацикленная или ограниченная по времени. Также есть Canvas-эффекты - снег, лепестки, конфетти - но лучше использовать для десктопа или лёгких слайдов.

Слайды весят 100-300 кб в среднем, простой контент в avif/webp укладывается в 50-120 кб. Виджет грузится асинхронно после основного контента страницы - не влияет на скорость загрузки. Сам контент подгружается только при открытии - грузится активный слайд и следующий.

Эффекты и контент адаптируются под устройство. На мощных смартфонах и всех ПК - полный стек анимаций, Canvas, музыка. На устаревших моделях - упрощённая музыка или отключена совсем, также без канваса и облегчённые CSS эффекты. На очень старых и бюджетных устройствах - вместо Lottie и HTML слайдов - просто картинки.

Управление

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

Сам блок виджета можно скрыть, а потом вызвать повторно - маленькая стрелка не мешает использованию сайта. Состояние скрытия сохраняется на всех страницах.

Аналитика

Все действия пользователя - открытие, скрытие, переходы по товарам - пишутся в Яндекс.Метрику. Можно использовать эти данные в ретаргетинге в Директе. Есть и внутренняя аналитика, которая сохраняет длительность просмотра, вовлечённость, процент открытий по слайдам. Можно настроить еженедельную автоотправку в Telegram и корректировать контент по реальным данным. К сожалению, для полной реализации у меня нет времени( Статистика записывается, но не используется.

Итог

По статистике большинство пользователей оформивших заказ так или иначе взаимодействовали с виджетом, если не учитывать скрытие. Сторис я использую на постоянной основе - для акций, важной информации, общения с клиентами.

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