Психология визуального UX

Аудио перевод статьи
0:00
0:00
Аудио перевод статьи
0:00
0:00
·

Резюме: Какое значение и влияние изображения оказывают на пользователей и на что необходимо обратить пристальное внимание при создании контента.

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

Коварная часть, конечно, заключается в сложности создании связного повествования, когда история не всегда рассказывается линейно, так как "слушатель" (в данном случае пользователь) может управлять потоком и темпом переживаний через разные способы навигации.

"Пещерная живопись". Артотем. Творческое Сообщество.

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

В настоящее время Сеть, безусловно, является визуальной средой, хотя в свое время она была по большей части основана на тексте. Однако по мере того, как проблемы с пропускной способностью уходят в прошлое, визуальные средства представления информации теперь доминируют почти во всех уголках паутины. Сайт, лишенный изображений, выглядит странно в наше время и часто игнорируется в пользу сайта, который хорошо иллюстрирован, полон анимации и богат на взаимодействие.

Без хороших навыков визуального повествования, ваши сайты никогда не смогут полностью реализовать свой потенциал, независимо от того, предназначены ли они для ваших личных или профессиональных проектов.
В этой статье мы рассмотрим некоторые аспекты психологии, лежащие в основе того, почему визуальное повествование так эффективно в веб-дизайне.

Изображение стоит тысячи слов.

Мы все слышали поговорку, что "Лучше один раз увидеть, чем сто раз услышать". Но знаете ли вы, что за этим утверждением стоит настоящая наука?

“Эффект превосходства изображения" гласит, что визуальные эффекты могут передать в шесть раз больше информации, чем слова.

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

  • Теория двойного кодирования Paivio говорит, что мы можем лучше вспоминать изображения, потому что они кодируются и словесно, и визуально.
  • Теория сенсорной семантики Нельсона утверждает, что поскольку люди чаще замечают различия в изображениях, а не в словах, мы можем вспоминать значение изображений с меньшими усилиями. В подтверждение этой теории, когда люди получают несколько схожих изображений, эффект превосходства исчезает, так как способность различать не вступает в игру.
Изображение: "картинка мозга". Аллан Аджифо. Творческое Сообщество.
Имейте это в виду при создании визуального UX, использование слишком похожих изображений может свести на нет преимущества визуального повествования по сравнению с простым словесным повествованием.

В бесплатном руководстве Web UI Design Best Practices представлено несколько советов, которые следует иметь в виду:

  • Используйте изображения, которые имеют связь между друг другом, но в то же время отражают различное содержание, чтобы их можно было легко отличить и запомнить.
  • Не отображайте одну и ту же мысль в нескольких изображениях. Пусть одно изображение перетекает в другое, тем самым рассказывая вашу историю.
  • Если вы используете изображения с людьми (или персонажами), убедитесь, что они остаются последовательными на протяжении всей истории. Даже если это не одни и те же персонажи, убедитесь, что они, по крайней мере, выглядят так, будто они из одного и того же "мира".
  • То, что история визуальная, еще не означает, что вы не можете использовать текст, чтобы направлять и уточнять информацию для своих пользователей.
  • Чем более ясные, поразительные и впечатляющие изображения вы используете, тем больше вероятность того, что пользователи запомнят их.

Визуальный UX способствует доступности

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

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

Боб Строитель через Louis Lazarus.

Как видно на примере сайта Bob the Builder, сверхстимулирующие визуальные эффекты предназначены в первую очередь для того, чтобы быстро захватить внимание пользователя, а не для передачи эмоционально захватывающей истории.

Хороший визуальный UX способствует запоминанию

Независимо от типа сайта, который вы разрабатываете, вы, вероятно, захотите, чтобы ваши посетители смогли вспомнить, что они видели на вашем сайте и через несколько дней. С сайта, содержащего только текстовое или аудио содержимое, посетитель, скорее всего, воспроизведет через 3 дня только десять процентов информации. Это не так уж и много.

Но если к этим словам добавить картинку, то они, скорее всего, запомнят около 65 процентов информации. Это более чем в шесть раз больше информации, только при введении одного относительно простого изменения.

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

Давайте посмотрим на красочный сайт приложения для поиска новых друзей Yep!. Созданный в формате лендинга, который повествует историю через линейную прокрутку вверх/вниз, этот сайт с богатой графикой и веселыми изображениями мгновенно привлекает пользователей, способствуя их желанию узнать больше о приложении.

Прокручивая страницу вниз, пользователь участвует в визуальном туре по каждому разделу, показывающему (а не просто рассказывающему), как приложение объединяет людей с потенциальными друзьями на основе общих увлечений.

