Рекомендации по применению Hero Images (UPD) / Хабр

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

Из статьи вы узнаете:

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

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

Hero Image

Hero image – термин, применяемый чаще всего в веб-дизайне. Подразумевает под собой тенденцию использовать большие изображения или фотографии. Hero image размещается обычно в верхней части сайта, на самом приметном месте веб — страницы или в центре. Если такое изображение используется вверху страницы, оно называется “hero header”.

— это не просто красивая картинка. Это мощный инструмент коммуникации.

В этой статье я дам вам несколько советов, как правильно использовать технику Hero Image.

Выбирайте удачные изображения

Будьте придирчивы при выборе фотографий

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

Пример неудачно выбранной картинки

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

Пример правильно подобранного изображения

Сделайте картинку композиционным центром

Hero Images идеально подходят, чтобы сжато передать самую важную информацию

Стремитесь выделяться и отличаться. Графический блок должен мотивировать пользователя при каждом посещении задержаться на сайте и еще раз просмотреть его.

Apple — профессионал в создании Hero Image.

Совет: это вовсе не означает, что картинка должна передавать всю информацию целиком. С помощью Hero Image можно, скорее, уместным образом визуально подчеркнуть ключевые моменты.

Ищите изображения, вызывающие эмоции

Внедряйте эмоции в дизайн

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

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

Используйте качественные снимки

Изображения не должны быть размытыми и нечеткими

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

Размытая картинка и снимок подходящего размера

Акцентируйте внимание на кнопках призыва к действию

Призыв к действию не должен конкурировать с красочным изображением

Несмотря на то что все внимание здесь сосредоточено на картинке, нельзя забывать и о других ключевых элементах интерфейса — например, «призывах к действию» (англ. call to action, CTA). При попытке акцентировать внимание пользователя очень важен правильный выбор цвета. Кнопки с призывом к действию должны мгновенно бросаться в глаза.

Кнопки должны гармонировать с большими изображениями

Выдерживайте контраст в дизайне

Убедитесь, что текст, который вы располагаете поверх фото, легко читается

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

В качестве альтернативы вы можете применить scrim:

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

О применении других эффектов вы можете узнать в статье «Хитрости дизайна: Текст на фото»

Учитывайте разные размеры экранов

Картинка должна выглядеть пропорционально на всех устройствах

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

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

Автор фото: themeforest

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

Используйте иллюстрации

Добавьте индивидуальности

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

Dropbox показывает процесс обмена сообщениями и объясняет сложные идеи посредством легко понятных рисунков

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

Заключение

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

Спасибо за внимание!

Как выбрать hero images для главной страницы сайта

Есть проблемы с ранжированием, проект не растет, хотите проверить работу своих специалистов по продвижению? Закажите профессиональный аудит в Семантике

Аудит и стратегия продвижения в Семантике

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

• Меняем взгляд на hero image

• 7 типов Hero Images
  • 1. Hero images с продуктом

  • 2. Контекстная Hero images

  • 3. Hero images, апеллирующие к эмоциям

  • 4. Hero images с фокусом на создателе компании

  • 5. Behind the Scenes Hero images

  • 6. Hero images с действием

  • 7. Hero images, сфокусированные на преимуществах

• Выбираем правильное hero image
  • 1. Ясность

  • 2. Цвет

  • 3. Лицо

  • 4.Согласованность

  • 5. Текст

• Что нельзя делать при создании hero-images
  • 1. Использовать слайды

  • 2. Использовать анимации

  • 3. Использовать видео без исследования демографии

• Где найти hero images?

• Сделайте собственное hero image

• Выводы

50 миллисекунд нужно пользователю для формирования мнения о вашем сайте.

Чтобы вы могли оценить много это или мало, представьте, что при моргании средний человек закрывает глаза на 100-400 миллисекунд. Поэтому сказать, что мы судим о сайте в мгновение ока было бы преувеличением. Намного быстрее.

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

