SlideShare una empresa de Scribd logo
1 de 45
Психология восприятия
и UX дизайн
Елена Бажан
UX Specialist
План


1.   Понятие восприятия
2.   История представлений о восприятии
3.   Свойства и принципы восприятия
4.   Гештальт-законы восприятия
5.   Ментальные модели и восприятие
1. Понятие восприятия
1. Понятие восприятия

Ощущения:                   Восприятие

- зрительные;               - зрительное;
- слуховые;                 - слуховое;
- тактильные...             - тактильное...
2. История представлений о зрительном
восприятии
2. История представлений о зрительном
  восприятии

Физиологический            Геометрический
    подход                     подход




        Гален                    Альгацен
       130 - 200                 965 - 1039
2. История представлений о зрительном
восприятии

Механистический              Оптический
    подход                     подход
2. Современные теории восприятия

Гештальт-психология    Бихевиоризм




     Rudolf Arnheim,     Daniel Kahneman,
       1904 -2007               1934
3.1. Этапы восприятия
3.1. Этапы восприятия
3.1. Этапы восприятия

1. Обнаружение объекта
2. Различение отдельных признаков
3. Выделение информативного содержания
4. Формирование образа
3.2. Восприятие и контекст
3.2. Восприятие и контекст
3.3. Свойства восприятия


Константность
3.3. Свойства восприятия

         Предметность
3.3. Свойства восприятия


          Целостность
3.4. Принципы восприятия


#1 Обобщённость

#2 Осмысленность

#3 Проекция реального мира
3.5. Контраст и форма
            Asos.de
3.5. Контраст и форма
            Nike.com
3.6. Восприятие времени

Условия адекватного восприятия времени:
•активная вовлечённость;
•обратная связь;
•оптимальное количество информации;
•привычность структуры.
3.7. Восприятие и внимание
4. Гештальт-законы восприятия


•   Закон близости
•   Закон Prägnanz (фигура-фон)
•   Закон сходства
•   Закон замыкания
•   Закон хорошего продолжения
•   Закон простоты
4.1. Закон близости
4.1. Закон близости
4.2. Закон Prägnanz (фигура-фон)
4.3. Закон сходства
Группировка похожих элементов

Order ID      First Name   Last Name   Date         Price, $

  012345678       Tom      North       02/15/2011   388.21

    01245         Daniel   Few         02/16/2011   12.44

   0124786       Thomas    Jefferson   02/14/2010   3,548.55

   015978         James    Madison     02/11/2011   258.00

   025873        George    Randolph    02/10/2009   24.00

  012345678       Tom      North       02/15/2011   147.00

    01245         Daniel   Few         02/16/2011   37.14

   0124786       Thomas    Jefferson   02/14/2010   1,544.00
Группировка похожих элементов

Order ID    First Name   Last Name   Date          Price, $

012345678   Tom          North        02/15/2011              388.21

01245       Daniel       Few          02/16/2011               12.44

0124786     Thomas       Jefferson    02/14/2010          3,548.55

015978      James        Madison      02/11/2011              258.00

025873      George       Randolph     02/10/2009               24.00

012345678   Tom          North        02/15/2011              147.00

01245       Daniel       Few          02/16/2011               37.14

0124786     Thomas       Jefferson    02/14/2010          1,544.00
4.4. Закон замыкания
4.5. Закон продолжения
4.6. Закон простоты
5. Восприятие и опыт
5. Восприятие и опыт
5. Восприятие и опыт




Представление   Восприятие    Образ

  прошлое       настоящее    будущее
Восприятие глазами новичка
Восприятие глазами новичка
Новичок   >>> Профессионал
Повышение доверия

- качественный дизайн;
- PayPal, VeriSign, Visa;
- советы по выбору;
- обучающие материалы;
- отзывы;
- понятная политика возвратов, доставки:
Ментальные модели
Восприятие, опыт и воспоминания



Память предоставляет нам истории.

