Что такое Splash Page?

Splash page — это introductory screen, который пользователи видят при посещении вашего сайта. Она используется для продвижения предложений, отображения предупреждений или отказов, а также для привлечения внимания к актуальным объявлениям.

Что должно быть на Splash Page?

Элементы дизайна и использования Splash Page

Типичная splash page включает в себя высококачественные изображения и иллюстрации, заголовок с ценностным предложением, немного текста и призыв к действию с формой для отправки. Три самых важных элемента splash page:

• Высококачественные визуальные элементы
• Минимальный (но важный!) текст
• Призыв к действию (CTA)

Высококачественные визуальные элементы

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

• Фоны
• Фотографии продукта
• Видео или анимация (но будьте осторожны с этими элементами — они могут замедлить загрузку или не отображаться для пользователей с включенным блокировщиком рекламы)

Минимальный (но важный!) текст

Сделайте ваш текст коротким и ориентированным на действие. Не заставляйте посетителей читать большие блоки текста перед тем, как они смогут получить доступ к сайту; скорее всего, они нажмут кнопку "назад" и найдут то, что им нужно, в другом месте. Ясно ли ваша splash page объясняет предложение, которого ваши посетители не могут получить с главной страницы или контента? Если нет, пересмотрите необходимость в splash page.

Призыв к действию (CTA)

CTA помогает вашим клиентам быстро принять решение и вернуться к тому, зачем они пришли (например, на главную страницу или контент). Убедитесь, что у вас также есть возможность выхода где-то на вашей splash page. Возможность выхода позволяет пользователям получить доступ к сайту без предоставления адреса электронной почты. Если вы заставляете пользователей вводить адреса электронной почты или переходить к другому предложению, они уйдут с сайта без принятия каких-либо действий.

Что еще вы разместите на вашей splash page, зависит от вашей цели. Дополнительная информация может включать:

• Проверку возраста для доступа к сайту
• Предупреждения о чувствительном контенте
• Требования для лучшего пользовательского опыта на вашем сайте (например, включение звука, использование Flash Player, работа в определенном браузере и т.д.)
• Запрос ввести адрес электронной почты...
• В обмен на купон скидки
• Для доступа к загрузке контента
• Для подписки на блог или рассылку

Splash Page vs. Landing Page: Основные различия

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

Splash page и landing page имеют разные цели. Splash page направлена на привлечение пользователей к конкретному CTA, сбор контактной информации и/или предоставление ценной информации посетителю. Post-click landing page — это отдельная страница, созданная для конкретной цели конверсии, например:

• Вход в конкурс
• Подписка на рассылку
• Регистрация на вебинар
• Загрузка контента

Пример landing page

Страница регистрации на вебинар MautiBox и Typeform. Когда вы нажимаете на ссылку в электронном письме, блоге или социальной сети, рекламирующую вебинар, вы попадаете на эту страницу. Страница была разработана с одной целью — сбор регистраций на вебинар. Хотя эта страница технически находится на сайте MautiBox, она не имеет навигации или ссылок на другие части сайта. Пользователи попадают на landing page, введя кампанию-специфический URL или нажав на конкретный призыв к действию в электронном письме, рекламе или социальной сети. Landing pages часто разрабатываются в соответствии с темой и сообщением конкретной кампании.

9 примеров splash page для вдохновения

Вот 9 примеров splash page для вдохновения вашего собственного дизайна (и то, что каждый из них делает правильно).

1. Splash page для проверки возраста (Tito’s)

Вы можете проверить возраст с помощью простого вопроса "да" или "нет", как этот, или запросить ввод даты рождения. (Все на основе честного слова, конечно.)

• Что эта страница делает правильно:
  • Она в стиле бренда. Дизайн использует логотип, цвета и шрифты Tito’s Vodka, а также общий стиль "Техас, но с изыском".
  • Простая и понятная. Каждый кусок текста имеет свою цель. Параграф под заголовком было бы слишком много текста; больше посетителей выйдут, не продолжая к главной странице.
  • Нет ссылки на выход. Я только что рассказал вам, как важна ссылка на выход. Но вот исключение: Поскольку это ограниченный контент, вы не хотите давать пользователям возможность пропустить эту страницу.

2. Простой подписка на рассылку (Digiday)

Splash page-стиль перекрытие на блоге Digiday.

• Что это перекрытие делает хорошо:
  • Объясняет пользователю, что он подписывается. Помимо топ-новостей каждый день, посетители могут настроить свой опыт, выбрав, получать ли им информацию о программах и мероприятиях Digiday.
  • Две ссылки на выход. Это делает легко вернуться к статье, которую вы пришли читать. (Которая все еще видна за перекрытием.)
  • Четкий CTA. Вы можете подписаться на рассылку или продолжить на сайт. Выбор за вами.

3. Вкусная подписка на рассылку (Gimme Some Oven)

OptinMonster позволяет создавать магниты для подписки, такие как это простое перекрытие.

• Что это перекрытие делает хорошо:
  • Заманчивые визуальные элементы. Как выглядят эти тако? Идеальное изображение для блога с рецептами.
  • Четкий, понятный текст. Здесь ясно предложение: если вы поделитесь своим именем и адресом электронной почты, вы получите новые рецепты.

4. Подписка на рассылку для мобильных устройств (Tom Ford)

В словах Jay-Z: "Я — Tom Ford". И Tom Ford великолепен в мобильной адаптации перекрытия.

• Что это перекрытие делает хорошо:
  • Оно мобильно-оптимизировано. На изображении выше — это мобильная версия сайта Tom Ford. Более половины всех просмотров веб-страниц происходят с мобильных устройств; отсутствие мобильно-оптимизированного перекрытия или splash page означает, что вы пропускаете половину всех посетителей.
  • Запрашивает только одно. Одно поле — адрес электронной почты — делает легким для посетителей подписаться быстро, а затем вернуться к покупкам. Не просите посетителей делать больше, чем необходимо для хорошего пользовательского опыта.