Один из элементов современного дизайна, который слишком часто упускается из виду – hero images.

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

В этой статье поговорим о том, как выбрать правильное hero image. Такое, которое привлечет внимание, повысит уровень конвертации пользователей в покупателей и дополнит дизайн сайта.

Меняем взгляд на hero image

Если вы думали, что hero image – это картинка с летящим Суперменом или Черепашками-ниндзя, глубоко вдохните, выдохните и приготовьтесь. Вы не правы.

Согласно Википедии, hero image – это:

«… большой баннер, размещенный на видном месте веб-страницы, как правило, в  центре. Hero-изображение – это первый визуальный эффект, который видит пользователь, попадая на сайт. Его цель – представить обзор наиболее важных материалов сайта».

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

Согласно исследованию NNGroup, фокус внимания на этой зоне достигает 80.3%. Ммм… интересно. А что с остальным контентом? Его активно скролят, замедляясь только к концу.

Чаще всего пользователи судят о надежности и качестве вашего сайта по его дизайну.

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

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

Рассмотрим 7 типов hero images.

7 типов Hero Images

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

1. Hero images с продуктом

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

В качестве примера приведем Apple. На каждой целевой странице демонстрируется дизайн продукции компании.

Еще один пример – компания SOMA. Она занимается фильтрами для воды. Hero images демонстрирует не только продукт и цвета бренда, что повышает его узнаваемость.

2. Контекстная Hero images

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

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

Так сделали June Oven.

Когда пользователь смотрит на картинку в статике, он видит:

• Печь.

• Меню со множеством режимов приготовления.

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

3. Hero images, апеллирующие к эмоциям

Фокус этой категории на усилении эмоций пользователя. Этот вариант отлично работает в сфере нефизических товаров или услуг. То есть там, где необходимо подчеркнуть влияние продукта / услуги.

Например, компания Honor предоставляет услуги по уходу за престарелыми. Их hero images демонстрирует чувства любви и сострадания сотрудников Honor к пожилой женщиной.

Разместив такую hero images, компания далапопавшим на страницу людям почувствовать любовь и заботу, которая ждет их родителей или престарелых близких. Изображение работает на усиление эмоций.

4. Hero images с фокусом на создателе компании

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

Выглядит это вот так:

Очевидно, что такой тип изображений применим далеко не во всех компаниях.

5. Behind the Scenes Hero images

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

В качестве hero images «закулисье» демонстрирует некий процесс, связанный с продуктом. Например, его изготовление. Лучше всего такой тип изображений работает для ремесленного бизнеса. Можно поставить в качестве главного изображения фотографию с процессом проектирования или производства.

Например, Shoes of Prey в качестве hero images используют слайды с проектированием продукции и идеями ее использования.

6. Hero images с действием

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

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

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

7. Hero images, сфокусированные на преимуществах

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

Например, LuxuryHair, компания, которая занимается продажей hair extensions. Их hero image – это модель с длинными, густыми волосами. Картинка усилине текстом: «сделайте свои волосы длинными и густыми».

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

Самая сложная часть – выбор правильной hero image.

Как это сделать?

Выбираем правильное hero image

Hero images должны делать две вещи одновременно:

• Привлекать внимание (и хорошо смотреться).

• Демонстрировать продукт или усиливать эмоции.

Найти изображение, которое будет выполнять сразу две функции сложно.

Что вы должны иметь в виду, выбирая hero images?

1. Ясность

Задача hero images в том, чтобы сразу дать понять пользователю о чем изображение и какую мысль оно пытается донести.

Придерживайтесь правила «одна идея, одно изображение».

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

Еще одна хорошая идея – выбрать изображение, которое связано с вашим заголовком. Так элементы будут усиливать друг друга.

Например, Acme, поставщик промышленных решений, использует оптимистическое hero image, которое соответствует подзаголовоку, ориентированному на будущее.

Это пример связи, к которой нужно стремиться.

Вот еще один пример с сайта ART of Sculpting:

