Pull to refresh
0

Фотографии как контент

Reading time 5 min
Views 13K
Original author: Jakob Nielsen
Якоб Нильсен
Перевод статьи известнейшего американского специалиста по юзабилити Якоба Нильсена (Jakob Nielsen):

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


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

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

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

Фотографии людей — Хорошо (если это реальные люди)


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

FreshBooks.com пошли еще дальше и разместили на сайте фотографии всех своих сотрудников:
Фиксация взглядов

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

На этой странице пользователи проводили на 10% больше времени, просматривая фотографии сотрудников, нежели биографии, хотя последние занимали на 316% больше места. Очевидно, что пользователи торопились и хотели быстро просмотреть команду сайта FreshBooks.com, а просматривание фотографий куда быстрее, чем чтение параграфов целиком.

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

И, напротив, люди полностью игнорируют изображения «обычных людей» из фотобанков:
Студентка


Я считаю, что это фото из Йельской Школы Управления в действительности показывает настоящих студентов (фото из стока врядли было бы так плохо обрезано или на нем были бы сутулящиеся модели, как парень в синей рубашке). Но тем не менее, фотография на этой странице только для заполнения пустого пространства. Пользователи здесь, чтобы понять процесс подачи заявок на поступление, а не чтобы оценить степень сутулости студента.

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

Как мы уже обсуждали на семинаре «Бренд как опыт», способ побуждения покупателя к заказу — сделать ему привлекательное предложение, что означает сосредоточение на удовлетворении потребностей клиента. Этот урок остается актуальным как для некоммерческих организаций, так и для университетов, даже если они не воспринимают свою аудиторию в качестве клиентов.

Детали продукта на фото — Хорошо


Сравните эти два примера вида списка товаров от Pottery Barn и Amazon.com:


Миниатюры фоторамок изучаются пользователями более интенсивно, тогда как миниатюры плоских телевизоров в основном игнорируются. На самом деле на полной версии страницы Amazon (сейчас показана лишь верхняя часть) только 18% времени просмотра тратится на фотографии, тогда как 82% внимания уделяется тексту. В среднем миниатюры каждого продукта 0,9 фиксаций взгляда, тогда как текстовые описания притягивают в среднем 4,4 фиксации.

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

Это прекрасный пример того, почему не всегда хорошо копировать дизайн крупнейших сайтов. Ассортимент товаров на Amazon.com невероятно огромен, поэтому они используют максимально стандартизированный вид вывода товаров без оптимизации под конкретную категорию. Напротив же, Pottery Barn заточен под узкий ассортимент и поэтому на его страницах более детальные фотографии.

Большие изображения — Хорошо (когда они требуются)


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

Еще в 2005 году «Недостаточное увеличение фотографий» было номером 10 в моём TOP10 ошибок в веб-дизайне. То есть, когда пользователь щелкает по ссылке «увеличить», ему показывали изображение может быть всего на 20% больше. А оно должно быть по крайней мере в 2 раза больше изначального размера, желательно даже еще больше. К сожалению, эта ошибка и по прошествии 5 лет все еще встречается.

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


Обратите внимание, как крупный план лицевой панели с ExtremeTech.com привлек 12 фиксаций взгляда (фотография на сайте была в два раза больше, чем здесь).

Несущие информацию изображения — Хорошо


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

Вкладывайте деньги в хорошие фотоснимки: отличный фотограф серьезно добавит ценности вашему веб-сайту.

Резюме


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

P.S. От себя хотелось бы добавить ноту в защиту минимализма на современных веб-сайтах. Господа заказчики, не нужно просить добавлять и добавлять графические элементы в хорошую «чистую» работу просто, чтобы были красивые картинки. Эта статья подтверждает, что на них никто не смотрит.
Tags:
Hubs:
+25
Comments 22
Comments Comments 22

Articles

Information

Website
www.sibirix.ru
Registered
Founded
Employees
31–50 employees
Location
Россия