5 product design psychology principles
Most people are unaware of how closely psychology and design go hand in hand.
I currently head up product design for a FTSE 100 company. I work with many senior product designers who follow design fundamentals without knowing what the psychology is behind them. Fundamentals such as why we choose contrasting colours for a call-to-action (CTA).
Fundamentals like this seem engrained in all designs, but few designers know the reason why we follow these patterns and the impact these trends have to the overall experience, and business.
This article explains what the most common psychology principles are, and how they are interpreted for app & web design.
If you like this topic, check also:
#1 — Hicks Law
One of the simplest and probably the most common design principle, Hicks law, originates from the Gestalt principles of perceptual organisation. This Law explains that, the time it takes someone to make a decision is directly linked to the number of choices available to them. This means that if the number of choices increase, the decision times also increases.
An example of this in action is when we provide a design for a list. By reducing the number of options visible on the page, it allows the user to decide on an option quicker than if all options were listed.
#2 — Von Restorff Effect
Sometimes referred to as the isolation effect, the Von Restorff effect, assumes that when multiple similar objects are displayed, the object that is unique and different from the others is most likely to be remembered as it stands out, thus increasing the probability it will be clicked. (Think about the temptation to click ‘the red button)’.
This principle is the main reason why we design our main call-to-action(CTA) to look different in size and colour from other buttons found in a design.
Usually in a design we want users to tell the differene between an action button and a call-to-action. Many websites want to drive fresh leads to their team by having a button like ‘Get in Touch’ or ‘Book Now’. This would be their main CTA. While a button like ‘view more’ or ‘see our features’ would act as a secondary action to feed more information to the user, driving them to click that main CTA. An essential element of the Von Restorff effect is ensuring customers know which is the correct button to click when they’re ready to take the next step and commit to the product.
#3 — Cognitive Load
Cognitive load refers to the amount of mental effort being used in a users working memory. It’s the amount of thinking time you need to have in order to complete a task.
Cognitive load theory can be organised into three types:
Intrinsic Cognitive Load
Intrinsic cognitive load is the difficulty associated with a specific instructional topic. It’s the reason UX copy has a huge role in user experience design.
In an applications empty state, we prompt users to ‘start a task’. The UX copy needs to be concise yet have the appropriate words in to indicate what task we want the user to take, and why.
Germane Cognitive Load
Germane cognitive load is the cognitive load associated with processing information and the construction of patterns. This describes a pattern of thought that organises categories of information and any relationships between them.
One of the reasons we use design patterns is because they’re something we’re programmed to do in our DNA. This is the reason why when designers create a journey, we ensure the fundamental components of a design do not change. This reduces the time it takes a user to familiarise themselves with an interface as they can associate an old pattern with a new idea, and subsequently understand the action they should take.
Extraneous Cognitive Load
Extraneous cognitive load is the working memory load experienced by learners as they interact with instructional materials. This is a type of cognitive load that instructional designers do have some ability to control.
Imagine you had to describe a square to someone. You could quite easily describe the square verbally, but it takes just a second and far less effort to simply draw a square. The efficiency of the visual medium is preferred, because it does not unnecessarily overload the learner with information. This unnecessary cognitive load is described as extraneous cognitive load.
An example of this is to use screen hijacking, or animations to show how a user should interact with a UI element.
#4 — Serial Position Effect
This principle is all about navigation hierarchy. The Serial Position Effect is the combination of two other effects:
- The primacy effect
- The recency effect
The primacy effect states that as humans, we tend to remember the first few pieces of information in a list, better than those in the middle. This also leads us to assume that these first bits of information are more important than the ones that follow, making the primacy effect very similar to Anchoring bias.
We then have the regency effect, which states we tend to remember the last few pieces of information in a list, better than those in the middle. Built into our DNA, we have a habit of assuming the last pieces of information are more important than those in the middle.
Numerous apps place their Feed and profile, as the first and last items to indicate their importance.
When you’re paying for ads on a platform like Google, it’s common knowledge that the first result position is a the best place to display, although it’s also the most expensive. You could further optimise your marketing budget ad spend by targeting The final position of the search results.
#5 — Law Of Proximity
The Law of proximity is also one of the Gestalt principles, and it indicates that objects that are in close proximity to each other, tend to be associated with one another. The psychology behind this principle explains that our brains associate objects which are close to each other, better than the objects that are further apart. Sapien DNA has a tendency to organise and group things together.
In the above example, we can see that, despite all the objects being the same size and colour, we associate them with different groups, simply by how close they are to other objects. In the above image we see one big group on the left and three smaller groups on the right, when actually there is no difference between the objects in these groups.
The defined message here is that, as designers, we should be conscious of distance and margins between components, to ensure users can understand if they’re intentionally associated with each other or not.
Thanks for reading. Please bookmark this post, and refresh yourself when reviewing your designs.
