Видео в веб-дизайне: какие задачи решает и как правильно его использовать

В задачи веб-дизайнера входит не только красивое и удобное оформление, но и грамотное размещение контента, который будет продвигать услугу или товар. И для этого часто используют видео. Во-первых, cегодня посмотреть ролик для многих пользователей привычнее и удобнее, чем читать текст. Во-вторых, такой формат контента более наглядный. Очень многие вещи проще показать, чем объяснить, а если речь о новом продукте, то нужно ещё и продемонстрировать способы его использования.

Существует популярная категория роликов под названием «футаж» — видео для заставки, параллакса, фона. Но в этой статье мы поговорим о видео, которое размещается на странице и несёт информативный характер.

Задачи видео на сайте

Это 7 основных функций, которые выполняет видеоконтент, но для отдельного продукта можно придумать ещё больше. Всё будет зависеть от контекста и целевой аудитории.

1. Увлекает пользователя, заставляя провести больше времени на сайте. Это сработает даже в случае, когда дизайн не увлёк посетителя или оказался недостаточно понятным, потому что видео — это понятная форма и его посмотрят, если продукт интересен.
2. Экономит место на странице. Если объяснять текстом долго или непонятно — используйте видео. А основные моменты оформить тезисно в текстовом формате.
3. Поднимает сайт выше в поисковой выдаче. Наличие видео автоматически делает сайт более просматриваемым, а при запросе ссылка на видео будет в начальных страницах. 
4. Повышает доверие. Если видео снято самой компанией и содержит реальный процесс работы, обращение сотрудников, данные о производстве и прочее — это поможет превратить безликую компанию в более человечную, понятную и создать иллюзию знакомства. 
5. Играет на эмоциях. Даже самый простой товар можно подать круто, если продемонстрировать потенциальному покупателю красивую картинку шикарной жизни, которую он получит вместе с этим продуктом.
6. Если ролик позитивный, то он улучшает настроение, а значит, и лояльность. Чем больше ролик понравится пользователям, тем популярнее и вируснее, а это уже бесплатная реклама и повышение посещаемости сайта.
7. Демонстрирует экспертность команды. Если в видео будет демонстрация навыков, мастер-класс, полезная информация или обучающий вебинар, то посетитель уже получает понимание об уровне профессионализма компании. И после этого гораздо легче довериться и заплатить за продукт. Поверьте, мы точно знаем, о чём говорим — на платформе WAYUP размещаются бесплатные вебинары с интересными уроками. Потенциальные ученики смотрят видео, понимают, как будет строиться обучение, а потом приобретают курс.

Любую из этих задач можно свести к основной — повышению эффективности сайта. Но это волшебство действует при определенных условиях. Просто вставить рандомный ролик на страницу — это не решение.

Как правильно использовать видео

Вот несколько моментов, которые нужно учитывать:

Соблюдение фирменного стиля

Важно использовать корпоративные цвета, логотип на фоне, общее настроение. Если есть надписи, то используйте шрифты из брендбука. Задача такова — если видео смотрят без привязки к сайту (например, на другом ресурсе или его переслали сообщением), то в нём должен узнаваться бренд. 

Длина видео

Конечно, если это мастер-класс или урок, то он будет длиться столько, сколько нужно. Хотя и в этом случае больше 60-80 минут будут утомительными. Желательно размещать короткие ролики. Если это знакомство/информация/реклама, то 1-3 минут — оптимально. Обзоры и способы использования — до 10 минут. Смотрите по ситуации, ведь универсального правила нет. Но знайте, что длинные ролики вряд ли досмотрят до конца.

Адаптивность

Продумайте красивое размещение на любых экранах, а ещё его вес и скорость загрузки. Если использовать видео, то оно должно легко воспроизводиться во всех ситуациях. Важен и размер, и разрешение: cлишком высокое качество может плохо смотреться при сжатии, а слишком низкое не подойдёт для ПК. Удобно размещать ролики на YouTube и потом внедрять в сайт — сервис сам удачно адаптирует видео. Но это не всегда подойдёт по стилю и функционалу.

Автовоспроизведение

Позвольте пользователю самостоятельно включать видео. Автоматическое воспроизведение не просто раздражает, но и может стать причиной закрытия сайта — когда внезапно в офисе из рабочих колонок вдруг включиться реклама просматриваемого ресурса. Что делают в таких случаях? Быстро устраняют проблему закрытием вкладки.

Можно применить автозапуск, если по умолчанию звук выключен. Очевидно, что это уместно, когда используется красивый видеоряд, который можно смотреть и без аудиодорожки, и с любого места.

