Uncategorized
Why Gestalt Principles Have an Important Role in UX Design
Guest Contribution
I’m sure most of you have seen at least one Gestalt figure in your life. Have a look at the first image below; you’ll see either a vase or two identical faces. This is the most popular Gestalt figure which perfectly displays the figure-ground relationship?—?one of the principles of Gestalt psychology. Now, look at the second image with five circles from which triangle slices are taken out. The circles are placed in a such a form that you think there is a big star in the middle when actually there is not. We see the star, because our brains organise the visual information into something that is meaningful and that we understand.
Gestalt is a German word and although there is no exact English translation, it refers to “whole”, “patern”, or “form”. Gestalt theory has been founded in the early 20th century by German psychologist Max Wertheimer. Gestalt psychology is a school of thought which proposes that the whole of an object is more than its individual parts. That is, we cannot find meaning from breaking things down into parts; we need to appreciate the whole. When elements are assembled together, they turn into parts of a whole. Thus, in perceiving objects which have many elements, we tend to apply certain methods and arrange the parts into a structured system, and our minds tend to create a global whole to acquire and maintain meaningful perceptions.
So, what has Gestalt to do with user experience design? In order to design products that better serve the needs of users, understanding certain psychological principles is essential. Great designers recognise how much impact psychology can have in visual perception. By applying Gestalt principles, a designer can improve the clarity of the product since visual interfaces function based on associations between graphical elements.
There are many principles of Gestalt theory which can be applied to user experience design such as the figure-ground relationship that I have just mentioned. In this post, I will talk about four of these principles and how they are relevant to UX: principle of similarity, closure, proximity, and common region.
“…there are contexts in which what is happening in the whole cannot be deduced from the characteristics of the separate pieces, but conversely; what happens to a part of the whole is, in clearcut cases, determined by the laws of the inner structure of its whole.”?—?Max Wertheimer
Principle of Similarity
Let’s start with the Principle of Similarity which proposes that the human eye tends to perceive similar elements (in terms of size, shape, colour etc.) as a group. For example, in the image below you can see that triangles and circles form different groups, because we perceive similar shapes together.
Using the principle of similarity in UX design means creating different elements of the layout with identical or similar features. A good example for this is making all links blue and/or underlined so that they appear distinct and the same as each other. Once the user discovers that the underlined are links, it communicates the others are also links. This helps users understand the whole scheme faster which in turn assists users in navigating throughout the site more easily. Simlarity makes interfaces easier to navigate and more pleasing. In order to show connectedness, designers mostly focus on size and colour; and to show differences, they mostly focus on shape and texture.
The image below is taken from one of Bloomberg’s terminals. As you can see, the bid and ask prices are displayed in different colours?—?the former red, and the latter blue. Red elements are perceived as forming one group, and blue elements are perceived as forming another, separate group.
Law of Closure
Our brain generally prefers whole images, which is why we attempt to complete the parts that are missing. When the image or shape is not complete, our brain starts to ‘fill in the blanks’ and make the incomplete shape complete. A common example is the bear image below. Although it is not complete, our eyes tend to complete the shape. Seeing the panda is actually easier than trying to make sense of its individual parts.
Closure is not only used for main layout for the web pages, but also for icons of products or apps. It can be very easy to create an icon with closure like an envelope for a mail or a store by simply using black and white. Google frequently employs this principle during special days. For example, during the 2015 FIFA Women’s World Cup, football players and footballs were used to represent letters which together read Google?—?creating a whole image.
Law of Proximity
This principle refers to the proposition that objects close to each other tend to be perceived as a whole and related. In the first set of shapes below, the elements are not close enough to be perceived as a group whereas in the second, the shapes are perceived as one group since there is a unity. There is no need for objects to be similar beyond being grouped close to each other to be perceived as a separate group.
Designers can make use of this principle by organising the layout in interfaces where there is different content in such a way that the layout is more easily perceived by users.
The image below is the logo of Pillow Cake which sells accessories for dog owners. There are different small figures, but they are laid out closely to each other. Therefore you perceive the cluster as a dog. Proximity allows users to distinguish which elements are the most important, and also allows for better overall usability.
Law of Common Region
This principle propses that elements tend to be perceived as a group if they are part of a single region. The main aspect of common region is proximity by which a designer can group certain items close together in order to separate them from another group. Borders in the image below create a perceived separation between groups of objects?—?in this case circles with the same proximity, shape, and colour.
In design, setting borders is important in order not to cause users lose their attention or even get a wrong idea about a layout consisting of graphs or charts. Below you can see a screenshot of a part of the homepage of Paravel?—?a design agency. With the usage of one colour in the background, all the elements the region marked with a different colour are perceived as a unified group. We visualise them inside the same region and perceive them as coexisting within that particular region.
The Takeaway
Understanding how the human mind works is a great tool to create designs which directs users’ attention to the right place. Psychological principles help designers follow a user-centred design. Tons of advertisements, web sites, apps, and TV channels use Gestalt principles to make their products and services more appealing and to attract more audience. After reading more about Gestalt and its principles, you will notice that many of the design principles arise out of Gestalt theory.
These principles help designers to create more user-friendly websites and apps, to point out the most essential things, and lower the probability of overlooking or misunderstanding the information displayed. Because Gestalt mainly focuses on perception, its principles can help designers direct the users’ attention to the right place and to keep the users in the centre of their design.
Why Gestalt Principles Have an Important Role in UX Design was originally published in We Know Users Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.
Powered by WPeMatico
