Психология и дизайн

Helena Glava
Дизайн-кабак
13 min readAug 11, 2020

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

Знание и понимание того, как люди взаимодействуют, что влияет на их поведение и какие есть способы подтолкнуть их к принятию решения позволяет дизайнеру создать эффективный и крутой продукт. Mы можем разработать продукты так, чтобы они вызывали конкретные реакции и действия наших целевых пользователей. На написание этой статьи меня вдохновил ресурс (https://lawsofux.com/) и я постаралась собрать самые распространенные принципы, являющиеся неотъемлемой частью процесса UX-проектирования.

«Дизайнер, который не понимает психологию человека, будет не более успешным, чем архитектор, который не понимает физику.» - Джо Лич.

1. Социальное влияние. Наверное, это самое основное и распространенное явление. Было время, когда возможность работать вместе обеспечивала больше шансов для выживания. В результате основные «системы» человеческого взаимодействия все еще существуют в нашей ДНК. Дизайнер Elisa del Galdo предлагает в своей статье Persuasion in Design шесть универсальных принципов социального влияния. Эти принципы заложены в человеческой психике, разработанной как необходимость выживания человека.

Взаимность: мы вынуждены возвращать услуги, часто более ценные, чем оригинал. Людям не нравится быть в долгу перед другими. Если им что-то дают — они должны чувствовать взаимность на каком-то уровне.

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

Последовательность: мы хотим действовать в соответствии с нашими обязательствами и ценностями. В исследовании, проведенном Чалдини, две группы добровольцев ходили по домам, спрашивая домовладельцев, не желают ли они вывесить на лужайке гигантский рекламный щит с надписью «Води машину осторожно». Первое посещение группы было простым телефонным звонком. Вторая группа посещала дома дважды с просьбой, чтобы домовладельцы вывесили на газоне крошечный знак с надписью «Будь безопасным водителем». Вторая группа имела на 450% более высокий уровень успеха. Это пример последовательности, поскольку домовладельцы чувствовали себя обязанными оставаться последовательными в этом случае (https://design-glory.com/3020/psihologiya-ux-dizajna)

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

Нравится: чем больше мы любим людей, тем больше мы хотим сказать им «да».

Социальное доказательство: мы обращаемся к другим, чтобы направлять наше поведение. У Amazon есть раздел «Клиенты, которые купили этот товар, также купили», чтобы сделать товары более привлекательными для вас и заставить пользователей задуматься: «Если им это нужно, мне это тоже нужно».

2. Изменение слепоты: Принцип характеризует неспособность человека заметить изменение с ясно различимым объектом, которое возникает в условиях краткого прерывания восприятия. Наш разум делает все возможное для сохранения энергии. Один из способов сохранения энергии — предполагать, что ничего не изменилось, если нет четкого показателя в противном случае. Есть несколько действительно забавных и интересных демонстраций по изменению слепоты на YouTube.

3. Избирательное игнорирование: Мозг блокирует огромное количество информации, которая, как он считает, вовсе не так важна для выживания человека. В результате мы имеем так называемое выборочное игнорирование. И это правильно. Иначе мы просто впали бы в ступор от обилия инфы. Это явление называется избирательным игнорированием и возникает из-за необходимости, поскольку нецелесообразно (и даже невозможно) обрабатывать каждый визуал в нашем периферийном зрении (Nielsen, Eye Tracking Usability, 2010). Просто прогуливаясь по улице, вы сталкиваетесь с миллионами визуальных образов, которые могут требовать вашего внимания, но если они не нужны, ваш разум отфильтровывает их, как будто вы никогда их не видели. Наиболее очевидным примером выборочного игнорирования является баннерная реклама. Посетители сайтов настолько к ней привыкли, что просто не обращают внимания. Более того, выборочному игнорированию подвергается и все, что посетителю в данный момент неинтересно или это не решает его задачи. Опытные пользователи узнают, как отключать изображения, исключать рекламу или просто избегать перегруженных веб-сайтов. Обычные пользователи научились инстинктивно игнорировать то, что они считают неуместным. Избирательное игнорирование действует через периферийное зрение, подобно тому, как мы ориентируемся в мире. Веб-сайты просматриваются таким же образом. Когда что-то входит в ваше периферийное зрение и определяется как актуальное, фокус смещается на это. Все остальное полностью игнорируется; пользователи не знают, что видели что-то, что они не считают подсознательно значимым.

Этот закон более подробно описан в известной книге Роберта Чалдини «Влияние: психология убеждения». Принципы диктуют нам то, как мы должны вести себя в обществе. Также мы можем использовать их для определения поведения людей. Умные дизайнеры могут использовать эти концепции, чтобы влиять на пользователей в направлении желаемых действий. Похожий и тесно связанны с принципом социального влияния следующий принцип, который носит название

4. Эффект хамелеона / Зеркальное отображение

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

5. Теория двойного кодирования

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

6. Ограничение памяти.

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

Некоторые выступают против большего количества кликов, ссылаясь на печально известное «правило трех кликов» (Neilsen, Prioritizing Web Usability, 2006. ) Вместо этого сосредоточьтесь на небольших легко усваиваемых порциях контента.

А теперь рассмотрим три фундаментальных закона

  1. Закон Хика

Он был сформулирован психологами Уильямом Эдмундом Хиком и Рэем Хайманом в 1952 году после изучения взаимосвязи между количеством присутствующих стимулов и временем реакции человека на любой данный стимул. Проще говоря, закон гласит, что чем больше вариантов, тем больше времени требуется для принятия решения (Hick, «Скорость получения информации». Quarterly Journal of Experimental Psychology, 4: 11–26, 1952 ). Классическим примером является исследование, которое проверило эффект влияния вариантов на выбор на примере продажи варенья в загруженном продуктовом магазине. В исследовании использовался стол с дегустацией джема с двумя конфигурациями: один с 24 разными джемами, а другой только с шестью. Где было предоставлено 24 варианта, 60% проходящих мимо людей попробовали джем, и 3% из них купили его. У стола, где было выставлено 6 джемов, менее 40% людей остановились, но почти 30% купили его (Айенгар, Шена С. и Марк Р. Леппер, 2000 . Когда выбор демотивирует: можно ли желать слишком много хорошего ?. Журнал личности и Социальная психология.79: 995–1006 ). При столкновении с 24 разными джемами нюансы между ними затрудняли выбор. С шестью джемами было легко определить, какой из них был на вкус лучше, а в результате — больше. Это означает, что сложные интерфейсы приводят к увеличению времени обработки для пользователей, что важно, потому что это связано с фундаментальной теорией психологии, известной, как когнитивная нагрузка.

2. Закон Миллера.

Другим ключевым принципом является Закон Миллера, который гласит, что среднестатистический человек может хранить только 7 (± 2) предметов в своей рабочей памяти. Он сформирован на основе статьи, опубликованной в 1956 году когнитивным психологом Джорджем Миллером, который обсуждал пределы кратковременной памяти и объем памяти. К сожалению, за эти годы было много неправильного толкования этой эвристики, и это привело к тому, что «магическое число семь» использовалось для оправдания ненужных ограничений (например, ограничение меню интерфейса не более, чем семь элементов). Разбивка на части. Увлечение Миллера краткосрочной памятью и объемом памяти было сосредоточено не на числе семь, а на концепции «разбивки на части» и нашей способности запоминать информацию соответствующим образом. Разбивка на части может быть невероятно ценным инструментом дизайна. Она описывает действие визуальной группировки связанной информации в небольшие отдельные единицы. Когда мы разбиваем контент, мы эффективно упрощаем его обработку и понимание. Пользователи могут сканировать содержимое и быстро определять, что им интересно, что согласуется с тем, как мы склонны потреблять цифровой контент.

Пример: разбивка номера телефона
Пример: разбивка на части

3. Закон Якоба

Последним принципом, который мы рассмотрим, является Закон Якоба (https://www.nngroup.com/videos/jakobs-law-internet-ux/) Согласно ему, пользователи проводят большую часть своего времени на других сайтах, и они предпочитают, чтобы ваш сайт работал так же, как и все остальные, уже знакомые им сайты. Он был сформирован в 2000 году экспертом по юзабилити Якобом Нильсеном, который описал тенденцию пользователей строить свои ожидания от паттернов дизайна на основе своего совокупного опыта использования других веб-сайтов. Этот принцип побуждает дизайнеров следовать общим правилам дизайна, чтобы не путать пользователей, что может привести к более высокой когнитивной нагрузке.

7. Ментальные модели.

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

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

Как дизайнеры, мы должны закрыть разрыв, который существует между нашими ментальными моделями и моделями наших пользователей. Важно, чтобы мы это делали, потому что будут проблемы, когда они не согласованы, что может повлиять на то, как пользователи воспринимают продукты и опыт. Это несоответствие называется диссонансом ментальной модели, и это происходит, когда знакомый продукт внезапно изменяется. На мой взгляд, очень крутой пример у Google (https://wellbeing.google/), который позволяет пользователям выбирать новые версии своих продуктов, таких как Календарь Google, YouTube и Gmail. Когда в 2017 году они запустили новую версию YouTube после нескольких лет, по сути, одного и того же дизайна, они позволили пользователям ПК упростить работу с новым интерфейсом Material Design. Пользователи могли просмотреть новый дизайн, отправить отзыв и вернуться к старой версии, если они предпочтут ее. В результате неизбежное несоответствие ментальной модели было устранено путем простого расширения возможностей пользователей переключиться на новый дизайн, когда они были готовы.

8. Висцеральные реакции.

Такую реакцию мы обычно получаем от той части мозга, которая отвечает за инстинкты и реагирует гораздо быстрее, чем наше сознание. Это заложено на подсознательном уровне, то есть мы не осознаем, что они влияют на наше поведение. Большая часть человеческого поведения до сих пор является результатом работы т.н. «старого мозга», доставшегося нам от далеких предков, когда инстинкты выживания были на первом месте. Этот старый мозг реагирует и срабатывает гораздо быстрее, нежели сознательное мышление. ( Norman, эмоциональный дизайн, 2005 . ) Данные реакции коренятся в нашей ДНК, так легко, что их можно предсказать ( Weinschenk, Nuero Web Design, 2009 . ).Это заставило бы нас влюбиться в продукт после его первого использования. Короче говоря, я рекомендую использовать элементы дизайна, которые могут представлять любой из старых триггеров мозга. Вы можете использовать в дизайне элементы, включающие определенные триггеры старого мозга, касающиеся выживания, угрозы или репродуктивных функций. Например, всем известное воздействие цвета: синий цвет свежей воды, яркие цвета, напоминающие плоды и чистый открытый дизайн, дающий ощущение безопасной окружающей среды. Кстати, из этого вытекает следующий принцип:

9. Психология цвета.

Цвета также играют важную роль в выборе и поведении людей. Основная идея исследования заключается в том, что цвета оказывают большое влияние на восприятие пользователей. Цвет в дизайне — вещь субъективная. Что вызывает сильные эмоции у одних — на других влияет совершенно по-другому. Иногда это происходит на фоне личных предпочтений, иногда — в силу культурных особенностей. Теория цвета — это наука. Многие специалисты сделали карьеру, изучая влияние цвета на людей: по-отдельности или в группе. И на то есть причина. Иногда стоит чуть изменить оттенок или насыщенность цвета — и зрители испытают совершенно другие чувства. Цвет также по-разному работает в контексте разных культур: один и тот же цвет может в одной стране олицетворять счастье, а в другой — что-то негативное. Таким образом, дизайнеры должны выбрать цвета, которые передают смысл и правильное сообщение пользователям.

10. Эффект простого воздействия.

Этот психологический термин показывает, что люди склонны развивать предпочтение к тем, с кем они попросту знакомы. Так же работает со всем — от людей до технологий.

11. Распознавание лиц.

Люди инстинктивно тянутся к человеческому лицу по двум причинам. Сначала опознайте другого человека. Во-вторых, прочитать выражения лица людей, чтобы определить, являются ли они другом или врагом.Связанные с веб-дизайном, использование лиц может привлечь внимание или установить настроение. Люди, естественно , идентифицировать себя с образами людей над объектами, пейзажи или абстракций ( Нильсен, Eye Tracking Юзабилити, 2010 . ) Кроме того, выражение изображаемого человека будет влиять , как пользователь чувствует сайте. Кто-то, счастливый и улыбающийся, передаст чувство приветствия, равно как вид грустных, голодных детей передаст горе и отчаяние. Чем более достоверна фотография, тем эффективнее она будет.

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

13. Эффект серийной позиции: лучше всего запоминается начало и конец поступающей информации. Учитывайте это правило при разработке блоков.

14. Эффект Фон Ресторфф - если большинство элементов выглядят максимально похоже, запомнится чем-то выделенный элемент.

15. Эффект Зейгарник - мотивируйте пользователя на полное изучение информации. Добавьте индикатор прогресса при прокручивании страницы. Посетитель подсознательно мотивируется прочитать изложенное.

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

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

18. Порог Доэрти - отзывчивость системы должна не отставать от действий человека и наоборот. Чтобы пользователь не захотел покидать сайт, необходимо обеспечить отклик до 400 миллисекунд.

19. Закон Фиттса - время попадания в цель должно быть прямо пропорционально расстоянию до цели. Делайте выделенными из общего фона важные элементы, особенно кнопки действия.

20. Принципы Гештальта.

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

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

Непрерывность: Человеческий глаз будет следовать по самой ровной, гладкой траектории при просмотре линий, независимо от того, как линии были нарисованы. Это продолжение может быть ценным инструментом, когда цель — направить взгляд посетителя в определенном направлении.

Завершение образа: Принцип гласит, что мозг заполнит недостающие части дизайна или изображения, чтобы создать цельную картину. Простыми словами, это сложные формы, которые можно увидеть на логотипе Adobe, Sun Microsystem, NBC, США Network и т. д.

Близость: Этот принцип относится к тому, насколько близки элементы друг к другу. В UX-дизайне принцип близости используется для того, чтобы заставить пользователей сгруппировать определенные вещи вместе. Объединяя вещи, пользователи будут воспринимать это как нечто связанное.

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

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

Симметрия: как правило, симметричные элементы воспринимаются так, словно они составляют одно целое, вне зависимости от расстояния между ними. Это дает нам ощущение единства и порядка.

Завершение. Группа элементов часто воспринимается целиком, как одна легко узнаваемая фигура или образ. «Завершение» проявляется, когда объект не целостный или его части не соединяются друг с другом.

Выводы:

  • Предоставление слишком большого количества вариантов увеличивает ментальную нагрузку на пользователей.
  • Разбивайте длинные или сложные процессы на экраны с меньшим количеством опций.
  • Используйте прогрессивное обучение для минимизации когнитивной нагрузки на новых пользователей.
  • Не используйте «магическое число семь», чтобы оправдать ненужные ограничения дизайна.
  • Разделяйте контент на более мелкие куски, чтобы помочь пользователям легко обрабатывать, понимать и запоминать информацию. Пользователи перенесут свои ожидания, построенные вокруг одного знакомого им продукта, на другой, похожий на первый.
  • Используя существующие ментальные модели, мы можем создать превосходный пользовательский опыт, в котором пользователь может сосредоточиться на своей задаче, а не изучении новой модели.
  • Минимизируйте несогласованность, позволяя пользователям продолжать использовать знакомую версию в течение ограниченного времени.
  • Выбирайте цвета, наиболее подходящие в данной ситуации.
  • Структурируйте и моделируйте визуальные образы.

Источники:

http://www.mannodesign.com/10-psixologicheskix-principov-dizajna

https://ux.pub/klyuchevye-principy-psixologii-dizajna/

http://cognitiveuxd.com/

https://design-glory.com/3020/psihologiya-ux-dizajna

https://www.nngroup.com/videos/jakobs-law-internet-ux/

https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things

https://humanetech.com/

https://webfieldmanual.com/design

--

--

Helena Glava
Дизайн-кабак

I’m a UX\UI designer with 5 years of experience in web development and gambling focused on building wireframes, prototypes and doing the visual design.