Gestalt principles in User Interface design.

How to become a master manipulator of Visual Communication.

Jan 16, 2018 Eleana Gkogka

https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965

Great designers understand the powerful role that psychology plays in visual perception. What happens when someone’s eye meets your design creations?

Gestalt (form, shape in German) is a group of visual perception principles developed by German psychologists in 1920s. It is built on the theory that “an organized whole, is perceived as greater than the sum of its parts”.

four key ideas:

Emergence

People tend to identify elements first in their general outlined form. Our brain recognizes a simple, well-defined object quicker than a detailed one.

Reification

People can recognize objects even when there are parts of them missing. Our brain matches what we see with familiar patterns stored in our memory and fills in the gaps.

Multi-Stability

People will often interpret ambiguous objects in more than one ways. Our brains will bounce back and forth between the alternatives seeking certainty. As a result, one view will become more dominant while the other one will get harder to see.

Invariance

People can recognise simple objects independently of their rotation, scale and translation. Our brain can perceive objects from different perspectives, despite their different appearance.

Proximity

Elements arranged close to each other are perceived as more related than those placed further apart. This way different elements are viewed mainly as a group rather than as individual elements.

the Common Region principle

A good Common Region example would be the card UI pattern; a well defined rectangular space with different bits of information presented as one. Banners and tables are good examples as well.

Similarity

Elements sharing similar visual characteristics are perceived to be more related than those not sharing similar characteristics.

We can use the principle of Similarity in navigation, links, buttons, headings, call to actions and more.

Closure

A group of elements are often perceived to be a single recognisable form or figure. The Closure also occurs when an object is incomplete, or parts of it are not enclosed.

We can use the Closure principle in Iconography, where simplicity helps with communicating meaning, swiftly and clearly.

Symmetry

Symmetrical elements tend to perceived as belonging together regardless of their distance, giving us a feeling of solidity and order.

It’s good to use Symmetry for portfolios, galleries, product displays, listings, navigation, banners, and any content-heavy page.

Continuation

Elements arranged in a line or a soft curve are perceived to be more related than those arranged randomly or in a harsh line.

The linear arrangement of rows and columns are good examples of Continuity. We can use them in menus and sub-menus, lists, product arrangements, carousels, services or process/progress displays.

Common Fate

Elements moving towards the same direction are perceived as more related than those moving in different directions, or not moving at all.

We can use the Common Fate principle in expandable menus, accordions, tool-tips, product sliders, parallax scrolls and swiping indicators.

User Interface Design isn’t all about pretty pixels and sparkly graphics. It’s mainly about communication, performance and convenience.

+++++++++++++
more on ID in this IMS blog
https://blog.stcloudstate.edu/ims?s=instructional+design