Icon Semiotics: A Common Visual Representation

by Luke Wroblewski January 18, 2004

In many Web application interface projects, I find myself searching for the right icon to represent specific information or activities. Some reoccurring examples include: Log-in/out, Help, Preferences, System Admin, News, Reporting, Print, etc. Given the frequency with which I encounter these interface design elements, I’m always interested in a common visual vocabulary that could aid in user comprehension . There are a few iconic symbols (and variations thereof) that have achieved “web convention” status. For instance, a magnifying glass for search, a house for “home”, and the shopping cart.

I’ve put together this image to illustrate some of my solutions to frequently occurring visual representation problems. This by no means represents all possible visual solutions for these concepts. However it does help to illustrate that with a common iconic language, icons can still be unique and reflective of the personality of an interface. Since many applications are little more than text and buttons, icons are a great way to introduce some personality and positive visual impact to users. They are also quite useful as visual representatives for unique functions and as clarifiers of relationships between content.

Benito Cardenas (a grad student in my Interfaces to Information Systems class at the University of Illinois) spent a considerable amount of time searching the Web for a common iconic vocabulary. His findings are explained in:

Icon Semiotics on the Web by Benito Cardenas (3.7 MB PDF)

Information seeking behavior can be carried out in many ways by many users, but it is reliant on a pre-designed navigational scheme that may or may not fit well with a user’s needs. There has been a reliance on icons to represent tasks on the web that has not been uniform in implementation due to the wide range of uses for the web. I will give a brief introduction of semiotics on the web followed by a discussion of icons on the web and conclude with a graphics section to allow for further discussion on the use of symbols on the internet.

On a related note, Stock Icons from the Icon Factory takes common icon images and packages them as prefab sets.