Icons: using the familiar

Text Menu

Icons: objects and representations

An icon, according to Charles S. Pierce, somehow displays that which it represents. Pierce defines an icon as “a sign which is determined by its dynamic object by virtue of its own internal nature” [106 p. 643]. Arthur Burks further explains this definition by stating that an icon sign, “exhibit[s] its object.” An example that he provides is “a scale drawing, used to communicate to a machinist the structure of a piece of machinery” (qtd in Codognet).

The common icon used for e-mail resembles an envelope and therefore conveys the concept of correspondence. This icon is often used as an anchor to trigger an email link.
From the Nevada Division of Environmental Protection [50], screenshot used by permission.

It could be said that the sign (the image uses of the envelope) and the signified (the object of an envelope) share certain properties or are similar in nature, thereby allowing us to recognize the image as representing an envelope and conveying the sense of correspondence. Umberto Eco problematizes the notion that there is a natural connection between an icon and its object. Instead, he concludes that similarity between an image and an object is “a matter of cultural convention” (204). Thus, the image of a rectangle with a V in the middle does not innately represent an envelope. Rather, we have culturally accepted the connection between this graphic and the object of an envelope.

Icons can also become so familiar that they become a revolving door: taken from popular culture, changed to be anchors, and then re-entering the popular culture. At first these anchor-icons were pictures of real life interfaces: hypercard icons show a finger with a string for reminders and the Mona Lisa for images (e.g., Marble Springs [36]). Then these gradually came to resemble computer components (Him [9] is an elegant use of radio button icons). Lev Manovich shows how this has gone full circle: "I buy an orange and blue wallet that has two plastic buttons on its cover, an emulation of the forward and reverse buttons of a Web Browser. The buttons do not do anything (yet) they simply signify 'computer' [96. p. 214]."

Panicware [52] advertises that it can stop popups, but does not list the names of browsers it is compatible with. Instead, it merely uses the icon associated with these browsers and sites: the MSN butterfly, AOL triangle. In this age of branding, it seems, words are no longer necessary:

With graphics like these, who needs enemies?
From Panicware [52], screenshot used by permission.

Icons: images that represent a function

Icons can sometimes do more than words or punctuation to indicate relations of anchors and links in both efferent and aesthetic sites and works.
Many sites use a next and back icon for connected text (see Hummer [23], Him [9], In The Changing Room's [8], Firefly [34], and Kidbuilding [31]). High Crimson's [11] use of >>> and _][ad][Dressed in a Skin C.ode's [44] use of > as anchors to indicate the next text stand out in simple contrast to the richness of the works and emphasize portions of simple navigation.

Yet the same icon is used in different navigational ways: where Ferris Wheels [33] uses back and next icons to go along a default reading path, the Royal Insitute for Deaf and Blind Children [58] uses them like the Internet Explorer and Netscape browsers to travel along previously visited nodes. Marble Springs [36] uses a three-pronged system designed for HyperCard stack navigation (prev/next hands go to previous and next cards in the stack, while a down hand goes to the last visited card).

Up and down arrrows are also used to "scroll" along a page. Pax [46] uses triangles to indicate scrolling up and down for the accumulated text. BBC [4] uses triangles for a scrolling anchor marquee. Cooperstown [6] uses a horizontal scrolling anchor.

Arrows can be also used in place of text to indicate heirarchical relations. Jakob Nielsen tried to provide a completely text based navigation schema, but succumbed to using an arrow between anchor words as he lamented, "The arrows seem to be slightly easier to understand as an indication of moving deeper and deeper into the site. [103] "

From Ferris Wheels [33], screenshot used by permission

From the Royal Institue for Deaf and Blind Children [58], screenshot used by permission.

From Marble Springs [narblebib], screenshot used by permission.

If the similarity between the image and the object can be understood to be “a matter of cultural convention,” then the connection between the icon and the function is even more so. There is no reason to associate an envelope with e-mail when electronic correspondence does not use envelopes. Furthermore the right and left-pointing arrows are inscribed from western book-culture where one reads from left to right. With a book, turning a page to the right, the reader receives new content while turning a page to the left returns the reader to previous content.

The functions of these icons in digital environments are only similar to their graphical icons because we have culturally understood a right-pointing arrow to mean “forward” and an envelope to refer to any form of written correspondence (even that which does not use envelopes). It is not that these functions are innately represented by the icon but that we have come to culturally understand the connection.

The Nevada Division of Environmental Protection [nevadabib] screenshot used by permission.
Icons can also use text conventions. Anchors pointing to searches often use a text strongly reminiscent of the now easily recognized Google trademark (a shadowed serif font with blue/ red / yellow/ blue/ green/red color order.)
Other sites, such as the USA TODAY [65] use a Google search bar, with the "correct" google trademark.

The Google Trademark (TM) from <http://www.google.com> **NEED used by permission.

When authors place icons as anchors in their digital texts, they are calling upon cultural codes for those icons to be understandable to their audience. They are counting on the audience to see the icon and understand the function it represents. Because icons generally represent common functions that the author wants to make available to the readers, they are usually (but not always) found in navigational anchor clusters such as menus or maps.