Историю определяют перемены,
значительные моменты и концовка.
Восприятие, опыт и воспоминания
Восприятие и решения

Нашим мышлением и выбором
руководят две системы:

1. быстрая и эмоциональная;

2. медленная и логичная.
Формирование опыта



1. Вычёркивание
2. Конструирование
3. Искажение
4. Обобщение
Вопросы?
Елена Бажан
e.bazhan@sysiq.com

Más contenido relacionado

Destacado

Расширенное кино
Расширенное киноРасширенное кино
Расширенное кино
Wordshop Academy
 
Sasha manovceva portfolio
Sasha manovceva portfolio Sasha manovceva portfolio
Sasha manovceva portfolio
Wordshop Academy
 
Какие бывают стили сайтов в веб-дизайне
Какие бывают стили сайтов в веб-дизайнеКакие бывают стили сайтов в веб-дизайне
Какие бывают стили сайтов в веб-дизайне
Rinat Shaikhutdinov
 
академия коммуникаций Wordshop 30.09.2013
академия коммуникаций Wordshop 30.09.2013академия коммуникаций Wordshop 30.09.2013
академия коммуникаций Wordshop 30.09.2013
Wordshop Academy
 
Юрий Коротков - самый кассовый российский кинодраматург
Юрий Коротков - самый кассовый российский кинодраматургЮрий Коротков - самый кассовый российский кинодраматург
Юрий Коротков - самый кассовый российский кинодраматург
Wordshop Academy
 
академия коммуникаций Wordshop 01.10.2013
академия коммуникаций Wordshop 01.10.2013академия коммуникаций Wordshop 01.10.2013
академия коммуникаций Wordshop 01.10.2013
Wordshop Academy
 
Портфолио Ткаченко С.И.
Портфолио Ткаченко С.И.Портфолио Ткаченко С.И.
Портфолио Ткаченко С.И.
stserious
 

Destacado (11)

Расширенное кино
Расширенное киноРасширенное кино
Расширенное кино
 
Vim avia isaenko-golovina
Vim avia isaenko-golovinaVim avia isaenko-golovina
Vim avia isaenko-golovina
 
Sasha manovceva portfolio
Sasha manovceva portfolio Sasha manovceva portfolio
Sasha manovceva portfolio
 
Какие бывают стили сайтов в веб-дизайне
Какие бывают стили сайтов в веб-дизайнеКакие бывают стили сайтов в веб-дизайне
Какие бывают стили сайтов в веб-дизайне
 
академия коммуникаций Wordshop 30.09.2013
академия коммуникаций Wordshop 30.09.2013академия коммуникаций Wordshop 30.09.2013
академия коммуникаций Wordshop 30.09.2013
 
Юрий Коротков - самый кассовый российский кинодраматург
Юрий Коротков - самый кассовый российский кинодраматургЮрий Коротков - самый кассовый российский кинодраматург
Юрий Коротков - самый кассовый российский кинодраматург
 
академия коммуникаций Wordshop 01.10.2013
академия коммуникаций Wordshop 01.10.2013академия коммуникаций Wordshop 01.10.2013
академия коммуникаций Wordshop 01.10.2013
 
Модульная система
Модульная системаМодульная система
Модульная система
 
3 ESO - Visual i plàstica - La composició - llei de la pregnància
3 ESO - Visual i plàstica - La composició - llei de la pregnància3 ESO - Visual i plàstica - La composició - llei de la pregnància
3 ESO - Visual i plàstica - La composició - llei de la pregnància
 
Портфолио Ткаченко С.И.
Портфолио Ткаченко С.И.Портфолио Ткаченко С.И.
Портфолио Ткаченко С.И.
 
Гештальт-принципы дизайна для разработчиков
Гештальт-принципы дизайна для разработчиковГештальт-принципы дизайна для разработчиков
Гештальт-принципы дизайна для разработчиков
 

Más de Ecommerce Solution Provider SysIQ

Más de Ecommerce Solution Provider SysIQ (20)

