UX &
Psychology
Design Thinking Guides
Table of Contents
2
“There is a difference between facilitation persuasion and coercion manipulation.”
Laws
Laws
MENTAL MODEL
Is a person's thought process of understanding the world. It allows people to make assumptions about how things work It unconsciously influence our behaviour and decision making
Ex. Our “mental model” of how bikes work can “simulate” this to know it won’t work.
How to apply it?
Match User’s Mental Model
5
Laws
MENTAL MODEL
How do we identify user’s “Mental Model”?
6
Laws
FITT’S LAW
Proposed by Paul Fitts in 1954.
It is a model of human movement that predicts the time required to move to a target area or the act of pointing or touching an object with the hand or finger.
How to apply it?
Improve the UX by increasing the target size. A common mistake I see with developers is they often make the buttons clickable on only where the text is.
7
Laws
HICK’S LAW
Names after british psychologist William Edmund Hicks. It describes the time it takes for a person to make a decisions based on the possible choices he or she has.
How to apply it?
Less is more. Make the choice easier for users
8
Laws
80/20
AKA Pareto Principle states that roughly 80% of the effects come from 20% of the causes
9
Laws
80/20
How to apply it?
10
Laws
GESTALT PRINCIPLES
Means “unified whole”. It applies to the theories of visual perception developed by German psychologist in the 1920s.
It describes how people tend to organize visual elements into groups or unified wholes when principles are applied.
11
Laws
GESTALT PRINCIPLES
How to apply it?
12
Laws
MILLER’S LAW
The average person can only keep 7 (plus / minus 2) items in their working memory. This is not so much a “law” as a suggestion to be mindful of reducing the number of things people actually need to remember.
13
Laws
RULE OF THIRDS
The rule of thirds is a method of composing elements to be visually pleasing in addition to identifying ways that users eyes will scan across the page. Photographers have been using this principal for years to create more visually interesting compositions.
14
Laws
OCCAM’S RAZOR
Occam’s Razor put simply, states that “the simplest solution is almost always the best.” With the flexibility and power of the web and our design tools, it is easy to get carried away. Ex. Avoid Featuritis
15
Laws
WEBER’S LAW
Slightest change in things won’t result in a noticeable difference. Research shows that we dislike a massive change in existing structures and systems, even if those changes will benefit us, and there is ample evidence that show protests when major websites make massive changes and redesign. Ex. Facebook redesign
16
Cognitive
Bias
Cognitive
Bias
AFFORDANCE
The world is perceived not only in terms of object shapes and spatial relationships but also in terms of object possibilities for action
�Examples include: buttons for pushing, knobs for turning, handles for pulling, levers for sliding, etc.
18
Cognitive
Bias
ANCHORING
The first piece of information offered (the 'anchor') influences the rest of our decision
19
Cognitive
Bias
ANTHROPOMORPHISM
We like things to be like us. We naturally feel more connected when products and services demonstrate a human element, and there is a feeling of genuine coherency when the user experience is consistent with a company’s brand and mission.
20
Cognitive
Bias
ATTENTION
Your brain can only consciously do one thing at a time. So it has to focus. That focus moves from one thing to another, all day long.
Attention is like a spotlight. It points at a specific thing. If you want to point it at something else, you have to stop pointing it at the first thing. A few ways to get the attention of users: Motion, Surprise, Big Text, Sound, Contrast & Color
21
Cognitive
Bias
AUTHORITY
We are inclined to go along with someone’s suggestion if we think that person is a credible expert.
22
Cognitive
Bias
AUTHORITY & TRUST
Any well known brands or businesses use your product? Get some logos up on show to draw attention to how popular and credible your product is. People respect authority, use it to your advantage to encourage users to convert.
23
Cognitive
Bias
AVAILABILITY
When evaluating a decision, we rely on the immediate 'available' examples that come to mind. 'Sticky' copy is key to leveraging this principle and increasing brand salience
24
Cognitive
Bias
BANDWAGON EFFECT
The more people that believe something, the more likely it is that other people will believe it too. Information doesn’t get more true or more false because lots of people believe it, but your brain doesn’t know that. Your mom always said, “if everybody jumped off a bridge, would you do it too?”
25
Cognitive
Bias
COGNITIVE DISSONANCE
The mental stress associated with performing inconsistent actions or holding multiple contradictory beliefs simultaneously.
Try asking or collecting information from your users that you can remind them about later. For example, Uber might ask its drivers “What rate of surge pricing would make you drop what you’re doing and get out on the road?”
26
Cognitive
Bias
COGNITIVE LOAD
The total cognitive load, or amount of mental processing power needed to use your site, affects how easily users find content and complete tasks.
Avoid visual clutter: redundant links, irrelevant images, and meaningless typography flourishes slow users down. (Note that meaningful links, images, and typography are valuable design elements; it is only when overused that these backfire and actually impair usability.)
27
Cognitive
Bias
COMPARISONS
Users are choosing things based on comparing their options. Therefore you should create comparisons that make your preferred options look better.
28
Cognitive
Bias
CONNECT WITH PICTURES
We all recall images better than words. For a better user experience incorporate relevant, emotive pictures into your landing page to give context and aid recall.
29
Cognitive
Bias
CONSISTENCY
We have a need for personal alignment with pre existing principles and values. Earn the trust of your target audience. Give them the comfort they need, reassure them and allay any potential anxiety by providing a consistent user experience. All elements all needs to seamlessly come together to provide a united and trustworthy experience,
30
Cognitive
Bias
CLARITY
People avoid and often ignore things they cannot understand — that’s basic human nature. Avoid designing interface elements that make people wonder what they do, because no one will bother finding out. Ex. Icons without a clear meaning.
31
Cognitive
Bias
CONTEXT
We tend to forget things when we’re out of context.
Ex. You enter your basement, but instantly forget why you went there. You walk back, and as soon as you enter the kitchen you go “Oh, I remember, I went to get the juicer!” It is our tendency to forget things which are out of context
Ex. Keep things handy for users — if something can be edited, changed or otherwise controlled, place those controls right next to it.
32
Cognitive
Bias
DECOY EFFECT
Imagine you want to subscribe to a newspaper’s site, and these are the choices:
Web Only: $10
Print Only: $25
Print & Web: $25
Which one is the best deal? After a few seconds to consider it, there is about an 80% chance that you think Print & Web is the best value. Why? Because the Print Only price is the “decoy” — nobody will choose it. It’s only purpose is to make the most expensive price look like a good deal. Even though nobody chooses it, if you remove it, about 60% of people will choose the cheapest option instead.
33
Cognitive
Bias
DEFAULT
The user will rarely change default settings. We don’t notice defaults, but they rule our world. So make sure all default values are as useful and practical as possible — it’s safe to assume some people will never change them.
34
Cognitive
Bias
FEARS
These are the sorts of fears web visitors may have and you need to reduce them if you want to persuade people to do business with you. Answering their concerns upfront and quickly will positively influence people and lower their fears.
35
Cognitive
Bias
FEEDBACK
The user will feel more confident if you provide clear and constant feedback. Ex. Gmail is a great example of good feedback. You will get a clear notification for every action you take, including Learn more and Undo links.
36
Cognitive
Bias
GOAL GRADIENT EFFECT
Most people are willing to put more effort into achieving a goal the closer they perceive they are to it.
37
Cognitive
Bias
GUIDED ACTION
There is a big difference between expecting users to do something on their own, and asking them specifically to do it. If you want users do something, ask them without hesitation. For example, when LinkedIn introduced Endorsements feature, it did not expect users to figure out how to use it. Instead, they created highly visible call-to-action banners which appeared right above profile pages.
38
Cognitive
Bias
LAZINESS
People will invariably go with an option that is likely to require the least effort. Watch the film or read the book? Easy – it’s the film every time.
Tip Make initial task can be as painless as possible aka don't make them register first in order to purchase item.
39
Cognitive
Bias
COMPLEXITY
The user will be more inclined to perform a complex action if it’s broken down into smaller steps.
Ex. We all hate filling out long, complicated forms because they seem boring, overwhelming and hard to double-check. But if you split the form into several steps and show a progress bar, things become pretty manageable.
40
Cognitive
Bias
LEGIBILITY & UNDERSTANDABILITY
Hard to read text is perceived to be harder to follow. Provide the exact same instructions in a legible font, and one of those silly squiggly hard to read fonts, and people will not only find it easier reading the legible font, but they will expect the instructions to be easier to follow as well
41
Cognitive
Bias
LIKING
We are more likely to comply with requests made by people that we like
42
Cognitive
Bias
LOSS AVERSION
Losses loom larger than gains in our minds, all things being equal. In other words, we may like to win, but we hate to lose.
43
Cognitive
Bias
MENTAL ACCOUNTING
We assign money to ‘mental categories’, and we spend money according to these categories. Ex. Labeled according to these categories (housing, holidays, food, etc.).
44
Cognitive
Bias
NEGATIVE BIAS
Humans have greater recall of unpleasant memories compared to positive ones.
45
7,500.00
7,500
7.5k
Cognitive
Bias
NUMBERS
The fewer digits used to display a price… the less the item is perceived to cost – even when the prices are the same.
So $7,500.00 is seen to be more than $7,500 which is seen to be more than $7.5K. Strange but true and easy to incorporate into the way you display prices to your users.
46
Cognitive
Bias
ONE BITE AT A TIME
It’s more likely that someone will finish a big project if they can see it as a series of easily completed steps. Marathon runners do this by focusing on the next mile marker rather than the whole 27 miles. Project workers do this every day at work – focusing on milestones rather than the final output.
47
Cognitive
Bias
PEAK END RULE
People tend to place higher weight on how they felt during the peak and the end of an experience when recalling it from memory
48
Cognitive
Bias
PREFERRED ACTION
People feel more comfortable when they understand what the preferred action is.
Ex. Users should never wonder what to do next — the preferred action should be obvious.
49
Cognitive
Bias
POSITIVE REINFORCEMENT
Letting customers know when they are doing well will keep them engaged.
50
Cognitive
Bias
PROGRESS LEADS TO PERSEVERANCE
It turns out that people are more motivated to finish things when they think they’re closer to finishing them than they are at the start of the process. Binge watching is a self-fulfilling prophecy as is staying up late to read just one more chapter of a book… we can see our progress towards the end.
51
Cognitive
Bias
RECENCY EFFECT
The Recency Effect Is another interesting aspect of how positioning of information on a page is crucial. People remember what came last in a sequence more easily too. Make sure you end a page on something you want to stick with your prospect like your USP.
52
Cognitive
Bias
RECIPROCITY
People who receive an unsolicited gift, however small, are more likely to feel indebted to the giver.
53
Cognitive
Bias
REPETITION
The more you hear a message, the more likely you are to believe it’s true. It’s a good idea to reiterate important information throughout a landing page to really drive home the message.
54
Cognitive
Bias
SALIENCE
People’s attention is drawn to that which is most relevant to them at that moment. By identifying these moments, you’ll be able to make additional offers and upsells when your users are most likely to be influenced.
55
Cognitive
Bias
SAVING FOR TOMORROW
Studies show that people are much more likely to make a commitment to spend money in the future than to spend it today.
56
Cognitive
Bias
SCARCITY
We tend to want what is less available
57
Cognitive
Bias
SELECTIVE DISREGARD
Ignoring what appears unrelated to the task at hand
Tip: Make changes to a page obvious and follow conventions to improve usability by meeting user expectations.
58
Cognitive
Bias
SOCIAL PROOF
When unsure what to do, we look to the behavior of others to guide our actions. Social proof is a form of conformity. At its best, social proof drives the optimal solution or behavior to be adopted quickly and efficiently. At its worst, it creates information cascades and results in herd mentality.
59
Cognitive
Bias
STEREOTYPING
Expecting a group or person to have certain qualities without having real information about the person. It allows us to quickly identify strangers as friends or enemies, but people ten to overuse and abuse it.
60
Cognitive
Bias
TELL A STORY
There is power in storytelling. Is a feature of every culture and people remember stories up to 22 times more than facts alone. Use the art of storytelling to engage prospects and trigger emotion. Great text and relevant images all help your message to resonate with your advantage and aid conversion
61
Cognitive
Bias
THE MAGIC OF FREE
We tend to go for free things, even if they come at a price
62
Cognitive
Bias
UNDERSTAND WHY
We are all more likely to do something if we understand why it’s important. For example, we are more likely to donate to something if we know how the donation will be used. We are more likely to choose an option if we know why it’s important.
63
Cognitive
Bias
TEXAS SHARPSHOOTER FALLACY
Is an informal fallacy which is committed when differences in data are ignored, but similarities are stressed. From this reasoning, a false conclusion is inferred.
GOAL: Define a hypothesis before analyzing the data.
64
Cognitive
Bias
ILLUSION OF CAUSALITY
Occurs when people develop the belief that there is a causal connection between two events that are actually unrelated.
We are primed to see patterns that are not there and we resist evidence that disproves it.
Goal: Don’t get personally attached to your beliefs or assumptions
65
Resources
66
Resources
67
Follow me on twitter @maitedalila to see the latest industry news and upcoming guides.