3D на сайте продаёт, когда буквально рассказывает историю вашего дела: товар собирается, помещение оживает, путь клиента виден. Мешает, когда это украшение без сюжета, которое тормозит на телефоне и прячет главное. Любой интерактивный сайт живёт по одному правилу: движение должно объяснять, а не развлекать.
Что такое интерактивный сайт и 3D-сцена
Интерактивным называют сайт, который отвечает на действия человека: прокрутку, движение курсора, касание, клик. Уровни бывают разные:
- простой: кнопки реагируют на наведение, блоки плавно появляются при прокрутке;
- средний: калькулятор или конструктор, где вы меняете параметры и сразу видите результат, например считаете стоимость уборки или подбираете цвет мебели;
- самый заметный: 3D-сцена.
3D-сцена — это объёмная модель прямо в браузере, без видео и плагинов. Её можно вращать и приближать, а главное — привязать к прокрутке: вы листаете страницу, и в сцене что-то происходит. Технически это WebGL, но вам важно другое: что именно происходит в сцене и что это говорит о вашем бизнесе.
Главный принцип: 3D рассказывает историю дела
Проверка простая: сцену можно пересказать одной фразой про ваш бизнес. Если фраза не складывается, сцена не нужна, какой бы красивой она ни была.
Примеры интерактивных сайтов из наших работ
- Магазин моторных масел. Прокрутка раскручивает мотор на огромном тахометре. С ростом оборотов на шкале сменяются линейки масел, а на отсечке срабатывает ограничитель: вспышка и дым от шин на весь экран. Ассортимент, который в каталоге был бы списком, складывается в одну историю.
- Производитель кованых дисков. Прокрутка показывает производство одного диска: слиток проходит пресс, токарную обработку и фрезеровку на ЧПУ, окраску и в финале становится колесом. Человек своими глазами видит, откуда берётся цена кованого диска.
- Клининговая компания. Квартира в разрезе сначала грязная. Прокрутка запускает генеральную уборку по чек-листу компании: волна чистоты идёт из комнаты в комнату, а пункты списка отмечаются один за другим. Клиент видит, что входит в уборку, ещё до звонка.
- Кинотеатр. Луч проектора идёт за курсором и проявляет на экране афишу премьеры. Сайт с первых секунд ощущается как зал перед сеансом.
В каждой из этих сцен видно само дело компании, а не абстракцию. Такая сцена работает как продавец, а не как обои.
Что не продаёт
- Логотип или название в 3D. Надпись крутится и блестит, а реакция у зрителя одна: «ну надпись, и что?»
- Атмосферные эффекты. Пятно света из окна, дымка, летающие частицы. Красиво, но о вашем деле не говорит ничего.
- Абстрактные фигуры, которые подошли бы любому сайту в интернете.
Где 3D мешает
Есть три типичных случая, когда сцена работает против продаж.
Каталог интернет-магазина
Человек пришёл найти товар, сравнить цены и купить. Любая сцена между ним и каталогом становится помехой. В работе для магазина штор первая версия начиналась с интерактивного 3D-окна. Красиво, но при прокрутке было непонятно, что здесь вообще продают. Мы заменили сцену обычным первым экраном: фото интерьера, заголовок, две кнопки. В магазине 3D уместно точечно: показать товар со всех сторон или собрать его в конструкторе.
Первый экран, который не читается за 2 секунды
За первые секунды человек решает, остаться или уйти. За это время он должен понять, что это за компания, что она предлагает и куда нажать. Если заголовок появляется только после вступительной анимации, а кнопку закрывает сцена, 3D работает против вас. Правило простое: текст первого экрана виден сразу, а сцена живёт рядом или начинается ниже.
Когда сцена прячет главное
Цены, контакты и кнопка заявки не должны ждать конца длинной анимации. Если ради телефона нужно пролистать весь сюжет, часть людей до него не дойдёт. Сюжет идёт своим ходом, а главное всегда под рукой: в шапке или в закреплённой кнопке.
Как создать интерактивный сайт и не потерять скорость
Вот как сделать анимацию на сайте, чтобы она не мешала:
- Текст в HTML, 3D потом. Заголовок, описание и кнопки — обычная разметка, которая появляется сразу. Сцена загружается, когда первый экран уже нарисован. Если 3D не загрузится вовсе, человек всё равно всё прочитает.
- Облегчённая версия для телефона. Меньше деталей в модели, проще свет и тени, ниже разрешение. На слабых устройствах сцену можно заменить картинкой или коротким видео.
- Уважение к настройке «Уменьшить движение». Некоторым людям от движения на экране становится плохо, и они включают эту настройку в телефоне или компьютере. Сайт должен её замечать и вместо анимации показывать спокойные статичные состояния.
- Лёгкие модели и текстуры. Модели упрощают, текстуры сжимают, всё лишнее из сцены убирают.
- Движение по делу. Двигается то, что объясняет: появляется цифра, собирается товар. Остальное спокойно стоит на месте.
Простые эффекты вроде появления блоков делают на CSS. Сюжет по прокрутке и 3D делают на JavaScript: сцену рисует WebGL, а прокрутку с ней связывает отдельная библиотека.
Сцену мы проверяем сначала на обычном телефоне с мобильным интернетом, а не на мощном компьютере. Если на телефоне она дёргается, упрощаем её, пока движение не станет плавным.
SEO не страдает, если текст в разметке
Яндекс читает текст страницы, а не картинку внутри сцены. Всё, что нарисовано в 3D, для поиска не существует. Поэтому смысл страницы (заголовки, описание услуг, цены, контакты) живёт в обычной разметке, а 3D добавляется поверх. Тогда сцена продвижению не мешает. У сайта с 3D такое же ядро запросов, такая же структура страниц и такие же title и description, как у любого другого.
Мешать может только скорость. Если страница долго грузится, люди уходят обратно в поиск, а Яндекс это учитывает. Так что правила из предыдущего раздела нужны ещё и для SEO. Как Яндекс оценивает сайт, мы разобрали в статье «SEO-продвижение простыми словами».
Как понять, нужно ли 3D вашему сайту
Ответьте на четыре вопроса:
- Можно ли показать ваше дело предметом или процессом? Товар, производство, помещение, этапы услуги. Если да, есть из чего строить сцену.
- Клиент выбирает или срочно покупает? 3D помогает, когда человек сравнивает и решает. Когда ему нужно быстро найти товар и оформить заказ, сцена мешает.
- Есть ли что показать? Фото, чертежи, факты. Без настоящих материалов сцена превращается в абстракцию.
- Что человек сделает после сцены? Если ответа нет, сцене не к чему вести.
Если на первые три вопроса ответ «да», а на четвёртый ответ есть, 3D, скорее всего, будет работать на продажи. Если нет, правильнее сделать обычный быстрый сайт с хорошими фотографиями.
Что нужно от вас
- История дела. Как устроена ваша работа: из чего делается продукт, какие этапы у услуги, что клиент получает в конце. Сюжет сцены мы ищем именно здесь. Для кинотеатра, например, луч проектора подсказала легенда бренда с их же сайта.
- Настоящие материалы. Фото товаров и работ, логотип в векторе, фирменные цвета. Если есть чертежи или 3D-модели изделий, сцена получится точнее.
- Факты. Цены, характеристики, этапы, которые можно показать. Цифры в сцене будут только ваши, ничего не придумываем.
- Цель. Что человек должен сделать после сцены: оставить заявку, позвонить, выбрать товар.
Концепт главной с 3D-сценой мы показываем до договора, бесплатно: вы видите своё дело в 3D раньше, чем платите. Другие работы собраны в разделе «Работы», а как мы делаем такие сайты, рассказываем на странице «Сайты с 3D и анимацией».
