UX Basics: Gestalt Principles
User experience (UX) makes up a large part of creating a great application. Oftentimes, it can be very easy to tell when a website has a bad UX, but sometimes it can be a struggle to pinpoint exactly why the UX is not up to standard. Lucky for developers, there are some rules to help create a better layout for features of a website. These rules, called the Gestalt Principles, can be used to create really great visual sites. Here are only a couple of the principles in action:
Similarity
This one is pretty straightforward, but we tend to group similar things in our mind. This is why lists, similar buttons, and common functionality should all be formatted the same.
Here is some HTML without any gestalt principles. It is hard to really distinguish what information belongs to what.
Using the similarity principle, we can distinguish the headers by making thos h4 tags.
Proximity
The proximity principle states that elements that are closer together are also perceived as grouped. This is the reason why components work so well in HTML. Similar functionality should be found close together.
Taking the same HTML as the last example, we can make the information more clear by adding some line breaks to group information together.
Closure
The closure principle states that the human eye will complete incomplete pictures.
This is oftentimes used in company logos.
Figure-ground
This principle states that people will perceive things as ether in the foreground or the background. This happens very quickly, so make sure the you have the correct elements in the foreground.
These principles can be used to help improve your user experience.
sources:
https://www.interaction-design.org/literature/topics/gestalt-principles
