Почему использование слайдеров в хедере лендинг пейдж лишено смысла?

Posted on by riasevastopol

Слайдер (от англ. slider, кроме этого распространено наименование carousel — карусель картин, либо gallery — галерея) — это особый элемент веб-дизайна, воображающий собой блок определенной ширины, в котором транслируется контент, изменяющийся машинально либо в ручном режиме.

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

В подтверждение данной теории и приведем пара веских доводов.

Слайдеры оказывают негативное действие на конверсию

Завлечь человека посетить ваш интернет-ресурс уже само по себе маленькое чудо. А разве нет? Дабы суметь организовать на собственный сайт либо лендинг устойчивый и релевантный поток трафика, необходимо просчитать влияние множества факторов и преуспеть в интернет-маркетинге как входящем, так и исходящем.

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

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

1. Слайдеры имеют низкую кликабельность.

Из 3 700 000 визитёров сайта университета Нотр-Дам (University of Notre Dame) за полугодовой период только 1% пользователей хотя бы раз кликнули по слайдеру. Это что может значить? Это значит, что маркетологи ресурса применяют наилучшее место на странице самым невыгодным образом.

Но более забавен тот факт, что 89,1% из всех кликов по слайдеру пришлось на первое изображение, которое показывал слайдер. Остальные 4 изображения поделили между собой оставшиеся 10,9% кликов. Данный пример есть наглядной иллюстрацией к вопросу: вы также желаете тратить так много места под таковой не впечатляющий итог?

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

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

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

2. Слайдеры не приспособлены к мобильным устройствам.

В январе этого года в первый раз за историю процент доступа в интернет с мобильных устройств превысил процент его применения со стационарных компьютеров: 55% против 45%. Какое отношение это имеет к нашей теме? Дело в том, что слайдеры не хорошо адаптируются к отображению на мобильных экранах.

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

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

3. Весьма тяжело подобрать верную скорость смены слайдов.

Необходимость выбора корректной скорости смены слайдов всегда была основной проблемой всех слайдеров. Имеются как минимум две плоскости:

  • изображения сменяют друг друга через чур скоро, и появляется возможность того, что пользователи и вовсе не успеют ознакомиться с содержимым слайда. А вдруг забрать во внимание тех, у кого имеются неприятности со зрением либо тех, кто медлительно просматривает, то обстановка и вовсе станет фатальной. Через чур стремительная смена слайдов выступит в качестве фильтра и отсеет часть аудитории.
  • изображения сменяют друг друга через чур медлительно, и появляется «неприятность второго слайда», другими словами пользователь принимает первый слайд в качестве единственного статичного изображения. В данной ситуации степень интеракции со слайдами, следующими за первым, или незначительна, или вовсе отсутствует.

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

4. Слайдеры наносят вред вашему SEO

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

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

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

  • Целевые страницы и SEO

Что такое совершенный макет?

В совершенной лендинг пейдж хедер завлекает внимание визитёра и побуждает его прокрутить страницу вниз, чтобы получить больше информации, а после этого завершить просмотр совершением целевого действия. Особенное значение в данной модели получает первый экран сайта (данный фрагмент web-интерфейса еще именуется как «Above the fold»).

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

На скриншоте: первый экран сайта

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

«Совершенный макет» — это таковой макет первого экрана целевой страинцы, в котором размещен неменяющийся (статичный) контент, нацеленный на совершение визитёром одного конкретного целевого действия.

Таковой шаблон вправду имеет сходство с неким «бэт-сигналом», пронзающим полностью тёмное небо над Готэмом (вымышленный город, место действия комиксов о приключениях супергероя Бэтмена).

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

Так из-за чего таковой тип организации контента на первом экране превосходит по показателям столь нелюбимый продвинутыми маркетологами слайдер?

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

Таковой шаблон ведет к одним из самых высоких показателей конверсии, и вот в чем его секрет.

1. Статичное изображение

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

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

А во-вторых, статичный дизайн более адаптивен к различным типам устройств и отображается одинаково на большинстве браузеров. Это крайне важно.

2. Постоянство

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

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

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

3. Больше шансов

Генри Форд (Henry Ford), один из пионеров в автомобилестроении и человек, что изобрел конвейер, как-то сообщил: «Цвет автомобиля возможно любым при условии, что данный цвет — тёмный». Эта фраза идеально обрисовывает обстановку со теми ограничениями и слайдерами, каковые такое дизайнерское ответ накладывает.

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

  • Стратегия первого экрана, либо Жизнь выше «линии сгиба»

4 хороших примера совершенного макета

Evernote

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

Dropbox

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

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

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

Spotify

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

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

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

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

School of greatness

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

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

Заключение

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

Примите это к сведению при разработке очередных макетов посадочных страниц на LPgenerator.

Высоких вам конверсий!

По данным blog.leadpages.net, image source Captured Thoughts

Случайные статьи:

Дизайн ногтей: закрепляем слайдер дизайн на гель лак


Подборка похожих статей:

riasevastopol

More Posts