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

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

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

Руководство по юзабилити  - работа с изображениями

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

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

Эмоциональная привлекательность – хорошо ли выглядит продукт на картинке и увеличивает ли оно спрос?

Рациональная привлекательность – показывает ли изображение преимущества продукта?

Привлекательность бренда – картинка соответствует бренду?

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

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

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

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

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

Качество и актуальность

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

Руководство для пользователей

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

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

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

JCDecaux  и THiNK , несколько лет назад работали вместе и придумали следующее исследование. Оно также подтверждает результат выше. С помощью изображений можно контролировать ключевую информацию и элементы, на которые должны обратить внимание посетители. 

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

У изображений должна быть цель

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

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

 Это блестящий пример эффективного использования изображений! 

Еще одним хорошим примером является реклама продукта MacBook Air компании  Apple. Все знают, что он маленький, легкий и красивый. Но  если вы все же не в курсе этого, в течении нескольких секунд, взглянув на картинку, вы сможете это узнать.

Ключ доверия

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

Оптимизация

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

Во-первых, нужно отметить, насколько на самом деле важна оптимизация. 61,9% веб-страниц заполнены изображениями, при этом их средний размер 1.29MB. Изображения занимают много времени для загрузки. 

Ширина и высота

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

Но это достаточно старый метод, и он не очень эффективен для мобильных браузеров. Поэтому нужно не забывать указывать размеры для разных разрешений экрана. 

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

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

Автор: Christian Vasile

Перевод — Дежурка

Читайте также:

• 15 причин, почему каждому фрилансеру нужен блог
• Тестирование дизайна макетов сайта