Gestalt principles

There are plenty of websites that list and illustrate gestalt principles, and explain how the brain’s precognitive processing makes assumptions and fills in the blanks. Here are some examples:

Do you see six circles? Do you see any white triangles? There are no circles (just irregular shapes), and there are no triangles drawn on the screen. Your brain completes the triangle’s edges, and your brain closes or completes the circles. This gestalt principle is called the law of closure.

Compare the three illustrations—the coloured and the grey ones—above and below. In each illustration, how many groups of circles do you see: one, two, or three? Isn’t it interesting that your brain is so prepared to see groups? This gestalt principle is called the law of similarity. Note how colour changes your perception:

You can see the law of similarity before and after a quick redesign of this web-application’s main screen:

Before the redesign, the viewer’s brain applies the law of similarity and intuitively sees the five boxes as related. In fact, this is incorrect because the right-most box has a different function from the others. After the low-cost design change—a colour change—to the fifth box, the grouping that users intuitively see matches the functional model.

2D-design principles

I haven’t yet come across a website that explicitly ties the principles of 2D design to UI design. But these principles, which I learned from Marlene Cox-Bishop and the classic Wucious Wong textbook on 2D design, do apply to UI design. Consider these examples:

When comparing two figures, the brain sees that (1) a raised figure is in the distance, (2) a smaller figure is in the distance, (3) a lighter figure is in the distance, (4) a greyer figure is in the distance, (5) an overlapped figure is in the distance. The last pair (6) combines all of these design principles. You’ve likely seen these principles applied in your operating system:

When you apply the 2D-design principles incorrectly, just as with incorrectly applied gestalt principles, user perceptions will be incorrect.