The panda and the blue button

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

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 or 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! :-D

Comments

[Morten Hjerde]

Sorry, Steven. I have to disagree. The Blackberry screen is not acceptable by any standard.
I understand the reason it's like that, and the reason you are so apologetic to it.
The Blackberry is highly resource constrained in order to keep cost down and battery life up.
The Blackberry offer a great feature (push email) that is so compelling that its users put up with a user interface that is not only ugly but also stupid.
*Anything* is learnable. You just have to put time and effort into it. And after spending effort learning something, you don't want it to change. "My trusted ole Blackberry is the best. I know it like the back of my hand."
That mechanism worked for WordPerfect for a long time. One week after a product with a better user experience came along, it was dead.

[Steven Hoober]

I am not sure I get the point of your yahoo/bb examples. Aside from being different kinds of screens (landing vs. details), the yahoo one is no easier to get information out of. Sure, its prettier, and spacing and alignment probably help scan, but you have to read every single word, still.

While sub-optimal (and even the type on a blackberry causes me pain) the grouping of info on that screen is acceptable; just a little design work would make it just fine, and I'll bet learnability improves this to a totally acceptable state for actual users.

[Benedikt]

I liked your explanations of some principles of visual language - and even more when reading to the end and finding it applied to mobiles, a field where I'm currently focusing my thinking on!

So you just found a new rss subscriber!

Tip: reread the 1st sentence, 4th para on your about page. Some "as" sneaked in there (no pun intended).