Web Site Designs Incorporating Identicons

I recently started noticing small glyphs next to user names in various places online. In a list of blog comments, or a discussion board, there might be a series of multi-colored shapes, and it was all a mystery to me. So, I did some investigation.

Many of the Web sites displaying these glyphs utilize a service called Gravatar (http://en.gravatar.com/). This service hosts small images for people’s online profiles, which can be accessed by any number of Web sites. The idea behind Gravatar — or “Globally Recognized Avatar” — is that you only need to create one profile image, and it will follow you where ever you go online. (There may be other similar services I’m not aware of.)

Some Web sites utilize this services, and then require all of their members to create Gravatar profiles in order to contribute content to their site. Many users, not having a photo ready to upload, simply create a profile and use the default image. For the Gravatar service, the default image appears to be what is called an Identicon (http://en.wikipedia.org/wiki/Identicon). This is symmetrical, geometric shape — looking similar to a kaleidoscope design.

Why use these patterns? It turns out that the shapes and colors in any Identicon are generated by a number (think of the number as the image’s DNA). Since every user’s computer has a unique IP address, a man by the name of Don Park forged the idea of using IP addresses as the DNA of Identicons, thereby generating a unique pattern for each user online.

So, instead of using a uniform image such as a smiley face or a silhouette for each user who did not upload a profile photo, Gravatar generates a geometric icon as a placeholder. While the image doesn’t have much personality or tell you anything informative about the user, it does have a unique design which can help you quickly spot comments and posts by the same user.

Identicons have been proposed for other uses, such as to communicate a visual representation of a rating system (green triangles=good , red squares=bad, etc.). Personally I think this requires the user to learn how the icon system works in order to gain any information from it. I’d like to see the same concept applied to familiar icons, perhaps with a layering system. For example, a gold star on an red background means the product is approved by experts but has a poor feedback rating, while a dollar sign on an green background might mean that a product has a high rating, but that it’s more expensive than it’s competitors.

Perhaps I’ll suggest something like this on my next project.