В этом примере заголовок не связан с изображением, но все равно резонирует с ним.

2. Цвет

Бренд оценивается на основе цветов, которые использует.

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

Исследование цветовых предпочтений, которое провела Джо Хэллок, показало, что в этом вопросе есть четкое различие между мужчинами и женщинами.

Есть ли цвет, который нравится и мужчинам, и женщинам? Да. Синий. А значит, изображение, выполненное в синих оттенках вызовет минимальное количество негативных реакций.

Вы можете использовать цвет в hero images как символический элемент. Или эмоциональный.

Например, красный часто называют «страстным» цветом. Его в своих hero images активно использует Coca-Cola (кроме того, это цвет бренда):

Попробуйте поиграть с несколькими цветами. Или с контрастом.

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

Посмотрите на hero image ReminderMedia. Цвет изображения контрастирует с СТА. Кнопка «Get a Free Sample» (получить бесплатный образец) и «Sign Up» (подписаться) выделяется относительно фона и привлекает внимание.

3. Лицо

Никогда не стоит недооценивать силу человеческих лиц. Люди позитивно на них реагируют. Также можно использовать их в качестве гида к ценностному предложению. Как?

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

Так сделали в Renovator. Модель на фотографии смотрит вниз, указывая, что нужно скролить вниз для достижения СТА.

4.Согласованность

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

Только в случае, если это особая идея. И она как-то связана с содержанием или что-то символизирует.

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

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

Например, Zendesk использует hero image, чтобы ввести мотив – акванавт встречает астронавта. С его помощью компания создает нарратив, который тянется через все страницы сайта.

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

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

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

5. Текст

Не обязательно делать текст на hero image. Если оно будет хорошим, пользователь проскролит ниже. Но вообще текст не повредит.

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

Например, на домашней странице AirBnB, видео с людьми, впервые встречающимися в городе.

Заголовок призывает: «Живите здесь». Сразу становится понятно, что пользователей призывают не посетить город, а переехать в него.

Что нельзя делать при создании hero-images

1. Использовать слайды

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

Согласно исследованию Нотр-Дамского университета, из пяти слайдов hero images 84% всех кликов получает первая картинка. Остальные четыре просто рассеивают внимание.

Цель hero images – сфокусировать внимание пользователей на одной картинке, которая усиливает сообщение.

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

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

2.

Использовать анимации

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

В равной степени это верно для гифок и анимации JQuery. Если анимация не усиливает ваше сообщение, удалите ее из hero images.

3. Использовать видео без исследования демографии

Видео на фоне отлично работает. Оно захватывает внимание и повышает интерес. Но есть три вещи, которые необходимо учитывать:

• Достаточно ли быстро ваши пользователи могут загружать страницу.

• Не будет ли возраст препятствием к пониманию, как пользоваться автоматическим воспроизведением.

• Есть ли у вашей аудитории доступ к сайтам и устройствам, которые поддерживают фоновые видео.

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

Где найти hero images?

Есть множество ресурсов.

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

Бесплатные:

• Unsplash

• Death To The Stock Photo

• Pixabay

• The Stocks

• Graphic Burger

Платные:

• Creative Market

• Dollar Photo Club

• 500px Prime

• Stocksy

• ShutterStock

Сделайте собственное hero image

Вы будете удивлены, насколько легко делать высококачественные снимки, благодаря смартфонам.

С помощью следующих инструментов можно обработать фотографию:

• Canva (фримиум)

• Pixlr (бесплатный)

• Adobe Photoshop (платный)

• PicMonkey (бесплатный)

• Pixelmator (платный)

Выводы

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

• Используя правильное hero image, вы убедите пользователей, улучшите восприятие бренда.

• Сделайте A/ B-тестирование, чтобы понять, какое изображение лучше всего работает для вашей аудитории. Чтобы сохранить интерес повторных посетителей, периодически меняйте изображение.

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

Ирина Винниченко

Контент-маркетолог SEMANTICA

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

