Статьи

Выбираем героя для главной страницы сайта - советы UX-дизайнера

Выбираем героя для главной страницы сайта - советы UX-дизайнера

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

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

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

1. Обеспечьте релевантность

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

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

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

Образ героя на главной странице Lunet Eyewear уточняет основной месседж сайта

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

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

Slack использует в качестве образа героя интерфейс своего приложения

Выбор hero image — скорее искусство, чем наука. И всё же мы можем упростить эту задачу с помощью чек-листа, созданного Энджи Скотмюллером. Перед тем, как использовать то или иное изображение, убедитесь, что оно отвечает следующим семи принципам: 

  1. Релевантность ключевым словам. Является ли выбранное изображение их визуализацией?
  2. Чёткость цели. Уточняет ли изображение месседж сайта?
  3. Соответствие дизайну. Образ героя должен ненавязчиво подталкивать посетителя к целевому действию.
  4. Аутентичность. Внушает ли образ героя доверие к бренду?
  5. Демонстрация ценности. Показывает ли образ героя преимущества продукта или бренда?
  6. Нужные эмоции. Вызывает ли образ героя те эмоции, которые подталкивают посетителя к целевому действию?
  7. Клиент как герой. Может ли клиент представить себя в роли героя (в случае, если он приобретёт продукт)?

2. Превратите образ героя в шедевр

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

Образ героя на сайте Breitling 

3. Выбирайте эмоциональные изображения

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

Сайт Coca-Cola

Сайт Adobe

4. Hero image должен загружаться как можно скорее

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

Стив Содерс в своей статье Hero Image Custom Metrics («Пользовательские метрики для образа героя») предлагает добавлять на такие страницы специальные метрики, позволяющие определять, когда контент становится видимым. В качестве примера приведём код встроенного таймера, который вставляется сразу после тега img. 

<img src=”hero.jpg” onload=”performance.mark(‘hero1’)”><script>performance.mark(‘hero2’)</script>

Это что-то вроде User Timing API. Посмотреть, как он работает, можно на тестовой странице Стива. 

5. Используйте изображения только с высоким разрешением

Hero image не должен быть зернистым или расплывчатым. Нет ничего хуже, чем некачественное изображение большого формата, ведь первое впечатление — самое важное.

Так выглядит некачественная версия изображения того же размера

6. Адаптируйте изображение под экраны разного размера

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

Эту проблему можно решить с помощью Responsive Breakpoints Generator — бесплатного инструмента, позволяющего создавать и отслеживать контрольные точки изображений в интерактивном режиме.

Responsive Breakpoints Generator позволяет работать с изображениями разного размера

7. Подчеркните призыв к действию 

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

Кнопка призыва к действию визуально уравновешивает крупное изображение

Используйте эффект размытия, чтобы протестировать визуальную иерархию страницы. Это поможет убедиться, действительно ли взгляд пользователя зацепится за то, за что должен зацепиться. Всё, что вам понадобится, — это применить к скриншоту страницы object blur effect в Adobe XD (добавить эффект размытия). Оценив полученный результат, вы сможете исправить ситуацию.

Тест на размытость позволяет выявить визуальную иерархию дизайна

8. Создайте контраст

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

Используйте цветной слой

Самое простое, что можно сделать, — это наложить плоский текст на изображение. Если контраст между текстом и изображением недостаточен, проложите между ними полупрозрачный цветной слой.

На сайте Outlines текст идёт поверх цветного слоя

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

Голубой фон hero image для Clique хорошо сочетается с цветом интерфейса приложения

Добавьте контраст с помощью фона

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

Уровень прозрачности может меняться

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

Практические советы по применению подобных инструментов можно найти в статье Design Conversations: Text on Images («Беседы о дизайне: текст поверх изображения»).

9. Показывайте реальных людей

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

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

Такие фотографии оставляют у пользователя неприятное ощущение мелкого притворства

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

Сайт Daniella Draper

Сайт The Renovator

И ещё пара советов:

  • Фотография одного человека работает лучше, чем массовый снимок.
  • Ищите изображения с подлинной историей. Герои фотографий должны взаимодействовать с продуктом или, по крайней мере, делать нечто интересное.​

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

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

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

Простые для понимания иллюстрации Dropbox помогают прояснить и донести до пользователей сложные идеи

Иллюстрации Basecamp апеллируют к воображению пользователей и помогают бренду устанавливать с ними сильную эмоциональную связь 

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

Заключение

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

10.07.2017

на печать


Комментарии

Написать комментарий

 Проверочный код

Архив

Пн Вт Ср Чт Пт Сб Вс

Рассылка

Подписка на рассылку

E-mail:
 

Также нашу рассылку вы можете получать через

E-mail:  

на правах рекламы

Есть мнение ...

