Статья для начинающих 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).
1. Изображения на странице товара
В ходе качественного кабинетного тестирования страниц товаров сайта Leroy Merlin, стало ясно, насколько важны фотографии товаров для пользователей. Тестирование показало, что 64% испытуемых первым делом при переходе на страницу продукта начинали изучать фотографии, вместо того, чтобы читать названия товаров, описание или пролистывать страницу вниз, чтобы получить более полный обзор. Это говорит о том, что пользователи, зачастую, полагаются на фотографии товаров как на отправную точку в изучении товаров. Более того, часть пользователей выстраивали своё первое впечатление о товарах исключительно по фотографии товара, а не по текстовому описанию. А некоторые из них даже покидали страницу товара на которой не было фотографий интересуемого товара. В ходе исследования, мы также дополнительно обзвонили несколько интернет-магазинов строительных материалов, в одном из которых отсутствовали фотографии некоторых товаров. Один из вопросов который мы задавали звучал так:
«Подскажите, пожалуйста, что за саморез 3,5? Фотографии нет на сайте.»
На что получили такой ответ:
«Ну а что на него смотреть, простой саморез, вы его много раз видели.»
Проблема в том, что даже у самых простых (на первый взгляд) товаров может быть множество различных параметров, например у того же самореза есть:
- 6 видов/типов саморезов (по дереву, по металлу, по бетону, по гипсокартону, по гипсоволокну, кровельные);
- 3 материала изготовления (углеродистая сталь, нержавеющая сталь, латунь);
- 12 размеров (длина самореза, высота и диаметр головки, шаг резьбы, глубина шлица и другие);
- 14 видов головок (обычная, коническая, рожковая, плоская, с пресс-шайбой, потайная, полупотайная, петлевая и другие);
- 15 видов шлица (углубление на шляпке под инстурмент: крестообразный, прямой, шестигранник и другие);
- 4 вида резьбы (неполные, с насечками, фреза, с канавкой);
- 3 цвета (черный, белый, желтый).
И множество других параметров (наконечники, пресс-шайбы и тому подобное). Вот так набралось 60 параметров для «простого» винтика. А теперь представьте, если в качестве товара будет что-то большое и дорогое, состоящее из сотен таких винтиков.
И каждый из этих параметров может вызывать вопросы и сомнения у пользователей из серии «подойдёт ли это мне, под мои параметры?». Поэтому, как говорится в поговорке: лучше один раз увидеть, чем сто раз услышать. И если разместить фотографию самореза, то это позволит снять бОльшую часть из этих вопросов. И пользователю не придется утомительно вычитывать все детали в описании или звонить для уточнения. Без фотографии пользователь скорее уйдет с сайта в поисках более наглядного интернет-магазина с фотографиями. Аналогично и с другими, относительно, простыми и недорогими товарами. Не говоря уже о более сложных и дорогих товарах с большим количеством изменяемых характеристик. То есть, помимо лучшей запоминаемости, изображения товаров повышают наглядность, снимают вопросы и продают лучше, чем текст.
2. Графика на изображении
Помимо простой фотографии, на изображения можно добавлять графику, что позволяет показать то, что сложно описать текстом или показать на фотографии без графики. Графика на фотографиях позволяет проще донести сложный функционал. Для примера, возьмем куртку с подогревом и водоотталкивающим покрытием. С помощью текстового описания сложно объяснить подобные технологии так как большинство пользователей с ними не сталкивались ранее. Также сложно это показать с помощью простой фотографии куртки. Но если добавить графику в виде красных полос, градусник и капли, то это позволит показать функционал и преимущества такой куртки за считанные секунды, даже без чтения текстового описания. Ниже пример такого превосходства изображения.
3. Изображения в меню навигации
Аналогично предыдущему пункту, изображения важны и в других частях сайта. Например, меню будет более наглядным и понятным, если использовать не только текстовые названия разделов, но также сопроводить их изображениями. Ниже пример главной страницы сайта интернет-магазина мебели, который находится на первой позиции в поисковой выдаче по многим запросам в Казани.
И напротив, если сопроводить текстовые названия разделов меню изображениями, то пользователю станет проще ориентироваться, находить и запоминать интересующие разделы, даже если название раздела пользователю ещё неизвестно. Вот как это реализовано на сайте интернет-магазина мебели ИКЕА.
Если размер отображаемой площади ограничен, например на экранах мобильных устройств, то можно воспользоваться небольшими тематическими иконками. Подобные визуальные элементы хорошо показали себя в ходе наших качественных кабинетных тестов. Иконки как и изображения лучше считываются и запоминаются, нежели только текстовое название разделов.
4. Изображения в рекламных баннерах
Эффект превосходства изображения применим и в дизайне рекламных баннеров на сайтах, аналогично рекламным полосам в журнале из эксперимента Перси, Росситера и Донована (выше). Для сравнения, ниже рекламный баннер картриджей для на сайте интернет-магазина pleer.ru, как видно здесь только текст на баннере, что хуже считывается и меньше запоминается.
А вот другой пример рекламного баннера на сайте HP (Hewlett Packard). Как видно, здесь уже есть изображение и такой баннер лучше считывается, даже при беглом взгляде. К тому же, такой баннер лучше запоминается, исходя из эффекта превосходства изображения Пайвио.
5. Изображения на страницах сайта
Аналогично рекламным баннерам, эффект превосходства изображения применим и при дизайне других элементов на сайте. На примере ниже, на сайте банка Русский Стандарт ссылка на мобильное приложение указана в виде текста. Такой текст слабозаметен и теряется рядом с другими текстовыми элементами на странице. А между тем мобильное приложение очень важный инструмент для банка, который повышает удобство работы клиентов с банком. Известны случаи, когда люди меняли банк из-за отсутствия или неудобства банковского приложения.
Теперь сравните это с тем, как ссылка на мобильное приложение указана на сайте СовКомБанка. Здесь помимо текста есть крупное и красивое изображение смартфона с интерфейсом мобильного банка, по которому сразу можно понять, что речь о мобильном приложении банка, даже при беглом взгляде. А в тексте указаны также преимущества и QR-код для быстрого и удобного скачивания.
В данной статье очень кратко разобран лишь один способ улучшения пользовательского опыта. Если вы хотите узнать больше о UX-дизайне на основе поведенческой экономики, инженерной психологии и UX-исследований, то специально для вас мы составили электронный учебник «Конверсия на стероидах», в котором собрано несколько сотен подобных точек роста конверсии в виде самого большого курса по UX-дизайну.
Приходите и прокачивайте свои скиллы в дизайне и набирайтесь убедительных аргументов для обоснования своих дизайн-решений.
Прочёл обе ваши статьи на vc. Интересные "практические" руководства, можно сказать. Книгу прочесть было бы интересно.... НО, глядя на ваш сайт понимаю что "САПОЖНИК БЕЗ САПОГ"!!!
Книгу можно и купить, но стоит ли она того, если автор не использует свои же материалы на своём сайте? Может вам нужна помощь с дизайном сайта? Или с разработкой?)))
Одна буква наехала на изображение на фоне или кусочек лица обрезан в одном из множества разрешений мобильных версий, поэтому книга плохая? Все тесты профессоров и открытия нобелевских лауреатов из учебника сразу теряют свой эффект. Чтож, можете не читать учебник :)
К сожалению, ваш сайт не убедил меня купить книгу (подписку) за 4'500 р. Он РАЗУБЕДИЛ!!! Поймите правильно, это не нападки, это подсказки!
Как можно писать правильные вещи о дизайне сайтов и считать такую поделку "прекрасной"??))
Собрать факты и научиться их применять - это два разных навыка. Сопоставить факты с реальностью и сделать верные выводы - тоже отдельно. Они не связаны напрямую. Автор больше похож на аналитика, чем на дизайнера.
Поэтому все нормально. Автор, вполне, может собрать хорошую информацию, которая поможет кому-то другому сделать верные выводы.
Покупать учебник я, конечно, не буду)
Таки да! Здравый смысл вошёл в чат, Hallelujah! Спасибо :)
Я не дизайнер и нигде не писал о том, что я дизайнер. При этом, я опираюсь на доказанные исследования из авторитетных источников. Подсайт "Дизайн" выбран потому, что статья связана с дизайном. И вместо того, чтобы обсуждать тему статьи, всё свелось к обсуждению сайта :(
Примечательно, конечно, что вы упорно не видите связи. В статье, которая описывает преимущества картинок перед текстом, автор выгораживает голимый текст на сайте с огромным нагромождением цифр. Сам пытается продавать словами и цифрами, но в статье уверенно рассказывает о мощи картинок. И в упор не видит этого несоответствия. Что вообще значит ваше фото на сайте? Фото вашего лица может продавать, если ваше лицо известно. В противном случае оно еще более бесполезно, чем море цифр, через которое надо продраться. Ни одной попытки на сайте визуально изобразить то, что вы продаете.
Примечательно, что вы ошибаетесь и пытаетесь выдать своё мнение за истину не приводя никаких аргументов. Приведите ваши доказательства с отсылкой на авторитетные исследования, что фотография лица (даже малоизвестного) человека конвертирует хуже, чем текст. Так как я это делаю в своих статьях.
Я уже подробно объяснил вам в комментариях под другой моей статьей, почему ваше мнению глубоко субъективно. А мои аргументы объективны. Я сделал это без негатива. Поэтому вместо того, чтобы обижаться и писать токсичные комментарии, лучше написать комментарий по теме статьи, пользы было бы больше для всех :)
Это не мнение, это факт. Ваш основной продающий блок не имеет иллюстраций, зато имеет много текста и цифр, причем местами бездоказательных. То есть свои знания применить вы не можете. Если бы было исследование, доказывающее, что фотографии незнакомых мужчин хорошо продают их продукт, вы бы его уже привели и трясли объективностью.
1. Вы сами себе противоречите. Сначала вы пишете:
"Что вообще значит ваше фото на сайте? Фото вашего лица может продавать, если ваше лицо известно."
А в следующем сообщение пишете уже противоположное мнение:
"Ваш основной продающий блок не имеет иллюстраций".
Вы уж определитесь, нужно вам изображение или нет.
2. Вы вновь выдаете желаемое за действительное. Пишете, что ваше мнение "Это не мнение, это факт". Определение слову "Факт — это объективное и проверяемое наблюдение. Объективность здесь означает независимость от наблюдателя: независимо от того, кто проводит эксперимент, его наблюдаемые результаты должны оставаться неизменными. Утверждение, которое не может быть непосредственно подтверждено, называется предположением или мнением".
Я попросил привести доказательства в подтверждение своих слов (исследования, эксперименты и т.д.) и вы их не привели. Значит это не факт, а лишь ваше субъективное и ничем не подкрепленное мнение.
3. Теперь про исследованиях, которые вы запросили у меня, доказательства, что фотографии в рекламе работают лучше. Ниже ссылка на относительно свежее исследование (2018 год), в котором измеряли эффективность рекламы с лицом и без лица. Было опрошено 322 человека, которым показывалась реклама с лицом и без лица, с мужчинами и женщинами, товары разных категорий. Во всех случаях, экспериментах реклама с лицом работала лучше (на 91,7%). Обратите внимание, что люди на изображениях неизвестные.
4. Теперь про ваши слова "Ни одной попытки на сайте визуально изобразить то, что вы продаете". Зайдите на официальный сайт BMW, они продают автомобили. Но на первом экране главной страницы вы увидите неизвестного человека. Без автомобиля. Хотя БМВ это крупнейший производитель автомобилей с оборотом более 100 млрд евро в год. На них работают лучше маркетологи и исследователи. Но они делают вот так. Вот вам и ответ.
Вы не bmv. Они себе уже давно сделали репутацию и могут на сайте что угодно размещать. Вы про русский bmv? На международном мужчин на фото нет. Но разочаровали оба. Если при входе нет тачки с их фирменными породистыми ноздрями, это упущение. С моей точки зрения. На обоих сайтах с ходу вообще непонятно, что они продают, если не смотреть на название. Но они могут себе позволить. Наверное.
Судя по фото, исследование касалось материальных товаров, которые непосредственно используются людьми. Вы продаете знания, а не духи и сумки, очень странно сравнивать.
Под изображением я понимаю то, что иллюстрирует продаваемое. Ваше фото уместно, если вы продаете себя как бренд. Если в этом была идея, то ок. А так это просто фоновая картинка неизвестного мужчины, которая не придает никакого веса товару. Даже авторы книг нечасто помещают себя вперед, торгуя лицом, если только это не личный сайт, а вы себя да.
На нашем сайте ниже есть и изображение книги и описание разделов и примеры статей и часто задаваемые вопросы и другие разделы подробно раскрывающие тему. Потому что уместить всё это в одном маленьком первом экране смартфона нереально.
Теперь объясню логику размещения фотографии автора в первом экране на нашем сайте. В конце каждой статьи на VC (или других сайтах, видеороликах) я помещаю фотографию автора и ссылку на сайт. Человек переходит на сайт и первое, что он видит уже знакомую фотографию автора, которую он только что видел в конце статьи. Тем самым человек сразу понимает, что попал по верному адресу. Это снимает множество вопросов и позволяет сразу приступить к изучению деталей предложения на сайте ниже. То есть человек не тратит время на размышления из серии "а туда ли я попал?", "это то что мне нужно?", "или лучше продолжить поиск?".
Мы исходили из приближенных исследований в товарном секторе, но судя по результатам нашей внутренней веб-аналитики, данный подход хорошо работает, показывает высокую конверсию и при продаже знаний.
Как бы там ни было, это был полезный диалог, он натолкнул меня на идею написать пост про использование лиц на сайте, спасибо :)