Unexpected achievements 2013
Unexpected achievements 2013Unexpected achievements 2013
Unexpected achievements 2013
 
Developing for e commerce is important
Developing for e commerce is importantDeveloping for e commerce is important
Developing for e commerce is important
 
Getting to know magento
Getting to know magentoGetting to know magento
Getting to know magento
 
Java serialization
Java serializationJava serialization
Java serialization
 
All things php
All things phpAll things php
All things php
 
Developing for e commerce is important
Developing for e commerce is importantDeveloping for e commerce is important
Developing for e commerce is important
 
Magento code audit
Magento code auditMagento code audit
Magento code audit
 
User focused design
User focused designUser focused design
User focused design
 
Scalability and performance for e commerce
Scalability and performance for e commerceScalability and performance for e commerce
Scalability and performance for e commerce
 
Lupan big enterprise ecommerce fusion 2013
Lupan   big enterprise ecommerce fusion 2013Lupan   big enterprise ecommerce fusion 2013
Lupan big enterprise ecommerce fusion 2013
 
non-blocking java script
non-blocking java scriptnon-blocking java script
non-blocking java script
 
Going global
Going globalGoing global
Going global
 
Going Global
Going GlobalGoing Global
Going Global
 
QA evolution to the present day
QA evolution to the present dayQA evolution to the present day
QA evolution to the present day
 
Quick Intro to Clean Coding
Quick Intro to Clean CodingQuick Intro to Clean Coding
Quick Intro to Clean Coding
 
QA evolution, in pictures
QA evolution, in picturesQA evolution, in pictures
QA evolution, in pictures
 
Manifest of modern engineers
Manifest of modern engineersManifest of modern engineers
Manifest of modern engineers
 
User Behavior: Interacting With Important Website Elements
User Behavior: Interacting With Important Website ElementsUser Behavior: Interacting With Important Website Elements
User Behavior: Interacting With Important Website Elements
 
Seo and Marketing Requirements in Web Architecture
Seo and Marketing Requirements in Web ArchitectureSeo and Marketing Requirements in Web Architecture
Seo and Marketing Requirements in Web Architecture
 
Management and Communications (IPAA)
Management and Communications (IPAA)Management and Communications (IPAA)
Management and Communications (IPAA)
 

Психология восприятия и UX дизайн

