Gestalt Principles of Perception

A Perspective on the Importance of Gestalt Theory to Graphic Design Series 7/7

“The Whole Is Other Than The Sum Of The Parts”



A focus On Prägnanz Principle

Welcome back to the last article in the series “A Perspective on the Importance of Gestalt Theory to Graphic and Web Design”. The first six previous articles were:

  1. Basic Design Principles – Proximity, Similarity, Closure, Symmetry, Continuation, Figure-Ground and Synchronicity Principles
  2. How Our Minds React To What We See – Closure Principle
  3. The Proximity Principle
  4. Similarity Principle In The Gestalt Theory
  5. Symmetry Principle Of The Gestalt Theory
  6. Relationships In The Gestalt Theory – Figure-Ground Relationship, Good-Continuation Relationship and Common Fate Relationship

In our seventh article, we will firstly talk about the Prägnanz Principle or the Principle of Good Figure. Chang, quoting Fultz (1999), defined Prägnanz (“good form”) as a “stimulus to be organized into as good a figure as possible”. Therefore, Prägnanz means what we would define, proper form, simple design or one symmetrical layout. In the second part, we will present examples of Gestalt Theory Principles applied to websites.

The Gestalt Theory Principles

The laws of Gestalt we presented in the previous posts are the main ones with significant implications for computer screen design. For instance, a visual object will appear as incomplete if the visual object is not balanced or symmetrical; lack of visual weight on each side of an axis causes absence of balance; continuation on a layout directs the eye’s mechanical action to follow a direction derived from the visual field; open shapes in designs make our eyes perceive that the visual pattern is incomplete and our mind will tend to close the gaps and complete unfinished forms, and the examples can go on. They all show, clearly, that the whole figure our eyes see is a unity, that an arrangement exists among the elements in the design giving the impression that they belong together as if there is some visual connection beyond pure coincidence that has caused them to be together. 

The Gestalt Principles intermingle, complement and enhance each other to produce a final figure that the viewer can understand. It is a process of simplification that our mind practices to create a figure that will have a meaning to the viewer.

Designers can use the Gestalt Laws of Perception to explore how viewers will interpret and organize the visual information from their designs.

As an example, interactive media designs with sound and time-based content allow the designer to use the Gestalt Laws of Perception to structure user experience. There are over 114 laws of Gestalt and most of them apply to visual forms in general. The essential principles to artists and designers are covered in this series but all of them, if well understood and implemented, offer methods by which web page designers and graphic designers can improve visual organization.  They will facilitate the communication power of the message from the compositions to the users.

The Prägnanz Principle

We perceive complex or ambiguous images as simple ones. The Prägnanz Principle defines:

“A stimulus will be grouped into as good a figure as possible.”

Or, as the Gestalt Theory’s fundamental principle says:

“People will perceive and interpret ambiguous or complex images as the simplest form(s) possible.”

Human brains prefer what is simple, ordered, clear. These qualities make the best form in our eyes because they are safer and present no dangerous surprises. That is why our minds want to reorganise complex and ambiguous shapes and transform them into as much a whole form as possible.

Smashing Magazine image for Pragnanz Principle
Source: Smashing Magazine, 2019

We tend to see the three distinct forms rather than the complex object in black colour. It is a simpler, more straightforward good figure

We will talk a little more about this essential law, the Prägnanz Principle. Later, we will see the usefulness of the Gestalt Theory when applied to a website that was created using the Gestalt Theory Principles.

Patterns seem to group if they are perceived as parts of the same structure. The integration should be simple, orderly, balanced, and coherent naturally. It will not need complex dealings to assimilate it. Therefore, the overall appearance of an element or a page on the website must always take precedence over the details.

Scholarpedia image for Gestalt Theory
Source: Scholarpedia – Gestalt Principles

The two components of the four structures show that the lines continue and arise naturally in (a) and (b).  In figure (c), the lines do not occur spontaneously as they seem to violate the continuity principle. However, figure (d) shows continuity, although the lines don’t arise spontaneously even though they are continuous. They make our mind question the design and differ from the natural, similar way we would expect. 

Human minds recognise pieces of a composition as a whole to understand reality. For example, when you look at a house, you do not see the rectangles of the windows and doors, the triangle of the roof, the curves of the fences. You see a house. You see the whole thing. And that is what you need to create your understanding of the world. Our mind connects the individual parts into an idea of wholeness.

