How to apply psychology for our UX/UI design

1. USABLE PSYCHOLOGY
For UX/UI Designers

2. DESIGNPSYCH

4. COGNITIVE PSYCHOLOGY
The science of mental process: how people acquire, process and store information.

5. SOCIAL PSYCHOLOGY
how people exist within a social context: how thought, feeling and
behaviour are influenced by those around us.

6. UNDERSTANDING
THE BRAIN

7. • Reptilian
Our brain have 3 different “areas”

8. • Reptilian
• Middle Brain
Our brain have 3 different “areas”

9. • Reptilian (or old brain)
• Middle Brain
• New Brain
Our brain have 3 different “areas”

10. 1. REPTILIAN

11. Reptilian / Instinctual
- Common to all animals
- Basic Functions
- Risky vs Safe
- Sex
- Food

12. Can i eat it?

13. Potential sexual partner?
Symmetry? Good Hair? look from the same “group” as i am?

14. fight or flight instinct (fff)

15. Is it fast? is it far?

16. 2. MIDDLE BRAIN

17. Middle Brain / Emotional
- Limbic system
- Ancient & Automatic
- Amygdala - fear, relevance, trust
- Thalamus - Happy, sad, disgusted
- VTA Dopamine - risk & reward

18. Empathy, are you ok?

19. Pleasure vs Pain

20. body language

21. 3. THE NEW BRAIN

22. New Brain / Rational
- Unique to humans
- Higher cognitive functions
- Plane, organise, problem-solving
- Social learning & innovation
- Language, abstract thought

23. Understanding product benefits

24. Product Demonstration

25. Social Proof

26. Authority?

27. SLOW VS FAST THINKING

28. SLOW THINKING
Takes previous knowledge of how the world works and applies it to the current situation,
it’s slow but powerful and accurate

29. FAST THINKING
Emotional, aimed at making quick decisions often in dangerous situations

30. If something is beautiful people perceive
it to be easy to use.
“ - Joe Leech
”

31. People scan the screen based on past experience
and expectation1

32. 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 screen
3. Try to design based on familiar patterns.

33. People Believe that things that are close together
Belong together2

34. 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
?

35. Reds and blues together are hard on the eyes
3 when 2 colors are being used together, One color may jump out while another color appears
recessed. This effect is called chromostereopsis.

36. 1. While text in involved, Avoid using blue & red or red & greens next to each other.
READ IT?CAN YOU AND NOW?

37. The meaning of color vary by culture
4

38. 1. Pick a few major cultures and pick your colors carefully.

39. Reading computer / mobile screen is allot harder
Than reading paper5

40. How users read on the web: They Don't!
“ - jakob nielsen
”

41. 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

42. Uppercase letters are harder to read
6 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

43. 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

44. The images we use, effects the way people read
7

45. 1. Our brain is build to recognize faces efficiently, images that includes faces will take
the first attention on the screen
Before

46. After

47. People remember & learn better by doing
8

48. 1. Help your users learning your application by make them doing the desired actions

49. Its easier to recognize information than recall it
9

51. WHAT ANIMALS WERE ON THE PICTURE?

52. 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.

53. People are more motivated when they can see the go
10

54. 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

56. People are addicted for seeking information
11

57. 1. Make the search of information as simple as possible
2. keep its behaviour and location consistent

58. People are hard-wired for imitation and empathy
12

59. 1. If you want to influence someone’s behaviour, show him someone else is doing
the same task.

60. Doing things together bona people together
13

61. 1. Most of our online interaction are asynchronous (even on fb,twitter,linkedin etc..)
Look for opportunities to create synchronous interaction into your product.

62. The brain respond uniquely to people we
know in person14

63. 1. People are “programmed” to pay special attention to friends and relatives.

64. People make most decisions unconsciously
15

65. 10%
90%
Conscious decisions unconscious decisions

66. People want more choices that they can process
16

67. 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

68. Mood influence decisions
17

69. 90% of all information
that comes into our brain is visual
BEAUTY EVOKES EMOTIONS

70. 1.You can influence someone’s mood easily, for example, with a short video clip, images,copy-writing etc..
VS

71. People expect the web to be fast
18

72. GIVE IT A SECOND!!! Its going to space!
Will you give it a second, to get back from space?
“ - Louis CK
”

73. 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

74. 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
• 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_
• 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

75. THANK YOU
Maor Shabbat
Visual designer & UX Architect