Bring Gestalt Psychology into Design Playground

User Experience design is all about understanding users. In order to be a good UX designer or interaction designer, we have to know that we are not solving our own problems, but users. With Gestalt psychological rules and theories, we can add more value to our products by better understanding users’ behaviors, emotions, and motivations. Using Gestalt principles can not only help the designers create fantastic products, but also assist you to convince your boss, customers, and engineers to say YES!

 

The Background of Gestalt Principles

Gestalttheorie, one of the most important schools of psychology, rose in Germany in the early 20th century and is also called Gestalt Psychology. It was founded by three German psychologists, Max Wertheimer (1880-1943), Wolfgang Köhler (1887-1967) and Kurt Koffka (1886-1941), on the basis of the study of Apparent Motion phenomena.

The Gestalt school advocates that the human brain operates in a holistic way, “The whole is other than the sum of its parts.” For example, our perception of a flower does not only come from the shape, color, size of a flower, but also from our past experience and impressions of a flower, which adds up to our perception of a flower [1].

The whole is other than the sum of the parts. – Kurt Koffka

 

How Can We Use Gestalt Principles in Our Design?

In this section, I am going to talk about the 4 most important Gestalt principles and how to use it.

Law of similarity – We seek differences and similarities in an image and link similar elements [2]. 

If several elements have similar sizes and colors, users will automatically associate these elements with each other. This is because our eyes and brains are more likely to organize similar things. Our brain will determine the same things as a whole. As the picture above, when a series of triangles and circles are displayed side by side, we will see a row of circles and two rows of triangles.

When applying the law to user interface design:

 

Figure2. A real-world example of FB

 

Even though the button icons below each FB article (press Like / Comment / Share) have different functions, users will see them as the same level of functions because of their visual similarities in color, size, and arrangement.

 

Law of proximity – We group closer-together elements, separating them from those farther apart [3].

 

If we look at the three circles on the right side, we will think that the three circles are independent individuals. And then, when we look at the three circles on the left side, our brains will automatically determine these three circles as a group because the different distance between similar objects will affect the cognition of the brain. Thus, similar objects with relatively near distance will be determined as the same group by the brain.

When applying the law to user interface design:

 

Figure 4. A real-world example of FB

 

In the previous rule, I mentioned that the brain will classify objects of the same shape into the same group, but in this picture, because the circles and rectangles are closer together (See green colors above), the brain will give priority to identifying these objects as the same group (See orange colors above).

Law of continuity – We follow and “flow with” lines [2].

Figure 5. Law of continuity

Our brain will see things as continuous forms. For example, when we look at the picture above, we can still identify the blue line as a whole wavy line and would not be disturbed by black lines[5].

When applying the law to user interface design:

 

The law of continuity is very common in waterfall website layout. Even if the block-based card contents are limited by the height of the page, our brains will automatically continue to build the cards shapes (See green blocks above) and identify it as “unfinished content”.

Law of closure – Preferring complete shapes.

Like the image above, our eyes first observe a series of short lines that are not continuous, and then our brain begins to fill the gap between each line. Finally, these shapes will be recognized as a complete circle, square and triangle.

When applying the law to user interface design:

 

 

 

 

 

 

 

 

Because the images and the texts are arranged properly, these elements create the sense of stability in the website. Users would not feel messy. Although there are no clear boundaries between each image and the text (See the upper image), our brain will automatically fill the gaps between each content and creates some blocks in our mind (See green blocks in the lower image)[5].

 

Conclusion

Understanding psychology can help us know how brain think when people use products, and this can help us create user-friendly interfaces.

 


Cited and sources:

  1. https://en.wikipedia.org/wiki/Gestalt_psychology
  2. https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/gestalt-principles-of-form-perception
  3. https://www.interaction-design.org/literature/topics/gestalt-principles
  4. https://www.pinterest.com/
  5. https://www.slideshare.net/SealTseng/ss-82594431
  6. https://uxplanet.org/psychology-and-product-design-dae4c4cff62c
  7. https://www.slideshare.net/MarissaEpstein/designing-for-brains-the-psychology-of-user-experience

 

Design Critique: Shopee (iOS App)

Shopee is the largest online shopping platform in Southeast Asia. In the past three years, Shopee has become Taiwan’s largest online shopping platform, replacing PC Home, the previous largest online shopping website in Taiwan. Shopee provides several services for people to shop easily: People can talk to buyers about the condition of the goods before they shopping, Product rating service can provide other people’s shopping experience to potential customers, and customers are accurately able to grasp the delivery process of the goods and so on.

 

Main Page

When we load into the App, we can see that the page provides logos, icons, and search bars. This delivers the concept of “Discoverability” that Don Norman mention in his book “The Design of Everyday Things.” People are easily able to figure out what actions are possible to take. In addition, these images and icons provide clues to help people navigate the App, presenting the app’s signifiers. For example, the “search” bar signifies users that they can search for their interest products and the menu always displays at the bottom that helps users find information easily. Therefore, I would say the app’s “discoverability” and “signifiers” are successful.

Shopping Experience

A good and smooth shopping experience can improve customer satisfaction and loyalty. However, from the first picture to the third picture, we can see that when we press the button of “Buy Now” will enter the page of the “Shopping Cart”, and then when we click the button of the “Check Out” will enter into the final checkout process. Even though the whole process is very intuitive, some customers could not able to predict the content of the next page, the next step. Hence, they could not able to understand the relationship between each page. They have no idea how many steps that they need to complete for an order until they complete the whole process or which step where they need to provide their personal information. If we can provide a diagram or a flowchart of the shopping process between each screen, it can help customers know where they are, what is the next step and how they can complete the order process. By adding a diagram or a flowchart of the shopping process between each screen, the quality of shopping experience will be improved, which led the customers to feel that the platform is worth to trust. Thus, I think “Mapping”, a technical term which mentions in Don Norman’s book, in this App is good but not perfect.

Order Options

In this App, the most attractive feature is “Cancel Order” bottom. Sometimes, people will make a mistake to buy wrong colors or wrong sizes of clothes when they purchase their products online. Through clicking the “Cancel Order” bottom, they can easily cancel their orders without charging any additional fee. According to Don Norman’s suggestion in his book, a great design product includes placing an option to “undo – Obviously, undoing is not always possible. Sometimes, it is only effective if done immediately after the action. Still, it is a powerful tool to minimize the impact of the error.” If the system does not include cancel function to undo the mistake, it will make the error worse. In addition, I have used this cancel service when I purchased wrong products and those experience are truly wonderful since the bottom can help me solve the mistake. This propels me to return to this platform when next time I need to buy something that I need. Thus, I think the “Cancel Order” bottom is an extremely useful design in this App.

Oline chat service

I think the “Feedback” is great. Since consumers can chat with sellers via this system anytime to ask about their interest products and they can get their answer immediately. Because the system is conduct by real people, real sellers, instead of a robot, consumers will be more confident to use the platform.

 

Cited: