UX дизайн: эффект превосходства изображения

Статья для начинающих UX/UI дизайнеров, исследователей и аналитиков. В статье рассказывается о том, почему картинки и фотографии лучше текста (с научной точки зрения). Как мозг пользователей кодирует и запоминает контент на сайтах. И как применять эти знания в дизайне сайтов.

Канадский профессор психологии Аллан Пайвио (Allan Urho Paivio) более 40 лет исследовал то как человеческий мозг обрабатывает и запоминает информацию, о чем написал 5 книг. Наиболее известен профессор Пайвио тем, что в 1971 году, он выдвинул теорию двойного кодирования (dual-coding theory).

В ней он предположил, что человек запоминает визуальную и вербальную (словесную или текстовую) информацию по разному.

Например текстовая надпись «собака» и фотография собаки хранится и извлекается мозгом по разному. Чтобы доказать данную теорию Аллан Пайвио провел серию экспериментов, в одном из которых показывал испытуемым быструю последовательность картинок, а также быструю последовательность слов. После этого он просил испытуемых вспомнить слова и картинки в любом порядке. Оказалось, что участники эксперимента гораздо лучше запоминали изображения, чем слова. Пайвио объясняет это тем, что текст сложнее для кодирования, чем изображения. Так маленький ребенок, который ещё не умеет читать, не поймет надпись «собака», зато легко узнает собаку на фотографии или рисунке. Данный эффект Пайвио назвал эффектом превосходства изображения (picture superiority effect).

Позже, эффект превосходства изображения был доказан и другими исследователями в разных областях: образование, коммуникации, здоровье, реклама и дизайн. На последнем пункте остановимся подробнее. В 1997 году, профессора Ларри Перси (Larry Percy), Джон Росситер (John Rossiter) и Роберт Донован (Robert Donovan) провели исследование, в котором выяснили, что изображения являются важнейшим структурным элементом в дизайне журнальной рекламы, как повседневных изданиях (B2C), так и в корпоративных (B2B). Визуально оформленные сообщения были более эффективны, чем только текстовые сообщения. Но что ещё более важно, реклама с изображениями была более эффективна в тех случаях, когда аудитория была менее мотивирована и имела меньше возможностей обрабатывать информацию семантически. Другими словами, реклама с изображением привлекала внимание и запоминалась лучше даже при быстром пролистывании страниц и беглом просмотре журналов. Ниже несколько примеров того, как изображения не только лучше запоминаются, но и облегчают пользовательский опыт (User Experience).

В ходе качественного кабинетного тестирования страниц товаров сайта Leroy Merlin, стало ясно, насколько важны фотографии товаров для пользователей. Тестирование показало, что 64% испытуемых первым делом при переходе на страницу продукта начинали изучать фотографии, вместо того, чтобы читать названия товаров, описание или пролистывать страницу вниз, чтобы получить более полный обзор. Это говорит о том, что пользователи, зачастую, полагаются на фотографии товаров как на отправную точку в изучении товаров. Более того, часть пользователей выстраивали своё первое впечатление о товарах исключительно по фотографии товара, а не по текстовому описанию. А некоторые из них даже покидали страницу товара на которой не было фотографий интересуемого товара. В ходе исследования, мы также дополнительно обзвонили несколько интернет-магазинов строительных материалов, в одном из которых отсутствовали фотографии некоторых товаров. Один из вопросов который мы задавали звучал так:

«Подскажите, пожалуйста, что за саморез 3,5? Фотографии нет на сайте.»

На что получили такой ответ:

«Ну а что на него смотреть, простой саморез, вы его много раз видели.»

Проблема в том, что даже у самых простых (на первый взгляд) товаров может быть множество различных параметров, например у того же самореза есть:

• 6 видов/типов саморезов (по дереву, по металлу, по бетону, по гипсокартону, по гипсоволокну, кровельные);
• 3 материала изготовления (углеродистая сталь, нержавеющая сталь, латунь);
• 12 размеров (длина самореза, высота и диаметр головки, шаг резьбы, глубина шлица и другие);
• 14 видов головок (обычная, коническая, рожковая, плоская, с пресс-шайбой, потайная, полупотайная, петлевая и другие);
• 15 видов шлица (углубление на шляпке под инстурмент: крестообразный, прямой, шестигранник и другие);
• 4 вида резьбы (неполные, с насечками, фреза, с канавкой);
• 3 цвета (черный, белый, желтый).

И множество других параметров (наконечники, пресс-шайбы и тому подобное). Вот так набралось 60 параметров для «простого» винтика. А теперь представьте, если в качестве товара будет что-то большое и дорогое, состоящее из сотен таких винтиков.

И каждый из этих параметров может вызывать вопросы и сомнения у пользователей из серии «подойдёт ли это мне, под мои параметры?». Поэтому, как говорится в поговорке: лучше один раз увидеть, чем сто раз услышать. И если разместить фотографию самореза, то это позволит снять бОльшую часть из этих вопросов. И пользователю не придется утомительно вычитывать все детали в описании или звонить для уточнения. Без фотографии пользователь скорее уйдет с сайта в поисках более наглядного интернет-магазина с фотографиями. Аналогично и с другими, относительно, простыми и недорогими товарами. Не говоря уже о более сложных и дорогих товарах с большим количеством изменяемых характеристик. То есть, помимо лучшей запоминаемости, изображения товаров повышают наглядность, снимают вопросы и продают лучше, чем текст.

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

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

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

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

Эффект превосходства изображения применим и в дизайне рекламных баннеров на сайтах, аналогично рекламным полосам в журнале из эксперимента Перси, Росситера и Донована (выше). Для сравнения, ниже рекламный баннер картриджей для на сайте интернет-магазина pleer.ru, как видно здесь только текст на баннере, что хуже считывается и меньше запоминается.

А вот другой пример рекламного баннера на сайте HP (Hewlett Packard). Как видно, здесь уже есть изображение и такой баннер лучше считывается, даже при беглом взгляде. К тому же, такой баннер лучше запоминается, исходя из эффекта превосходства изображения Пайвио.

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

Теперь сравните это с тем, как ссылка на мобильное приложение указана на сайте СовКомБанка. Здесь помимо текста есть крупное и красивое изображение смартфона с интерфейсом мобильного банка, по которому сразу можно понять, что речь о мобильном приложении банка, даже при беглом взгляде. А в тексте указаны также преимущества и QR-код для быстрого и удобного скачивания.

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

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

#UX