The psychology of web design is something we shouldn’t overlook. Many prominent psychologists, over many years - before anyone knew what a website was, have come up with principles that we shouldn’t ignore if we want people to interact with our web pages. Here is the top 10 of the more important aspects. of psychology in web design. Enjoy!
Fitts’Law - formulated by the psychologist Paul Fitt in 1954.
Fitt’s Law has been applied extensively in interface design, especially for pointing devices like computer mice and touchscreens. It suggests that larger targets and shorter distances make for quicker and more accurate interactions. This principle has influenced the design of user interfaces to make targets (such as buttons) larger and more accessible, particularly in contexts where users need to make rapid selections, such as in graphical user interfaces and on touchscreen devices.
Key Takeaway: Keep buttons prominent and easy to reach. Remember, 85 - 95 percent of people are right-handed, therefore, keeping call to action buttons on the right of a page can have a big impact.
Hick’s Law (or more correctly ‘Hick-Hyman Law’) formulated by the psychologists Edmund Hick and Ray Hyman in 1952.
This law is often applied in user interface design, where it suggests that reducing the number of choices presented to users can lead to quicker decision-making and a better user experience. It’s particularly relevant in the design of interfaces, and other systems where users need to select from multiple options. By minimising the number of choices or organising them in a more efficient way, designers can help users make decisions more quickly and easily.
Key Takeaway: Don’t give users too many choices of things to do on each page of your website particularly landing or home pages. Keep multiple choices for pages designed specifically for situations where users expect to to see choice - such as a shopping site.
Jacob’s Law - Formulated by UX expert Mike Monteiro.
This is an interesting one because it assumes that users spend most of their time on other sites and will expect yours to work the same way. In practical terms, adhering to Jacob’s Law means that when designing a new website or digital product, it’s essential to consider common design patterns and interaction norms that users are already familiar with. By maintaining consistency with widely accepted standards and established conventions, designers can create more intuitive and user-friendly experiences, reducing the learning curve for users and enhancing overall usability.
Key Takeaway: Try to be consistent when designing the way your website works. If it’s unconventional in how it works, or things aren’t where users expect them to be - you’re more likely to lose the visitor.
Miller’s Law -Formulated by psychologist George A. Miller in 1956.
The thinking behind this particular law suggests that the average human can hold about seven (plus or minus two) items in their working memory at any given time. By adhering to the principle of Miller’s Law, designers can optimise the usability of interfaces and enhance the overall user experience by respecting the limitations of human cognitive processing.
Key Takeaway: Try to use strategies such as chunking information into smaller groups, prioritising essential content, and minimising cognitive load to help users better absorb and retain information. This is where dividing pages up into layout blocks can be helpful. Each piece of information can be imparted without causing brain overload.
Occam’s Razor - A principle formulated by the English Franciscan friar and philosopher William of Ockham (c. 1287–1347).
The essence of Occam’s Razor is to prioritise simplicity and elegance in explanations or models. It doesn’t necessarily mean that the simplest explanation is always correct, but rather that, all else being equal, simpler explanations are generally preferable. In web design, Occam’s Razor can be applied in several ways to improve usability and enhance the overall user experience.
Key Takeaway: Simplicity of Interface Design, Clear Navigation, Minimalist Content, Consistency, Optimisation and Speed. These are all factors that play into web design. By applying Occam’s Razor principles in web design, designers can create websites that are intuitive, user-friendly, and efficient, ultimately leading to a more satisfying user experience.
Pareto Principle - Named after the economist Italian Vilfredo Pareto in1896
While Pareto himself didn’t explicitly formulate the principle as it is known today, his observations laid the groundwork for its development. In essence, the principle is about cause and effect. It states that roughly 80% of the effects come from 20% of the causes. Translated into website development it’s all about prioritising content to give sufficient information to achieve the required result. In business this principle is often associated with the idea that a minority of customers generate the majority of profits.
Key Takeaway: By applying the Pareto Principle in web design, designers can focus their efforts on the most critical elements of the website that contribute the most to achieving its goals and delivering a positive user experience. This approach allows designers to allocate resources more effectively and optimise the website for maximum impact.
Tesler’s Law - named after Larry Tesler, a computer scientist known for his work in human-computer interaction and user interface design. Tesler’s Law suggests that complexity cannot be eliminated but can only be shifted between different components of a system, such as between the user interface and the underlying code. The law emphasises the importance of minimising complexity for end-users while acknowledging that some degree of complexity is inevitable in software development.
Key Takeaway: Create user-friendly interfaces and streamline the user experience. Reduce complexity in user interfaces by removing unnecessary elements, features, or steps. Strive for a clean and minimalist design that focuses on the essential functions and content that users need.
Ron Restorff Effect - This effect was first observed and documented by German psychiatrist and paediatrician Hedwig von Restorff in 1933. The Von Restorff Effect occurs when an item is significantly different from other items in a set, whether it be in terms of colour, shape, size, or any other perceptual attribute. When presented with a list of items, individuals are more likely to remember the distinctive item compared to the others that are more similar to each other. In web design, the Von Restorff Effect can be applied to enhance user engagement and improve the effectiveness of communication by making important elements stand out.
Key Takeaway: Use colour, contrast and whitespace to make important information stand out. In web design, designers can create visually engaging and memorable experiences that capture users’ attention and effectively communicate key messages or calls-to-action. This can lead to improved user engagement, higher conversion rates, and overall better user satisfaction.
Zeigarnik Effect - First observed by Soviet psychologist Bluma Zeigarnik in the 1920s. The Zeigarnik Effect suggests that when people are interrupted or do not complete a task, it creates a state of tension or cognitive dissonance, leading to increased mental effort and a greater propensity to remember the task. In contrast, once a task is completed, the tension is resolved, and there is less incentive to remember it.
Key Takeaway: This is heavily related to the ‘Illusion of Completeness’ often seen in modern websites. We’ve all seen those full screen hero sections that sometimes pop up on our screens, the whole screen is filled with an image, video and maybe a headline and possibly an obscure element that indicates what the user should do next. This illusion is counter-productive in so many ways. People can leave such a page without a second thought because they think ‘there’s nothing more to see here? So, it’s quite important to always give site visitors a glimpse of what else is in store - leave them wondering what the next bit of the page is all about. If they can see a compelling headline under the hero section, they are more likely to scroll the page some more. - in other words, to complete the task. This technique can be deployed all the way down a long page by always having the next section of the site come into view whilst they are reading the prior section. This principle is often deployed by having a popup appear when users decide to leave a page - it will say something like ‘Wait! do your really want to leave this page? We’ve got a special deal waiting for you further down the page’ Such a message can play on the mind if ignored, and may even encourage the visitor to return to see what they’ve missed out on.
The Serial Position Effect - This effect was first identified by German psychologist Hermann Ebbinghaus in the late 19th century. This effect is a cognitive phenomenon that refers to the tendency of people to remember items at the beginning and end of a list more effectively than those in the middle. In web design terms, this effect is less about aiding people in actually remembering information, but more about getting users to act on the most important information. This is where a visual hierarchy comes into play. The most important elements of the website, or its message. should be more prominent than less important elements. This is why it’s a good idea to break web pages down into visually distinct sections, each with its own visual hierarchy.
Key Takeaway: When designing menus, favour horizontal menus over vertical menus, and try and ensure that the first and last items on the menu are the most important links. Where a menu includes a call to action, make it into a prominent button at the end of the menu. Where you have to provide some sort of vertical menu (such as in a mobile version of the page), provide more prominent in-page navigation links to help guide the visitor around your web pages - making them less reliant upon a vertical drop-down. Try and avoid multi-level drop-down menus. If these really must be deployed, make sure the first and last item on the dropdowns are more important that the links in between. In fact, if there is to be a lot of links - maybe in an e-commerce site - it’s better to have a mega-menu comprised of short lists of links in columns, again, placing the most important links at the top and bottom of each column.