In the context of UI design, I’ve come across numerous references to gestalt principles in the past few years, but not to 2D-design principles. When you design a user interface, you can apply both sets of principles to ensure users “intuitively” figure things out without any mental, or cognitive, effort.
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.
Hey, that last figure doesn’t illustrate MY operating system! :-)
My brain must be nonstandard — I see two groups of circles in all three figures, regardless of color.
The change of color in the second set of figures is powerful, though, and is an excellent illustration of (as you say) an inexpensive change that better conveys the groupings.
What I like most about this post is your point that the brain “sees” things automatically based on certain visual attributes. I find it a persuasive argument against my (soon-to-be former?) position that no interface feature is by its very nature intuitive, that anything we call “intuitive” is really just “familiar”. You are arguing, I think, that the brain is hard wired to interpret visual attributes in a certain way; is that correct? To me this means that design features based on those attributes do not in fact draw on learning but on something innate.
I must ask, however — do you know of studies of variations in the Gestalt principles? Do some cultures see the circles & triangles and others not? Do some types of people see smaller/lighter/grayer/etc. objects as being farther away, while others do not? I still wonder if familiarity might not have something to do with it…