usable psychology for ux/ui designers

Download Usable psychology for UX/UI Designers

Post on 10-Apr-2017

776 views

Category:

Design

1 download

Embed Size (px)

TRANSCRIPT

Usable PsychologyFor UX/UI Designers

DesignPSYCh

cognitive psychologyThe science of mental process: how people acquire, process and store information.

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

understanding the brain

ReptilianOur brain have 3 different areas

ReptilianMiddle BrainOur brain have 3 different areas

Reptilian (or old brain)Middle BrainNew BrainOur brain have 3 different areas

1. Reptilian

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

Can i eat it?

Potential sexual partner?Symmetry? Good Hair? look from the same group as i am?

fight or flight instinct (fff)

Is it fast? is it far?

2. Middle Brain

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

Empathy, are you ok?

Pleasure vs Pain

body language

3. The New Brain

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

Understanding product benefits

Product Demonstration

Social Proof

Authority?

slow VS fast thinking

Slow thinkingTakes previous knowledge of how the world works and applies it to the current situation, its slow but powerful and accurate

Fast thinkingEmotional, aimed at making quick decisions often in dangerous situations

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

People scan the screen based on past experience and expectation

1

Avoid putting anything important at the edges, people will ignore it.People consider that the most important information starts on the top left of the screenTry to design based on familiar patterns.

People Believe that things that are close togetherBelong together

2

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

StopWar

NowPeace

StopWarNowPeace?

Reds and blues together are hard on the eyes

3when 2 colors are being used together, One color may jump out while another color appears recessed. This effect is called chromostereopsis.

While text in involved, Avoid using blue & red or red & greens next to each other.

READ IT?CAN YOU

AND NOW?

The meaning of color vary by culture

4

Pick a few major cultures and pick your colors carefully.

Reading computer / mobile screen is allot harderThan reading paper

5

How users read on the web: They Don't! - jakob nielsen

Provide high contrast between text and background.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.ImpossibleHardBest

Uppercase letters are harder to read

6The 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

People are not used to see all capital words so they see them as SHOUTING.Save uppercase letters for headlines, and when you need to get people attentions.Keep uppercase headlines / texts short

The images we use, effects the way people read

7

Our brain is build to recognize faces efficiently, images that includes faces will take the first attention on the screenBefore

After

People remember & learn better by doing

8

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

Its easier to recognize information than recall it

9

What animals were on the picture?

Did you saw an image of a seal?

VS

Don't make people recall information, instead help them recognize it.Don't ask people to remember information from one place to another.most people can remember up to 4 items.If you want people to remember something you must go over it again and again.People are always going to forget, design with forgetting in mind.

People are more motivated when they can see the goal

10

The shorter the way to the goal the more motivated people will get.People enjoy being a part of a reward program, compared to costumers which are not part of the program.people need help tracking their progress

People are addicted for seeking information

11

Make the search of information as simple as possiblekeep its behaviour and location consistent

People are hard-wired for imitation and empathy

12

If you want to influence someones behaviour, show him someone else is doing the same task.

Doing things together bona people together

13

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

The brain respond uniquely to people we know in person

14

People are programmed to pay special attention to friends and relatives.

People make most decisions unconsciously

15

People want more choices that they can process

16

Resist the impulse to provide your users with a large number of choicesIf 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

Mood influence decisions

17

90% of all information that comes into our brain is visualBeauty evokes emotions

You can influence someones mood easily, for example, with a short video clip, images,copy-writing etc..

VS

People expect the web to be fast

18

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

Unoccupied time feels longer than occupied timeUncertain waits are longer than known, finite waitsUnexplained waits are longer than explained waits

References and further learningWatch:Psychology of UX design: https://vimeo.com/71600462The importance of being inauthentic: https://www.youtube.com/watch?v=1zpf8H_Dd40Applying psychology to UX design: https://creativemornings.com/talks/joe-leech/1Nathalie Nahai - web psychologist: https://www.youtube.com/watch?v=MPo3kSzeh40Empathy, 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=11The secret psychology of online persuasion: http://www.slideshare.net/nathalienahai/the-secret-psychology-of-online-persuasionGestalt 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.pdf100 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+peoplePsychology for designers: https://www.fivesimplesteps.com/products/psychology-for-designersThe jam research: https://faculty.washington.edu/jdb/345/345%20Articles/Iyengar%20%26%20Lepper%20(2000).pdf

THANK YOUMaor Shabbat Visual designer & UX Architect