Prägnanz Principle in Website Design

When you are creating a website, if you bring chaos to the page, the users’ perceptions will be confused, and their experience will be disturbed. The impressions are challenging to change; they typically come with the person, the culture, the way each individual was risen and impacted by their traditions and innovations. When you structure images and text together in a page, you communicate a message that will use human perceptions to transmit the essential meanings. If the users find chaos when they arrive on your page, what will they understand? How will they navigate when the directions are confusing, and images do not join the text?

The users might get there, but the routes to follow will not be the best. They might not want to come back to such hard work to find their solutions. Surely, there will be other websites with more accessible routes providing an excellent experience to the users. It is the designer’s responsibility to provide a good user experience.

The design we deliver should be suitable to the psychological state of the users who are handling the product. That is the experience they are after. When users navigate a website, they want to be directed quickly and efficiently to what they desire. Typically, they are not after “art” to find out the best material for their winter dresses!

So, the experience you deliver to your users should firstly include human psychology to pave the route to the solution. Show a complete meaningful form of your product to the users instead of just individual pieces of it one after the other. The Prägnanz Principle depends on the proper use of most of the other principles we learnt before to produce a whole which is different than the sum of the parts, and it helps to create bonds between the experience the user is expecting to have and their psychology.

A Prägnanz Principle Example in Art Form

Talking of art, the Prägnanz Principle can be used by artists to produce powerful illusions in their art. That is another book; we will not cover it in this post where we are concerned with easy website navigation design techniques; it is in the art field. Prägnanz Principle can create an exciting possibility that could be used according to what you want to emphasize in your design, so be careful.

As an example, we see Surrealist artist Salvador Dalí providing illusions which confuse our mind. The photographer Tavis Glover in his incredible site offers an example of how Salvador Dalí used the Principle of Prägnanz in his painting below, where he creates an illusion of a dog and face. To sum up, your perceptions will hit you when you look at the picture and what and how you will see it.

Salvador Dali picture relating to Pragnanz Principle application
Salvador Dalí, oil painting, 1938, Apparition of face and Fruit Dish on a Beach

Unity and Congruity

The design composed with the Principle of Prägnanz in mind will result in a unity that will be measured by the congruity among the elements that structure the design. The items will work together well, and they will make sense. They will look like they belong together, and there is a purpose that visually connects them. 

Gestalt Theory is widely used in education and educational software because its principles communicate their meanings and message well. They are bright, simple and repetitive to instruct and establish the knowledge. User evaluations have been done frequently during the last decades to indicate that all the identified Gestalt Laws are beneficial, favourable and advantageous for visual screen design and learning effectiveness.  

The visual principles of Gestalt Theory in interactive web design and two-dimensional graphic designs such as graphics, posters, magazines layouts is a scientific structure by which we can improve composition, increase visual communication and consolidate information. However, there is so much more to expect still. I believe we are just scratching the surface of what could be the foundation of UX/UI areas of design with a beautiful future. Further improvement will allow us to analyse and visually expand user experience with more persuasive compositions that will transmit the message to the final user and facilitate communication.

The Laws of Gestalt Theory for Computer Screen Design

Virtual Reality

In the final analysis, how humans see and perceive visual information is a concrete foundation to make websites and two-dimensional images more relatable and compelling. More and more, we have been witnessing the idea of immersion to result in efficient task performance and in a better level of user understanding. The inputs need to be perceived and processed by the user efficiently and affect the overall user experience.

The principles of Gestalt Theory are viable guidelines to develop applications for VR with potential benefits in education and instructing software because they offer a psychological explanation of human perception, especially relating to pattern recognition and how human minds subconsciously group objects together. The principles are widely used in User Interface design guiding the designer on what size, shape, position, and colour should be applied. 

 In VR applications, the design patterns or principles can be used to attain a goal and mainly involve users in the process. Using users’ ideas, feedback and psychology is part of website designing and marketing. Iterate over the design. And continually refine the experience “by implementing, testing, and analysing the work as it progresses and be willing to throw away bad ideas, no matter how much effort was put into them” (Sherman, 2002).

 Mental Workload

