Visual realism in UI design: just enough, but no more

Lukas Mathis's ignore the code blog offers illustrations of—and explanations for—the user interface sweet spot between visual realism and conceptual shapes.  His conclusion?  Designers should convey the essence of a symbol.  Any more detail distracts, while any less loses the symbol's intent.

Let’s look at a symbol we actually see in user interfaces, the home button. Typically, this button uses a little house as its symbol.

The thing on the left is a house. The thing on the right means «home». Somewhere between the two, the meaning switches from «a specific house» to «home as a concept». The more realistic something is, the harder it is to figure out the meaning. Again, if the image is simplified too much, it’s not clearly and immediately recognizable anymore.

The thing on the left is a home button. The thing on the right might as well be an arrow pointing up; or perhaps it’s the ⇧ key. Let me explain this concept using an entirely unscientific graph:

People are confused by symbols if they have too many or too few details. They will recognize UI elements which are somewhere in the middle.

As an aside, I keep Coda's icon on my dock because it's so uniquely refreshing.