Что заменяет слайдер домашней страницы (и почему он должен)

1. Объяснение героя
2. Главная страница Слайдеры Hurt Conversions
3. 1) Слайдеры имеют низкий процент кликов
4. 2) Слайдеры не всегда мобильны
5. 3) Сроки вашего слайдера переходы это сложно
6. 4) Слайдеры повредят вашему SEO
7. Почему вы должны использовать макет героя
8. 1) Они статичны
9. 2) Они последовательны
10. 3) Они лучше для SEO
11. 4) Они гибкие
12. 4 отличных примера расположения героя
13. DROPBOX
14. Spotify
15. ШКОЛА ВЕЛИКИ
16. Что ты думаешь?

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

Сияющий маяк пронзает всю ночь, призывая героя спасти Готэм-сити.

Нету. Оставайтесь на линии. Это просто изменилось на логотип Супермена. А теперь там только мелькнули инструкции о том, куда идти и… подожди… что это говорит? Это прокручивалось слишком быстро. Упс ... теперь он вернулся к логотипу Бэтмена.

Ну, это сбивает с толку. Кого они хотят? И что написано в этих инструкциях? Оба героя должны уйти? И куда они должны идти?

Это именно то, на что похоже слайдер, также называемый каруселью, на главной целевой странице.

Этот сценарий выше было бы странно видеть по телевизору, не так ли? Обычно Бэтмен видит сигнал, получает информацию от безупречно усатого комиссара Гордона и затем убивает плохих парней.

Именно так должна работать ваша целевая страница.

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

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

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

Объяснение героя

Давайте вернемся к этому термину «макет героя». Чтобы понять этот термин, нам нужно кратко поговорить о сгибе.

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

Эта первая складка может быть наполнена множеством разных вещей. Изображения, виджеты, слайдеры (пожалуйста, не надо), формы, контент и многое другое. Этот первый сгиб - самая ценная недвижимость на вашей странице для передачи вашего сообщения.

Имея это в виду, давайте дадим макету героя конкретное определение:

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

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

И это постоянно превосходит слайдеры домашней страницы. Зачем?

Главная страница Слайдеры Hurt Conversions

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

Так зачем вам приветствовать посетителей тем, что многочисленные тесты показывают, что они не хотят? Когда ты сломаешь это ...

1) Слайдеры имеют низкий процент кликов

1%.

Любая идея, что это представляет?

Из 3,7 миллионов посещений официального сайта Университета Нотр-Дам, привлеченных в течение шестимесячного периода, именно столько кликнуло на ЛЮБОМ изображении слайдера.

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

Еще более забавно то, на какое изображение они нажимали. 89,1% от этого первоначального 1% нажали на первое изображение, которое они увидели . Это означает, что только 10,9% кликов были разделены между четырьмя другими изображениями.

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

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

Угадайте, что еще выглядит как баннер? Угадайте, что еще посетители считают рекламой?

Вы знаете, куда это идет.

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

2) Слайдеры не всегда мобильны

В январе этого года 55% пользования интернетом осуществлялось с мобильного устройства , Это первый раз, когда мобильное устройство обогнало настольный компьютер в использовании интернета.

Дело в том, что слайдеры практически никогда не бывают мобильными. Эти растягивающиеся, красивые изображения, которые вы прокручиваете с этим когда-либо важным текстом CTA? Будьте готовы к тому, что вы уменьшите свой микроскопический размер, сделав ваше сообщение (и изображение) практически несуществующим.

Затем вы должны добавить в свой вид серфинга данных без WiFi на мобильном устройстве. Веб-сайтам уже давно требуются данные в тарифных планах, но представьте, что телефону приходится загружать огромные изображения через Javascript, загружая оставшуюся часть сайта и изменяя размер страницы (если он отзывчивый).

Вы можете почти услышать, как кнопки «назад» лихорадочно нажимаются.

3) Сроки вашего слайдера переходы это сложно

Сроки всегда были ахиллесовой пятой ползунков. Они обычно страдают от двух разных проблем:

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

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

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

4) Слайдеры повредят вашему SEO

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

Слайдеры требуют, чтобы JavaScript загружался при каждой загрузке страницы. Добавьте несколько изображений в высоком разрешении, и время загрузки может сорваться, что не понравится ни Google, ни вашим посетителям. Медленное время загрузки приводит к отскокам, а отскоки запускают вас вниз по органическому поисковому рейтингу.

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

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

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

