Далее в статье вы можете ознакомиться с тем, что мы думаем по этому поводу, или сразу:

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

Вот краткий список того, какой эффект вызывают у посетителей посадочной страницы фотографии лиц и людей.

1. Захват внимания на лендинге

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

2. Управление взглядом

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

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

3. Вовлечение в продающие триггеры

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

4. Визуализация эмоций

В своей книге «Designing for Emotion» Аарон Уолтер определяет эмоции как «всеобщий язык человечества», язык, доступный каждому человеку от рождения. Люди во всем мире понимают, что значит плакать или смеяться, бояться или беспокоиться.

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

Джордж Клуни (George Clooney) является лицом рекламной кампании Nespresso. На сайте, лендингах и билбордах продукта мы видим актера, глядящего на чашку напитка в его руке. Nespresso, в принципе, на вид ничем не отличается от любого другого кофе — картинка не передает ни вкуса, ни аромата — однако незаурядный актер Клуни только за счет мимики передает всю гамму чувств, возникающую в предвкушении первого глотка ароматного напитка.

5. Установка личной связи

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

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

6. Визуальная привлекательность

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

На главной странице Cirque du Soleil очень важное место занимает изображение эффектно раскрашенного красивого лица. Дизайн в остальном очень минималистичный и чистый. Но лицо настолько выражает красоту человека, что посетителя охватывает интерес и волнение, удовлетворить каковые он может лишь проникнув вглубь ресурса. Все, цель достигнута! Вот вы уже покупаете билет на одно из известных шоу этого великолепного и оригинального цирка.

7. Сфера влияния

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

На лендинге SaaS-сервиса создания виртуальных фотоальбомов Pastbook размещена фотография дружеской компании, празднующей день рождения. Снимок сделан нарочито «не в фокусе», однако он создает мощную сферу эмоционального воздействия.

8. Создание доверия

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

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

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

9. Заставьте ваших посетителей улыбаться!

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

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

Желательно располагать элементы на лендинге в определенной иерархии, созданной в соответствии с целью вашего бизнеса. Если же у вас нет конкретной цели, вы не сможете правильно расставить приоритеты. Вот пример с сайта Williams Sonoma, продающего посуду. Главной приманкой для глаз пользователя является огромный кусок мяса (пробуждает желание), за которым следует заголовок (объясняет, что это за оффер) и кнопка призыва к действию (получить его!). Четвертое место занимает абзац текста под заголовком, на пятом – обещание бесплатной доставки, баннер в верхней части окна привлекает к себе внимание последним. Перед нами – отлично построенная визуальная иерархия.

Цвет и контраст в лендинге

Вот распространенный А/Б-тест цветов CTA-кнопки:

Кажется, что именно красный конвертирует лучше, чем зеленый, на 21%. А если подумать?

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

Пустое пространство подчеркивает важность элемента

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

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

У вас еще вызывает удивление то, что наиболее популярные сайты, например Amazon, отдают приоритет левой стороне целевых/товарных страниц?

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

На следующем одностраничнике изображен младенец и размещен заголовок об уходе за кожей ребенка.

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

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

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

иконка «Без предоплаты» (No Fees), даже не активизирующаяся кликом мышки, привлекает больше всего пользовательского внимания, хотя не призывает к действию и не несет никакой важной информации.

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

Рассмотрим изменения и последующее тестирование, предпринятые для решения этой проблемы.

Теперь кнопка «Звоните прямо сейчас» выделяется на фоне остальных визуальных элементов страницы. Это огромный плюс, иначе как клиентам связаться с компанией?

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