Информативность 

Не размещайте в видео прямую рекламу. Если это ролик про «купи прямо сейчас», то зачем его смотреть? Эта информация будет в объявлениях, а на сайте и так достаточно призывов к действию и предложений. В видео должна быть либо полезная информация, либо поясняющая преимущества. 

Используйте реальное видео компании 

Это всегда лучше, чем стоковые видео. Пусть будет видео с сотрудниками, процесса упаковки или предоставления услуги. Такой ход повышает доверие. 

Но есть нюанс — ролик должен быть качественным. Компании необходимо нанять специалиста, который умеет красиво снять, грамотно смонтировать и соблюсти при этом требования по стилю и современные тренды. Но так как это стоит денег, не все готовы на дополнительные затраты. 

Ещё не у всех есть желание что-то показывать, а иногда попросту и нечего. Что делать в таком случае? Не нужно отказываться от видео на сайте, если его не предоставит компания. Можно взять качественный ролик со стока и показать, например, видео из Парижа на сайте путешествий, подарки под ёлкой для новогодней акции и прочие стандартные ситуации. Для этого не нужно тратить деньги на живые съёмки. Если стоит задача передать атмосферу, то видеосток станет палочкой-выручалочкой.

15 ресурсов с бесплатными видеороликами

В подборке стоков есть сайты с полностью и частично бесплатным контентом. Что важно: обращать внимание на лицензию. Если вы берёте видео для сайта, то должно быть разрешение применять контент в коммерческих целях без указания авторства.

1. Coverr
2. Pexels
3. Pixabay
4. Dareful
5. Mixkit
6. Splitshire
7. Vidsplay 
8. Videvo
9. Life of vids
10. Mazwai
11. Pikwizard
12. Beachfront B-Roll
13. Videezy
14. Vecteezy
15. Elements Envato

На сайтах можно также найти видео для футажа и отдельных кадров, если вы сами монтируете ролик.

Где разместить видео?

Есть несколько способов применения видеоконтента на сайте. Можно применять сразу несколько, но желательно не все сразу.

Место размещения ролика на странице зависит от характера контента. Важно грамотно вписать его в воронку продаж и усилить предложение, а не распылить внимание пользователя. Вот куда можно вставить видео:

• Первый экран. Если «показать товар лицом» — главная задача, то можно на первом экране вставить видео. В этом случае лучше фоновый ролик, чем информационный. А если предусмотрено обращение, то сделайте первый экран по классике, а уже ниже ставьте видео. 
• Демонстрация. После знакомства с продуктом можно показать ролик с его применением. Если продукт подразумевает варианты до и после, то обязательно сделайте именно такой формат. Он приносит больше всего конверсий и просмотров.
• Отзывы. Отличная идея, когда хочется показать, что отзывы реальны. Особенно классно, если в роликах с отзывами будут разные люди — представители целевой аудитории всех возрастов и социальных групп. Тогда пользователь будет ассоциировать себя с ними. Фишка этого типа видео в том, что оно необязательно должно быть высокого качества. Наоборот, профессиональная съёмка может насторожить. Поэтому если нет бюджета на операторскую работу, это станет хорошим решением.
• Карточка товара. Красиво, когда товар можно рассмотреть со всех сторон или видеть его применение. Наряду с фотографиями разместите видео — это отличный маркетинговый ход.
• В качестве FAQ. Есть частые вопросы или требуется отработка возражений? Можно решить это обращением менеджера или владельца компании. Расскажите дополнительно, например, о продукте. Этот ролик особенно пригодится для «крепких орешков», которые всё ещё не готовы к заказу. Такого рода контент используются в качестве контрольного выстрела и сопровождаются кнопкой призыва к действию рядом.
• Thank you page. Оригинальный подход — вместо сухих слов о принятии заказа добавить ролик с благодарностью от команды на страницу Success. Эти ролики можно менять в зависимости от сезона/праздника/события. Тут может быть и официальность, и юмор — в зависимости от проекта. 
• Развлекательный контент. Чаще применяется либо в самом конце страницы, либо как сопроводительный элемент для текстового блока. Смешные ситуации часто случаются в любой деятельности и если их обыграть в ролике, то улыбка пользователя гарантирована. А вместе с ней рост лояльности к бренду и повышение шанса на заказ.

Для грамотного размещения видеоконтента нужно разбираться в вопросах интернет-маркетинга, UX/UI дизайне, правилах композиции и прочих секретах качественного веб-дизайна. Хотите научиться? Записывайтесь на онлайн-коучинг: «Веб-дизайнер: счастливый билет в Таиланд».