// - Серебряные нити

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

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 должен адекватно представлять продукт или компанию.

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

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

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

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

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

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

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

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

Заключение

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


Источник: Advertology.Ru

Межрегиональные конкурсы корпоративных медиа «Серебряные нити»

«СН - Приволжье и Урал 2017»

КТО?

В Конкурсах могут принять участие корпоративные газеты и журналы, корпоративные digital-издания, корпоративные сайты и интранет-порталы, спецпроекты в области корпоративных коммуникаций (книги, буклеты, фотоальбомы, годовые отчеты), созданные в 2016-2017 годах. Каждая компания может представить на конкурс любое количество проектов; каждый проект можно представить в любом количестве номинаций.

В КАКИХ НОМИНАЦИЯХ?

  • «Лучшая корпоративная газета»
  • «Лучший корпоративный журнал»
  • «Лучшее digital –издание»
  • «Лучший корпоративный сайт»
  • «Лучший корпоративный интранет-портал»
  • «Лучший спецпроект в корпоративных медийных коммуникациях»
  • «Лучшее вузовское издание» / «Лучшее СМИ учебного заведения» 

КАК?

Передайте в Оргкомитет заполненную творческую заявку с материалами проекта и оплатите регистрационный взнос. Регистрационный взнос за участие в Конкурсе составляет 1900 руб./за 1 ресурс в 1 номинации; НДС не облагается. Учебным заведениям, участвующим в Конкурсе, предоставляется скидка - 50%. В данный регистрационный взнос не входит участие в Межрегиональном Форуме корпоративных медиа «Серебряные нити - Приволжье и Урал 2017». Регистрационный взнос за участие в Форуме составляет 2500 руб.; НДС не облагается (команды Медийного хакатона участвуют в Форуме бесплатно). Учебным заведениям, участвующим в Форуме, предоставляется скидка - 50%.

КОГДА?

01.07.2017 – 30.09.2017 – прием творческих заявок

Сентябрь-октябрь – оценка экспертами конкурсных проектов

Октябрь – подведение итогов Конкурса, Межрегиональный Форум корпоративных медиа «Серебряные нити Приволжье и Урал 2017» и награждение победителей (дата проведения Форума - 27-28 октября 2017 года; место проведения - г. Киров)

Спикеры Форума:

Елена Александрова, начальник пресс-службы филиала «КЧХК» компании «Уралхим», депутат Законодательного собрания Кировской области/ г. Киров

Виктор Белимов, начальник Управления по связям с общественностью ООО «УГМК-Холдинг» / Свердловская обл., г. В. Пышма

Наталья Муравьева, председатель Оргкомитета Национального конкурса корпоративных медиа «Серебряные нити», ректор Академии коммуникации и информации, доктор филологических наук, профессор, член Российской коммуникативной ассоциации / г. Москва

Светлана Колосова, президент консалтинговой группы «Старая Площадь» /г. Москва

Ольга Пестерева, заместитель генерального директора по управлению коммуникациями ПАО «Микрон» /г. Москва

Всеволод Пуля, Управляющий редактор RussiaBeyondTheHeadlines (международный проект «Российской газеты»), со-основатель агентства MediaToolbox.ru /г. Москва

Григорий Холкин, начальник отдела внутренних коммуникаций и корпоративных СМИ компании «Северсталь» / г. Москва

Ольга Шалаева, руководитель проекта – главный редактор газеты «Территория ОМК», Объединенная металлургическая компания/ г.Москва

Александра Терентьева, менеджер отдела по работе с социальными медиа ПАО «Северсталь» / г. Москва

Организаторы и стратегические партнеры:

Федеральное государственное бюджетное образовательное учреждение высшего образования «Вятский государственный университет» (ВятГУ)

Союз «Вятская торгово-промышленная палата»

Союз «Торгово-промышленная Палата Республики Татарстан»

Союз «Пермская торгово-промышленная палата»

Пермская Гильдия добросовестных предприятий

Нижегородская ассоциация промышленников и предпринимателей

Союз журналистов Нижегородской области

Пермская краевая организация Союза журналистов России

Ассоциация коммуникационных агентств России (АКАР)

Некоммерческое партнёрство для содействия развития внутрикорпоративных коммуникаций (НП СРВК)

Некоммерческое партнерство «Пермское представительство Российской ассоциации по связям с общественностью»

Академия коммуникации и информации /г.Москва

АНО «Содействие профессиональным коммуникациям» / г. Киров

Информационные партнеры:

ИА «Новости Федерации» / Regions.ru

ИА «Татар-информ» / г. Казань

ИА «Гарант»

www.prnews.ru

MediaGuide.ru 

PlanetaSMI.ru

http://www.smibpress.ru  

Группа компаний InMedia / г. Киров

Региональный экспертный совет:

Александрова Елена Викторовна, начальник пресс-службы филиала «КЧХК» компании «Уралхим», депутат Законодательного собрания Кировской области/ г. Киров

