Статья для начинающих 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-дизайну.
Приходите и прокачивайте свои скиллы в дизайне и набирайтесь убедительных аргументов для обоснования своих дизайн-решений.
Прочитал статью, перешел по рекламной ссылке (ради которой, собственно, писалась статья), изучли ваше коммерческое предложение.
Я может быть, буду слишком грубым, но идите вы на хуй с вашими подписками! Что за мода блядская взялась - всё по подписке делать? Надо-не надо — всё по подписке.
Если есть какой-то продукт, то продайте мне его сразу, целиком по конечной цене.
Вы молоко и хлеб по подписке не покупаете? Нет? А почему? А потому что Вы приходите в магазин тогда, когда у вас молоко закончилось. И если вы не хотите покупать молоко пол года, то не покупаете.
Вот и не хочу ничего по подписке покупать. Если мне сейчас интересен ваш курс/книга, то я её куплю за фиксированную цену, а подписываться, потом отписываться, потом опять подписываться, потом забыть отписаться и обнаружить через год что у меня списалось тысяч пятнадцать — на хера этот цирк, блядь?
Спасибо, извините.
Подписка в данном случае - это вынужденная мера. Проблема учебников и курсов в том, что их воруют и публикуют в открытом доступе. Скидываются в складчину, покупают один раз и выдают в открытый доступ. Законно это никак не защитить. Уже работали с юристом. Поэтому мы решили предоставлять учебник в формате подписке. Оплата один раз за год, а контент поступает постепенно и снова. При этом никаких автоматических списываний нет. Даже спустя год.
Так и не покупай ничего по подписке
да да, совсем недавно возникло желание купить фонтосам, ну думаю че там 100 баксов, фигня же, зашел, а это оказывается подписка на год 100 баксов xD желание сразу отпало
Кстати, не считая того, что вы правы, это в любом случае актуальная и здравая позиция. Контент становится (уже стал) просто разновидностью навязчивой рекламы (а авторы видимо сами в это верят, иначе бы скорее выпилились вместо "работы с возражениями”) а любая маркетинговая чушь в принципе может отбить ресурсы если упорно ее форсить,
Если в статье (или видео, любом контенте) предлагается подписаться или стоят крупным планом отзывы то это практически гарантия буллшита.
Прочёл обе ваши статьи на vc. Интересные "практические" руководства, можно сказать. Книгу прочесть было бы интересно.... НО, глядя на ваш сайт понимаю что "САПОЖНИК БЕЗ САПОГ"!!!
Книгу можно и купить, но стоит ли она того, если автор не использует свои же материалы на своём сайте? Может вам нужна помощь с дизайном сайта? Или с разработкой?)))
Одна буква наехала на изображение на фоне или кусочек лица обрезан в одном из множества разрешений мобильных версий, поэтому книга плохая? Все тесты профессоров и открытия нобелевских лауреатов из учебника сразу теряют свой эффект. Чтож, можете не читать учебник :)
Комментарий недоступен
Спасибо за обратную связь! Рад, что понравилось. Статьи местами очень подробны, чтобы материал был понятен читателям разного уровня подготовки, в том числе новичкам. Но в целом, стараюсь не выходить из лимита в 10 мин на прочтение :)
Не понимаю, чего на ботаника накинулись. Каталогизировать знания != применять их на деле. Иначе бы все консалтинговые профессии были бы не нужны. А это не так.
Я вот, например, с лёгкостью могу консалтить в тех сферах, где не взлетел, бо знаю там и как надо делать, и как НЕ НАДО.
А вот в той сфере, где у меня всё хорошо, я консалтить не буду, я там буду работать молча :)
Ботаника 🤓😆😵💫
Спасибо за фидбек по полочкам и поддержку :)
Если знаете, как надо, почему не взлетели-то. Значит, не знаете.
Красивый рассказ о том, что Земля круглая... ))
Для кого-то информация может быть очевидной. Но очень часто, дизайнеру/менеджеру необходимо обосновывать то или иное визуальное решение для заказчика. В таких случаях интуиции дизайнера бывает недостаточно. А вот ссылки на подобные статьи с научным обоснованием выглядят более убедительно и позволяют обосновать те или иные дизайн-решения. Поэтому смысл в таких статьях есть. И количество положительных оценок и репосты данной статьи это подтверждают. Ну а для опытных специалистов в начале статьи я написал «статья для новичков», чтобы не тратить на неё своё время с самого начала :)
Очень крутая статья спасибо вам)
мне как новичку было полезно, подписался на ваш канал.
Спасибо за обратную связь!
Комментарий недоступен
Идея очень перспективная, особенно учитывая аномально-низкие температуры в центральной части РФ (скрин ниже).
Я тоже об этом думал, потому что в машинах уже давно есть сиденье с подогревом, руль с подогревом и даже подстаканники с подогревом, а одежду с подогревом не делают. Видимо проблема была в аккумуляторах, нужны были лёгкие и компактные.
А вообще такие куртки делает не только Milwaukee и давно продают в России. Ссылка ниже. Поэтому идея ещё как перспективна. Следующую идея запускайте без сомнений!
Вот эту статью надо дать не просто прочитать, а прям что бы вникли, пересказали и других научили дизайнерам из битрикс, заходишь в vendors.bitrix24.ru и понимаешь что люди которые делали там интерфейс, даже меньше меня понимают в дизайне, а я в нем вообще не понимаю вообще ничего!
Как вот можно догадаться что слово "Версия" является ссылкой и на него можно нажать? И это только часть. Правила оформления приложения, в виде PDF открываются внутри какого-то фрейма, там подсвечены ссылки, но нажать на них нельзя! В Документации по API изображения подсказки всплывают если на них навести мышкой(на текст), а вот закрыть их можно только если НАЖАТЬ на это слово и только тогда эта дичь закроется. Люди которые работают в БИТРИКС, пройдите курсы хотя бы от гикбрейнс, ну может хоть что-то поможет!
Вы рассказали про 60 нюансов самороезов а потом... обозвали их винтиками?!
Саморез = шуруп <> винтик
😁😁😁
Так это же сделано специально, художественное принижение. После того как я написал "саморез (самонарезающий винт/шуруп)" и указал множество нюансов и фотографий - написал "винтик", чтобы подчеркнуть кажущуюся незначительность :)
Отличная статья, спасибо
Спасибо за прочтение и обратную связь!
И просто булшит бинго:
11 000+ часов UX-исследованийа давайте я добавлю у себя еще один ноль и у меня в отличии от вас будет более миллиона часов исследований. И это кстати будет правдой, если учесть что они все (за исключением сколько угодно малой доли процента) не мои, а взяты из публичных источников. Манипуляция с количественными данными и ссылка на авторитетные источники к которым вы имеете весьма спорное отношение.
52 часа полезного контентаОх, это же количественные данные — поверю на слово, это вызывает доверие!
Вы можете добавлять у себя всё, что захотите. А у нас каждая цифра подтверждена. Простой пример, который можно проверить: здесь, на VC у меня на данный момент 24 статьи. Каждая статья в среднем на 5-10 минут прочтения (при средней скорости чтения 120-150 слов в минуту). Умножаем 24 на 7,5 мин и получаем примерно 180 минут, то есть уже 3 часа полезного контента выложено бесплатно на VC. И это лишь малая часть от всего того контента, который есть на нашем сайте. Набрать 52 часа вполне реально, даже при простом подсчете. Ну а на подготовку и исследования нужно во много раз больше часов, поэтому цифры реальны и это легко проверить.
Далее, полезность можно проверить прочитав статьи на VC, которые регулярно попадают в популярное и набирают по 100 лайков и 500 сохранений в избранное. Достоверность статей подтверждается тем, что в каждой статье я прикладываю кликабельные ссылки на исследования профессоров ведущих университетов мира, ссылки на открытия нобелевских лауреатов, эксперименты NASA, книги исследователей и других авторитетных организаций. Всё это есть и в статьях, а потому легко проверить. Более того, вы и сами находите мои статьи полезными, так как читаете и комментируете уже не первую мою статью. Зачем вы читаете это, если считаете это "булшитом"? Не читайте и всё, в чем проблема? Но нет, вы продолжаете читать и комментировать :)
И раз уж вы полезли в наш огород. Давайте посмотрим, что сделали вы. Открываем ваш аккаунт на VC и видим, что за 4 года вы не написали ни одной полезной статьи. Вы скрываете свою фотографию, скрываете фамилию, скрываете контактные данные. С чего бы вдруг? Объяснение простое: большинство из ваших комментариев это троллинг и флуд, которые не несут никакой пользы и не дополняют статьи. В доказательство, эти комментарии в большинстве случаев имеют оценку 0 или 1. Какую пользу вы приносите сообществу VC? Какой толк от ваших комментариев под постами для читателей? Ответ: никакого. Вместо того, чтобы дополнить статью своими наблюдениями и опытом, чтобы развить тему статьи, чтобы всем была польза (читателям, вам и автору) вы только разливаете свой ничем не подкрепленный негатив не по теме статьи и паразитируете на авторах, кто стремится принести пользу. Так не лучше ли заняться чем-то более полезным? Можете не отвечать, это был риторический вопрос. Всего вам хорошего.