12 Psychological Principles for Great Web Design
Website designers tend to discuss visual design and usability as if the concepts are unique to web development, but in fact most design principles are based on psychological research from as far back as the early twentieth century. In this post, we’ll talk about 12 of the most relevant principles that underpin contemporary web design in 2021.
1. Aesthetic Usability Effect
Ever wondered why beautiful products or sites are preferred over usable-but-not-so-beautiful ones? This is due to a common human bias known as the Aesthetic Usability effect which states that users often perceive aesthetically pleasing design as design that's functionally more user-friendly. This is closely related to the Halo effect and negativity bias, and was first articulated in 1995 by Hitachi researchers Masaaki Kurosu and Kaori Kashimura.
In a study testing 26 variations of an ATM user interface, Kurosu and Kashimura found a stronger correlation between ratings of visual appeal and ease of use than between visual appeal and actual ease of use. In other words, users were strongly influenced by the aesthetics of any given interface, regardless of the functionality of the system.
This is a critical point for web designers because the reverse is also true: if users find your UI unappealing they will be less forgiving of functional or usability issues, and more likely to leave.
an aesthetically pleasing design creates a positive response in the viewer’s brain and makes them believe the design functions better than it actually does
Viewers are more tolerant of minor usability issues if they find the website visually appealing
Visually pleasing design can mask usability problems and prevent issues from being discovered during usability testing
2. Jakob's Law
Also known as the similarity principle, this states that users prefer it if your site works the same way as the other sites they spend most of their time on.
Often when we think about building a new website we want it to be interesting, compelling, and unlike any other website out there. The challenge, however, is to make your website familiar to the viewer in terms of where things are and what to do, while simultaneously making it look unique to your business. This can occasionally lead to design-fatigue where all websites start to look the same, but it is critical that users don’t have to learn how to use your website.
Your viewers may only visit your site for a few seconds, and if they can’t find what they are looking for it doesn’t matter how amazing your website looks, they will leave without taking action.
use familiar design patterns to avoid forcing your customer to think.
Users will transfer expectations they have built around one familiar product to another that appears similar.
By leveraging existing mental models, we can create superior user experiences in which the users can focus on their tasks rather than on learning new models.
When making changes, minimize discord by empowering users to continue using a familiar version for a limited time
3. Fitt's Law
The time to acquire a target is a function of the distance to and size of the target: relationship between distance to target and size of target.
In other words, the further the distance, the bigger you need to make the target to ensure capture accuracy. This is a core part of visual hierarchy where the importance of a target is directly related to the size i.e. the bigger the target, the greater the importance and the more likely the user is to hit it.
Make actions you want a user to interact with large, relative to other components, and position them in a convenient easy-to-reach location.
Action targets should be large enough for users to accurately select them.
Action targets should have ample spacing between them.
Action targets should be placed in areas of an interface that allow them to be easily acquired.
4. Hick's Law
The time it takes to make a decision increases with the number and complexity of choices.
Psychologists William Hick and Ray Hyman described the time it takes for a person to make a decision and complete a task as a result of possible choices available, and showed how increasing the number of choices increases the decision time logarithmically.
When you want a user to make a decision and then take action, you need to reduce the number of options available. This becomes critically important in emergency situations where you need the correct action taken quickly.
For a website, where you may only have 15 seconds to grab your viewer's attention and direct them to take action, this means keeping your navigation bar as simple and intuitive as possible, while still allowing for all expected navigation options and site functionality. E-commerce sites with too many options presented all at once risk confusing viewers and delaying the decision-making process. Hick's law is supported by many studies showing that the longer a consumer delays, the less likely they are to buy.
The Famous Jam Experiment
In 2000, a remarkable study was published showing that consumers faced with a large number of choices are less likely to complete a purchase, compared to those faced with a smaller number of choices. This has become known as ‘the famous Jam experiment’ and is often cited as an example of Hick’s law in marketing.
Psychologists Sheena Iyengar and Mark Lepper presented shoppers with a display table showing 24 different varieties of gourmet jam, and measured engagement and purchase behaviour. On another day shoppers were presented with only 6 varieties of jam, and while the larger display attracted more attention, the study showed that people who viewed the smaller display were ten times more likely to purchase than those who saw the larger display.
The study has been replicated with other products such as chocolate, financial services and even speed dating, and the phenomenon is widely referred to as ‘option paralysis’ or ‘choice overload’.
Web designers must balance the tension between reducing complexity and oversimplification. So reduce the number of choices by: using card sorting, dividing the process into manageable chunks, making the most important options clearly stand out, and hiding the edge case options.
Minimize choices when response times are critical to increase decision time.
Break complex tasks into smaller steps in order to decrease cognitive load.
Avoid overwhelming users by highlighting recommended options.
Use progressive onboarding to minimize cognitive load for new users.
Be careful not to simplify to the point of abstraction
5. Law of Common Region
Elements tend to be perceived in groups if they share a clearly defined boundary.
Also known as 'framing', this is one of 5 principles from the Gestalt school of psychology (common region, similarity, proximity, uniform connectedness, Pragnanz) and is frequently used in web design to separate sections and elements into distinct visual groups.
Adding a border around an element or group of elements is an easy way to create common region.
Common region can be created by defining a background behind an element or group of elements
6. Law of Proximity
Humans tend to relate objects that are physically close together as being related, even if they bear no relationship at all.
This has been widely used in marketing for over 100 years, for example in the automotive industry where cars and other products are often pictured alongside beautiful fashion models or celebrities.
More simply, the law of proximity is used to group elements together, to show they have related functionality or attributes, or that they are associated in some way.
The opposite also holds, and in web design this law can be used to imply association or non-association simply by keeping related things close and moving non-related things further away.
Proximity helps to establish a relationship with nearby objects.
Proximity helps users understand and organize information faster and more efficiently
7. Law of Similarity
The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
Elements that are visually similar will be perceived as related.
Color, shape, and size, orientation and movement can signal that elements belong to the same group and likely share a common meaning or functionality.
Ensure that links and navigation systems are visually differentiated from normal text elements.
8. Uniform Connectedness
Elements that are visually connected are perceived as more related than elements with no connection.
In web design we can use colours, frames, lines or other shapes to group similar things or things you want associated together. Viewers will automatically associate these elements as a group, and the leading lines take the viewer on a visual journey, allowing you to guide them towards the desired call to action.
Group functions of a similar nature so they are visually connected via colors, lines, frames, or other shapes.
Alternatively, you can use a tangible connecting reference (line, arrow, etc) from one element to the next to also create a visual connection.
Use uniform connectedness to show context or to emphasize the relationship between similar items.
9. Law of Pragnanz
Humans perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort.
The law is based on the principle that people tend to interpret images as simple and complete rather than complex and incomplete, so we look for patterns that make sense, such as the Mona Lisa in an otherwise random collection of black pixels.
The human eye likes to find simplicity and order in complex shapes because it prevents us from becoming overwhelmed with information.
Research confirms that people are better able to visually process and remember simple figures than complex figures.
10. Miller's Law
Psychologist George Miller showed in 1956 that the average person can only hold about 7 items in their working memory, with a variance of plus or minus 2.
This has become known as the magic number 7 and is widely used in design and content creation. Long lists of over 7 items should be avoided if possible because most people will not retain the additional information long enough to be useful. Alternatively, long sequences of information can be grouped or chunked into a smaller number of items.
For example, long numbers are difficult to remember when trying to remember each number individually, but grouping the numbers into meaningful chunks aids memorisation of things like phone numbers or bank account details.
“Zero-six-four-four-two-five-six-three-two-one-six-nine” is much harder to memorise than “064-425-632-169”.
064 - 425 - 632 - 169
Organize content into smaller chunks to help users process, understand, and memorize easily.
Keep lists shorter than ten where possible.
Remember that short-term memory capacity will vary per individual, based on their prior knowledge and situational context.
Don’t use the “magical number seven” to justify unnecessary design limitations.
11. Von Restorff Effect
When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
In a sea of green tomatoes, the red one stands out visually and draws the viewers attention directly to it. This is the main reason why all call-to-action (CTA) buttons are visually distinctive from other buttons on a site.
This principle is commonly used in marketing where there is fierce competition, and it can also be applied in areas such as job applications, where a visually distinctive CV will automatically be more memorable than others.
Make important information or key actions visually distinctive.
Use restraint when placing emphasis on visual elements to avoid them competing with one another and to ensure salient items don’t get mistakenly identified as ads.
Don’t exclude those with a colour vision deficiency or low vision by relying exclusively on colour to communicate contrast.
Carefully consider users with motion sensitivity when using motion to communicate contrast.
12. Serial Position Effect
This is a cognitive bias where users focus on and remember the first and the last item in a sequence. The two concepts involved, the primacy effect and the recency effect, explain how items presented at the beginning of a sequence and the end of a sequence are recalled with greater accuracy than items in the middle of the same list.
There is a related principle known as the peak-end rule which states that humans tend to best remember the peak emotional state and the end emotional state of an experience. People tend to judge an experience based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.
For website designers, the three key focal points in any list or series of events or actions are the first, the peak and the last.
Placing the least important items in the middle of lists can be helpful because these items tend to be stored less frequently in long-term and working memory.
Positioning key actions on the far left and right within elements such as navigation can increase memorisation
Pay close attention to the most intense points and the final moments of the user journey
Identify the moments when your product is most helpful, valuable, or entertaining and design to delight the end user
Remember that people recall negative experiences more vividly than positive ones