Иммерсивный сайт создаёт эффект погружения с помощью 3D в реальном времени, анимации, звука или сцен, которые меняются при прокрутке. Посетитель словно оказывается внутри продукта, а не просто читает о нём. Это помогает продажам, когда решает задачу, с которой обычная страница справляется хуже: объясняет устройство продукта, помогает выбрать или делает бренд запоминающимся. Если такой задачи нет, остаётся декоративный эффект, который замедляет сайт.
Проверить идею можно простым способом. Разберём его и посмотрим, какие приёмы работают, а какие этой проверки не проходят.
Что такое иммерсивный сайт простыми словами
На таком сайте действия посетителя меняют происходящее на экране: прокрутка двигает камеру, курсор изгибает поверхность, перетаскивание поворачивает товар. Обычно за это отвечает WebGL, позволяющий браузеру рисовать 3D с помощью видеочипа, и библиотеки вроде Three.js. Главный признак такого сайта - реакция на действия человека. Само по себе наличие 3D ещё не создаёт погружения.
Проверка идеи: помогает понять, купить или запомнить?
Прежде чем согласовать идею с эффектом погружения, задайте три вопроса. Хотя бы на один нужен убедительный положительный ответ.
| Вопрос | Проверка пройдена, если... | Пример |
|---|---|---|
| Помогает понять? | Посетитель разбирается в продукте быстрее, чем по тексту и фотографиям | Вид с разнесёнными деталями показывает, как устроен товар |
| Помогает купить? | Отвечает на вопрос покупателя: о размере, отделке, совместимости или наличии | Конфигуратор; модель дома, где подсвеченные окна обозначают свободные квартиры |
| Помогает запомнить? | На следующий день человек сможет рассказать об этом кому-то ещё | Один выразительный эпизод презентации, связанный с идеей продукта |
Показанное выше превращение частиц - пример пограничного случая. Если частицы складываются в логотип, это может помочь запомнить бренд, но эффект будет слабым. Если они сначала собираются в товар, а затем расходятся, показывая его внутреннее устройство, появляется и объясняющая функция.
Приёмы, которые оправдывают себя
- Товар, который можно повернуть. 3D-модель в реальном времени с достоверными материалами позволяет рассмотреть заднюю сторону, подошву или шарнир. Так покупатель получает ответы, которых не дают фотографии.
- Здание как инструмент выбора. В демонстрационном проекте жилого дома в Таллинне мы сделали так, что каждое подсвеченное окно на вечерней модели обозначает квартиру. При наведении появляются число комнат, площадь, цена и статус. Сама 3D-модель служит списком квартир. Подробнее рассказываем в статье о 3D-сайтах для недвижимости.
- Рассказ с управлением прокруткой. Камера движется через пространство или показывает товар изнутри, а короткие тексты поясняют каждый этап. Рассказ остаётся в HTML, 3D-сцена помогает его понять.
- Один интерактивный первый экран. Поверхность реагирует на курсор, после чего эффект уступает место содержанию страницы и покупке.
Больше вариантов собрали в подборке сайтов на WebGL.
Когда эффект погружения мешает
- Заставка на входе. Сначала индикатор загрузки, затем 3D-вступление, и только потом меню. Посетители, которые пришли узнать цену, уходят.
- Поиск навигации в пространстве. Чтобы найти контакты, человеку приходится бродить по 3D-комнате. Обычное понятное меню должно быть доступно всегда.
- Анимация без статичной альтернативы. Крупные движения, привязанные к прокрутке, могут вызывать головокружение или тошноту. В одном обзоре признаки нарушения равновесия выявили у 35% взрослых жителей США в возрасте от 40 лет. Учитывайте настройку prefers-reduced-motion и предусмотрите статичный вариант. WCAG 2.2 также требует возможности приостановить, остановить или скрыть движущийся контент, который запускается автоматически и длится более пяти секунд (критерий 2.2.2, уровень A).
- Пустая страница для Google. Если весь текст нарисован внутри canvas, поисковику нечего читать. В руководстве Utsubo по SEO для WebGL рекомендуют сначала отдавать страницу в HTML, а 3D загружать отложенно, после первого отображения.
- Ориентир только на компьютер. Большинство посетителей приходит с телефона. Сцена, которая плавно работает на студийном ноутбуке, может тормозить на Android среднего класса.
Как сохранить скорость сайта с эффектом погружения
Google считает показатель Largest Contentful Paint хорошим при 2,5 секунды или меньше. На 3D-сайтах крупнейшим элементом часто становится canvas. Способы ускорить страницу известны:
- Сначала показывайте HTML и изображение, а готовую 3D-сцену подставляйте позже.
- Сжимайте модели: glTF со сжатием геометрии Draco и текстурами KTX2.
- Запускайте сцену, только когда она появляется на экране, и приостанавливайте, когда она выходит из области просмотра.
- Задавайте ограничения по производительности каждой сцены до начала дизайна.
Иммерсивные сайты и профессиональные награды
В подборках конкурсных сайтов преобладают иммерсивные проекты. Это может подталкивать команду к зрелищности ради самой зрелищности. Жюри действительно оценивает мастерство, но 30% оценки приходится на удобство использования. Этот баланс разбираем в статье о дизайне сайтов для Awwwards.
