Статья для начинающих 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-дизайну.
Приходите и прокачивайте свои скиллы в дизайне и набирайтесь убедительных аргументов для обоснования своих дизайн-решений.
Прочитал статью, перешел по рекламной ссылке (ради которой, собственно, писалась статья), изучли ваше коммерческое предложение.
Я может быть, буду слишком грубым, но идите вы на хуй с вашими подписками! Что за мода блядская взялась - всё по подписке делать? Надо-не надо — всё по подписке.
Если есть какой-то продукт, то продайте мне его сразу, целиком по конечной цене.
Вы молоко и хлеб по подписке не покупаете? Нет? А почему? А потому что Вы приходите в магазин тогда, когда у вас молоко закончилось. И если вы не хотите покупать молоко пол года, то не покупаете.
Вот и не хочу ничего по подписке покупать. Если мне сейчас интересен ваш курс/книга, то я её куплю за фиксированную цену, а подписываться, потом отписываться, потом опять подписываться, потом забыть отписаться и обнаружить через год что у меня списалось тысяч пятнадцать — на хера этот цирк, блядь?
Спасибо, извините.
Кстати, не считая того, что вы правы, это в любом случае актуальная и здравая позиция. Контент становится (уже стал) просто разновидностью навязчивой рекламы (а авторы видимо сами в это верят, иначе бы скорее выпилились вместо "работы с возражениями”) а любая маркетинговая чушь в принципе может отбить ресурсы если упорно ее форсить,
Если в статье (или видео, любом контенте) предлагается подписаться или стоят крупным планом отзывы то это практически гарантия буллшита.
Объясните, пжлст, почему вы считаете, что "если в статье (или видео, любом контенте) предлагается подписаться то это практически гарантия буллшита"?
Как по мне, то это неверное утверждение. Призыв подписаться - это простое напоминание и легальный способ увеличить аудиторию читателей/зрителей. Под легальным я имею ввиду без наркуток, массфоловинга, масслайкинга и прочих "читерских" способов. Призывают подписываться многие, от известных людей и экспертов (вроде Артемия Лебедева) до крупных брендов и СМИ (вроде Forbes). В конце концов, никто вас не заставляет подписываться ради просмотра контента, всё по желанию. Кто не хочет - тот не подписывается, дело добровольное.
Но я думаю вы понимаете, что никто просто так не захочет делиться полезным контентом бесплатно. Тратить на это время, силы и деньги на продакшн (редактура, съемка и пр.). У всего есть цель, будь то монетизация или наращивание аудитории. Поэтому приглашение подписаться в конце полезной статьи/видео вполне нормальный и ненавязчивый прием, который далеко не всегда означает "булшит".
Это не утверждение (я ничего не утверждал) а предположение которое часто работает. Тут даже можно вывести закономерность — если после ознакомления с 1/3 контента не остается других версий его появления кроме ссылки на автора, то скорее всего остальные 2/3 тоже буллшит.
способ увеличить аудиторию читателей/зрителейлегальный
Вероятно, вы сами верите что это работает (и отчасти может оно и правда работает). Но это не оправдывает подмены понятий и целей. То что это за контент маркетинг в таком виде пока не банят, не делает этот способ злоупотребления вниманием уместным и подходящим инструментов для увеличения конверсии.
Целесообразным это тоже не становится, даже если его лайкают. Спам кстати тоже работает, хотя вроде бы для всех очевидна его этическая проблема. При этом определенной формой спама (тут можете перечитать его определение) пользуются даже крупные компании потому что для некоторых маркетологов по сути любой способ повышения конверсии будет уместным — лишь бы работало. Подмена понятий происходит когда вы (как и многие другие) делая нечто практически неотличимое от спама или навязчивого рекламного баннера оправдываете это потенциальной полезностью.
Но я думаю вы понимаете, что никто просто так не захочет делиться полезным контентом бесплатно.Ссылаясь на “легальность” вы таким образом сами же топите свой аргумент о потенциальной полезности материала и действительной мотивации его производства. Его польза для пользователя может стремиться к нулю, но ваша растет ровно настолько, насколько метрики у ссылке в конце материала и количество лайков. И кажется вы здесь совсем не видите противоречий потому что это все легально. Ваше читерство не просто шито белыми нитками но и приправлено сомнительными отсылками к “авторитетам”. Особенно забавно упоминание Лебедева — подписка на его контент почти тоже самое что подписка на Comedy Club, развлекательный контент который даже не преподносится как полезный.
Вся суть инфобизнеса. Сначала создать вокруг контента “упаковку” объяснить его ценность и убеждать (прогревать) лидов объяснениями зачем им все это нужно. Это и есть читерство — вместо действительно востребованного и ценного контента вкладываться в упаковку буллшита. Разница только в том что это легально.
Если что я не против монетизации. Так то и пэйволл не проблема и есть контент который легко таким образом себя окупает — по крайне мере это не читерство. Если нужна информация то платишь если нет — проходишь мимо. А читерство контент маркетинга в большинстве случаев в том, что это упаковка буллшита и объяснение его пользы, хотя этой пользой подменяется действительная мотивация — в лучших традициях бизнес молодости.
К сожалению о дизайне в этом смысле можно говорить что угодно и впарить любой буллшит потому что это область для многих остается слишком эфемерной.
Когда вы пишите "практически гарантия" - это очень похоже на утверждение. Вы пишете про "закономерность" которая также ничем и никем не доказана. А значит нет никаких гарантий и закономерностей.
И конечно я верю в то, что призыв подписаться работает, потому что мы пробовали писать статьи без призыва и с призывом (можно посмотреть ранние мои статьи на VC). Разница заметна, после призыва на меня уже подписалось более 200 человек. А вот вы пока не привели убедительных доводов, почему данный подход не работает.
Где здесь злоупотребление вниманием? Вот на примере данной статьи: есть полезный контент (о том, что контент полезен говорит количество положительных оценок, комментариев, репостов и сохранений в избранное). В конце статьи ссылка на ресурс, где можно узнать больше информации по теме. Если читателю понравилась статья и он захочет узнать больше - почему бы и нет? win-win. О каком злоупотреблении внимания идет речь не ясно и вновь без доказательств.
И уж абсолютно непонятно при чем здесь спам и подмена понятий, это в корне некорректное сравнение. Всё равно что сравнивать теплое с красным. Если уж говорить сравнениями, то данная статья - это больше похоже на тест-драйв или бесплатную триал-версию книги. То есть, если читатель сомневается перед покупкой книги, то он может прочитать несколько глав бесплатно в виде статей на VC, а после чего принять самостоятельное решение о покупке. Обратите внимание на то, что никто не спамит, не обманывает, не скрывает, не подменяет понятия.
Я считаю Лебедева авторитетом в вопросах дизайна после прочтения его книги Ководство. И это совсем не развлекательный, а полезный образовательный контент. Поэтому не вижу здесь ничего забавного. А вот вы в очередной раз не привели никаких убедительных доводов, почему Лебедев и его книга не может быть полезной и авторитетной.
Итог: ваши нападки (которые ничем не подкреплены и потому субъективны) и ваши обвинения в читерстве или булшите больше похожи на обиду. Как те девушки, которым один раз попался безответственный мужчина и после этого они ко всем остальным мужчинам относятся предвзято и говорят, что "все мужики козлы", хотя очевидно, что это не так и абсолютно точно есть хорошие и ответственные мужчины. Так же и вы, видимо, один раз попали на откровенную рекламную статью (которые существуют, к сожалению) и теперь про все остальные статьи (даже полезные) но в конце которых есть небольшой и ненавязчивый призыв подписаться думаете, что они булшит и инфобиз в лучших традициях бизнес молодости. Это очень близорукая и неубедительная позиция. Но что ещё хуже, такой подход может закрывать доступ к новой и полезной информации. К слову, психологи у брошенных девушек подобные блоки и травмы лечат, а значит не всё потеряно :)