Gestalt Theory for Computer Screen Designs

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, as 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 the 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 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 the 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, and 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 of a whole form as possible.

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 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.

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 minds 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, or 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, and the way each individual was risen and impacted by their traditions and innovations. When you structure images and text together on 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 challenging 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 that is different from 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 that confuse our minds. 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.

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 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, and magazine layouts are a scientific structure by which we can improve composition, increase visual communication, and consolidate information. However, there is so much more to expect still. 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

Finally, how humans see and perceive visual information is a concrete foundation to make websites and two-dimensional images more relatable and compelling. Increasingly, 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 deduce, it has an impact on stress induced by the software in use and, consequently, 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 their 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 in 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

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, all at once.

Visitors do not recognise parts of the websites we create – they recognise the whole website. Human beings see things, not as a sum of the parts. “The whole is other than the sum of the parts”, as 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 on the page. For example, when users land on 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.

Example 2

Or, if you want the users to contact you, give them 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. 

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 is 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. 

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.

Example 5

The users demand websites to be consistent. You can’t be comic on one page and press on the other unless there is a good motive for that. The design, tone, and 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.

Example 6

The users want a flawless look at what they 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 distinct 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 printing 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.

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 and 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 on 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 to 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 that will attract users and make them see just what we want them to see.

OBS: The figures used in the post have been updated, but the principles are absolutely followed in our designs. Our goal is to communicate with our customers.

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