5. Страшновато-заманчивая подписка на рассылку (Killstar)

Идеальное перекрытие для празднования Хэллоуина круглый год.

• Что это перекрытие делает хорошо:
  • Веселые, в стиле бренда изображения. KILLSTAR — "Компания одежды и образа жизни с ноткой темноты" — поэтому его домашняя страница перекрытие в виде гроба идеально подходит.
  • Текст, соответствующий личности бренда. KILLSTAR мог бы написать "подписаться на рассылку", но "Присоединяйся к ковену" звучит гораздо интереснее — и идеально подходит к личности бренда.

6. Подписка на рассылку в обмен на скидку (J. Crew)

Это перекрытие — двухчастное...

• Что это всплывающее окно делает хорошо:
  • Отличные фотографии продукта. Визуальные элементы здесь показывают одежду J. Crew, давая представление о том, на что можно потратить скидку в 15%.
  • Привлекающий текст. "Присоединяйся к команде" звучит весело и эксклюзивно (и является игрой на название бренда).
  • Легкий выход. Ссылка на выход в нескольких точках пользовательского опыта делает легко для посетителей продолжать покупки без ввода адреса электронной почты.

7. Запрещенный контент: загрузка отчета (Conversion Gods)

Моя VSL — это жесткая правда, но как я могу спорить с Conversion Gods?

• Что эта splash page делает хорошо:
  • Большая, яркая ссылка на выход. Если вы не заинтересованы, вы можете быть на своем пути. Опять же: делайте так, чтобы ваши посетители могли легко получить доступ к контенту, который они ищут.
  • Релевантный контент. Если вы просматриваете блог Conversion Gods, скорее всего, вы заинтересованы в изучении "секретов увеличения конверсии", предложенных в этом загрузке.
  • Простой дизайн. Здесь нет ярких GIF или анимации, что означает, что страница выглядит отлично на всех устройствах и не замедляет загрузку.

8. Выбор языка (Zara)

Международный выбор языка для международного бренда.

• Что эта splash page делает хорошо:
  • Красивые, в стиле бренда визуальные элементы. Zara — это бренд одежды; эта splash page кричит о моде.
  • Почти нет текста. (Кроме предупреждения о куках, которое должно быть на каждом сайте, использующем куки.) Минимальный текст делает еще более визуально привлекательной.
  • Четкая цель. Для того чтобы предоставить вам лучший опыт покупок, сайт должен знать ваш язык и местоположение.

9. Счетчик до нового альбома (Muse)

Этот 2012 счетчик до альбома — это безумие! (Да, это ссылка на Muse.)

• Что это перекрытие делает хорошо:
  • Вдохновляющий счетчик. Счетчик создает ожидание — и вам не нужно выпускать новый альбом, чтобы использовать счетчик! Счетчик до выпуска продукта, события или вебинара.
  • Вдохновляющие визуальные элементы. Видео трейлера альбома добавляет еще больше ожидания вокруг предстоящего выпуска, что побуждает фанатов подписаться на обновления. Добавьте предварительный просмотр вашего продукта или события, чтобы разогреть аудиторию.
  • Легкий выход. Это всплывающее окно позволяет пользователям выбрать "Не показывать мне это снова". Это позволяет пользователю настроить свой опыт (и не беспокоиться о всплывающих окнах позже).

Как создать splash page

Самый простой способ создать splash page — использовать маркетинговый инструмент. Если вы используете WordPress, есть множество плагинов для создания splash page. Drag-and-drop конструкторы сайтов, такие как Wix, также позволяют создавать splash page. И инструменты для всплывающих окон, такие как Sumo, HelloBar или OptInMonster, имеют опции для создания splash page в дополнение к своим другим функциям.

Как создать и настроить splash page для вашего сайта?

1. Рассмотрите использование перекрытий или всплывающих окон вместо полностью отдельной splash page

   Lightbox перекрытие или всплывающее окно отображает вашу splash page поверх страницы, на которую хочет попасть ваш посетитель. Это позволяет им знать, что они в правильном месте — плюс они могут выйти из splash page, если не заинтересованы.

   Чтобы узнать больше о том, как перекрытия, lightboxes и modals влияют на SEO вашего сайта, прочитайте эту отличную статью от Moz.

   Бонус: MautiBox позволяет создавать формы в стиле modal для вашего сайта, которые могут служить splash page или перекрытием. Подписи будут отправлены напрямую в вашу CRM.

2. Сделайте ваш дизайн splash page адаптивным

   Мобильные устройства составляют более 51% всех просмотров веб-страниц — убедитесь, что ваша splash page работает для всех посетителей. Работайте с вашими дизайнерами или выберите адаптивный шаблон в вашем конструкторе сайта, чтобы убедиться, что ваша splash page адаптируется к ширине экрана каждого посетителя.

3. Помогите вашим пользователям добраться туда, куда они хотят

   Убедитесь, что после завершения вашего CTA — или отказа — вы отправляете их на страницу, на которую они изначально хотели попасть. Ваш клиент не хочет быть перенаправлен на главную страницу, когда он пытается прочитать статью на вашем блоге.

4. Держите все просто

   Создайте лучший пользовательский опыт и обеспечьте более быструю загрузку, сделав вашу splash page как можно проще. Быстро придите к сути с вашим текстом и CTA, используйте простой JavaScript и минимизируйте количество видео, анимаций и плагинов на странице.

5. Отслеживайте аналитику

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

   • Показатель отказов
   • Время на странице
   • Показатель кликов
   • Подписки

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