Five Gestalt Principles that determines the UI/UX of your site

Proximity- The gestalt principle of proximity proposes that we tend to group elements on the screen which are close to each others.

In the below screenshot, the elements have been grouped into two groups in a manner the users will group it, while reading. The main focus should be that the elements of the group should have higher levels of interrelation amongst themselves than elements of the other group. The more the proximity of the elements, the more they have a chance to fall in a group wile users visually segregate the content while reading.

Image for post
Image for post

Which of the below excerpts look more appropriate?

Image for post
Image for post

Here, in the second case the bigger font has been grouped with smaller font (an unrelated grouping). The smaller font sentence could have been grouped with other sentences of smaller font or it could have appeared as a sub-heading with a separate font .

So, the relation with one sentence of the group is more with the below portion than the header. Hence, users will experience certain levels of discomfort while grouping in the second excerpt, and hence it is faulty from UX perspective .

Maximum comfort in reading is what we aim for when page experience is somewhat equating brand experience these days.

Similarity-

As explained above, users look for similarity while grouping. Gestalt’s law of similarity states that we tend to group clusters of content based on shape , size, color and so on. Now, I conducted a survey to know that if the content doesn’t have many varying signals and the content is represented in different size, shapes and colors’, how will one group it.

Image for post
Image for post

Well, the results are not conclusive given the small sample size but one can form surveys on the same line to decide which factor is the priority most factors while grouping. This may open up a whole new area of research.

Continuity-

Our mind generally tends to move along lines, following it wherever it goes. Our mind finds comfort in walking or following the treaded path. So, if you have created some kind of alignment path either straight or vertical, the users would tend to move along that path. This principle is followed when deciding how to synchronize various elements of a web page- which should appear in front of the users first and which way they would navigate within a page and between different pages . Let’s have a look at the heat map analysis of a web page. You will find that the user has moved across specific lines vertical or straight before moving off.

Image for post
Image for post

Closure-

If the users are given a chance they would opt out for the simplest solution. That is the users want closure to the activity or at least some action that sows closure of the activity.

You must have used mail multiple times. In the mail, there is an option which says that if your mail is taking time to load, use the HTML version and you use the version even if the opening of the mail is delayed by a second. Mind it more than slow connection, users urge for closure sends them to click on the HTML version.

Image for post
Image for post

Similarly, there are loaders for websites which indicate that the current activity is slowly finding its closure, it gives a sense of closure. So, you wait for the app to run, the video to buffer and so on. Either you provide actual closure or sense of closure. Users sense of closure is related to users sense of control of the activity. Biteable video processing is one of the best examples of providing a sense of closure.

Image for post
Image for post

Connectedness

It means users tend to categorize or group elements that are connected to each other.

Sr. Content and Business Writer having over 10+years of Content and Digital Marketing Experience

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store