Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

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

Связь с пользователем

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

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

Таким образом, лица не просто привлекают внимание, их используют для направления внимания посетителей на ключевые элементы на странице. Иногда используют изображения, на которых человек смотрит на CTA (призыв к действию). Соответственно, пользователь тоже подсознательно начинает смотреть в ту же сторону и видит нужную дизайнеру кнопку, ссылку, видео и так далее.

Вариации всего, что мы описали, представлены на проектах schnabuliermarkt, blancohotelformentera, eighthourday, volkswagen

Лица и эмоциональная атмосфера

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

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

Кроме того, в погоне за интересами важно также, чтобы лица отображали правильную эмоцию по отношению к продукту/услуге. Хотя слишком увлекаться с этим моментом не стоит. Не всегда все товары способны вызывать улыбку, смех или одинаковую мимику.

Наглядно увидеть то, о чем мы рассказали можно на savethechildren, doomtree, krisztinatoth, hashtagbay, cuebiq

Доверие можно создать

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

И делается это несколькими способами. Например, это может быть общая фотография всей команды; могут быть отдельные личности, что используют некоторый продукт или услугу. Кроме этого пользователи могут узнать о том, как люди относятся к проекту по выражению глаз на фотографиях, по позам. И это отлично реализовывается в видеороликах. Можно сколько угодно говорить: «Какой это отличный пылесос!», описывать его и расхваливать, но то, как им будет пользоваться человек (не актер), может сказать обывателю гораздо большее.

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

 

Например, проект krisztinatoth использует не фотографию, но полигонный фильтр для портретного изображения. Тем не менее, поскольку это все же реальная личность (Кристина), то мы чувствуем её…доброту, искренность, немного лукавства во взгляде и главное, естественность в позе, в наклоне головы. Аналогично выглядит и anesthesiologie, на котором представлены фотографии реальных людей. Стоят внимания также и сайты studioyacine, yes-avocats. И для сравнения посмотрите на сайт julianmatthews. Здесь дело даже не в том, что мужчина и женщина не улыбаются или не смеются, а в целом в композиции, что они создают, в выражении лиц, взгляде, мимике.

Осторожно, «фейк»!

Итак, существует только один тип лиц, который вряд ли кто-то из веб-дизайнеров захочет использовать в своей работе – «фальшивые», нереалистичные на фотографиях/изображениях. И вы это знаете, и мы уже об этом в общих чертах рассказывали в отдельном материале. Проще всего узнать такие фотографии по идеальным лицам, заретушированной коже (когда она теряет текстурность и часть мимических морщин, будто бы это кукла), большой улыбке (в реальности мы редко так сильно и шииироко улыбаемся (во все 32 зуба), особенно в офисах).

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

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

Дополнительно могут быть интересны также сайты lifeatexpedia, zahn, banditwines, 12storeez, toppaddockcafe, microsoft, ea, ubisoft.

Завершение

Людям по природе своей нравится смотреть на других людей: что они делают, как и куда смотрят, какие эмоции испытывают. И зачастую всем нам порой хочется стать частью чего-то. Частью крупной компании или оказаться среди веселых и шумных друзей, нам хочется тоже отправиться в поход следом за кем-то или тоже порадоваться функциональным предметам. Как бы просто это не звучало, но именно в этом и заключается вся идея использования лиц в веб-дизайне. По этой же причине фотографии или изображения работают «на ура» в большинстве случаев.

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

«Хорошие шины для зимы!» - достаточно представить автомобиль, который едет (или стоит) на/по дороге и создать зимний пейзаж. Гораздо сложнее сделать так, чтобы рядом находились люди (один водитель или семья), которые бы испытывали радость или один смотрел на шины, а другие выражали бы восторг (умеренный). Что-то похожее есть на сайте Volkswagen, но не такое тематическое. Разумеется, сами и заказчики не готовы зачастую давать фотографии сотрудников, хотя именно таковые и не всегда нужны.

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

Как вам материал?