Notas del editor

  1. Что вы видите на экране?
  2. Ощущения - отражение свойств предметов объективного мира при их непосредственном воздействии на органы чувств (зрительные, слуховые, тактильные...) Восприятие делает возможным целостное отражение мира, создание интегральной картины действительности, в отличие от ощущений, отражающих отдельные качества реальности. Итог восприятия – интегральный, целостный образ окружающего мира, возникающий при непосредственном воздействии раздражителя на органы чувств субъекта.
  3. Гален (около 130 - 200) доказал, что не сердце, а головной и спинной мозг являются «средоточием движения, чувствительности и душевной деятельности». Зрение, считал он, возникает благодаря «светлой пневме», которая находится между хрусталиком и радужной оболочкой. Она непрерывно поступает сюда из мозга через зрительный нерв и воспринимает световые лучи. Образовавшееся от такого слияния светоощущение приходит к «центральному зрительному органу» – так называл ученый зрительные бугры... Зрение, считал Гален, возникает благодаря «светлой пневме», которая находится между хрусталиком и радужной оболочкой. Она непрерывно поступает сюда из мозга через зрительный нерв. Именно она и воспринимает световые лучи. Образовавшееся от такого слияния светоощущение приходит к «центральному зрительному органу» – так называл ученый зрительные бугры... «Чтобы создалось ощущение, – писал он, – каждое чувство должно претерпеть изменение, которое затем будет воспринято мозгом. <...> Вот почему мозг посылает частицу самого себя к хрусталиковой влаге, дабы узнавать получаемые ею впечатления. <...> В глазах <...> световые впечатления быстро достигают заключенной в глазу части мозга – сетчатой оболочки». Геометрическая трактовка возникновения изображений: Арабский философ Ибн аль Хайтам (известный на западе как Альгацен, 965-1039) предполагал, что “видимый пучок” лучей распространяется от предмета к глазу, хрусталик которого является чувствующим органом. Затем он предложил оригинальную идею о том, что изображение предмета передаётся на расстояние физическими лучами, посланными из каждой точки предмета к соответствующей точке передней чувствительной поверхности хрусталика. Такая трактовка позволила Альгацену предложить разрешение древней проблемы - как изображения больших предметов проникают в маленький зрачок глаза. Именно он впервые употребляет такие названия отдельных частей глаза как стекловидное тело, роговая оболочка, хрусталик...
  4. Гален (около 130 - 200) доказал, что не сердце, а головной и спинной мозг являются «средоточием движения, чувствительности и душевной деятельности». Зрение, считал он, возникает благодаря «светлой пневме», которая находится между хрусталиком и радужной оболочкой. Она непрерывно поступает сюда из мозга через зрительный нерв и воспринимает световые лучи. Образовавшееся от такого слияния светоощущение приходит к «центральному зрительному органу» – так называл ученый зрительные бугры... Зрение, считал Гален, возникает благодаря «светлой пневме», которая находится между хрусталиком и радужной оболочкой. Она непрерывно поступает сюда из мозга через зрительный нерв. Именно она и воспринимает световые лучи. Образовавшееся от такого слияния светоощущение приходит к «центральному зрительному органу» – так называл ученый зрительные бугры... «Чтобы создалось ощущение, – писал он, – каждое чувство должно претерпеть изменение, которое затем будет воспринято мозгом. <...> Вот почему мозг посылает частицу самого себя к хрусталиковой влаге, дабы узнавать получаемые ею впечатления. <...> В глазах <...> световые впечатления быстро достигают заключенной в глазу части мозга – сетчатой оболочки». Геометрическая трактовка возникновения изображений: Арабский философ Ибн аль Хайтам (известный на западе как Альгацен, 965-1039) предполагал, что “видимый пучок” лучей распространяется от предмета к глазу, хрусталик которого является чувствующим органом. Затем он предложил оригинальную идею о том, что изображение предмета передаётся на расстояние физическими лучами, посланными из каждой точки предмета к соответствующей точке передней чувствительной поверхности хрусталика. Такая трактовка позволила Альгацену предложить разрешение древней проблемы - как изображения больших предметов проникают в маленький зрачок глаза. Именно он впервые употребляет такие названия отдельных частей глаза как стекловидное тело, роговая оболочка, хрусталик...
  5. “ Механистическая гипотеза” (идеи о том, что тело является механизмом) Отделы мозга согласно традиционной ранней концепции из книги Грегора Рейша (Gregor Reisch) Margarita Philosophica, опубликованной в 1504 году. В передней полости расположено “общее чувствилище”, связанное нервами с органами чувств; в этой полости также находятся фантазия и воображение. В средней полости расположены мысли и суждения, в задней области - память. Оптическая геометрия Кеплера дала объяснение перевёрнутому изображению. Человек, смотрящий на сетчатку в тёмной камере, видит перевёрнутое изображение (RST) видимого предмета (VXY). Иллюстрация из книги Рене Декарта “La Dioptrique”
  6. На сегодняшний день наибольший вклад в становление теории зрительного восприятия внесла гештальтпсихология, которая относится к одному из влиятельных направлений в современной психологии. Ее основы были заложены в 20-х годах нашего столетия в работах немецких психологов, которые выдвинули теорию так называемого гештальта. Термин "гештальт" не поддается однозначному переводу на русский язык. Он обладает целым рядом значений - "целостный образ", "структура", "форма". В научной литературе это понятие чаще всего употребляется без перевода, означая целостное объединение элементов психической жизни, несводимое к сумме составляющих его частей. Гештальт психологи выступили прежде всего против ассоциативной теории восприятия , господствовавшей в XIX веке. В противоположность этой теории они стремились доказать, что восприятие носит целостный характер и строится на основе создания целостных структур — гештальтов. Многие эксперименты показали, что проявление любого элемента зависит от его места и функции в модели целого. Базовые сущности и элементарные законы визуального восприятия достаточно полно исследованы в работах американского эстетика и психолога Рудольфа Арнхейма (Rudolf Arnheim), использовавшего принципы и методологию гештальтпсихологии. Даниэль Канеман, лауреат Нобелевской премии по экономике за его основополагающий труд в области психологии, поставивший под сомнение рациональную модель суждения и принятия решений, может считаться одним из самых влиятельных мыслителей современности. Его идеи оказали глубокое и серьезное влияние на множество дисциплин. Но только теперь он подытожил многие годы своих исследований и размышлений в одной книге. В книге «Думать медленно и быстро» выход, которой ожидался с большим нетерпением, Канеман описывает «механизм действия разума». Он утверждает, что нашим мышлением и выбором руководят две системы: «Система 1» быстрая, интуитивная и эмоциональная; «Система 2» медленнее, рассудительнее и логичнее первой. Исследуя работу в разуме обеих этих систем, Канеман открывает невероятные возможности – но также и ошибки и предвзятости – быстрого мышления и показывает значительное влияние интуитивных впечатлений на наши мысли и наш выбор. Роль оптимизма в процессе открытия нового бизнеса; важность правильной оценки рисков в корпоративной стратегии; трудности предсказания того, что сделает нас счастливыми в будущем; иллюзия опытности – все это можно понять, только учитывая взаимодействие двух названных систем, которые сообща формируют наши суждения и процесс принятия решений. Вовлекая читателя в живую беседу о том, как мы думаем, Канеман показывает, где мы можем и где мы не можем доверять нашим интуициям, а также как мы можем воспользоваться преимуществами медленного мышления. Он предлагает ясные и практичные комментарии к процессу совершения выбора в нашем бизнесе и нашей личной жизни, и подсказывает, как мы можем использовать разные техники, чтобы обойти мыслительные проблемы, часто доставляющие нам неприятности. Книга «Думать медленно и быстро» изменит Ваше представление о том, как Вы думаете.
  7. На этой картинке мы видим вначале двух пожилых людей, и лишь затем замечаем двух молодых людей и девушку на заднем плане.
  8. Мы видим далматинца, а не набор полосок
  9. Различение отдельных признаков в объекте. Выделение в объекте информативного содержания, адекватного цели действия. Формирование чувственного образа. Обнаружение объекта как целого.
  10. восприятие зависит от контекста
  11. Константность – относительная устойчивость воспринимаемых признаков предметов при изменении условий восприятия (расстояние до воспринимаемого предмета, условия освещенности, угол восприятия и т.д.).
  12. Предметность – объект воспринимается нами как обособленное в пространстве и времени отдельное физическое тело. Наиболее ярко это свойство проявляется в обособлении фигуры и фона.
  13. Целостность – внутренняя органическая взаимосвязь частей и целого в образе. 2 аспекта целостности: а) объединение разных элементов в целом; б) независимость образованного целого от качества составляющих его элементов.
  14. Обобщенность – каждый образ относится к некоторому классу объектов, имеющему название. Осмысленность восприятия основана на связи восприятия с мышлением, с пониманием сущности предмета. Феномен проекции: человек видит не изображение предмета на сетчатке глаза, а реальный предмет в реальном мире.
  15. Условия адекватного восприятия времени: активное движение; обратная связь; оптимальное количество сенсорной информации; привычность структуры информации.
  16. Вниманием называется выделение, выбор актуальных, личностно-значимых сигналов. Как и память, внимание относится к так называемым "сквозным" психическим процессам, так как присутствует на всех уровнях психической организации. Традиционно внимание связывают прежде всего с ограничением поля восприятия , то есть с такой организацией восприятия, при которой человек воспринимает то, что хочет видеть (слышать и т.д.), предвосхищая структуру информации, которая будет при этом получена. Внимание осуществляет выбор той информации, которая будет обрабатываться. Центральные механизмы переработки информации у человека могут иметь дело в данный момент времени лишь с одним объектом. Фиксированный объем является основной характеристикой внимания. Объем внимания нельзя изменить с помощью обучения и тренировки. Создание оптических иллюзий было темой работ Сальвадора Дали (например, «Лебеди, отражающиеся в слонах» (1937)).
  17. стимулы, расположенные рядом, имеют тенденцию восприниматься вместе может быть использовано для группировки элементов разных категорий
  18. стимулы, схожие по размеру, очертаниям, цвету или форме, имеют тенденцию восприниматься вместе
  19. восприятие имеет тенденцию завершать фигуру так, что она приобретает полную форму: неполные конфигурации достраиваются в восприятии до полных - по аналогии с прочтением слова вопреки пропуску ряда букв
  20. Глаза могут легко и непринужденно следовать за элементами, которые расположены вдоль непрерывной линии. Эти элементы, таким образом, воспринимаются как единое целое.
  21. восприятие имеет тенденцию к упрощению
  22. Представление – это процесс воспроизведения прошлых образов.
  23. Пользователи, впервые посещающие сайт, наиболее ценная аудитория (60-70%). Ключевое значение имеет интуитивно-понятный интерфейс, снижение негативных эмоций и формирование доверия. Пути повышения доверия: - PayPal, VeriSign, Visa; - Bill me Later, платёжные альтернативы; - дизайн и стиль сайта, соответствующий индустрии; - советы по подбору товара, обучающие материалы; - прозрачная политика возвратов, доставки.
  24. Пользователи, впервые посещающие сайт, наиболее ценная аудитория (60-70%). Ключевое значение имеет интуитивно-понятный интерфейс, снижение негативных эмоций и формирование доверия.
  25. Пути повышения доверия: - PayPal, VeriSign, Visa; - Bill me Later, платёжные альтернативы; - дизайн и стиль сайта, соответствующий индустрии; - советы по подбору товара, обучающие материалы; - прозрачная политика возвратов, доставки.
  26. Ментальные модели - глубоко укоренившиеся в сознании понятия, обобщения или даже картины и образы, которые действуют на то, как мы воспринимаем мир и действуем.
  27. Даниэль Канеман ( Daniel Kahneman ): Память предоставляет нам истории. Историю определяют перемены, значительные моменты и концовка. Для сайта переменами являются переход на другую страницу, интерактивные элементы (hover-эффекты, popup-окна, слайд-шоу...). Концовка определяет причину ухода с сайта и воспоминания о пользовательском опыте.
  28. Даниэль Канеман ( Daniel Kahneman ): Память предоставляет нам истории. Историю определяют перемены, значительные моменты и концовка. Для сайта переменами являются переход на другую страницу, интерактивные элементы (hover-эффекты, popup-окна, слайд-шоу...). Концовка определяет причину ухода с сайта и воспоминания о пользовательском опыте.
  29. нашим мышлением и выбором руководят две системы: «Система 1» быстрая, интуитивная и эмоциональная; «Система 2» медленнее, рассудительнее и логичнее первой. Исследуя работу в разуме обеих этих систем, Канеман открывает невероятные возможности – но также и ошибки и предвзятости – быстрого мышления и показывает значительное влияние интуитивных впечатлений на наши мысли и наш выбор. Роль оптимизма в процессе открытия нового бизнеса; важность правильной оценки рисков в корпоративной стратегии; трудности предсказания того, что сделает нас счастливыми в будущем; иллюзия опытности – все это можно понять, только учитывая взаимодействие двух названных систем, которые сообща формируют наши суждения и процесс принятия решений.
  30. Механизмы формирования: Вычеркивание – отбор и фильтрование опыта, часть которого уходит из памяти; Конструирование – придумывание отсутствующих деталей; Искажение – манипуляция фактами и событиями; Обобщение – истолкование единственного случая как типичного для целого класса явлений.