Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Рекомендации по использованию изображений в дизайне

26 марта 2013 | Опубликовано в статьюшечки | 5 Комментариев »

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Этот пример показывает, насколько большое влияние может иметь картинка.

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

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

В цифрах исследование показывает еще более очевидные результаты. На начальном изображении (слева) очень мало внимания сосредотачивается на бренде и продукте — только 6% людей посмотрели на эти элементы. Однако после того, как изображение было изменено и снова проверено — не менее 84% людей посмотрели на продукт и бренд (даже логотип внизу). Процент был увеличен в 14 раз, что является огромной разницей.
Правое изображение может помочь дизайнерам сосредоточить внимание пользователей на нужном элементе. 

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

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

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

площадь

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

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

MacBook Air объявление

Ключ доверия

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

Укрепление доверия невероятно важно при работе с онлайн-посетителями.
Очень интересно было почитать о достижении  интернет-магазина по продаже бразильских и карибских картин. Они смогли увеличить конверсию своего сайта более чем на 95%, с 8,8 до 17,2. Как?  Вместо того чтобы показывать эскизы картин, они показали фотографии художников, которые сделали их. Качество картины никогда не было проблемой, проблемой было, что посетители не доверяли магазину. Просто показывая лица художников, посетители поняли, что они покупают картины от реальных людей. Выводы, что у клиентов возникает эмоциональная связь с художниками, фото которых они видят на сайте. 

Оптимизация

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

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

веб-странице статистики размере

Средний размер страницы в период 15 февраля 2013. Перед тем, как загрузить изображения на сайт, можно уменьшить размер изображений без особой потери качества, открыв с помощью Photoshop и выбрав Save for Web & Devices.

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

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

Ширина и высота изображения

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

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

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

 

Автор: Christian Vasile

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

 

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




Комментарии

  1. Ксения
    Thumb up Thumb down +3

    «Руководстов по юзабилити» — руководство. опечаточка.

    Вообще статья немного банальная, но повторение — мать учения.

    Ответить

  2. Елена
    Thumb up Thumb down +3

    На самом деле, очень интересная статья. Спасибо:)

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

    Ответить

  3. Артем
    Thumb up Thumb down +7

    Спасибо, очень интересная статья, особенно для новичков, вроде меня. Буду рад почитать еще что-нибудь на такую же тему.

    Ответить

  4. trampler
    Thumb up Thumb down +2

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

    Как в воду глядел.

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

    Ответить

  5. Алексей
    Thumb up Thumb down +1

    Добротная статья! =)

    Ответить

Оставить ответ


+ семь = 12

Вставить изображение