« links for 2007-05-23 | Main | Open Source Misconce... »

posted 10:38AM May 23, 2007 with tags gnome usability webdevelopment by Lars Trieloff

What makes a good icon? A good icon is a good visual representation of the subject of the icon. In cases where no visual representation is possible, icon designers usually use metaphors. A good metaphor is the stop symbol that is modeled after the street sign: A red (warning color in most cultures) sign with eight corners is percieved as a stop sign, even without the four letters STOP on it. A case where no metaphor is neccessary are the icons for bold, underline and italic. Just an bold, underlined or italic letter is enough to make the point.

What about link icons, especially the insert link button that can be found in many visual HTML editors of WYSIWYG Wikis: A long time ago an icon designer must have decided to go with an metaphor, more specifically using the fact that a link in the english language can denote a hyperlink or a link in a chain. Thus, the chain became the most prevalent symbol for hyperlinks. In order to emphasize the hyperlink-nature, often a globe symbol was added to the icon, making the original chain almost irrecognizable. A very good icon modeled after the hyperlink=chain link idea can be found in the GNOME desktop:

http://weblogs.goshaky.com/weblogs/lars/resource/gnome-link.png

The problem with this icon and all other icons modeled after the idea of equivalence of hyperlinks and links of a chain is that it is not understood by non-native english speakers who do not recoginze the chain link in the icon and do not equate the concept of a link in a chain with a hyperlink between web pages. The other problem is that is metaphor is not neccessary. When you ask people what mental model of a link they have you will get not one single answer, but when asking how links are perceived, the answer is clear: "a link is underlined text, often blue that turns my mouse cursor into a hand when hovering". Following this observation, my take on a link icon would be modeling what the user percieves as a link, similar to the text formatting icons mentioned before:

http://weblogs.goshaky.com/weblogs/lars/resource/mindquarry-link.png

Now I have only one problem left: What is a good icon for a concept like WikiWords or hot links, e.g. an action that takes the currently selected text and creates a link out of it?

| Comments[2]

Comments:

Add an I-beam to the left. If folks associate links with an action they have become accustomed to, then in the same sense, and I-beam would seem to invoke a sense of "select me to edit me."

Posted by M. David Peterson on May 23, 2007 at 12:22 PM CEST #

s/and/an

Posted by M. David Peterson on May 23, 2007 at 12:22 PM CEST #

Post a Comment:
Comments are closed for this entry.
« links for 2007-05-23 | Main | Open Source Misconce... »