Standardizing Icons for the Web
The Web would be much more chaotic than it already is without standards. Today we’re going to talk about how various content on the web is being represented by standardized icons. Several groups of people have come together and agreed upon these simple yet distinct icons for identifying syndicated, OPML, geotagged, shareable content.
It’s interesting to note how these standardized icons emerged. The OPML, geotag, and open share icons all base their design on the feed icon. They each consist of a white symbol on a square box with rounded corners. The boxes have a subtle diagonal gradient and an inner border which gives a slightly beveled effect.
Feed Icon
The feed icon was introduced to us by Mozilla and is used for syndicated feeds in either RSS or Atom. You can instantly infer that it stands for a signal being beamed to the rest of the world. This icon is so popular that it has been transformed in so many ways to match websites and tastes. (It’s even been turned into a real-life pillow!) But now matter how many bells and whistles designers add onto it, the icon is a much more comforting sight than other buttons and chicklets labeled XML, RSS, Atom, My Yahoo!, Bloglines, or whatnot. Icons say so much more than words than obscure acronyms—which ordinary Internet users don’t even understand. They don’t need to!
OPML Icon
Related to feeds is OPML, which is an XML format for outlines. Its popular use right now is listing a group of feeds. Think feed reader reading lists and blogrolls. They can easily be shared with the OPML document format. Compared to the feed icon, the OPML icons is not as meaningful, but it’s still catchy especially since it looks like an “O”.
Geotag Icon
Geotagging is basically adding geographical information to certain content, such as photos, through a link. The geotag icon is a pushpin on a globe, which stands for pointing out a certain location in the world. It’s a really good symbol (though if you read Jeremy Keith’s tweet you might think differently from now on). It’s just that the globe looks too small for the pushpin.
Open Share Icon
You might have heard about the Share Icon, which came from Alex King’s excellent plugin, ShareThis. We’ve talked about the service here on Wisdump not too long ago, but there’s been a controversy surrounding the use of the share icon itself. Thus, the Open Share Icon Project was formed to address such limitations.
The open share icon shows a hand passing an object to another hand. It also looks like an eye. This is much more descriptive than the share icon, which is a node branching out into two like a binary tree, if you’re familiar with Computer Science, and feels too tech-y for the mainstream crowd. A star could have been an easy choice for an icon, since it’s used in both Internet Explorer and Flock to denote “favorites” or bookmarks, but the act of sharing isn’t conveyed with it.
Visit the Open Share Icon page.
More Standard Icons?
Are there any more standard icons out there? The Microformats project has put together several icons that can be used for such. Semantic Web, anyone?
What sort of actions and content on the web actually need icons like these? File uploads and downloads? Email addresses? Tags? Asking these questions makes me want to discover what the next generation of web technologies will give us. It could be something we haven’t even imagined before.
Steal These Icons
If these icons aren’t used, they’re all for naught. We all want some consistency on the web, especially it’s made of tons of information constantly being created each second. Especially when the technologies that provide this information are still very new. Using these icons means turning data into more meaningful and properly labeled content we can all identify and understand more easily.
Re the Geotag Icon: “…the globe looks too small for the pushpin”
OK I’ve re-visited the design and come up with a scale concept. You might need to squint to see the pushpin however ;-)
(link in case inline image doesn’t embed)
By Bruce on April 5, 2008 3:29 pm
Hahaha! Nice one Bruce! :D
By Sophia Lucero on April 5, 2008 4:21 pm
Hello,
Thanks for posting the OPML icon. Actually, we did have a reason why we built the symbol in this way.
a) O - for the obvious
b) If you take 4 feed icons and put them on a 2×2 grid with the dots always facing inware toward the center you create 2 concentric circles with 4 dots. Several feeds all coming together forming the list of feeds. We consolidated to 1 dot and 1 circle for clarity as we wanted it to work in a small format. Originally, it was red because of the OPML logo http://www.opml.org however, for clarity and contrast blue was chosen…
Hope that explains where it came from.
Ken
By Ken Rossi on April 5, 2008 10:14 pm
[…] Standardizing Icons for the Web | Wisdump […]
By Daily Post 04/06/2008 on April 6, 2008 6:37 am
The Geotag icon is ok, but has a small conceptual problem: I’ve never seen one of the “American style” pushpins in real life. You just don’t have those in Finland. I guess this could be true for many other parts of the world, too, so for those people who use different looking pushpins, the icon might be more difficult to grasp.
By Niko on April 6, 2008 9:43 am
What kind of pin is “standard” in Finland Niko? I have the GTI-style pushpin in my draw in England; I knew them from New Zealand too…
By Bruce on April 6, 2008 9:59 am
Niko, I’m not American myself, and live in a farther place than Finland, but I am familiar with the look of the pushpin used in the icon. It’s interesting you brought this up, though! Perhaps many other icons which are supposedly universal symbols are not so understandable after all.
Bruce, I’m curious to know which pin is standard all across the world as well!
Ken, thanks for the clarification. That’s a really great idea behind the OPML icon. It also seems like a bullseye, which sort of “brings together” other things as well. Let me clarify something too: when I said “not as meaningful”, I should’ve said the symbolism wasn’t as apparent compared to the feed icon.
By Sophia Lucero on April 6, 2008 1:26 pm
Ia Lucero, I’m familiar with this pushpin look too, but only from the internet. So it could work; all I’m saying is it’s not a familiar metaphor from real life (I’m not a strong believer in using metaphors from real life on computer UIs anyway, but that’s another story).
Bruce, a “standard” pin would be either a long (around 4cm or 1.5 inches) needle with a small colored plastic ball at other end, or a short needle with a flat round end for pushing (both needle length and diameter of the pin are maybe 8mm or just above 1/4 inch). I tried to find images for you on Google but couldn’t. ;)
By Niko on April 6, 2008 5:14 pm
http://mattbrett.com/2006/06/15/feed-icon-trademark-agreement-guidelines-what/
research, research, research!
before posting anything so you wont look like a dumbass
feedicon was brought to us Matt Brett not Mozilla
This blog sucks
By krose on April 7, 2008 5:32 am
krose, let me quote Matt Brett:
Matt Brett created FeedIcons.com and provided a vectorized form of the feed icon that was popularized by Mozilla in its browsers, which was then adopted by Microsoft and Opera. (Not sure about Safari; it still uses “RSS” when a site has a feed.)
By Sophia Lucero on April 7, 2008 1:42 pm
now who’s looking like a dumbass, eh, krose?
(from a long-time wisdump stalker who just couldn’t resist finding faults on ignorant fault-finders)
By Stalker on April 9, 2008 2:22 pm
[…] feed icon is a standard for not just RSS, but all types of web feeds. And just as this icon has helped us understand feeds […]
By Feed Awareness (or the lack thereof) | Wisdump on April 9, 2008 8:56 pm
[…] pues hay una propuesta para seguir los estándares en los íconos web y así hacer de la web un lugar más facil de […]
By Estándarizando los íconos en la web | Andando entre bits .com.mx on April 30, 2008 10:45 pm