Usable psychology for UX/UI Designers
-
Upload
maor-shabbat -
Category
Design
-
view
809 -
download
2
Transcript of Usable psychology for UX/UI Designers
![Page 1: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/1.jpg)
USABLE PSYCHOLOGYFor UX/UI Designers
![Page 2: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/2.jpg)
DESIGNPSYCH
![Page 3: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/3.jpg)
![Page 4: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/4.jpg)
COGNITIVE PSYCHOLOGYThe science of mental process: how people acquire, process and store information.
![Page 5: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/5.jpg)
SOCIAL PSYCHOLOGYhow people exist within a social context: how thought, feeling and
behaviour are influenced by those around us.
![Page 6: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/6.jpg)
UNDERSTANDING THE BRAIN
![Page 7: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/7.jpg)
• Reptilian
Our brain have 3 different “areas”
![Page 8: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/8.jpg)
• Reptilian• Middle Brain
Our brain have 3 different “areas”
![Page 9: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/9.jpg)
• Reptilian (or old brain)• Middle Brain• New Brain
Our brain have 3 different “areas”
![Page 10: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/10.jpg)
1. REPTILIAN
![Page 11: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/11.jpg)
Reptilian / Instinctual- Common to all animals- Basic Functions- Risky vs Safe- Sex- Food
![Page 12: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/12.jpg)
Can i eat it?
![Page 13: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/13.jpg)
Potential sexual partner?
Symmetry? Good Hair? look from the same “group” as i am?
![Page 14: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/14.jpg)
fight or flight instinct (fff)
![Page 15: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/15.jpg)
Is it fast? is it far?
![Page 16: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/16.jpg)
2. MIDDLE BRAIN
![Page 17: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/17.jpg)
Middle Brain / Emotional- Limbic system- Ancient & Automatic- Amygdala - fear, relevance, trust- Thalamus - Happy, sad, disgusted- VTA Dopamine - risk & reward
![Page 18: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/18.jpg)
Empathy, are you ok?
![Page 19: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/19.jpg)
Pleasure vs Pain
![Page 20: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/20.jpg)
body language
![Page 21: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/21.jpg)
3. THE NEW BRAIN
![Page 22: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/22.jpg)
New Brain / Rational- Unique to humans- Higher cognitive functions- Plane, organise, problem-solving- Social learning & innovation- Language, abstract thought
![Page 23: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/23.jpg)
Understanding product benefits
![Page 24: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/24.jpg)
Product Demonstration
![Page 25: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/25.jpg)
Social Proof
![Page 26: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/26.jpg)
Authority?
![Page 27: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/27.jpg)
SLOW VS FAST THINKING
![Page 28: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/28.jpg)
SLOW THINKINGTakes previous knowledge of how the world works and applies it to the current situation,
it’s slow but powerful and accurate
![Page 29: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/29.jpg)
FAST THINKINGEmotional, aimed at making quick decisions often in dangerous situations
![Page 30: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/30.jpg)
If something is beautiful people perceive it to be easy to use.
“
- Joe Leech
”
![Page 31: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/31.jpg)
People scan the screen based on past experience and expectation1
![Page 32: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/32.jpg)
1. Avoid putting anything important at the edges, people will ignore it.2. People consider that the most important information starts on the top left of the screen3. Try to design based on familiar patterns.
![Page 33: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/33.jpg)
People Believe that things that are close togetherBelong together 2
![Page 34: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/34.jpg)
1. Use more space between items that don't belong together, and group items in close proximity if they do belong together, grouping might be done with spaces / background color etc..
Stop War
NowPeace
Stop War
NowPeace
?
![Page 35: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/35.jpg)
Reds and blues together are hard on the eyes3 when 2 colors are being used together, One color may jump out while another color appears
recessed. This effect is called chromostereopsis.
![Page 36: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/36.jpg)
1. While text in involved, Avoid using blue & red or red & greens next to each other.
READ IT?CAN YOU AND NOW?
![Page 37: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/37.jpg)
The meaning of color vary by culture4
![Page 38: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/38.jpg)
1. Pick a few major cultures and pick your colors carefully.
![Page 39: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/39.jpg)
Reading computer / mobile screen is allot harderThan reading paper5
![Page 40: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/40.jpg)
How users read on the web: They Don't!
“
- jakob nielsen
”
![Page 41: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/41.jpg)
1. Provide high contrast between text and background.2. Try http://webaim.org/resources/contrastchecker/
In order to make the text more readable, make sure you have enough contrast between the text and the background.
In order to make the text more readable, make sure you have enough contrast between the text and the background.
In order to make the text more readable, make sure you have enough contrast between the text and the background.
Impossible Hard Best
![Page 42: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/42.jpg)
Uppercase letters are harder to read6 The story goes that we read by recognizing the shapes of words and groups of words.
Words in mixed case or lowercase letters have unique shapes. Words in all capital letters have
the same shape
![Page 43: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/43.jpg)
1. People are not used to see all capital words so they see them as SHOUTING.2. Save uppercase letters for headlines, and when you need to get people attentions.3. Keep uppercase headlines / texts short
![Page 44: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/44.jpg)
The images we use, effects the way people read7
![Page 45: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/45.jpg)
1. Our brain is build to recognize faces efficiently, images that includes faces will take the first attention on the screen
Before
![Page 46: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/46.jpg)
After
![Page 47: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/47.jpg)
People remember & learn better by doing8
![Page 48: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/48.jpg)
1. Help your users learning your application by make them doing the desired actions
![Page 49: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/49.jpg)
Its easier to recognize information than recall it9
![Page 50: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/50.jpg)
![Page 51: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/51.jpg)
WHAT ANIMALS WERE ON THE PICTURE?
![Page 52: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/52.jpg)
DID YOU SAW AN IMAGE OF A SEAL?VS
1. Don't make people recall information, instead help them recognize it.2. Don't ask people to remember information from one place to another.3. most people can remember up to 4 items.4. If you want people to remember something you must go over it again and again.5. People are always going to forget, design with forgetting in mind.
![Page 53: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/53.jpg)
People are more motivated when they can see the goal10
![Page 54: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/54.jpg)
1. The shorter the way to the goal the more motivated people will get.2. People enjoy being a part of a reward program, compared to costumers which are
not part of the program.3. people need help tracking their progress
![Page 55: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/55.jpg)
![Page 56: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/56.jpg)
People are addicted for seeking information11
![Page 57: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/57.jpg)
1. Make the search of information as simple as possible2. keep its behaviour and location consistent
![Page 58: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/58.jpg)
People are hard-wired for imitation and empathy12
![Page 59: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/59.jpg)
1. If you want to influence someone’s behaviour, show him someone else is doing the same task.
![Page 60: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/60.jpg)
Doing things together bona people together13
![Page 61: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/61.jpg)
1. Most of our online interaction are asynchronous (even on fb,twitter,linkedin etc..)Look for opportunities to create synchronous interaction into your product.
![Page 62: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/62.jpg)
The brain respond uniquely to people we know in person14
![Page 63: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/63.jpg)
1. People are “programmed” to pay special attention to friends and relatives.
![Page 64: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/64.jpg)
People make most decisions unconsciously 15
![Page 65: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/65.jpg)
10%
90%
Conscious decisions unconscious decisions
![Page 66: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/66.jpg)
People want more choices that they can process16
![Page 67: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/67.jpg)
1. Resist the impulse to provide your users with a large number of choices
2. If possible, limit the number of choices to three or four. If you have to offer more options, try to do so in a progressive way. For example, have people choose first from three or four options, and then choose again from a
![Page 68: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/68.jpg)
Mood influence decisions17
![Page 69: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/69.jpg)
90% of all information that comes into our brain is visual
BEAUTY EVOKES EMOTIONS
![Page 70: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/70.jpg)
1.You can influence someone’s mood easily, for example, with a short video clip, images,copy-writing etc..
VS
![Page 71: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/71.jpg)
People expect the web to be fast18
![Page 72: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/72.jpg)
GIVE IT A SECOND!!! Its going to space!Will you give it a second, to get back from space?
“
- Louis CK
”
![Page 73: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/73.jpg)
1.Unoccupied time feels longer than occupied time
2.Uncertain waits are longer than known, finite waits
3.Unexplained waits are longer than explained waits
![Page 74: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/74.jpg)
References and further learning
Watch:• Psychology of UX design: https://vimeo.com/71600462• The importance of being inauthentic: https://www.youtube.com/watch?v=1zpf8H_Dd40• Applying psychology to UX design: https://creativemornings.com/talks/joe-leech/1• Nathalie Nahai - web psychologist: https://www.youtube.com/watch?v=MPo3kSzeh40• Empathy, your secret weapon in designing for the web: https://www.youtube.com/watch?v=MPo3kSzeh40
Read:• Designing for brains: http://www.slideshare.net/MarissaEpstein/designing-for-brains-the-psychology-of-user-experience?qid=3f5024ac-9166-4f24-9bbd-cba9da7f6c32&v=&b=&from_search=11• The secret psychology of online persuasion: http://www.slideshare.net/nathalienahai/the-secret-psychology-of-online-persuasion• Gestalt principles: https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/• what is beautiful is usable: http://www.ise.bgu.ac.il/faculty/noam/papers/00_nt_ask_di_iwc.pdf• 100 things every designer need to know about people: http://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0321767535/ref=sr_1_1?ie=UTF8&qid=1455463790&sr=8-1&keywords=100+things+every+designer+needs+to+know+about+people• Psychology for designers: https://www.fivesimplesteps.com/products/psychology-for-designers• The jam research: https://faculty.washington.edu/jdb/345/345%20Articles/Iyengar%20%26%20Lepper%20(2000).pdf
![Page 75: Usable psychology for UX/UI Designers](https://reader036.fdocuments.net/reader036/viewer/2022062401/58f9a9e2760da3da068b732c/html5/thumbnails/75.jpg)
THANK YOUMaor Shabbat
Visual designer & UX Architect