Статья для начинающих 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-дизайну.
Приходите и прокачивайте свои скиллы в дизайне и набирайтесь убедительных аргументов для обоснования своих дизайн-решений.
Прочитал статью, перешел по рекламной ссылке (ради которой, собственно, писалась статья), изучли ваше коммерческое предложение.
Я может быть, буду слишком грубым, но идите вы на хуй с вашими подписками! Что за мода блядская взялась - всё по подписке делать? Надо-не надо — всё по подписке.
Если есть какой-то продукт, то продайте мне его сразу, целиком по конечной цене.
Вы молоко и хлеб по подписке не покупаете? Нет? А почему? А потому что Вы приходите в магазин тогда, когда у вас молоко закончилось. И если вы не хотите покупать молоко пол года, то не покупаете.
Вот и не хочу ничего по подписке покупать. Если мне сейчас интересен ваш курс/книга, то я её куплю за фиксированную цену, а подписываться, потом отписываться, потом опять подписываться, потом забыть отписаться и обнаружить через год что у меня списалось тысяч пятнадцать — на хера этот цирк, блядь?
Спасибо, извините.
Подписка в данном случае - это вынужденная мера. Проблема учебников и курсов в том, что их воруют и публикуют в открытом доступе. Скидываются в складчину, покупают один раз и выдают в открытый доступ. Законно это никак не защитить. Уже работали с юристом. Поэтому мы решили предоставлять учебник в формате подписке. Оплата один раз за год, а контент поступает постепенно и снова. При этом никаких автоматических списываний нет. Даже спустя год.
"Подписка в данном случае - это вынужденная мера."
Вы меня еще раз глубочайше извините, но мне как-то насрать.
Это ваши проблемы - ваши проблемы, ваши юристы, какие-то там складчины... Меня, как человека размышляющего над тем - купить или нет ваш продукт, это все вообще не колышет. Или вы думаете что объясните мне что вам тяжело и я вам деньги отдам? Давайте наоборот. У меня вот ипотека, кредит, семью кормить надо, переведите мне денег на Яндекс Кошелек 410015005588879.
Спасибо.
Так вы сами спросили зачем нужна подписка, я вам ответил. По всему остальному, вам правильно сказали ниже: не нравится формат подписки - не подписывайтесь. Вас никто не заставляет, дело сугубо добровольное.
Я не спрашивал зачем нужна подписка. Я сообщал вам что подписка - это зло. Что это неудобно, что я не хочу этим пользоваться. А вы мне в ответ написали что это вынужденная мера и рассказали о своих проблемах. А мне насрать на них. Это ВАМ нужно чтобы я что-то у вас купил. Поэтому ВЫ должны думать о моих проблемах и их решать своим продуктом, сервисом, услугами. Так бизнес работает.
Если вы хотите пожаловаться на проблемы и за это получить деньги, то вам на папереть или в бюджетные предприятия.
Вы спрашивали, перечитайте, если забыли, цитирую:
"Что за мода ... взялась - всё по подписке делать?"
Я никому не жаловался, а развернуто ответил на ваш вопрос. Не нравится - ступайте своей дорогой. Без вас не разоримся, не переживайте. Никто вам ничего не должен. К слову, крупнейшие компании в мире работают по подписке: Apple, Google, Microsoft, Netflix и как-то не бедствуют от того, что кому-то не нравится формат подписки.
"Что за мода взялась?" и "Зачем вы сделали подписку?" - это два разных вопроса. Как по смыслу, так и по содержанию. Причем первый, который задал я - риторический. Странно, что приходится это объяснять.