Gestalt Theory Principles can also apply to the multidimensional concept of Mental Workload. “Mental workload is defined in terms of time, distance to the desired goal, and effort” by research scientist William MacNamara (2016). As we can deduct, it has an impact on stress induced by the software in use and, as a consequence, will affect the experience of usability. The Gestalt Principles allow the designer to estimate the stress imposed on the user and optimize the design to remove demands. Thus, it is a significant opportunity to make the website friendlier to the user from the very beginning. Cognitive engagement of the World Wide Web helps the designers and other professionals involved in making websites more adaptive and personalized to the users and improve its usability in all general aspects.

In other words, the website needs to be exciting but straightforward; to be a challenge without overbearing the users’ capacities.

Software Usability

ISO (International Organization for Standardization) defines usability as “the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use”.

We can easily say that nowadays, usability is not an indulgence. It is a granted characteristic that all websites must have if they want to survive. UX/UI designers are specialised on bringing better tools to make the website more accessible and friendlier to navigate as the user looks for their specified goals.

Applying the Gestalt Theory to Web and Graphic Design

Dalmation photo for Gestalt Theory

Look at the above picture. It depicts a Dalmatian dog sniffing the ground under a shady forest. When you see the dog, you do not recognise him by his parts; you perceive the dog as a whole, all at once.

Visitors do not recognise parts of the websites we create – they recognise the whole website. Human beings see things as a whole, not as a sum of the parts. “The whole is other than the sum of the parts”, as the psychologist Kurt Koffka affirmed. Perceptual organisation underlies human perception effort. Our minds want to make as little effort as possible.

If you ask some friends to draw the Opera House in Sydney, they will bring the same outlining shape with different artistic styles. But, they will not draw each part of its architecture because humans see the whole first.

The whole appearance of an element must always take precedence over the details”.

The UI we create needs to be a UI that doesn’t overload the users’ cognitive efforts. 

Gestalt Principles’ Role in Your Website

When we create a website page, many of the good structures arise from Gestalt Psychology Laws. Some of the principles apply to web design more than others. Several are more appropriate for graphic design rather than web pages. I will point to some principles of Gestalt Theory that fit Moss51 Art & Design, my business website. They are examples that we must follow when creating a user interface to improve user experience.  

Gestalt Principles have been utilised for decades with significant effect in the formation of many UX/UI design patterns. Principles of Proximity, Figure-Ground and Symmetry are generally taken for granted to improve the process of usability of any interface. Research scientists are still studying the influence of Gestalt Psychology on Virtual Reality and Mental Workload. We, designers, have been using this tool, and the results have been significant in terms of commercial, professional and industrial uses.

Users, nowadays, are becoming much more demanding and require that websites follow their ways of thinking. It is our responsibility as designers to offer what users want and even some extra things they didn’t realise they wanted.

Example 1

When you follow the Gestalt Principles, the site’s navigation will be in familiar places that will be easy to find in the page. For example, when users land into a page, they mostly look for the navigation bar to find out where things are on the site. So, why not use proximity, similarity and good form in the navigation hierarchy so the user will perceive menu titles positioned closely to each other as being related to one another. The logo could be close to the menu navigation bar to make the user’s navigation intuitive and easy.

moss51 showing proximity, similarity and pragnanz examples
https://moss51.com – Navigation Bar (Proximity, Similarity & Good Form)

Example 2

Or, if you want the users to contact you, give then several places to easily find contact information, or send a message if they have a problem, and be able to contact your company and find a solution. An email address plus a highlight on your phone number in a place easy to locate will show them that you want your clients to stay happy. The principle of proximity was used as items placed near each other appear to be a group. The items in the contact list are equidistant and close to each other perceiving that they are related. There are three layers in the contact form, with distinct applications clearly apparent to the users. 

moss51 Contact Page showing proximity example
https://moss51.com – Contac Page (Proximity)

Example 3

The principle of figure-ground is used in the top feature image of the page where the figure (the “hero image”) is separated from the ground. The relationship stable, making both distinguishable from each other, in colour, size, and level of detail. The text colour white over the contrasting image focuses on attention and visibility, making it prioritised as the figure or the positive space. 

figure-ground example in My Gallery photo
https://moss51.com – Feature Image (Figure – Ground)

Example 4

The principle of proximity was used on this page. Elements of the same category are placed together, showing their relation to the title of the page. The user will also notice the subtitles under the photos creating a seamless relationship between the picture and the subtitle and delivering a better visual experience to the users.

