As effective as an icon's metaphor may be, truly powerful icons get strength from their universal recognizability and conventional usage — a standardization of sorts. We'll discuss icon standardization more in this article and then provide suggestions to a few current icon standardization movements which you can explore and incorporate into your own projects.
Why Use Icons?
Icons and symbols are powerful visual tools. Normally they stand for real life objects by representing them in actuality or through the usage of a metaphor. They can communicate in a single object what would otherwise require many characters or words, which is partially why icons are leveraged so often in software design. When used correctly, they can effectively communicate a message in a minimal amount of space.
In addition, icons and symbols allow users to identify a message or metaphor without adding to their cognitive load. For example, imagine if the dock in OS X used text instead of icons. This would require users to read and mentally process the text for each application until they found what they want.
Seeing the usage of text here makes the implementation of icons seem like a no brainer, and for good reason. The use of icons, especially in representing frequently accessed items, reduces the amount of information users' brains have to process and allows them to more easily scan and locate what they want.
Why Use Icon Standards?
A powerful use of icons and symbols is their ability to transcend human language.
Another powerful use of icons and symbols is their ability to transcend human language. Icons work best and are most powerful when designers harness the universality and recognizability of real world concepts. This is another reason why icons are used so often in software – they transcend language barriers, often preventing the need for localization and translation.
When designing icons for usage in software applications and other media, designers should consider whether there is already an existing convention or standard in use for what they are trying to communicate.
Standardized Icon Usage: An Example
As a simple example, say you had to design gender-specific action buttons. You could start by creating a button that says "Men" and another that says "Women". In addition, you could add colors that are traditionally associated with male and female genders.
But what if these buttons are meant for a large audience of over 50 countries and languages? You would most likely have to create a localization solution supporting language translation.
Or, you could harness the communicative power of icons and symbols. So how do you represent "men" and "women" visually? Rather than racking your brain over how to get people from 50 countries to understand your symbols, you could look for a standardized metaphor that is understood universally. You wouldn't have to think long before the commonly used "Men" and "Women" symbols came to mind.
It's likely you could harness the power behind the universal recognizability of these symbols in your action buttons. Now, this was simply used as an example and not as a design solution, but it helps represent the power of using symbols and icons to communicate.
Discovering Icon Standards and Conventions
The "men" and "women" symbols seen above aren't necessarily "standards" because they have been officially approved and licensed for usage by an international committee of design professionals. They have become standards because of their prolific and wide-spread usage. Because lots of people have seen them, lots of people know what they mean.
Familiarity and universality help make icons recognizable by wide arrays of people. However, discovering truly universal icons can be very difficult. Some standardized metaphors you may recognize, such as a piece of paper with a folded corner for "document", a magnifying glass for "search", and a shopping cart for, well, a "digital" shopping cart. Other metaphors are more difficult to quickly recognize such as "reputation" or "view".
A good method for determining whether a certain metaphor has a standard or convention is to simply Google image search the term you want to communicate. If you see a repeating pattern of similar icons you can probably assume that it is a conventional metaphor. Another option for discovering the universality of a symbol or icon is to show it to an array of people and ask them what first comes to mind when they see it.
Many icon standards and conventions are non-proprietary. This means they are not officially chosen and approved by an appointed body. Lots of standardized icons become well-known because designers or companies choose to use them in their products. As iconic metaphors become increasingly homogenized across software systems, they come closer and closer to becoming standards or conventions in the design community. A good example of how an icon became a standard is the feed (commonly called RSS) icon.
How an Icon Became a Standard
In the earlier days of the web, prior to about 2004, users began to jump on the RSS bandwagon subscribing to syndicated feeds. Because there was no standard metaphor or method for visually representing what a feed was, web publishers devised a wide variety of enigmatic icons to help indicate to users that their websites offered feeds.
One of the most common methods for representing feeds was the orange block with the text "RSS" inscribed on it. However, even though RSS was shorter and simpler than writing out "syndication", it only truthfully represented one format that feeds could be in. What was needed was a metaphor to describe the concept of feeds, rather than the text (RSS) of one particular feed implementation.
wide-spread adaptation … was the catalyst needed to establish the orange feed icon as a recognized standard.
With the goal in mind to create a simple icon that could be used to represent all syndication protocols, Stephen Horlander designed what we know today as the orange feed icon. The icon was originally created for Firefox 1.0. This by no means made the icon a standard. It's design, however, clearly represented the aspect of broadcasting and propelled it to be adopted by the Internet Explorer and Outlook teams. Opera soon followed suit and this wide-spread adaptation (especially by large technology companies) was the catalyst needed to establish the orange feed icon as a recognized standard.
The feed icon is a great example of the power of icons. Rather than presenting tiny buttons with technological words users won't understand (RSS, Atom, Blogline, XML, etc.) the simple feed icon can communicate the purpose behind the complex stack of feed technologies by saying: "We broadcast something. Subscribe to it".
Platform-Specific Icon Standards
Another example of an icon becoming a standard through widespread usage can be found in the "share" icon initially advanced by Apple . You may recognize the icon as it appears in many of Apple's applications from iOS to OSX. However, this icon is also finding widespread utilization by third party developers inside Apple's ecosystem.
As you can see, the "share" icon is found throughout many apps running on Apple's software platform. So, if you are developing for iOS or OSX and you need a share icon, it might be a good idea to follow the pattern that is being embraced by so many other designers (as opposed to creating your own icon for "share"). Users within Apple's ecosystem (and increasingly outside it) will more easily understand what you are trying to communicate if you use this symbol because, chances are, they've seen it before.
Icon Standards: Cast Your Vote
You might think that icons become standards because large corporations like Microsoft or Apple choose to use them, and that is partially true. But in reality, large corporations simply speed up the standardization process because their market reach helps expose large numbers of users to the icons. Repeated exposure to an icon's metaphor is what helps establish its familiarity with users and thus a visually standardized message.
When normal people see an icon and know what it stands for, that is an extremely powerful tool. That means you, as a designer, can help choose what icons become standards. By choosing what icons you employ in your next design project, you're essentially casting a vote that says "yes, this icon is a good representation of metaphor for what I am trying to convey and I'm going to expose my users to it."
Icons You Can Use In Your Next Project
Below you'll find references to a few icon projects that are proposing themselves as candidates for conventional, standarized usage.
OMPL Icon
- Purpose: The Outline Processor Markup Language (OPML) is an XML format for outlines most commonly used in exchanging lists of web feeds between feed aggregators. (To see an example of an OPML feed, click here).
- License: Creative Commons Attribution-Share Alike 3.0 Unported License
- Homepage: http://www.opmlicons.com/
Geotag Icon
- Purpose: For those who don't know, geotagging is essentially adding geographical meta information to content such as photos. Similar to the feed icon, the Geotag icon metaphor is intended as a web standard to communicate the purpose of a complex technology to ordinary humans via a visual symbol.
- License: Creative Commons or GNU Lesser GPL
- Homepage: http://geotagicons.wordpress.com/
Language Icon
- Purpose: Create an abstract, globally recognizable icon that can be used in software applications and on the web to select different language translations.
- License: Creative Commons Attribution-Share Alike 3.0 Unported License
- Homepage: http://www.languageicon.org/index-icon.php
Open Share Icon
- Purpose: Help users easily identify content that is shareable. The icon itself attempts to communicate the act of sharing through the visual metaphor of one hand passing something onto another hand.
- License: Creative Commons Attribution-Share Alike 3.0 Unported License
- Homepage: http://www.shareaholic.com/openshareicon
ShareThis Icon
- Purpose: Represent the generic action of sharing a web page from any source to multiple destinations such as email, social networks, and more.
- License: GPL, LGPL, BSD, Creative Commons Attribution 2.5
- Homepage: http://www.shareaholic.com/openshareicon
- Note: Originally introduced with a Wordpress plugin, this icon is somewhat controversial because it is now officially trademarked (hence many people advocate the usage of the "open share" icon instead).
Markdown Icon
- Purpose: "Use this mark to identify user input areas which support Markdown-compiled HTML output or to identify general Markdown support." - http://dcurt.is/the-markdown-mark/
- License: CC0 UNIVERSAL PUBLIC DOMAIN DEDICATION LICENSE
- Homepage: https://github.com/dcurtis/markdown-mark