Что обязательно нужно учесть?

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

• Подбирайте заголовок. Яркий слоган дополнит эффект от изображения, сделает его понятнее.

• Используйте полноэкранные фоновые изображения. Идеальный вариант – картинка, которая растягивается на весь экран вне зависимости от устройства, с которого просматривается сайт.

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

Несмотря на то, что автор статьи не рекомендует использовать в качестве hero images автоматически воспроизводимое видео или анимацию, не принимайте этот совет как правило. Подумайте, что лучше работает для вашего сайта. Проведите A/В – тестирование, включив в него разные форматы главного изображения.

Изображение героя — Optimizely

Что такое изображение героя?

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

Источник: Balsamiq

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

Зачем использовать главный образ?

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

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

Две вещи, на которые следует обратить внимание при использовании основных изображений

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

• Будьте осторожны с большими изображениями в качестве основных изображений, поскольку они могут повлиять на время загрузки, особенно на мобильных устройствах. На основе исследования, проведенного в Google, было показано, что увеличение скорости загрузки страницы с 0,4 до 0,9 секунды может снизить трафик на 20%. Эффективность главных изображений теряется, если пользователю требуется слишком много времени для их загрузки. Убедитесь, что ваши большие изображения баннера и размеры видео оптимизированы и что они размещены на быстром CDN, чтобы они не замедляли время загрузки вашей страницы.
• Спросите себя, действительно ли выбранное вами изображение приносит пользу. Хотя изначально использование стоковых изображений в качестве рекомендуемого изображения может быть дешевым и быстрым решением, во многих случаях стоковые фотографии являются клише и неоригинальными. Идеальное главное изображение должно дополнять изображения вашего продукта и основного предложения — этого очень сложно добиться с помощью стоковых изображений.

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

Посмотреть видео

Примеры основных изображений

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

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

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

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

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

Trunk Club ясно сообщает о своем ценностном предложении в своем главном изображении, а также включает призыв к действию. Само изображение также передает услуги, которые предлагает Trunk Club.

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

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

Как протестировать различные основные изображения с помощью A/B-тестирования

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

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

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

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

Идеи тестирования основного изображения

Некоторые идеи по оптимизации основных изображений включают:

• Тестирование влияния неподвижного изображения на движущееся изображение: может быть полезно выяснить, находят ли пользователи ваши визуальные эффекты привлекательными, эстетически привлекательными или информативными, или если они находят их отвлекающими. Сравнение неподвижной графики с движущейся графикой, такой как изображение в формате .gif или HTML5, может дать представление о предпочтениях ваших пользователей.
• Тестирование влияния интерактивного воспроизведения видео или видео с автоматическим воспроизведением: в сети становится все более и более распространенным явлением воспроизведение встроенного звука без необходимости его активации. Для сайтов, использующих обмен видеосообщениями, полезно измерять важность видеоконтента, проверяя, нажимают ли пользователи, чтобы активировать контент, или лучше использовать автоматическое воспроизведение видео.
• Тестирование ценностного предложения героя: вызывают ли разные изображения разные эмоции у ваших пользователей и заставляют их вести себя по-разному на вашем сайте?
• Тестирование объектной направленности главного героя: создает ли основной предмет вашего изображения положительное ощущение у пользователей, которое вызывает действия, способствующие достижению конечной цели конверсии бизнеса? Или это отталкивает?

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

Что это такое, зачем он нужен вашему веб-сайту и как выбрать лучший

• Подробно

Автор Тарун Миттал
15 марта 2017 г., обновлено: Чт, 05 сентября 2019 г., 07:26:39 GMT+0000

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

Изображение : Shutterstock

Почему главное изображение важно

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

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

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

Как выбрать лучшее главное изображение (с примерами)

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

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

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

Сосредоточьтесь на продукте

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

Демонстрация преимуществ

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

Простая иллюстрация

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

Завоевать доверие

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

Человеческий фактор

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

Вызывать эмоции

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

This entry was posted in Популярное