Почему вы должны использовать макет героя

Что нравится сайтам LeadPages , Evernote, Dropbox, Spotify, Square и многое другое имеют общего?

Макет героя на первом сгибе.

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

1) Они статичны

Там, где у ползунков есть проблемы со временем загрузки и размером, страницы макета героя не потеют.

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

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

Что действительно приводит к большему, всеобъемлющему преимуществу. , ,

2) Они последовательны

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

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

Страница, которая выглядит и взаимодействует одинаково на нескольких устройствах и браузерах, делает это. Если что-то не так - скажем, слайдер с основным CTA, который не загружается или слишком мал - вы обманываете своего клиента и проигрываете в продажах. Макеты героев основаны на этой последовательности.

3) Они лучше для SEO

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

Обычно, что бы вы ни выбрали для размещения в этом первом сгибе, у вас не будет того дополнительного тега H1, который поставляется с виджетом-слайдером. Страницы могут иметь только одну из них, а наличие двух может рассматриваться Google как спам по ключевым словам. Странице без слайдера не обязательно беспокоиться об этом (если только вы на самом деле не пытаетесь спамить по ключевым словам, в этом случае… прочитайте эту статью ).

Затем идет увеличение времени загрузки, которое дает вам макет героя. Проблемы, которые мы обсуждали в разделе слайдера, не так распространены в макете героя, потому что их просто меньше. Снижение времени загрузки ударяет вас в глазах Google и чрезмерно короткое внимание ваших пользователей.

4) Они гибкие

У Генри Форда была отличная цитата, в которой говорилось о макете слайдера. Он просто не знал этого в то время. Он сказал,

«Вы можете иметь (модель-T) в любом цвете, который вы хотите. Пока оно черное.

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

Вот и все. Шутки в сторону.

С макетом героя, перед вами целый мир возможностей. Сплошной цвет фона с окном контента и одной кнопкой? Готово. Картинка, которая случайно взаимодействует (статически) с формой подписки?

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

Но что это за статья без примеров? Это был бы учебник по алгебре для колледжа, вот что. Итак, давайте бросим некоторые твердые образы на вашем пути с несколькими отличными примерами.

4 отличных примера расположения героя

EVERNOTE

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

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

DROPBOX

Это один из самых простых примеров, которые вы можете найти в Интернете. У них даже нет вступительной копии, как у Evernote. Здесь есть только заголовок, возможность регистрации и немного текста «Узнать больше», чтобы вызвать некоторую прокрутку.

Но это работает. Простота проходит долгий путь и заставляет вас сосредоточиться именно на том, чего они от вас хотят.

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

Spotify

Это немного сложнее.

Но есть две вещи, которые мне действительно нравятся в этом, кроме очевидных вещей, которые он делает правильно (вовлечение, быстрое время загрузки и т. Д.).

Во-первых, их образы . Великолепное фото, несомненно, но мне нравится, как оно неявно вызывает ассоциативные эмоции. «Помните, когда вы отдыхали на пляже со своими друзьями, в воздухе плавали ноты Led Zeppelin?» «Помните, когда вы плохо пели« Пока, пока »в середине 7-11?» Вызывать эмоции - мощный способ вдохновлять действия.

Во-вторых, есть две возможности подписки в одном и том же фолде. Эта зеленая кнопка выделяется на первый план, и они есть в двух местах: универсальная навигационная панель и smack-dab в середине страницы. Даже если вы не нажмете кнопку загрузки в первом сгибе, эта ассоциация кнопок будет следовать за вами при прокрутке страницы.

Это также параллакс сайт, который является чем-то мы много писали о здесь ,

ШКОЛА ВЕЛИКИ

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

Поразительное изображение играет прекрасную фольгу на окне контента, которое рассказывает вам все, что вам нужно знать о том, что он предлагает, добавляя сильный призыв к действию в нижней части окна. Затем, для большей убедительности, он добавил панель «Featured In», чтобы поделиться своим опытом.

Это все страницы с высокой конверсией. Все красиво оформлено. Все технически исправно.

А вы знаете что-нибудь интересное во всех этих примерах?

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

Что ты думаешь?

Мне интересно услышать ваше мнение о слайдерах домашней страницы и макете героя. У вас есть слайдер домашней страницы в настоящее время? Вы бы переключились, услышав эту статистику? Звук выключен ниже!

Похожие

Комментарии