Skip to main content

Psychology is one of those practices that has made its way into almost every field or practice. Perhaps this is because we want to sell something, say something or do something. But perhaps it’s because we are people, and no matter what we do, we are fascinated with how people think and function and we want to do what’s right for them.

I like to think the latter is the case.

As designers who work on digital designs, we should be aware how a range of psychological principles could influence the reception of our designs for the user.

HSD’s Digital Content Co-ordinator, Tyhe Reading discusses how these principles can be applied to UX/UI design – an ever growing, changing and challenging field of design.

User Experience (UX) and User Interface (UI) Design

Before diving in, it’s important to provide a brief overview of UX and UI design. User Experience (UX) Design is described by Interaction Design Foundation as:

“…the process design teams use to create products that provide meaningful and relevant experiences to users.”

User Experience (UX) Design, Interaction Design Foundation. https://www.interaction-design.org/literature/topics/ux-design

It involves the design of the whole process of conducting user and product research and designing aspects of the product such as branding and usability.

User Interface (UI) Design on the other hand is:

“…the process designers use to build interfaces in software or computerised devices, focusing on looks or style”.

User Experience (UX) Design, Interaction Design Foundation. https://www.interaction-design.org/literature/topics/ui-design

UI design makes products functional, while looking aesthetically pleasing. Often UX and UI Designers will work together to produce a product that is based on research, prototyping, testing, more research, more testing and more prototyping. They will create what is expected based on rounds of iterations and applications with the goal of creating what the user needs.

At its core, both practices are focused on understanding what the user needs and what will be beneficial to them. As I said before, we want to do what’s right for our fellow people.

Psychological Principles

I’m not going to overwhelm you too many principles, but instead focus on three primary principles that will help you as a designer, programmer or viewer of any website understand what exactly is going on. We will look at:

  • Visual Perception (Gestalt Theory)
  • Cognitive Load
  • Hick’s Law

Visual Perception (Gestalt Theory)

Gestalt Theory contains principles of human perception that describe how we group similar elements, recognise patterns and simplify complex images when we perceive objects. While I won’t outline all of the principles, designers will often use the following principles to organise content in digital designs, especially those on websites and applications.

Law of Proximity

The law of proximity describes how the human eye perceives connections between visual elements. The objects that are close together, group together. When objects are near one another, they form patterns or “groupings”. Through the use of negative space, we can control the perceived relationships of objects in a visual space.

When we see written text, the law of proximity enables us to see the text as a whole. You can see this as a common issue in many website designs. Blocks of text won’t be spaced far enough apart and as a result, we see them as one block of content that we don’t want to read. By spacing objects that aren’t related apart, we have more control over how the user will receive the information.

Microsoft, Microsoft 365, https://www.microsoft.com/en-au/microsoft-365/p/microsoft-365-family/cfq7ttc0k5dm?icid=mscom_marcom_CPH3a_M365Family&activetab=pivot%3aoverviewtab

Using the example above from Microsoft, we can visually connect particular elements together based on their proximity. We can see what is included in the Premium Value through the use of the icons, but also the closely linked title of the application. The grouping of the Key Benefits helps people understand that they will have access to all of these options. This close proximity is critical.

Law of Similarity

If the human eye sees similar elements in a visual space, such as shapes and colours, it tends to group them together; even if they are separated. Once our brain groups them together, then it separates them from other elements in the visual space.

Similarity is most easily influenced by shape, size and colour, but can also be used to group elements with similar functionality and meanings. In good UX/UI design, similarity can be used by forming common styles and trends in buttons, navigational elements, and even typography. Once our brain makes that initial connection to an element, it becomes much easier for us to respond to it later.

HSD, Blogs, www.hsd.com.au/blog

On our own website, you can see that we have utilised a similar grid structure for all of our blog posts, the same heading typeface and image overlay. This helps visitors see that this is a grouping of similar content and will allow them to move seamlessly throughout the posts.

Law of Continuity

The law of continuity asserts that the human eye follows lines, curves, or a sequence of shapes in order to determine a relationship between elements. The brain allows us to follow a path of a single line in a maze of many overlapping lines. Continuation can be a valuable tool in guiding the viewer’s eye in a certain direction.