Маркетинг с AR и VR от HICLICKМаркетинг с AR и VR от HICLICK
В 2024 году маркетологи все чаще начинают использовать метавселенные. По сравнению с социальными сетями, вовлеченность пользователей в иммерсивных площадках гораздо больше. Одним из самых интересных для клиентов форматов являются АR и VR. Как технологии будущего применять в маркетинге уже сегодня, разобрали в агентстве высоких откликов HICLICK.
Коkос Group: ИИ в рекламной индустрии: модный тренд или революция?Коkос Group: ИИ в рекламной индустрии: модный тренд или революция?
Искусственный интеллект уже давно среди нас. Он прочно вошел в нашу жизнь, используется абсолютно в разных её сферах и кардинально меняет лицо современного бизнеса. Рекламная индустрия - не исключение. Самый яркий и известный пример - это нейросети, на основе которых построен поиск рекламных систем Яндекса. Использование нейросетей и других алгоритмов ИИ, делает рекламу еще более эффективной и качественной. Евгений Халин, директор по продуктам Коkос Group рассказывает о том, как работает ИИ, в чем его преимущество и какие перспективы нас ждут.
Как подготовить маркетинг к 8 марта и 23 февраляКак подготовить маркетинг к 8 марта и 23 февраля
В период гендерных праздников предприниматели отмечают 50%-ый рост продаж. – Даже в случае торговли сепараторами или двигателями, при должном подходе. Для маркетологов это время – забег на короткие дистанции. Поэтому важно грамотно подойти к выбору инструментов.
Тренды в мобильном маркетинге-2024Тренды в мобильном маркетинге-2024
Как будет работать мобильный маркетинг в 2024 году и какие тренды прямо сейчас влияют на весь рынок, рассказывает Алла Рауд, руководитель направления ASO в IT-Agency.
Новые медиа – Новая реальностьНовые медиа – Новая реальность
Сегодня российская блогосфера стремительно трансформируется. И это неудивительно: только за последний год ведущие отечественные социальные сети продемонстрировали, пожалуй, самую серьезную бизнес- и маркетинговую активность за долгие годы – появились новые сервисы, произошло резкое расширение аудиторий, усилился приток авторов, возникли инновационные форматы и мн. др.  Блогеры, в свою очередь, стали расширять перечень жанров, в которых они работают; оформился тренд на мультиформатность и партнерства. Рекламодатели же сделали ставку на блогосферу как на приоритетный и наиболее эффективный канал продвижения. Наконец, государство стало рассматривать блогосферу как полноценного экономического субъекта, что, естественно, отразилось в законодательной базе.

Книги по дизайну

Загрузка ...

Репортажи

Дизайн под грифом &quot;секретно&quot;Дизайн под грифом "секретно"
На чем раньше ездили первые лица страны? Эскизы, редкие фотографии и прототипы уникальных машин.
&quot;Наша индустрия – самодостаточна&quot;: ГПМ Радио на конференции..."Наша индустрия – самодостаточна": ГПМ Радио на конференции...
Чего не хватает радио, чтобы увеличить свою долю на рекламном рынке? Аудиопиратство: угроза или возможности для отрасли? Каковы первые результаты общероссийской кампании по продвижению индустриального радиоплеера? Эти и другие вопросы были рассмотрены на конференции «Радио в глобальной медиаконкуренции», спикерами и участниками которой стали эксперты ГПМ Радио.
Форум &quot;Матрица рекламы&quot; о технологиях работы в период...Форум "Матрица рекламы" о технологиях работы в период...
Деловая программа 28-й международной специализированной выставки технологий и услуг для производителей и заказчиков рекламы «Реклама-2021» открылась десятым юбилейным форумом «Матрица рекламы». Его организовали КВК «Империя» и «Экспоцентр».
В ЦДХ прошел День социальной рекламыВ ЦДХ прошел День социальной рекламы (3)
28 марта в Центральном доме художника состоялась 25-ая выставка маркетинговых коммуникаций «Дизайн и реклама NEXT». Одним из самых ярких её событий стал День социальной рекламы, который организовала Ассоциация директоров по коммуникациям и корпоративным медиа России (АКМР) совместно с АНО «Лаборатория социальной рекламы» и оргкомитетом LIME.
Форум &quot;Матрица рекламы&quot;: к рекламе в интернете особое...Форум "Матрица рекламы": к рекламе в интернете особое... (2)
На VII Международном форуме «Матрица рекламы», прошедшем в ЦВК «Экспоцентр» в рамках международной выставки  «Реклама-2018», большой интерес у профессиональной аудитории вызвала VI Конференция «Интернет-реклама».

Форум

на правах рекламы

28.03.2024 - 22:37
RSS-каналы Advertology.RuRSS    Читать Advertology.Ru ВКонтактеВКонтакте    Читать Advertology.Ru на Twittertwitter   
Advertology.Ru - все о рекламе, маркетинге и PR
реклама

Вход | Регистрация