Gallery photo Moss51 with Gestalt Theory principle of Proximity
https://moss51.com – My Gallery (Proximity)

Example 5

The users demand websites to be consistent. You can’t be comic in one page and pressing on the other unless there is a good motive for that. The design, tone, personality should stay the same.

The principle of continuity was used in the consistency of the website personality besides its regular use in visual images. The Gestalt Law states that items that follow a consistent pattern establish a continuous linear line from object to object. The personality of the Moss51 Art & Design website is set by:

  • A personal tone of voice addressing visitors directly
  • Emotional design to be more appealing and less technical trying to draw attention to the main subject and supporting content
  • Open communication with visitors encouraging visitors to reach out
  • A professional business position with correct detailed contact and information.

In general, the website tries to follow this principle from page to page promoting a continuous line of being creative, genuine, authentic, professional, trustworthy and likable.

our services page with Gestalt Theory of Continuity Principle
https://moss51.com – Our Servies (Continuity)

Example 6

The users want a flawless look at what you want to sell and why that is the best option for them. The principle of similarity states that human minds perceive objects which are similar in their physical appearance to be related. The buttons are made the same size but with different colours to inform the users that they can lead them to different pages depending on what they are trying to find. The principle of simplicity was used when writing the names of the pages concisely and clearly to simplify the effort needed from the user to identify the recognition of each page’s objective.

Our Services colourful stripes as an example of simplicity in the Gestalt Theory
https://moss51.com – Our Services (Simplicity, Similarity)

Summing It Up

It is impressive how come billions of human beings around the world coming from different cultures, countries, identities and inclinations tend to display similar psychological tendencies are likely to show substantially identical trends when it comes to visual perceptions.

In the seven articles of this series, I tried to cover the Gestalt Theory Principles concerning graphic and web design. I also tried to include examples from real-life websites to see the finer picture as the principles tend to work together and in many ways, become dependable of other principles to produce the best effects. They have a significant role in helping us visualise and use spaces in web design to create engaging pieces.

Gestalt Theory’s Principles are a valuable tool to develop eyes for what works visually and what detracts from the message we are communicating. And it follows the main traditional ways we have been taught such as alignment, hierarchy, contrast, repetition, balance, colour palette, legibility and positive and negative spaces. But it adds a scientific background over what the brain rejects and the perspective the brain uses in its decisions. The Gestalt Theory will effortlessly grow into an active contributor to the web and graphic design area. A renewed awareness of the Gestalt Theory will help us, designers, produce the best web and app pages which will attract users and make them see just what we want them to see.

Please leave your comments, suggestions and feedback. Thank You!

Sources:
Image by Alexas_Fotos from Pixabay (feature photo)
Fultz, J. (1999): Theory of Gestalt Psychology. http://users.anderson.edu/~jfultz/gestalt.html
Chang, D., Dooley, L. and Tuovinen, J.E. (2002): Gestalt Theory in Visual Screen Design – A New Look at an Old Subject. Monash University, Victoria  https://dl.acm.org/doi/10.5555/820060.820062
Image by <a href=”https://pixabay.com/users/Alexas_Fotos- (feature photo)
https://www.scholarpedia.org/article/Gestalt_principles
https://blog.prototypr.io/law-of-pr%C3%A4gnanz-bdb2fcf349b8
https://ipoxstudios.com/law-of-pragnanz-video-gestalt-psychology-for-artists/
Sherman, W. R., & Craig, A. B. (2003). Understanding Virtual Reality—Interface, Application, and Design. Presence: Teleoperators and Virtual Environments, 12(4), 441-442
https://arrow.tudublin.ie/cgi/viewcontent.cgi?article=1113&context=scschcomdis
https://blog.marketo.com/2018/11/what-do-your-users-want-from-your-website.html
https://www.crazyegg.com/blog/personality-in-web-design/
https://www.smashingmagazine.com/2019/04/spaces-web-design-gestalt-principles/
https://webdesign.tutsplus.com/articles/the-gestalt-principle-design-theory-for-web-designers–webdesign-1756
https://designforgeeks.com/gestalt-psychology-for-web-design/#.XpaGP8gza70
https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/

Print and share this article friendly; you are free to use and reproduce it, just please attribute the Moss51 Art & Design as the original author, and link back to this post!

Print Friendly, PDF & Email
Cidinha Moss