Continuity can be done in a number of ways, but a good example is by using elements that lead the viewer out of the screen. This could be imagery, lines, shapes or even colours. By doing so, you can create unique and appealing functional transitions that adds that extra element to your design.

Microsoft, Home Page, https://www.microsoft.com/en-au?spl=1

Coming back to Microsoft again, we can see that continuity can be achieved through the use of imagery. The feature image used here provides the negative space for a navigational link to be provided, while the angle of the screens leads the visitor outside of the frame. This helps urge the visitor to move to the following page.

Cognitive Load

Cognitive load is the total amount of mental effort that is being used in a person’s working memory. It’s almost like the amount of exercise your brain needs to do to understand what it is seeing. If the cognitive load is high, other thought processes can be interfered with. For us as UX designers, we want to keep the cognitive load to a minimum to avoid distractions and to allow our user to reach the desired end point of our website or application.

To do this, you want to make sure all of the elements that are in the design are there for a purpose. Don’t include too much text or imagery just to fill the space. Pull out any buttons or navigational elements that don’t need to be there. The user doesn’t need to see them.  

Psychological Principles of UX Design
Apple, Home Page, https://www.apple.com/au/

Apple’s website is one of those exemplar websites. It’s clean, modern and generally user friendly. They also excel at reducing the cognitive load for the visitor. The example here provides a visually appealing image of their product, minimal copy and only the critical navigational elements.

Hick’s Law

The previous principle directly relates to our last principle; Hick’s Law. If we provide our user with too many choices, it will take them longer to make a decision.

Think about when you go grocery shopping and you’re staring at a wall of different types of pasta. You may have an idea of what type you want, but then you haven’t considered the brand. And then the price. There are too many options.

It is the same in UX and UI design. If we provide too many buttons to make a purchase, or too many links to other pages on our site, the user may become overwhelmed and not actually carry through with their intended action. We need to ensure that what we want the user to do is clear and how they do it is obvious. This is one of the core principles of good UX/UI design.

Amazon, Home Page, https://www.amazon.com.au/

Although everyone’s Amazon home page will look different, I always feel a little overwhelmed when I enter the site. I am presented with far too many options, all related to different metrics about me. This will often force me to scroll rapidly or simply just exit the site. We want to avoid this.

eBay, Home Page, http://www.ebay.com.au

The example from eBay does a much better job at Hick’s Law. While there are a similar number of choices here, the grouping of similar items (Gestalt Principle of Similarity and Proximity) helps reduce the obvious number of selections. Once we digest what we are seeing, we can make clearer and direct choices. Good work eBay.

Conclusion

There are many psychological principles that could be applied to UX/UI design with academic and professional resources to support. I believe that understanding a few of the key principles early on will help you better understand why websites might be designed the way they are, or perhaps how you will design more efficient and effective websites yourself.

Be sure to keep up to date with all of HSD‘s news and content here and on our LinkedIn.

Tyhe Reading is a all-round creative professional who specialises in graphic and digital design, UX/UI design, campaign design, marketing and photography. Tyhe is currently undertaking his PhD (Design) where he is developing strategies for more successful pro-environmental visual campaigns.

References

What is User Experience (UX) Design? Interaction Design Foundation. https://www.interaction-design.org/literature/topics/ux-design

What is User Interface (UI) Design? Interaction Design Foundation. https://www.interaction-design.org/literature/topics/ui-design

Gestalt Principles. Interaction Design Foundation. https://www.interaction-design.org/literature/topics/gestalt-principles

Hick’s Law. Interaction Design Foundation. https://www.interaction-design.org/literature/article/hick-s-law-making-the-choice-easier-for-users#:~:text=Hick’s%20Law%20is%20a%20simple,into%20a%20site%20or%20application

Cognitive Load. Interaction Design Foundation. https://www.interaction-design.org/literature/topics/cognitive-load#:~:text=Any%20mental%20process%2C%20from%20memory,cognitive%20load%20to%20a%20minimum

A Guide to Psychology Principles in UX Design. Mopinion. https://mopinion.com/guide-to-psychology-principles-in-ux-design/