swombat.com

daily articles for founders

How realistic should your icons/symbols be?  

When designing your product's interface, arguments about which icons to use for what are inevitable. Having some kind of principles or guidelines can help lessen the amount of time wasted on "but I think this icon is better" types of discussion.

Here, then, is an excellent article from 2010, by Lukas Mathis that gives numerous examples about how to use detail in designing navigational icons for your applications.

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.

The trick is to figure out which details help users identify the UI element, and which details distract from its intended meaning. Some details help users figure out what they’re looking at and how they can interact with it; other details distract from the idea you’re trying to convey. They turn your interface element from a concept into a specific thing. Thus, if an interface element is too distinct from its real-life counterpart, it becomes too hard to recognize. On the other hand, if it is too realistic, people are unable to figure out that you’re trying to communicate an idea, and what idea that might be.

One important exception when it comes to logos:

There is at least one specific area where more details are good: application icons. You want your icon to depict one specific idea: your application.

Coda’s leaf isn’t a representation of the idea of a leaf; it’s a very specific leaf, the Coda leaf. Acorn’s acorn isn’t just any acorn, it’s the Acorn. Adding details moves these images from a generic concept towards a specific entity, and in the case of an application icon, this is exactly what you want.

More from the library:
Avoid over-design
How Jason screwed up his Google acquisition
Cheap startup advertising
Google Analytics Alternative