Как главное изображение влияет на первое впечатление пользователя

Даже если вам не знаком термин “hero image”, вы, вероятно, понимаете, о чем идет речь. Это большое заметное изображение, которое обращает на себя внимание при входе на сайт.

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

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

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

1. Что такое “hero image”?

Hero image — это большое выразительное изображение на главной странице сайта. Такое изображение представляет собой масштабный и яркий элемент, который знакомит вас с брендом (даже когда сам бренд не является особенно ярким).

Вот несколько примеров основных изображений на веб-сайтах:

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

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

2. Что делает основное изображение эффективным?

Эффективное основное изображение показывает, а не рассказывает.

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

Эффективное основное изображение включает несколько компонентов. Рассмотрим их:

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

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

Заголовок — неотъемлемая часть основного изображения

Эффективное основное изображение должно работать совместно с заголовком. Даже самый гениальный текст не сможет привлечь и удержать внимание пользователя сам по себе. Главное изображение без грамотно составленного текста может постигнуть та же участь. Однако при совместной работе заголовок и отличное изображение станут идеальным сочетанием для hero image на вашем сайте.

Взгляните на то, как эффективно работают изображение и текст в примере от DSKY выше. Основное изображение сообщает пользователям важную информацию о бренде еще до того, как они прочитают абзац, объясняющий что Stillwater Investing — это инвестиционная компания в штате Мэн. Вы понимаете, что компания из Новой Англии обещает помочь вам добиться финансовой независимости и утверждает, что, доверив ей свои деньги, вы сможете вести такой же образ жизни, как на рисунке: проводить время с близкими людьми и заниматься хобби в живописной обстановке. А все это потому, что вы будете чувствовать себя финансово защищенными.

Основное изображение в дизайне MNoriega действует похожим образом: оно точно доносит до пользователей цели и обещания бренда сразу после загрузки сайта. Иллюстрация позволяет представить сложную тему в привлекательной и простой для восприятия форме.

Релевантные изображения

Изображения, которые вы выбираете для главной страницы сайта, должны быть релевантными (соответствующими) бренду.

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

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

Основное изображение не обязательно должно быть статичным. Многие бренды, например, fivefootsix, размещают на главной странице анимированные изображения.

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

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

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

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

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

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

Разрабатывая дизайн hero image, не забывайте о визуальной иерархии и балансе. Баланс — это размещение изображений и текста таким образом, чтобы композиция выглядела гармоничной. Неверным будет размещение текста и изображений в следующих случаях:

• слишком близко или далеко друг от друга;
• только с одной стороны, в то время как другая остается пустой;
• немного левее (правее) или выше (ниже) центра изображения, поскольку это создает ощущение дисбаланса.

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

• чтение заголовка;
• чтение подзаголовка и любого дополнительного текста;
• призыв к действию (при этом выбранное вами изображение должно помогать пользователю и направлять его взгляд).

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

Отзывчивое основное изображение

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

Дизайн, способный “отзываться” на потребности пользователей и адаптироваться к различным устройствам называется отзывчивым (адаптивным).

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

Вектор восприятия сайта в целом

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

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

3. Создание подходящего основного изображения

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

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

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

4. Эффективное основное изображение — залог успеха

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