Движущиеся фоны: когда, зачем и как их использовать

Движущиеся фоны Изучение

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

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

Привлекательность видео не ограничивается социальными сетями. Перемещение элементов на ваших целевых страницах дает пользователям возможность мгновенно связаться с вашим брендом. Вот еще несколько статистических данных по веб-дизайну, которые стоит знать:

  • Различные исследования показывают, что видео могут увеличить конверсию целевой страницы примерно на 80%.
  • Покупатель, который смотрит видео, почти в два раза чаще совершает конверсию, чем покупатель, который этого не делает.
  • Две трети людей предпочли бы прочитать что-нибудь красиво оформленное, чем что-то простое.

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

Когда использовать движущийся фон

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

Например, если вы предлагаете что-то сложное, видео с большей вероятностью отвлечет от понимания. Если вы предлагаете что-то серьезное — например, финансовый совет, правительственную информацию или что-то еще, связанное со здравоохранением, — видео просто кажется… неправильным. Точно так же, если вы практичный сайт — например, продуктовый магазин или сайт проката инструментов — тогда скорость, вероятно, важнее, чем создание определенной атмосферы.

С другой стороны, если ваш бизнес направлен на создание определенного настроения, то движущийся фон может быть идеальным.

Мы используем его в Chromatix, потому что мы агентство креативного дизайна, а игривость и красота очень привлекательны для наших клиентов.

Бренды роскошного образа жизни часто используют движущиеся фоны для хорошего эффекта, потому что люди покупают опыт, а не продукт. То же самое касается конференций и мероприятий, спа, ретритов, аренды на время отпуска и так далее.

Читайте также:  Смарт-контракты на блокчейне: текущие вызовы и перспективы на будущее

Вот три причины использовать движущийся фон:

  • задать тон
  • излучать образ жизни
  • вызвать эмоциональную реакцию

Вот три причины не использовать движущийся фон:

  • потому что все остальные делают это
  • потому что статистика конверсий говорит мне, что это даст хорошие результаты
  • а также потому что это выглядит красиво

Как успешно добавить движущийся фон на главную страницу

Независимо от того, создаете ли вы свой сайт с нуля, используете WordPress или работаете с конструктором веб-сайтов с перетаскиванием, вот несколько советов, которые помогут вам сделать это правильно.

1. Не позволяйте вашему сайту замедляться

Отправка посетителя на медленный сайт — плохая новость для числа ваших сайтов: 39% людей покидают веб-сайт, если изображения загружаются слишком долго. Это один из главных факторов ранжирования SEO. Коэффициент конверсии загружаемых страниц медленно падает в среднем на 4,42% с каждой дополнительной секундой загрузки (в течение первых пяти секунд).

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

  • Оптимизируйте свои изображения. (Ознакомьтесь с подробными советами на сайте Jump Start Web Performance от SitePoint.)
  • Сжимайте файлы и управляйте собственным кешированием. (Это может быть сложная работа, но могут помочь такие инструменты, как Nitropack.)
  • Зациклите свое видео. Когда дело доходит до зацикливания вашего видео, имейте в виду, что большие видео замедлят работу вашего сайта — и, как мы упоминали ранее, медленная загрузка сайта приводит к резкому падению коэффициента конверсии. Один из способов сохранить скорость — сделать более короткое видео, которое зацикливается. Постарайтесь нацелиться на 5–10 секунд, а затем плавно и непрерывно зацикливать, чтобы создать впечатление, что оно длиннее, чем есть на самом деле. Помните: вы просто пытаетесь создать настроение, а не показываете фильм или рекламу.

2. Держите призыв к действию четким

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

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

Читайте также:  Как загрузиться в режим восстановления в Ubuntu?

3. Убедитесь, что текст читаем

Вы когда-нибудь смотрели фильм с белыми субтитрами только для того, чтобы снежная сцена появлялась и поглощала текст? Хорошо, это довольно нишевый пример, но вы уловили идею: тщательно выбирайте цвет текста, когда он переходит на видео, потому что изображение перемещается, а текст должен быть читаемым в каждом кадре. Выбирайте контрастные цвета, чтобы сообщение не потерялось, как белые субтитры на снегу.

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

4. Выберите фон, который подчеркнет ваше сообщение

Движущийся фон может отвлекать внимание. Вот почему они нам нравятся! Но если они отвлекаются от вашего основного послания или цели, вы скоро попадете в неспокойную воду.

Выбирая видео, не выбирайте то, что выглядит красиво. По-настоящему подумайте о том, чтобы выбрать то, что имеет отношение к вашему общему посланию или бренду — и, прежде всего, то, что понравится вашему целевому рынку. Ваш движущийся фон должен улучшать сообщение вашей домашней страницы, а не отвлекать его.

5. Будьте осторожны со звуком

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

Последние мысли

Перемещение фонов может быть отличным способом усилить сообщение вашего бренда и привлечь пользователей на ваш сайт. У них есть возможность повысить вовлеченность, поднять ваши показатели конверсии до небес и создать непреодолимо захватывающий опыт. Но используйте их с осторожностью. Они могут замедлить работу вашего сайта, поэтому обязательно изучите, как лучше всего ускорить работу. И если вам действительно не нужен движущийся фон, придерживайтесь статических изображений и текста. Делать то, что лучше всего подходит для вас и ваших пользователей, всегда будет лучшим вариантом.

Оцените статью
bestprogrammer.ru
Добавить комментарий