Yep!

Как только вы оказываетесь в нижней части сайта, вы видите кнопку призыва к действию “Скачать”, что в данном случае является кульминационным моментом истории. Даже если вы не сразу загрузите приложение, вспомните ли вы, как оно работает? Можете ли вы сказать, бесплатное оно или продается за деньги?

Эти детали будет гораздо проще вспомнить, потому что это были не просто куски текста на странице. Умная анимация и плавные переходы от раздела к разделу сшивают сюжет в простом, почти кинематографическом формате.

Визуальная информация обрабатывается быстрее

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

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

Однако при наличии изображений пользователи могут обрабатывать больше информации за гораздо меньшие промежутки времени. Если быть точнее, визуальная информация обрабатывается до 60 000 раз быстрее, чем текстовая.

Я повторю, это не ошибка: в 60 000 раз.

"Глаза". Христос Цумплекас. Творческое Сообщество.

Пользователь, зайдя на ваш сайт и взглянув на график или другой визуальный объект, может сразу же сделать нужный вывод, который не только сэкономит ему время и силы, но и, скорее всего, будет находится в его памяти несколько дней. Визуальный UX — это стратегия, которой нельзя пренебречь, если вы заботитесь об информировании своих посетителей.

Давайте вспомним пример Yep!, который мы только что обсуждали. Иллюстрации, показывающие людей, использующих приложение (выбор увлечений, общение с людьми, общение в чате и встречи), предоставляют основную часть информации. Текст просто создает контекст. Но поскольку повествование продвигается естественным образом, мы все равно можем понять все содержание, даже если текста не так-то уж и много.

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

Fitbit

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

Наконец, когда вы достигаете нижней части страницы, вы достигаете кульминации, которая представлена в виде кнопки призыва к действию. Теперь вы можете кликнуть на нее и настроить ваш собственный Fitbit так, чтобы вы тоже могли наслаждаться лучшей жизнью.

Визуальные эффекты вызывают мгновенные эмоции

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

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

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

На одностраничном сайте One to See One to Kill вы можете погрузиться в мучительный опыт “туннельных крыс” во время войны во Вьетнаме. Это, без сомнения, один из самых эмоциональных сайтов, с которыми мы когда-либо сталкивались.

”Туннельные крысы”

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

”Туннельные крысы”

Жирный шрифт и красные иллюстрации продолжают тему жертвенности, физической и эмоциональной уязвимости. Достигнув конца страницы, вы чувствуете, как будто сами стали молчаливым свидетелем войны в туннелях. Это нелегкая задача, которую авторам сайта удалось реализовать всего в одной странице.

Реклама

Возьмите любой журнал, и вы, вероятно, увидите на страницах кучу рекламы. Что же общего есть у всех этих объявлений?

Объявления по всему миру

Все они используют визуальные изображения для иллюстрации своих преимуществ. Вы редко увидите рекламу, которая опирается только на текст, чтобы передать свою идею. Рекламная индустрия уже много лет знает, что визуальные эффекты — это то, что люди помнят и что действительно продает продукты.

Реклама опирается на мощные изображения, чтобы продавать продукты или идеи. Визуальное повествование историй в Сети ничем не отличается от этого. Независимо от назначения вашего сайта, это реклама чего-то, даже если это реклама просто идеи.

Маркированные списки — не картинки

Часто говорят, что большинство людей изучают мир через визуальные каналы. Это правда. Но многие создатели контента иногда ошибочно интерпретируют слово “визуальные”.

"Маркированные списки". Шон Макенти. Творческое Сообщество.

Слишком часто людям говорят использовать "ключевые точки", чтобы сделать их контент более визуальным, а значит, более легким для восприятия. Но маркированные списки — это не изображения.

Повторите это со мной еще раз: Маркированные списки — это не изображения.
То, что вы разбили кусок текста на более короткие строки и добавили точку рядом с каждой из них, не означает, что вы волшебным образом превратили их в картинки. Это все еще слова на странице. Просто с небольшим дополнительным украшением.

Это легче обработать и понять, чем гигантский блок текста? Наверняка. Но это не делает его изображением.

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

Заключение

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

Знакомство с психологией, лежащей в основе таких концепций, как эффект превосходства изображения, позволяет вам принимать более обоснованные решения и создавать более эффективные веб-сайты. Вы можете лучше понять ваших пользователей и повлиять на их эмоциональную реакцию в ответ на вашу историю, что поможет вам в достижении поставленных перед продуктом целей.

Источник:
thenextweb.com
·
comments powered by HyperComments