Базыльчик Светлана Иосифовна, начальник управления корпоративных СМИ ПАО «ТМК» / г. Москва

Белимов Виктор Николаевич, Начальник Управления по связям с общественностью ООО «УГМК-Холдинг» / Свердловская обл., г. В. Пышма

Данилин Роман Альбертович, генеральный директор группы компаний InMedia/ г. Киров

Дрогов Евгений Михайлович, директор издательства «О-Краткое», председатель Кировского отделения Союза журналистов России/ г. Киров

Игошина Юлия Викторовна, и.о. заведующего кафедрой журналистики и интегрированных коммуникаций ВятГУ/ г. Киров

Княжеченко Анастасия Игоревна, директор по работе с клиентами практики Marketing Communications коммуникационного агентства «Р.И.М. Porter Novelli» / г. Москва

 Колосова Светлана Валентиновна, президент консалтинговой группы «Старая Площадь» /г. Москва

Малашенко Наталия Юрьевна, директор по корпоративным отношениям компании UPM Россия /г. Москва

Рыбакова Мария Викторовна, начальник управления коммуникаций и информационной политики «Объединенные машиностроительные заводы» (Группа Уралмаш-Ижора) /г. Москва

Смирнова Ольга Юрьевна, начальник информационного центра ПАО «Уралкалий» / Пермский край, г. Березники

Терно Ольга Игоревна, директор департамента внешних коммуникаций и связей со СМИ ОАО «Скоростные магистрали» / г. Москва

Холкин Григорий Геннадьевич, начальник отдела внутренних коммуникаций и корпоративных СМИ компании «Северсталь» / г. Москва

Шалаева Ольга Валентиновна, руководитель проекта – главный редактор газеты «Территория ОМК», Объединенная металлургическая компания/ г.Москва

Куратор проекта

Ольга Шалаева, член Большого экспертного совета Национального конкурса корпоративных медиа «Серебряные нити», председатель Регионального экспертного совета

E-mail: shalaeva_ov@omk.ru, osh-osh@rambler.ru

 

«СН - Сибирь и Дальний Восток 2017»

 

Впервые в этом году «Серебряные нити» проводят Межрегиональный конкурс «СН – Сибирь и Дальний Восток 2017».

КТО?

В Конкурсе могут принять участие корпоративные газеты и журналы, корпоративные digital-издания, корпоративные сайты и интранет-порталы, спецпроекты в области корпоративных коммуникаций (книги, буклеты и корпоративные календари, фотоальбомы), созданные в 2016-2017 годах. Каждая компания может представить на конкурс любое количество проектов; каждый проект можно представить в любом количестве номинаций.

В КАКИХ НОМИНАЦИЯХ?

Для проекта устанавливаются номинации.

  • «Лучшая корпоративная газета»
  • «Лучший корпоративный журнал»
  • «Лучшее digital –СМИ»
  • «Лучший корпоративный сайт»
  • «Лучший корпоративный интранет-портал»
  • «Лучший спецпроект в корпоративных медийных коммуникациях»
  • «Лучшее вузовское издание» / «Лучшее СМИ учебного заведения»

КАК?

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

Регистрационный взнос составляет Регистрационный взнос на 1 медийный ресурс в 1 номинации Межрегионального конкурса СН составляет 1900 руб., НДС не облагается. В данный регистрационный взнос не входит участие в Межрегиональном форуме корпоративных медиа «Серебряные нити» и Церемонии награждения победителей.

КОГДА?

01.07.2017 – 15.08.2017 – прием творческих заявок

Август – оценка экспертами конкурсных проектов

Сентябрь – подведение итогов Конкурса, Межрегиональный Форум корпоративных медиа «Серебряные нити Сибирь и Дальний Восток 2017» и награждение победителей (предварительные сроки Форума - вторая декада сентября 2017 года; место проведения - г. Владивосток)

Организаторы:

Академия коммуникации и информации /г.Москва

Ассоциация коммуникационных агентств России (АКАР)

Некоммерческое партнёрство для содействия развития внутрикорпоративных коммуникаций (НП СРВК)

 

Информационные партнеры:

ИА «Новости Федерации» / Regions.ru

ИА «Гарант»

www.prnews.ru

MediaGuide.ru 

PlanetaSMI.ru

http://www.smibpress.ru  

 

Куратор проекта

Анатолий Зубарев, член Большого экспертного совета Национального конкурса корпоративных медиа «Серебряные нити», председатель Регионального экспертного совета

Контакты для заявок и информации:

Татьяна Андреева, координатор в Москве

E-mail: silver_niti@rambler.ru

Узнайте больше по телефону: +7-916-166-9909

Пресс-служба Национального конкурса корпоративных медиа «Серебряные нити»

Мария Пономарева, руководитель пресс-службы

Тел.: +7-916-929-7519

E-mail: silver_niti@mail.ru

https://www.facebook.com/korporatemedia

 

Читать Далее