Что такое hero на сайте
Тренд на Hero Image в веб-дизайне
Пусть Hero-images, несмотря на название, не бегают по крышам и не сжимают небоскребы, но в дизайне они выполняют довольно важную функцию: они делают сайты приятнее. Использование Hero-изображений делает страницу красивее и мотивирует пользователя просмотреть и остальное содержимое страницы, где в свою очередь расположена информация, которую вы хотите ему передать.
Крупные заголовки
Hero-изображения отлично сочетаются с крупными заголовками. В качестве изображений зачастую используются фотографии, которые сделаны специально для контента этого сайта. Но со временем дизайнеры начали использовать для этих целей векторные иллюстрации, затем анимацию и даже видео.
На самом деле, трудно найти что-либо, что опишет сайт лучше, чем фотография. По статистике, именно она мотивирует пользователя ознакомиться с сайтом более подробно, изучить его контент. Это отлично демонстрирует сайт фотографа Andrew Elsass.
На его домашней страничке используется большой полноэкранный бэкграунд с его же фотографией. Цвета подобраны очень подходящие, создавая гармоничную картину. Общий вид сайта вызывает доверие, мотивирует ознакомиться с контентом ближе. Ознакомившись с сайтом, вы сможете заметить, что все страницы имеют свои небольшие фоновые изображения. Например, на странице «About me» используется не та его фотография, что на главной.
Трендовые Hero-картинки отлично сочетаются со многими стилями дизайна сайтов.
Чтобы разнообразить свое представление о явлении, взгляните на Cleverbird Creative. Их домашняя страница включает полноэкранное фоновое изображение, которое растягивается в зависимости от разрешения вашего монитора. Затем, в зависимости от того, в какой части сайта вы находитесь, фоновое изображение будет меняться. Это еще одна техника, использующая большие фоновые изображения, но она сильнее направлена в сторону разогревания любопытства у пользователя.
Дизайн одностраничного сайта
Крупные полноразмерные фоновые изображения и hero-изображения могут быть использованы довольно эффективно в дизайне одностраничного сайта. Обычно на лендингах или паралакс-сайтах мало контента для отображения. Немного добавить визуального веса странице смогут те самые крупные бэкграунды и hero-изображения.
Галереи
Слайдер автоматически переключает изображения, но посетителю предоставляется возможность переключать изображения самостоятельно с помощью определенных элементов интерфейса (стрелочки / номера изображений и т д.) Это ставшее уже традицией решение, используемое в дизайне коммерческих сайтов (интернет-магазинов, сайтов услуг и прочих).
Некоторые могут не рассматривать этот пример как полноценный hero-image, потому что слайдер на этом сайте не занимает всей ширины, или занимает недостаточно места по высоте. Да, возможно изображение не такое большое. Но, тем не менее, оно слишком сильно привлекает внимание, обращает взгляд на себя. Это хороший пример дизайна.
12 лет работаем с лидерами рынков и молодыми амбициозными компаниями
— Реализуем любой сервис с нетипичным функционалом;
— Переезды на Битрикс, интеграции со всем на свете;
— Налаженная система менеджмента: четкое соблюдение дедлайнов и ТЗ
Выбираем героя для роста конверсии сайта
Если сайт приятно читать и просматривать, посетитель останется. У вас считанные секунды, чтобы произвести впечатление. Самый быстрый способ – использовать hero-image («образ героя»).
В этой статье вы узнаете, что такое hero-image и как он влияет на рост конверсии сайта.
Что такое hero-image
Это не просто картинка на главной странице, а изображение или видео, от которого зависит решение посетителя – остаться или уйти.
Пример от Victoria’s Secret. На ангелов приятно посмотреть:
«Мы знаем, что вы хотите на Рождество. Бюстгальтеры со скидкой 50%!»
Главное изображение повышает конверсию, если оно:
Лендинг Bid4Papers, площадки для фриланс-копирайтеров, предлагает: «Расслабься, мы напишем сочинение за тебя!». Главное изображение соответствует посылу:
Hero-image влияет на первое впечатление.
Существует 4 типа hero-image. О каждом из них – далее.
Изображение продукта
Качественное изображение продукта сделает больше, чем самый удачный текст. Главное, чтобы оно не только вписывалось в структуру дизайна, но и выделялось на общем фоне.
Пример от Eat Big Savings, сервиса доставки еды на дом:
Аппетитная еда, простая сервировка (прямо как у нас самих дома) и совершенно обычная рука клиента, простого человека.
Изображение бэкграунда
Тот случай, когда вы показываете не продукт, а образ жизни, в который он вписывается.
Сервис Bla Bla Car напоминает сообщество водителей и попутчиков. На главной странице – дорога, которая объединяет пользователей:
Ресторан Waffle Story показывает уютную атмосферу и необычный антураж заведения:
Изображение создателя продукта или сервиса
Это hero-image того, кто создал продукт. На таких сайтах обычно размещают обучающий контент и рассказы о достижениях и заслугах этого человека. Обязательно прикрутите кнопку «Подписаться» или «Читать подробную информацию».
Не используйте фотографии левых людей или стоковые фотки, которые всем давно надоели. Реальные люди – для лучших результатов.
Jeff Walker – популярный автор The New York Times. Он продает книгу с секретами мастерства по запуску на рынок новых продуктов. На сайте висит его фотография и предложение подписаться на новостную рассылку:
«Постройте бизнес с любовью. Живите жизнью, о которой мечтали. Формула успешного запуска продукта. Подпишитесь, чтобы узнать секреты маркетологов». Призыв к действию: «Узнайте больше».
Изображение с сильными визуальными характеристиками
Этот hero-image запускает определенные психологические триггеры. На картинке не обязательно люди или продукт, но она доходчиво доносит сообщение до посетителей.
Как аналитический сервис Crazy Egg:
«Почему уходят ваши посетители?» Призыв к действию: «Покажите мою тепловую карту».
Посыл Keas, платформы для учета медстраховок: «Здоровые сотрудники – здоровая компания».
Яндекс.Диск, облачное хранилище, показывает картину, от которой мороз по коже:
Телефон в кофейной луже – кошмарный сон. Посыл пробирает на 100%.
Правильно подобранный hero-image усиливает оффер и «бьет» по эмоциям. В итоге увеличивается ценность продукта.
Что еще можно показать в качестве hero-image?
Рабочие процессы: как вы создаете продукт или как работает ваша команда:
Понять, что подходит конкретно вам, поможет А/В тестирование. И учтите: изображение не заменяет внятное ценностное предложение. Выгода клиента, заключенная в заголовке, сильнее всего влияет на рост конверсии сайта.
Создание эффективного Hero Image изображения для сайта (8 советов)
Пользователю требуется всего 50 миллисекунд, чтобы составить мнение о любом сайте? У веб-разработчиков и дизайнеров реально очень мало времени, чтобы произвести хорошее впечатление на человека при посещении ресурса. Именно поэтому так важно правильное оформление главной страницы + шапки сайта, которую все видят в первую очередь.
Многие веб-проекты в сети объединяет один общий способ привлечения внимания аудитории – использование ярких красочных дизайнов, в частности — размещение крупного фонового изображение или баннера большого размера в верхней части вебсайта. Его еще называют «hero image».
Это «главное изображение» — не просто красивая иллюстрация на сайте для захвата внимания, оно должно стать чем-то большим. Разработчикам нужно постараться сделать мощный инструмент визуальной коммуникации, который сможет увеличить продажи и станет реальным «героем» вашего онлайн-бизнеса.
В нашем переводе оригинальной статьи найдете восемь полезных советов, помогающих создать правильный hero image – такой, который бы привлекал внимание, содействовал конвертации пользователей в постоянных клиентов и стал бы полезным дополнением к дизайну вашего вебсайта.
1. Используйте релевантные изображения
Это очень важный момент. Подходящая качественная графика поможет повысить общую оценку сайта, в то время как неправильно подобранная иллюстрация рискует испортить все впечатление от дизайна.
При выборе hero image отдавайте предпочтение картинкам, которое соответствуют тематике, контенту и идее сайта, например, как сделано здесь. В противном случае, hero image и контент будут несогласованными – это запутает пользователя, и он покинет сайт.
Материалы из фотостоков на главной – это уже клише. В них нет ничего плохого, но если вы действительно хотите быстро ознакомить пользователей с главной идеей своего сайта, или не желаете быть похожими на многие другие компании, тогда вам лучше избегать данного подхода. В основном это нерелевантные фотки, которые не вызывают большого интереса у юзеров.
2. Создайте из hero image ослепительный шедевр
Как правильно сказал Сол Басс: «Дизайн – это визуальное мышление». Действительно, это тот же контент, только представленный в виде изображения. Он позволяет выделить информационное наполнение веб-страницы.
Тщательно продуманный баннер hero image будет радовать глаз и захватывать внимание пользователей. Посмотрите на этот отличный пример от Apple.
Совет: главная картинка не должна презентовать всю-всю информацию, желательно подчеркнуть лишь ключевые и наиболее важные моменты.
3. Старайтесь быть эмоциональными
Согласно проведенным опросам, в 70% потребительская лояльность и решение совершить покупку формируется на основе эмоций. Если ваш графический баннер наделен индивидуальностью и сюжетом, то он обязательно вызовет ответный отклик у посетителей. Выразительные, вдохновляющие изображения превращают неодушевленный продукт или корпорацию во что-то такое, что способно вызывать нормальные человеческие чувства.
Эффективный веб-дизайн, отражающий эмоции, создается в первую очередь для людей, а не для показателей, алгоритмов или поисковых SEO роботов. И это правило работает во всех случаях – для товаров, крупных компаний или индивидуальных предпринимателей.
Использование эмоций для контакта с вашей аудиторией – отличный способ вызвать позитивное отношение пользователей, которое помогает сформировать потребительскую лояльность и доверие к бренду.
4. Графика высокого качества
Картинки не должны быть размытыми или заретушированными. Фотки плохого качества выглядят неприглядно, вдобавок пользователям трудно понять, что на них изображено. Применение в вебдизайне подобных вариантов говорит об отсутствии профессионализма. Баннер hero image – это лицо вашего бренда, поэтому старайтесь избегать использования «запикселированных» изображений (если только они не являются произведениями пиксель арта).
Совет: если вы не хотите, чтобы картинки выглядели размытыми, лучший способ – пользоваться при разработке сайта векторными графическими редакторами, такими как Adobe Illustrator и др.
5. Добавьте CTA элементы, чтобы улучшить процент конверсии
Чаще всего в качестве призыва к действию (CTA) используют именно кнопки, размещенные поверх большого изображения в верхней части экрана. Очень важно достичь визуальной гармонии между hero image, контентом и CTA-кнопкой, особенно если вы разрабатываете landing page.
Когда контент размещается поверх фотографии, веб-дизайнеры обычно корректируют ее контрастность или яркость. Это необходимо для того, чтобы текст/кнопка были хорошо заметны.
В приведенном выше примере hero image служит поддержкой оформлению шапки страницы, привлекая внимание пользователей к CTA-элементу (кстати, взгляд девочки также направлен в сторону текстового блока с кнопкой). Кроме того, часть фона преднамеренно затемнена, чтобы лучше был виден белый шрифт.
6. Используйте контрасты
Одна из главных наших задач – завоевать внимание посетителей. В известной рекламе iPod умело использован контраст для привлечения внимания аудитории к аудиоплееру. Темный силуэт и наушники белого цвета четко выделяются на светло-зеленом фоне.
7. Оптимизируйте изображение под разные размеры экрана
Убедитесь, что размер фотки соответствует размеру дисплеев любых устройств. Адаптируйте картинку под разные платформы, даже если для этого придется изменить ее размер.
Совет: используйте инструменты, которые позволяют корректировать размеры изображений. Например, Cloudinary – облачный веб-проект, позволяющий отслеживать контрольные точки картинки в интерактивном режиме.
8. Дайте волю творческому воображению
Креативные иллюстрации и рисованные веб-дизайны быстро становятся популярной альтернативой простым баннерам hero image. Они предоставляют дизайнерам некоторые преимущества по сравнению с «традиционными» фотографиями, например:
Выше показан отличный пример от агентства графического дизайна в Сингапуре – Ingrid Design, которое с 1998 года успешно оказывает услуги компаниям из самых разных отраслей.
Совет: если вы размещаете несколько иллюстраций, убедитесь, что они гармонично сочетаются друг с другом – как если бы они были нарисованы одним и тем же художником. Ingrid Design последовательно используют во всей своей графике плавные цветовые переходы – градиенты.
Заключение. Hero image — эффективный инструмент улучшения дизайна любого веб-проекта. Вам лишь надо запомнить пару простых правил: картинки должны быть высокого качества, соответствовать остальному контенту и быть интересными для просмотра. Все элементы визуального оформления веб-страницы следует делать хорошо заметными и читаемыми, чтобы пользователи быстро понимали их основной смысл и посыл.
Быстрая предварительная загрузка Hero-изображений
Дата публикации: 2020-09-07
От автора: предварительная загрузка позволяет как можно скорее сообщить браузеру о критических ресурсах, которые вы хотите загрузить, до того, как они будут найдены в HTML. Если вы оптимизируете Отображение наибольшего контента (LCP), предварительная загрузка может изменить правила игры для повышения приоритета загрузки поздно обнаруживаемых Hero-изображений и ресурсов, загружаемых через JavaScript.
Примечание. Предварительная загрузка поддерживается в Chrome, Edge, Safari и Firefox 78+.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Примечание. Hero-изображение — это основная фотография, которую вы видите в верхней части веб-страницы. Это может быть самый крупный элемент содержимого, видимый в области просмотра.
Если в настоящее время у вас есть:
Hero-изображения, которые используют JavaScript для загрузки
Теги img для загрузки компонентов React, Vue или Angular на стороне клиента
HTML-код, отображаемый на стороне клиента, отвечающий за загрузку изображений
Фоновые Hero-изображения в CSS. Они обнаруживаются очень поздно.
Hero-изображения, которые используют JavaScript + загрузку из сети
например, требуется получение JSON из API для обнаружения изображений
Используете webpack-загрузчик для загрузки изображений
Предварительная загрузка может существенно ускорить отображение изображения. Ключевой идеей здесь является то, что вы хотите, чтобы браузеру не приходилось ждать скрипта перед тем, как начать загрузку изображения, так как это может сильно задержать момент, когда пользователи действительно смогут его увидеть.
Выше показан видеоролик WebPageTest, загруженный из приложения обзора фильмов на основе React. Приложение использует рендеринг на стороне клиента (app.js), а также полагается на извлечение из API для возврата потока изображений JSON (movies.json). Это означает, что браузеру, возможно, потребуется обработать app.js, прежде чем он начнет получать файл movies.json и сможет обнаружить Hero-изображение (poster.jpg).
Примечание. Метрика Largest Contentful Paint (LCP) измеряет время визуализации самого большого изображения или текстового блока, видимого в области просмотра.
Используя предварительную загрузку Hero-изображения, Largest Contentful Paint (оранжевая рамка) работает на 1 секунду быстрее в 4G. Это улучшает воспринимаемую пользователем производительность, поскольку меньше времени тратится на ожидание появления значимого контента в области просмотра.
Предварительно загрузите Hero-изображение, чтобы оно было обнаружено до того, как JS выдаст img:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Главное изображение для сайта (Hero Image) — что это и как сделать?
Я уже рассказывал про оптимизацию целевых страниц, а сегодня рассмотрю такую полезную штуку как Hero Image картинки на сайте. В наше время дизайн влияет на конверсию аудитории намного сильнее, чем может показаться на первый взгляд. Особенно важно первое впечатление! Хороший способ его улучшить – крупные Hero-изображения. Что же представляют собой эти большие картинки баннеры на сайте и как заставить их эффективно работать на вас? Немного теории + 26 удачных примеров ниже помогут в этом разобраться.
Что такое главное изображение и зачем оно нужно?
Это понятие подразумевает «крупную запоминающуюся картинку либо серию слайдов, размещаемых на самом видном месте главной страницы» (то есть в шапке). Вероятно, вы уже встречали подобные веб-проекты (если нет, вот 40+ примеров Hero Image для вдохновения):
Angie Schottmuller описывает термин как «привлекающее внимание фото/видео, используемое для поддержки, просвещения и убеждения посетителя. Оно включает такие аспекты, как релевантность, ценность, эмоции и контекст».
Таким образом, это не просто крупная фотография в шапке, а важный элемент веб-дизайна, который должен дополнять ваш проект, делая его содержимое и идею более ясными для пользователя, а также подчеркивая ценность предлагаемых услуг/товаров.
Зачем использовать?
Практикой доказано, что потребители предпочитают онлайн-ресурсы, которые:
Крупные главные изображения помогают одновременно обеспечить четкость, понятность и удобство восприятия заложенной идеи сайта, поэтому пользователю не требуется много времени для его оценки. На самом деле, на то чтобы составить мнение о вашем веб-ресурсе, у человека уходит около 0,05 секунды. Именно в этот кратчайший промежуток он решает, нравится ли ему увиденное или нет, останется он здесь или уйдет.
Таким образом, кроме всего прочего, осмысленные картинки баннеры или видео в шапке улучшают впечатление людей при первом посещении вашего проекта.
Как создавать и выбирать Hero Image?
Бесспорно, данный процесс требует не только научного, но и творческого подхода. Причем решение в одинаковой степени базируется и на брендинге, и на конверсии. В целом, вы можете воспользоваться следующими 7 критериями для оценки Hero Image, предложенными Angie Schottmuller.
Есть, кстати и другой эвристический подход, где советуют оценивать основное изображение в макете по таким критериям как:
Конечно, чтобы проверить соответствует Hero Image этим параметрам без длительного тестирования не обойтись, однако ответы на эти вопросы на начальном этапе разработки также весьма полезны.
4 типа главных изображений (+ примеры)
При анализе сайтов удалось выделить 4 вида реализаций нашей задачи:
Трудно сказать, какой из вариантов работает лучше/хуже остальных в том или ином случае, отличный способ выяснить это – провести A/B тестирование. А пока предлагаю глянуть парочку примеров для вдохновения…
Картинки баннеры с товарами/продукцией
Это наиболее интуитивная реализация. Она представляет собой крупный HD-снимок с презентацией ваших товаров/услуг. При этом продукт может находиться в движении, быть статичным и т. д. Задача графики — дополнить идею веб-ресурса наглядной демонстрацией.
Сервис онлайн-подписки для мужчин на «все необходимые вещи, когда они им нужны». Типичные заказы состоят из мужской одежды, бритв, и многого другого – то, о чем и говорится в подзаголовке. Однако Hero Image здесь работает эффективнее теста, визуально представляя предлагаемые товары.
Стартап по организации поездок на разных видах транспорта. Хотя ясность посыла здесь не так однозначна (фраза «транспортная экосистема» не для всех понятна), но большое изображение со смартфоном помогает разобраться, какого рода услуги компания предлагает. Иконки в приложении соответствуют доступным в нем видам транспорта.
С первого раза трудно понять зачем используется это устройство. Однако описание «вибрирующуая платформа для всего тела» немного проясняет детали. Дополнительно Hero Image дает понятное визуальное представление о принципе работы девайса — вам не придется углубляться в изучение контента продающей страницы чтобы докопаться до сути.
Еще одна наработка от компании Bulletproof – популярный кофейный напиток в компактных упаковках. Портативная версия напитка InstaMix подойдет тем, кто все хочет наслаждаться вкусом маслянистого кофе в дороге (туристам, путешественникам и т.п.).
Вполне логично, что на главной картинке сайта виден человек, держащий походный термос и пачку InstaMix – в итоге получаем отличную иллюстрацию применения рекламируемого продукта в жизни.
Компания Onnit продает товары для правильного питания, всевозможные пищевые добавки, а также оборудование для занятий фитнесом. На слайдере продающей страницы они особым образом выделяют поливитамины для ежедневного использования. Ключевая фраза «простейший способ вернуться в хорошую форму» из заголовка удачно дополняется фоткой реального продукта в упаковке.
В этом примере фирма Hammock Town (занимается гамаками) показывает, как выглядело бы ваше жилище после добавления 2х вместительных гамаков в виде коконов. Смотрится неплохо.
В последние годы явно прослеживается тренд использования анимации в Hero Image. И хотя этот пример от разработчиков Instapaper не является точной копией интерфейса их приложения, он иллюстрирует саму возможность читать тексты где и когда угодно.
Тут вы можете увидеть нечто похожее, но анимация посвящена статистике, отчетам и диаграммам, которые доступны в данном ПО. Это хороший способ заинтриговать пользователя и пригласить заглянуть в само приложение для просмотра всех его возможностей.
Контекстный Hero Image
Иногда компании не просто показывают большую картинку баннер со своей продукцией, а используют некий «дополнительный образ». Этот элемент обеспецичивает контекст или «поддержку» основному объекту/предложению. Это может быть сфера применения товара или что-то связанное с самим продуктом – то, что укрепляет ценность предложения и вызывает доверие у ЦА.
На вебсайте National Allergy продается различная продукция от аллергии. И хотя у них в ассортименте нет специальных препаратов для аллергиков, разработчики решили справа от заголовка разместить фото врача. По их мнению, оно должно убедить клиентов в том, что продукт легальный. Кроме того, благодаря ему кажется, что перед вами какой-то медицинский веб-ресурс.
Компания Bonobos использует в презентации не только конкретный продукт (купальные плавки), но и ту среду/окружение, где его реально использовать. Главная картинка с прыгающими в воду людьми намного убедительнее фотки крупным планом самой продукций.
Кстати, результаты проведенных тестирований показывают, что изображение людей (особенно в рекламе одежды) является весьма эффективным в плане привлечения внимания. Поэтому советую попробовать преподнести продукцию потенциальным клиентами с помощью дополнительного контекста в виде фотографий реальных людей.
Здесь используется нечто подобное — обыгрывается ситуация с уик-эндом на яхте, где группа молодежи весело проводит время, причем все они в купальных шортах Chubbies.
Разработчики из Fashion Metric создают мобильные приложения для онлайн-ритейлинга, позволяющие более точно предугадывать размеры потребителей – это помогает значительно снизить процент возвратов и, как следствие, повысить прибыль. Их предложение является инновационным, поэтому чтобы рассказать о его преимуществах, была выбрана идея с демонстрацией среды использования – фото технически оснащенного магазина в розничной торговли.
Эта фирма доставки в своем Hero Image представляет большой пакет со свежими и аппетитными продуктами. Глядя на картинку, возникает ощущение, что все эти вкусные продукты доставлены именно вам (вот вам и доп.контекст в нише доставки).
Еще один хороший пример — Uber в качестве презентации своей услуги могли бы представить изображение приложения, но они решили выбрать образ довольного клиента в салоне автомобиля. Эти улыбающийся люди в кадре показывают приятный реальный опыт использования данной службы такси.
Стартап RoverPass предоставляет услуги по бронированию мест в кемпингах и на парковках для фургонов. Как и в предыдущем случае, вместо крупного плана программного продукта, для ЦА показывается позитивный опыт от использования услуг. Возможно, это даже более удачный пример, т.к. фото кемпинга наталкивает на мысль об интересном путешествии и приятном времяпровождении.
Hero Image с фотографией основателей
Обычно подобные основные изображения размещаются в веб-ресурсах, оформленных в персональном/индивидуальном стиле. Их можно увидеть в шапке на главной в сочетании с предложением подписаться на e-mail рассылку. Иногда вместо фото на сайте отображается видео про разработчиков/авторов, что тоже относится к категории Hero Image. Вот некоторые примеры, которые, возможно, вам уже встречались…
Невил Медора – основатель интерактивного сервиса для обучения копирайтингу. Обучение проходит с помощью блога, электронной подписки и собственного курса Kopywriting Kourse. При этом можно увидеть хороший CTA-прием в виде направляющей подсказки – взгляд Невила направлен в сторону формы с электронной подпиской.
В следующем примере вообще все максимально просто — основатель ConversionXL указывает на «цепляющий» заголовок.
Улыбающееся лицо владелеца соц.сервиса SumoMe в шапке блога рядом с формой подписки говорит само за себя.
Специалист Брайан Дин пользуется большим уважением в SEO-сообществе, так почему бы не воспользоваться своим авторитетным влиянием?
Здесь в качестве Hero Image вместо фото с основателями представлен видеоролик. Стоп-кадр, отображаемый на странице, по сути, фиксирует их лица, поэтому эффект аналогичный тому, что и в вариантах выше.
Подобная стратегия применяется у Такера Макса — на статичной картинке видно его лицо в сочетании с соответствующей надписью (которая служит своего рода индикатором доверия). При включении видео вы услышите более детальный рассказ о сервисе.
Прием также использует и Дэнни Айни (занимается коучингом). Хотя, возможно, ему следовало сделать свое «ценностное предложение» более понятным дабы посетителям не пришлось прибегать к поиску дополнительной инфы на странице.
Неконтекстное главное изображение
Данные Hero Image картинки, как правило, не вписываются в глобальную картину веб-проекта. Обычно они используются из-за привлекательности или популярности образа, однако они не дополняют ценностное предложение и не делают информацию на сайте более ясной. Иногда они даже могут отвлекать клиента от важного послания, заставляя дополнительно обдумывать оффер и его выгоду.
Примечание: вполне возможно, следующие компании протестировали другие виды изображений и решили, что неконтекстные Hero Image для них наиболее эффективный вариант. Трудно сказать что-то определенное, т.к. нет подтверждающей аналитики.
Глядя на эту страницу, трудно сказать, чем занимается проект 500 Friends. В качестве основного изображения у них типичная графика из фотостока, к тому же она не помогает разобраться с основной сутью предложения компании.
Исходя из тайтла «Создайте свое музыкальное путешествие», можно понять, что Muru – это какое-то музыкальное приложение, связанное с настройкой персонализации музыкальных предпочтений.
Однако, если бы не этот заголовок, какую информацию вы бы получили от фотографии на скриншоте? Группа людей сидит за большим обеденным столом и что? — это не вносит никакой ясности на сайте для посетителей.
Если вы хотите убедительно проинформировать посетителей о виде ваших услуг и при этом стремитесь выделиться на фоне конкурентов, то вам следует избегать стоковых фото – подобных тем, что использует компания Leankit. Они, как правило, нерелевантны и не вызывают интереса.
Этот пример можно назвать худшим из всех приведенных — в нем нет никакой подсказки о роде деятельности фирмы. Мигающие фото ничего не говорят о продукте, а скорее раздражают. Очень маловероятно, что у посетителей возникнет желания углубляться в изучение такого ресурса. Пример — полная противоположность описанным выше критериями с легкостью и ясностью восприятия.
Итого. В качестве источника для перевода и вдохновения была использована эта статья. Что касается самих Hero Image, то при правильном выборе и использовании они дополняют идею вебсайта, делают его более понятным и близким для пользователя. Такой подход пригодится при создании корпоративного сайта для малого бизнеса т.к. помогает клиентам быстро понять ключевые преимущества вашего продукта.
Существует бесконечное количество способов и реализаций данной задачи, но важнее всего тестировать результаты после их внедрения. Изучите лучшие методы (будь то образы реальных людей, изображение продукта в контекстной среде и т. д.), а затем посмотрите какой из них лучше подойдет конкретно для вашего случая. При этом крайне не рекомендуется использовать фото со стока, будьте оригинальными и уникальными.