A panda walks into a cafe. He orders a sandwich, eats it, then draws a gun and fires two shots in the air.
“Why?” ask the confused waiter, as the panda makes towards the exit. The panda produces a badly punctuated wildlife manual and tosses it over his shoulder.
“I’m a panda,” he says, at the door. “Look it up!”
The waiter turns to the relevant entry and, sure enough, finds an explanation.
“Panda. Large black-and-white bear-like mammal, native to China. Eats, shoots and leaves.
Just like spoken or written language, visual language has its grammar. Without grammar, language would not make sense most of the time. Without grammar, visual language is just as confusing.
Proximity is the Comma of visual grammar
In the above image we see three separate figures. In the image below we see the two figures on the right as a group, and the figure on the left as not belonging to the group. The only difference is that the figure in the center is moved a few pixels to the right. It’s like putting a “visual comma” in between the first and second figure. The entire meaning changes.
(Images liberated from the infamous Artemy Lebedev)
Your brain is not passively receiving and storing visual input. The brain is actively trying to make sense out what you see, whether you want it or not. It can’t be turned off. Designers who are not mindful of these principles can (and often do) confuse people.
Some of the rules the brain uses are described by the Gestalt Principles. If there ever was a visual grammar, the Gestalt Principles of Perception is it.
The sum is greater than the parts
The brain tries to give meaning to chaos, divine relationships between objects. The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts. Here are some of the principles:
The Law of Proximity
We see objects close to each other as forming a group.
The Law of Similarity
We group elements if they are similar to each other.
“This is a great example of the gestalt law of similarity employed in interior design. […] In this case, all of the dining room chairs are black. The shared color makes the chairs form a group based on similarity. The grouping effect is so strong that you really have to look closely to notice that the chairs are a mix of different designs.”
(Gary Fisk, Applied Psychology)
The Law of Prägnanz (figure-ground)
Something is always “the object”, the rest is “background”. This effect is often used in optical illusions like the well known Rubin Vase above. Do you see the vase or the two faces?
In the Mac logo above, you either see the happy face frontal or a face in profile. In cases where two interpretations are possible, your brain can switch between them, but it can only see one interpretation at a time.
The Law of Symmetry
When we perceive objects we tend to perceive them as symmetrical shapes that form around their center.
A typical textbook example of the law of symmetry consists of a configuration of a number of brackets (the illustration above). When perceiving the configuration, we see three pairs of symmetrical brackets as opposed to 6 individual brackets, or two pairs and two singles. This happens despite what is suggested by some of the brackets immediate proximity to each other. (more here).
The Law of Closure
We perceptually complete objects that are incomplete.
The brain is constantly filling in the gaps in order to form whole objects out of separate component parts. Its surprisingly good at it; we identify patterns faster than the separate parts of the pattern. It might be an evolutionary issue. “Is that shadow over there a wolf preparing to attack me, or just a bush behind the three?” You want to make up your mind fairly quickly.
It is not only our visual system that does this. Our brain is a fill-in-the-gaps machine. Check this video interview with David Ariely.
Spot the errors:
Yahoo and Blackberry: The Yahoo! Flickr screen is quick to scan and easy to understand. To understand the Blackberry screen, you have to read every single word on the screen. What Gestalt Principles could the Blackberry designers use to make the screen better organized and less confusing?
AccuWeather: There is no way of knowing if the upper of the lower button is selected in the screen above (both states are shown). Is there a Gestalt Principle that the designers could have used to avoid the confusion?
Google Maps: What Gestalt Principle has the Google designers used to ensure that you don’t confuse the search results with symbols on the map itself?
The quote is from the book Eats, Shoots & Leaves: The Zero Tolerance Approach to Punctuation by Lynne Truss. Apologies for punctuation errors in the text! 
