Дизайн вашего сайта играется куда громадную роль для процесса конвертации целевых визитёров, чем вы думаете. Крайне важно произвести на пользователя хорошее первое чувство, и качественное основное изображение может значительно поспособствовать этому.
В сегодняшней статье мы поведаем вам, что такое hero image и как извлечь из него большую пользу.
Что такое основное изображение?
Hero image определяется как «громадное изображение либо серия изображений, каковые четко выделены на домашней странице». Вы уже много раз видели такие картины. В большинстве случаев они выглядят вот так:
Энджи Шотмуллер (Angie Schottmuller) обрисовала главное изображение как «точную фотографию либо видео с ответом, которое совмещает в себе релевантность, контекст, сокровище, и намерение поддержать, научить либо убедить потребителя».
Иными словами, это громадная фотография, которая дополняет ваше ценностное предложение, дабы сделать его более ясным и донести до визитёров контекст. Это снимок, преследующий определенную цель.
- 5 способов расширить конверсию посредством изображений
Для чего применять hero image?
Как мы знаем, что пользователям нравится наблюдать на сайты, каковые с первой минуты:
1. Легко читаются
2. Являются четкими и информативными
3. Всецело понятны
Люди способны решить поразительно скоро, а посредством главного изображения вы сможете в одночасье сделать страницу ясной, понятной и легкой для восприятия. В действительности вывод о вашем сайте пользователи формируют всего лишь за 50 миллисекунд. Как раз столько времени им требуется, чтобы выяснить, стоит ли оставаться на вашем ресурсе.
Эта цифра была подтверждена как минимум двумя изучениями, включая и опрос, совершённый компанией Гугл. В соответствии с их данным, кое-какие впечатления о сайте формируются кроме того в течение 17 миллисекунд. Как раз исходя из этого при помощи hero image вы должны дополнить ваше ценностное предложение и произвести на пользователей сайта наилучшее первое чувство.
Как создать и выбрать основное изображение?
выбор и Разработка главного изображения — это такое же мастерство, как и наука, причем на брендинг оно опирается не меньше, чем на конверсии. Однако, как и при эвристическом анализе (heuristic analysis), на протяжении работы вы имеете возможность руководствоваться определенными параметрами, дабы принимать более обоснованные ответы.
Энджи Шотмуллер внесла предложение 7-шаговую методику оценки главного изображения, которая выглядит следующим образом:
1. Релевантность главным словам (дополняет ли снимок ваши целевые ключевики?)
2. Ясность (оказывает помощь ли изображение прояснить главное сообщение сайта?)
3. Помощь дизайна (усиливает ли изображение плавный поток дизайна страницы, ведущий к CTA-элементу?)
4. Аутентичность (фотография воображает ваш бренд верным образом?)
5. Добавочная сокровище (додаёт ли изображение сокровища офферу? усиливает ли релевантность? демонстрирует ли преимущества?)
6. Желаемые чувства (изображение вызывает чувстве, каковые приводят к действию?)
7. Потребительский «храбрец» (фото изображает клиента как «храбреца», что в один раз воспользовался данным ответом?)
7 убеждающих факторов главного изображения
Вы кроме этого имеете возможность выбрать другую эвристическую структуру, к примеру, ту, которой пользуется ConversionXL. Оценивайте ваше главное изображение на базе:
1. Релевантности
2. Ясности
3. Ценности
4. Разногласий
5. Отвлечения
Соответствует ли основной снимок вашему ценностному предложению? Понятен ли он? Завлекает ли он внимание (как элемент автоматического слайдера)?
Вы не имеете возможность подтвердить собственные предположения касательно этих вещей без тестирования, но все же они дают вам четкое представление о том, с чего направляться начать выбор и разработку вашего hero image.
- Применяйте визуальный контент для привлечения целевой аудитории
4 типа основных изображений
Разбирая веб-сайты, возможно столкнуться с 4 типами основных изображений:
1. Изображение продукта
2. Контекстные изображения
3. Фото основателей
4. Неконтекстные изображения
Очевидно, вы не имеете возможность знать точно, какая из этих категорий сработает оптимальнеев вашем случае, но нижеприведенные примеры смогут вдохновить вас на создание собственного варианта.
Основное изображение продукта
Главное изображение данного типа есть самым интуитивным — в большинстве случаев, это громадная HD фотография продукта. На снимке продукт может пребывать в активном, неподвижном либо любом втором состоянии, но задача этого фото постоянно остаётся неизменной — оно должно дополнять ценностное предложение визуальной демонстрацией. Вот пара успешных примеров:
1. ManPacks
ManPacks — это сервис, что отправляет мужчинам «все самое нужное, в то время, когда они в этом нуждаются». Посылки включают «нижнее белье, носки, станки для бритья, презервативы» и т.д., и не смотря на то, что в подзаголовке об этом сообщено, основное изображение все равно намного лучше передает сущность оффера.
«Откройте для себя предметы первой необходимости, каковые впишутся в любой распорядок дня»
2. RideTap
RideTap — это стартап, что занимается организацией вариантов поездок в реальном времени. Не обращая внимания на то что ценностное предложение тут возможно было выразить конкретнее (словосочетание «транспортная экосистема» звучит необычно — клиенты ни при каких обстоятельствах бы не применяли эту фразу), главный снимок со иконками и смартфоном всех дешёвых вариантов поездки частично растолковывает визитёрам, что делает их приложение.
«Полноценная транспортная экосистема в одном месте: вашем приложении»
3. Vibe
Это продукт от Bulletproof, и на первый взгляд сложно сказать, что именно он делает. На странице компания показывает, что это «вибрационная платформа для всего тела», и тем самым легко проясняет обстановку. Дабы открыть для себя преимущества, вы должны мало углубиться в копирайтинг лендинга, но основное изображение, по крайней мере, дает вам визуальное представление о продукте в действии.
«Vibe. Разработка, которая употребляется в университетах опытными командамии в медицинских учреждениях. Легко на данный момент. В вашем доме»
- Что ответственнее в веб-дизайне, изображения либо текст?
4. Bulletproof InstaMix
Еще один продукт от Bulletproof.com, в этом случае речь заходит об InstaMix — портативной версии популярного кофе, сделанного для путешественников и тех, кто хочет насладиться напитком в дороге. На основной картине изображен человек, что держит в руке туристический термос и упаковку InstaMix. Это хорошая иллюстрация применения продукта.
«Bulletproof кофе в одно мгновенье»
5. Onnit
Onnit — еще одна популярная компания, занимающаяся продажей пищевых добавок, оборудования и здорового питания для фитнеса. Одним из главных продуктов, что они выделяют на слайдере собственного лендинга, есть ежедневный поливитамин. Заголовок «самый несложный метод прийти в форму» дополнен фактическим изображением товара в упаковке.
«Выйдите за рамки поливитамина. Самый несложный метод прийти в форму»
6. Hammock Town
Hammock Town реализовывает гамаки, и потому показывает вам, как мог бы смотреться ваш дом с добавлением двух роскошных коконообразных гамаков. Согласитесь, смотрится очень хорошо.
«Бесплатная доставка по всем заказам из америки на сумму более чем $65»
- Форматы изображений для веб-применения
7. InstaPaper
В последние пара лет тенденция к применению анимированного заглавного снимка кроме этого усиливается . Не смотря на то, что данный пример от InstaPaper не повторяет в точности их интерфейс пользователя (UI), он демонстрирует вам, что в собственный свободное время вы имеете возможность просматривать ваши статьи везде.
«Сохраняйте что угодно. Просматривайте где угодно»
8. Heap Analytics
Heap Analytics делает что-то подобное, показывая анимации разных отчётов и графиков. Это хороший метод посмотреть в приложение, что разрешает пользователям взять лучшее представление об возможностях и опыте программы.
«Мгновенная, ретроактивная аналитика»
- Живая целевая страница либо GIF на лендинге
Контекстные изображения
В некоторых случаях компании не просто предоставляют аудитории изображение собственного продукта, а применяют вспомогательный снимок, снабжающий контекст либо помощь для их оффера. На нем возможно изображена среда, в которой вы используете продукт, либо же связанные с продуктом вещи, усиливающие ценность и доверие.
9. National Allergy
National Allergy — это eCommerce ресурс, что реализовывает разнообразную продукцию для аллергиков. Не обращая внимания на то, что в их ассортименте нет никаких пилюль, справа от заголовка они решили продемонстрировать доктора, дабы убедить визитёров в надежности продукта. Кроме этого, снимок кроме этого дает вам осознать, что вы находитесь на медицинском сайте.
«Одобрено докторами.»
10. Bonobos
Bonobos демонстрируют собственный продукт (плавки) в среде, в которой вы бы его применяли. Они имели возможность бы на странице снимок нескольких моделей плавок крупным планом, но так как картина с приятелями, прыгающими в воду, смотрится куда убедительнее.
Тестирования, совершённые ConversionXL, продемонстрировали, что изображения с людьми (особенно с выговором на одежде) завлекают больше внимания (время фиксации и т.д.). Это значит, что вы должны постараться донести до визитёров контекст, изобразив настоящих людей в контекстных условиях.
- Долой стоковые фото, либо Оптимизация конверсии посредством настоящих людей
11. Chubbies Shorts
Chubbies Shorts делают что-то похожее. У них все строится около уик-эндов (что прослеживается в их копирайтинге), исходя из этого они показывают толпу парней в плавках Chubbies Shorts, каковые устроили вечеринку на яхте.
«Выходные уже на носу. Останься ненадолго. Приобрети новые плавки»
12. Fashion Metric
Fashion Metric делает продукты, каковые разрешают онлайн-ритейлерам лучше предугадывать размеры одежды, тем самым снижая количество возвратов и повышая прибыль. Это очень инновационное ответ, и дабы сформулировать его преимущества, они применяют изображение среды розничной торговли, более изощренной в техническом замысле.
«Fashion metric. Изучите анатомию персонализации»
13. Instacart
Бакалейная служба доставки Instacart показывает на своем главном снимке пакет свежих и вкусных продуктовых товаров. Более того, глядя на картину, складывается чувство, что эти продукты вручают как раз вам (что привносит контекст продуктовой доставки).
«Продуктовые товары, доставляемые в течение 1 часа»
- 12 распространенных неточностей форматирования изображений
14. Uber
Uber имел возможность бы показать вам фото собственного приложения, но вместо этого они показывают довольного клиента, сидящего в машине (настоящий опыт). Снимок радующегося пассажира и водителя на заднем сиденье смотрится убедительно и дает вам осознать, какой приятный опыт Uber дарит своим клиентам.
15. RoverPass
RoverPass — это базирующийся в Остине стартап, что занимается бронированием мест для кемпингов и RV парков. Равно как и Uber, вместо того дабы продемонстрировать собственный приложение крупным планом, они демонстрируют вам опыт применения данного продукта. Данный пример возможно кроме того лучше прошлого, поскольку их снимок лагеря наталкивает на мысли об хорошем времяпровождении и увлекательном приключении.
«Ищите и резервируйте площадки для кемпинга и RV парки»
- Как применять эмоции пользователей на Landing Page?
Изображение с основателем
Это снимок основателя сайта, что в большинстве случаев размещается на ресурсах с нужным контентом, оформленных в личном стиле. В большинстве случаев, фото употребляется на основной странице и довольно часто сопровождается просьбой подписаться на email-рассылку. В некоторых случаях вместо изображения компании задействуют видео с основателем, и их кроме этого направляться относить к данной категории. Вот пара примеров, каковые уже смогут быть вам привычны:
16. Kopywriting Kourse
Невилл Медора обучает людей копирайтингу. Он делает это за счет блога, подписной базы и собственного Kopywriting Kourse. Невилл применяет собственный личный снимок в качестве hero image и демонстрирует хороший пример направляющей подсказки (он наблюдает прямо на opt-in форму).
«Обучитесь писать так, как вы рассказываете, и реализовывать, как одержимый»
17. ConversionXL
Данный пример определенно не испытывает недостаток в пояснениях. На снимке Пип Лайа (Peep Laja) — основатель ConversionXL — на заголовок.
«Ваш сайт теряет деньги. Получите проверенные, подкрепленные данными рекомендации, дабы устранить утечки и развиваться стремительнее»
18. OKDork
OKDork — это блог Ноа Кагана (Noah Kagan), основателя SumoMe. Сайт трудится лишь за счет того, что его улыбчивое фото находится около opt-in формы.
«Получите доступ к 85% моих бизнес-хаков»
- Кое-какие распространенные правовые неточности в применении изображений
19. Backlinko
То же самое касается и Брайана Дина (Brian Dean) с его Backlinko. В SEO сообществе этому человеку доверяют, исходя из этого он пользуется своим авторитетом.
«Получите эксклюзивные советы по трафику. Укажите ваш email ниже, для получения доступа к моим действенным рекомендациям»
20. Conversion Sciences
Conversion Sciences кроме этого задействуют hero image с известными основателями, но вместо статического изображения они отдают предпочтение видео. Стоп-кадр акцентирует внимания на лицах начальников, что снабжает приблизительно тот же эффект, что и в прошлом примере.
«Специалисты с тестирования оптимизации конверсии. Отечественный 180-дневный курс будет генерировать больше продаж с вашего сайта»
21. Book In A Box
К подобной стратегии прибегают и в Book In A Box, компании Такера Макса (Tucker Max). Статическое изображение показывает его лицо вместе с заголовком (индикатор доверия), а в самом видео Такер говорит о собственном сервисе более детально, дабы дополнить и без того внушительное ценностное предложение.
«Перевоплотите ваши знания в книгу. За 12 часов»
22. Mirasee
Тот же прием применяет Дэнни Айни (Danny Iny) для Mirasee, компании, занимающейся тренингами и коучингом. В этом случае видео задействовано достаточно удачно, но оно не заменяет ценностное предложение, которое возможно было выразить значительно лучше.
«10 правил предусмотрительного бизнеса»
- Из-за чего видео-лендинги конвертируют лучше?
Неконтекстные главные изображения
Неконтекстные главные изображения — это снимки, каковые не вписываются в неспециализированную картину. В большинстве случаев, их применяют или вследствие того что они прекрасно смотрятся, или вследствие того что такие фото довольно часто являются трендовыми. Наряду с этим подобные изображения вовсе не дополняют оффер и не привносят на страницу никакой ясности.
Частенько неконтекстные снимки отвлекают визитёров от главного сообщения, заставляя их излишне обдумывать оффер либо его главную сокровище.
23. 500 Friends
Осознать, чем занимается 500 Friends, весьма не просто. Они применяют снимок, напоминающий простую стоковую фотографию, в качестве собственного hero image, но этого не хватает.
24. Muru
Muru — это музыкальное приложение. Об этом говорит их заголовок «Создайте ваше собственное музыкальное путешествие». Возможно высказать предположение, что под этим подразумеваются какие-то настройки и персонализация музыки. Но если бы заголовка не было, что вы имели возможность почерпнуть из фотографии друзей, каковые выпивают вино и наслаждаются обедом?
Ничего. Она не несет никакой ясности либо дополнительной ценности.
«Создайте ваше собственное музыкальное путешествие»
25. Leankit
Если вы желаете донести до пользователей сущность ваших одолжений и выделиться на фоне вторых компаний, каковые применяют такие же снимки, как Leankit, тогда вам стоит избегать аналогичных изображений из фотобанков. Как правило они нерелевантны и выглядят достаточно пресно.
«Разглядите ваш рабочий поток. Визуализируйте вашу работу, оптимизируйте ваш подход и справляйтесь стремительнее»
26. Beme
Beme возможно без сомнений назвать самым нехорошим из представленных примеров. Тут нет подсказки о специфике их деятельности, и сменяющиеся фотографии в хедере также не дают никакой информации о продукте. В действительности данный последовательность мигающих снимокв есть полной противоположностью ясности, лёгкости и понятности восприятия.
- 10 правил применения стоковых фотографий на Landing Pages
Вместо заключения
При должной реализации главные изображения смогут контекстуализировать и дополнить ценностное предложение, тем самым сделавстраницу более ясной. Они оказывают помощь визитёрам осознать, что есть главной сокровищем вашего оффера.
Существует нескончаемое количество способов, разрешающих внедрить hero image на сайт, и как раз исходя из этого вам направляться тестировать собственные идеи. Вы имеете возможность отобрать наилучшие методики и взглянуть, какая из них сработает прекрасно конкретно для вашего сайта, но все-таки попытайтесь не применять стоковые снимки с кофейными чашками и ноутбуками.
Нужен неповторимый дизайн лендинга? Тогда заполните форму заказа либо применяйте отечественный конструктор, дабы создать посадочную страницу самостоятельно.
Высоких вам конверсий!
По данным: conversionxl.com
Случайные статьи:
- 10 + 3 Примера лендинг пейдж для фотографов, видеографов, клипмейкеров
- 11 Примеров ppc landing pages
Внутренняя оптимизация: внутренняя перелинковка — Урок №10, Школа SEO
Подборка похожих статей:
-
Оптимизация изображений для улучшения юзабилити интернет-магазинов
Совершение приобретения на сайте имеется следствие влияния множества факторов. Главные — это доверие, которое появляется между вашей компанией и…
-
Вы когда-нибудь тестировали собственный ценностное предложение? Увлекательный, дешёвый текст, эргономичная структура и с умом подобранные картины — вот…
-
14 Примеров изображений, которые не нужно использовать, если вам дорога конверсия
Источник изображения Большая часть маркетологов уверенный в силе притягательного результата визуальных образов в собственных маркетинговых кампаниях….
-
Изображения лиц как оптимизация конверсии лендинг пейдж
Источник изображения Людские лица являются весьма замечательный фактор визуального действия. Дизайнер, специалист по оптимизации пользовательского опыта…