Сайт к запуску продукта должен решить шесть задач в таком порядке: привлечь внимание роликом на первом экране, дать рассмотреть товар, желательно в 3D, показать, что он существует, ответить на вопросы о характеристиках, сделать предложение и собрать контакты тех, кто пока не готов купить. До запуска это страница со списком ожидания. В день старта она должна быстро загружаться при резком наплыве посетителей, отслеживать каждый клик и сохранять основные функции, даже если часть возможностей недоступна.
Шесть разделов страницы запуска продукта
| # | Раздел | Задача | Частая ошибка |
|---|---|---|---|
| 1 | Ролик на первом экране | За 5 секунд представить появление продукта как событие | Видео размером 40 МБ, которое блокирует страницу |
| 2 | Товар в 3D | Дать рассмотреть форму, отделку и размер | Вращающаяся модель, в которой нечего изучать |
| 3 | Доказательства | Показать, что товар существует и работает | Шаблонные отзывы, хотя товаром ещё никто не пользовался |
| 4 | Характеристики | Ответить на вопросы «А он умеет...?» | Размеры и цена спрятаны в PDF |
| 5 | Предложение | Цена, версии, дата отправки и кнопка | До цены нужно прокрутить пять экранов |
| 6 | Список ожидания / уведомление | Собрать контакты тех, кто пока не готов купить | Форма с восемью полями |
1. Ролик на первом экране
Ролик на первом экране работает как трейлер, а не как полноценная реклама: зацикленное видео или версия на 6-15 секунд показывает товар и передаёт его позиционирование одной фразой. На сайте видео должно запускаться автоматически без звука и проигрываться прямо на странице. WebKit от Apple позволяет видео без звука с playsinline автоматически запускаться на странице в iOS. Без этих атрибутов iPhone покажет кнопку воспроизведения.
Как выстроить полный ролик шаг за шагом, разбираем в примерах видео к запуску продукта.
2. Товар в 3D
В этом страница запуска даёт больше, чем публикация в соцсетях. Дайте посетителю повернуть товар, сменить отделку или рассмотреть изделие в разборе с помощью прокрутки. Анимация с управлением при прокрутке хорошо подходит для этой задачи, если каждый шаг объясняет что-то новое. Как её спланировать, показываем в примерах сайтов со скроллителлингом. Способы встраивания, от model-viewer до собственного решения на Three.js, разобраны в статье о размещении интерактивной 3D-модели на сайте.
3. Доказательства
До запуска отзывов ещё нет. Используйте то, что можете показать сами: реальные кадры товара в работе, происхождение материалов, цитаты прессы или продавцов, команду, условия гарантии. Никогда не выдумывайте отзывы.
4. Характеристики
Размеры, вес, материалы, совместимость, содержимое коробки. Разместите их текстом в HTML, а не внутри canvas или изображения, чтобы информацию находили поисковики и читали скринридеры.
5. Предложение
Цена, версии, дата отправки, условия возврата и одна основная кнопка. На мобильных устройствах продублируйте её в закреплённой панели. Для предзаказа укажите, когда товар отправят и когда деньги спишутся с карты.
6. Список ожидания или «Уведомить меня»
Только email, одно поле. Объясните, что получит человек: ранний доступ, определённую версию товара или дату запуска. Сразу подтверждайте адрес.
От анонса к запуску и постоянной карточке товара
Сохраняйте один URL на всех этапах:
- Анонс за несколько недель: зацикленный ролик на первом экране, одна фраза, список ожидания. Почти ничего больше.
- За несколько дней до запуска: добавьте товар в 3D, характеристики и дату.
- Запуск: в заданное время замените список ожидания предложением о покупке. Лучше заранее запланировать публикацию, чем редактировать страницу вручную в полночь.
- После запуска: страница становится постоянной карточкой товара и сохраняет все полученные ссылки.
Что проверить к дню запуска
Нагрузка
- Статичные или кэшированные страницы на CDN, чтобы всплеск нагрузки принимали ближайшие узлы сети, а не ваш сервер.
- Видео сжато и размещено на видео-CDN, а заставка появляется сразу.
- Целевые показатели скорости: Google считает хорошими LCP в пределах 2,5 с, INP не более 200 мс и CLS не более 0,1. Значения оценивают по 75-му процентилю посещений.
- 3D после первого отображения содержимого. В руководстве Utsubo по SEO для WebGL отмечено, что на первом экране с Three.js «LCP-элементом обычно становится canvas». Авторы рекомендуют сначала показать обычное изображение или заголовок и лишь затем 3D. После этого отложенно загружайте 3D-модуль.
Аналитика
- События для запуска ролика на первом экране, взаимодействия с 3D, открытия характеристик, записи в список ожидания, добавления в корзину и начала оформления заказа.
- Правила UTM-разметки согласованы с теми, кто ведёт рекламу и email-рассылки, ещё до запуска.
- Пробный прогон на тестовом сайте с настоящими покупками и последующим возвратом средств.
Запасные варианты
- Статичное изображение, если WebGL недоступен или устройство слишком слабое.
- Учитывается
prefers-reduced-motion(MDN). Для автоматически движущегося содержимого длительностью более пяти секунд предусмотрена пауза: этого требует критерий 2.2.2 WCAG 2.2 уровня A. - Каждый раздел можно прочитать как обычный HTML, если JavaScript не сработает. Действует правило Utsubo: каждое содержательно значимое состояние страницы должно быть доступно поисковому роботу в разметке ещё до запуска рендеринга.
- Заранее подготовлен вид страницы на случай, если товар закончится, с возможностью снова включить список ожидания.
