Видео на первом экране сайта выглядит эффектно на компьютере дизайнера с быстрым интернетом. У клиента на телефоне в маршрутке оно может выглядеть как серый прямоугольник, который грузится пять секунд, пока человек уже закрыл вкладку. Разберём, когда видео действительно помогает и как сделать его так, чтобы оно не стоило заявок.
Когда видео помогает
| Бизнес | Что показать видео | Стоит ли |
|---|---|---|
| Ресторан, бар, кофейня | атмосфера зала, подача блюд | да |
| Отель, гостевой дом | вид, номер, завтрак на террасе | да |
| Экскурсии, туры | горы, монастыри, дорога | да |
| Школа танцев, фитнес | движение, тренировка | да |
| Автомойка, детейлинг | процесс и результат | да |
| Юрист, бухгалтер | человек в офисе | скорее нет, лучше фото и текст |
| Интернет-магазин | товар в деле | лучше на странице товара |
| Клиника | интерьер | можно ниже, не на первом экране |
Правило: если без видео человек не поймёт, почему вам стоит доверять или чем вы отличаетесь, видео нужно. Если видео просто «красиво», оно мешает.
Чем вы платите за видео
- Скорость. Даже сжатое видео весит больше фото. На мобильном интернете это заметно.
- Внимание. Движение отвлекает от заголовка и кнопки.
- Читаемость. Текст поверх меняющейся картинки читать сложнее.
- Батарея и трафик. На телефоне видео в цикле расходует и то, и другое.
Как скорость влияет на заявки, подробно в статье скорость сайта и заявки.
Четыре варианта первого экрана
- Фото и текст. Быстрее всего. Подходит большинству бизнесов.
- Фоновое видео в цикле. 6-15 секунд без звука, поверх затемнение и заголовок. Эффектно, если сделано легко.
- Фото с кнопкой «Смотреть». Видео грузится только по нажатию. Быстро и при этом видео доступно.
- Анимация вместо видео. Лёгкие движения элементов. Анимация в Kinto стоит от $800.
Как сделать фоновое видео лёгким
- Короткий ролик. 6-15 секунд, которые хорошо смотрятся в цикле.
- Без звука. Дорожку удаляют из файла совсем.
- Сжатие. Современный формат и разумное разрешение: фону не нужно 4K.
- Заставка. Первый кадр в виде картинки показывается мгновенно, видео заменяет его после загрузки.
- Отдельная версия для телефона. Меньше по размеру и в вертикальном или квадратном кадре.
- Не мешать главному. Заголовок, цена и кнопка видны и читаются сразу, даже если видео ещё не загрузилось.
- Пауза. Кнопка, чтобы остановить видео: это и удобство, и требование доступности.
Текст поверх видео
Видео меняется, и белый текст на светлом кадре пропадает. Решения:
- полупрозрачное затемнение поверх всего видео;
- подложка под заголовком;
- выбор кадров без резких перепадов яркости.
Остальные правила первого экрана собраны в статье первый экран сайта: 7 ошибок.
Где снимать видео
- Телефон последних лет снимает достаточно хорошо для фона. Нужны стабилизация, дневной свет и спокойные движения.
- Не используйте стоковые ролики с чужими интерьерами. Клиент приходит и видит другое.
- Для Еревана хорошо работают узнаваемые виды, если они связаны с вами: вид с террасы на Арарат, улица у входа, зал в вечернем свете.
- Люди в кадре: только с их согласия.
Видео на телефоне
Многие делают на телефоне то же видео, что на компьютере, только уменьшенное. Лучше:
- отдельный короткий вертикальный файл;
- или только заставка с кнопкой «Смотреть»;
- или видео ниже первого экрана.
Как проверить мобильную версию в целом, читайте в статье мобильная версия сайта: 12 правил.
Чек-лист
- Видео объясняет предложение, украшение тут вторично.
- Длина 6-15 секунд, звук удалён.
- Есть картинка-заставка.
- Заголовок и кнопка читаются поверх любого кадра.
- Для телефона лёгкая версия или заставка.
- Есть кнопка паузы.
- Скорость страницы проверена на мобильном интернете.
Как снять ролик для фона
Небольшой план съёмки, который подходит кафе, отелю, студии:
- Определите один главный кадр: что человек должен почувствовать за 10 секунд.
- Снимайте на штативе или с плавными движениями, без резких поворотов.
- Сделайте 3-4 коротких плана по 3-5 секунд: общий, средний, деталь, снова общий.
- Снимайте в одно время суток, чтобы свет не прыгал между кадрами.
- Оставьте в кадре спокойное место, где будет заголовок: небо, стена, стол.
- Снимите сразу и горизонтальную, и вертикальную версию.
Когда видео лучше перенести ниже
Иногда видео отличное, но первому экрану оно мешает: на нём должна быть ясная фраза о том, что вы предлагаете, и кнопка. Тогда ролик ставят во второй или третий блок, с заставкой и кнопкой «Смотреть». Человек, который уже заинтересовался, посмотрит его, а тот, кто спешит, сразу увидит главное.
Как это делаем мы
В сайтах Kinto видео на первом экране делается с заставкой, сжатием и отдельной версией для телефона, а если оно не помогает продаже, мы честно предложим фото. Лендинг стоит от $700 за 6 дней, сайт с разделами от $1 800 за 12 дней, анимация от $800. Пришлите в Telegram @kinto_am свой ролик, и мы скажем, подойдёт ли он для первого экрана.