Статьи

Выбираем героя для главной страницы сайта - советы 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:  

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

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

Антитренды наружной рекламыАнтитренды наружной рекламы
Антитрендами наружной рекламы в текущем году стали прямолинейность и чрезмерная перегруженность сообщений. Наружная реклама продолжает показывать рост: число рекламных конструкций за последний год увеличилось более чем на 2 тысячи.
Мария Бар-Бирюкова, Sellty: продажи на маркетплейсах не заменят...Мария Бар-Бирюкова, Sellty: продажи на маркетплейсах не заменят...
В компании Sellty спрогнозировали развитие рынка электронной коммерции в сегменте СМБ на ближайший год. По оценке основателя Sellty Марии Бар-Бирюковой, число собственных интернет-магазинов среднего, малого и микробизнеса продолжит расти и увеличится минимум на 40% до конца 2025 года. Компании будут и дальше развиваться на маркетплейсах, но станут чаще комбинировать несколько каналов продаж. 
Более двух третей представителей сферы рекламы, маркетинга и PR...Более двух третей представителей сферы рекламы, маркетинга и PR...
10 сентября – Всемирный день психического здоровья. Специально к этой дате компания HINT опросила коллег в сфере маркетинга, рекламы и пиара, чтобы понять, как представители этих профессий могут помочь себе и другим поддержать в норме психическое здоровье.
День знаний для маркетологовДень знаний для маркетологов
Как не ошибиться с выбором формата обучения и предстать перед будущим работодателем успешным специалистом. Директор по маркетингу ведущего IT-холдинга Fplus Ирина Васильева рассказала, на что теперь смотрят работодатели при приеме на работу, как нестандартно можно развиваться в профессии и стоит ли действующим маркетологам обучаться на онлайн-курсах.
Почему покупатели бросают корзины в интернет-магазинах - исследованиеПочему покупатели бросают корзины в интернет-магазинах - исследование
Эксперты ЮKassa (сервис для приёма онлайн- и офлайн-платежей финтех-компании ЮMoney) и RetailCRM (решение для управления заказами и клиентскими данными) провели исследование* и выяснили, почему пользователи не завершают покупки в интернет-магазинах. По данным опроса, две трети респондентов хотя бы раз оставляли заказы незавершёнными, чаще всего это электроника и бытовая техника, одежда и товары для ремонта. Вернуться к брошенным корзинам многих мотивируют скидки, кэшбэк и промокоды.

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

Загрузка ...

Репортажи

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

Форум

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

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

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