Self-Explaining Icons
Claire Dormann
University of Brighton Grand Parade, Brighton BN2 2JY
Abstract
Icons have been in use for a very long time, as early as the Middle Ages complex iconic systems had been developed such as the heraldic coats of arms and systems of astrological signs. In modern society everyone is familiar with icons, both in and out of work: for example, icons on the toilet door, iconic road signs and complex icons on electronic goods. From the everyday context of living to the packaging for the latest products, one encounters icons as a daily occurrence. In the computer world, the use of icons has been an extension of their traditional uses but computer and related technologies offer the unique possibility of exploiting animation and interaction. Furthermore, a computer interface language which consisted entirely of icons would have many advantages. It would avoid the need for foreign language translation, it would assist those with language and learning difficulties and it would help in the teaching of new systems. To explore the design I of such an iconic system, we look first at the communication process.
I Syntax and semantics of icons
Figure 1: Communication
Communication can be described as the transfer and exchange of messages between people (Fig. 1). In iconic communication the icon is the message transferred between the designer and the user. An icon can be seen first by its perceivable form (syntax), second by the relation between its form and what is signified (semantics), and third by its use (pragmatics).
1.1 Syntax
Starting with atomic icons, we can describe different techniques for forming compound icons: combination (superimposition, conjunction, concatenation and juxtaposition), transformation, derivation and inheritance and duplication. More than one technique can be used in the formation of a particular icon.
Combination
Superimposition is where one icon is placed on top of another. Most Isotype symbols use a modified silhouette of the object, but secondary symbols can be superimposed to differentiate subgroups (Arntz & Broos, 1979). But the same principle is found in user interface design, for example superimposing the symbol for idea on the symbol for stack means 'stack design ideas'. The principal symbol refers to the major class and the secondary symbol to the specific quality.
Figure 2: Examples of iconic combination
Conjunction is where two basic graphic symbols are placed together to express a more complex meaning. The telephone and the computer are joined to represent a form of digital communication, the modem.
Concatenation is created by the amalgamation of two or more symbols, which can be the same or different. The concatenation of several copies of the symbol for 'card' signifies a stack.
Juxtaposition is where two basic graphic symbols are placed in a set spatial relation to each other (e.g. side by side) to form a new symbol. This is the simplest form of compound icon. An icon standing for the world is placed inside an icon for a telephone line to indicate a world-wide network.
Transformation
A transformation takes an initial icon and transforms it by, for example, stretching it, changing the colour or tone, or the thickness of line. The dustbin icon from the Apple Macintosh is a good example of transformation: when there is something in the bin the iconic image contains a bulge.
Derivation
A derivation is where a complex icon is composed of two or more elementary icons and one of these has no use outside of a compound. For example, the 'No smoking' symbol includes a basic shape of a cigarette and a red diagonal negation bar, but the negation bar on its own has no use.
Inheritance
This is where a basic shape is used and one of its graphical elements (ie thickness of line, direction, colour, etc.) is modified to express a new element (see Dreyfuss 1972). It often involves an extra symbol to the basic shape, as in the case of the three lights in Figure 3. If abstract symbols are included in the basic shape then this method is frequently used.
Figure 3: Examples of inheritance in icons
Duplication
This consists of duplicating the icon. Originally, it was used by Neurath to indicate quantitative meaning by means of a progression (Neurath, 1978). For example, a single man means one man, two men means a group, three men means a crowd. This technique can be applied to other objects (e.g. the stack).
1.2 Semantics & Pragmatics
The topic of the semantics of icons has yet to be fully developed and is beyond the scope of this paper. In general, the semantics of icons should be based upon their real-world domain, so the semantics of computer icons should be based on the computer domain. One limited but important step in this direction is the ISO/IEC standard on interactive icons used on computer screens which provides a useful if incomplete iconic classification (ISO/IEC, 1992). It distinguishes between interactive and non-interactive icons (e.g. status indicator icons). Interactive icons are further subdivided into object icons (e.g. document, folder), pointer icons (e.g. selection, graphics), control icons (e.g. scroll bar, check box) and tool icons (e.g. fill, eraser, pencil). The result is a classification scheme for icons based upon computer objects and processes.
The topic of pragmatics is of interest here, but primarily in the context of animated icons where it is discussed within the theoretical framework of visual rhetorics. Before we can do this we need to consider icons and animation.
2 Icons and animation
2.1 Specificity of animation
Animation is 'tine graphic which occurs in time' (Baecker, 1987) and is a specific advantage of computer based iconic systems over more traditional systems. It is a dynamic visual statement in which form and structure evolve through movement over time. According to Noth, Eco argues that an image (e.g. a human face) is made up of smaller word-like units (ie eye, nose, hair, etc.) (Nosh, 1990). Semioticians define these smaller meaningful units as iconic signs and argue that their combination within the image results in more complex, meaningful units, called semes, which correspond to a verbal sentence. Thus the level of first articulation is made up of iconic signs. In Eco's analysis the pre-semantic units of second articulation in film are defined as figurae (e.g. geometrical elements, light contrast, figure-ground relations). These are differential units of visual communication. In addition to the double articulation of the film image into signs and figurae, the third articulation of film lies in its dynamic dimension of motion, these dynamic units of third articulation are called cinemorphs.
In the same manner, three levels of articulation are defined for animated icons: the first articulation is the iconsign (atomic icon) which can be composed into compound icons; the second level of articulation is represented by visual elements (shape, colour, texture, etc.); the third level of articulation is represented by the dynamic dimension of motion. We should look to the language of the cinema to integrate animated icons, using tools which achieve effects such as fading, dissolving, close-up, zooming, etc. Various Apple Macintosh applications offer a limited selection of these techniques. They are applied either as a global phenomenon (to the entire icon) or as a local phenomenon (to only part of the icon). The application of this analysis to a single animated icon (such as an arrow going up and down, or a rotating fan) on a plain background is relatively straightforward, but its application to a very complex situation, such as a complete cartoon sequence with many characters and a complex background, can be extremely complicated.
2.2 Uses of animation in the computer
Animation has at least three roles to play with respect to the user in the computer environment: to reveal structure, process and function. Animation of structure involves the exploration of a complex environment, such as a computer-aided design (CAD) package. It is also used to examine different possible futures within a simulation or model, and to experiment with an hypothetical environment too dangerous to view directly. Animation of process is the visualisation of an algorithm or program at some level of abstraction. Animation of function makes the interface more comprehensible. Baecker distinguishes eight uses for this type of animation: identification, transition, choice, demonstration, explanation, feedback, history and guidance (Baecker, 1987). As our primary aim is to discuss icons and animation within the context of user-friendly interfaces, the focus of this study will be on providing the user with information and with help. Most of Baecker's uses are relevant to these, but identification and choice have limited use.
For example, a moving arrow can illustrate animation as identification by emphasis: in this case the user is able to quickly identify an object in a crowded screen because it is pointed to by the arrow. Animation as history is used with a typical navigation tool where steps of a complex path are reviewed for the user (past, present and future steps can be displayed). It is referred to as transition in the visual rhetoric methodology.
Animation as information.
The role of animation as information is to show any changes in the working environment or to give indications of the current state or mode of the system: e.g. deleting, creating files, copying, Examples of this type of animation in common use are a bar being filled showing the amount of information that has been copied, or a rotating watch indicating that the computer is busy processing. Another area where this type of animation could be used to effect is in error messages. Even user-friendly software tends to produce error messages that are abrupt, unhelpful or cryptic, and animation could help to clarify them.
Animation as help.
One purpose of animation as help is to clarify the meaning of icons. Animated icons provide more information than their static equivalent. When an action is being referred to that involves a moving object, both the object that will move and its support are often represented along with an arrow indicating the direction of movement. It is not always easy for the user to see whether the icon represents the starting point or the ending point of the action. It would be easier and more comprehensible for the user to see an animation. In the case of the cleaning-icon (Beardon & Dormann, 1992) the static use of one of the icons could also mean 'cleaning', but the animation makes the meaning of the icon more selfevident. We can say that the icon automatically emphasises its grammar and semantics by showing clearly that it signifies an action (ie it is verbal), and by displaying the meaningful features of the action.
If an icon is not understood by a user, this might be due to many different reasons: the user is confused by the syntax of the icon, by what the object represents, by what the icon is supposed to mean, by the underlying computer function, or by its relationship to the context or other icons. Diverse explanations have to be created, some static and some animated: a simulation of the computer function, decomposition of the icon into its parts, different views or images of the objects provided.
3 Visual rhetoric: self-explaining icons
If we try to design self-referring icons this is not always possible or successful due to the pre-existence of standards, domain knowledge and misconceptions. To create a self-explaining icon, the icon itself is modified within its frame to provide more information, or alternatively an entire new explanation is supplied as a help-tool possibly in a new window. The principles behind the production of these explanations are to be found in the field of visual rhetoric.
Ancient rhetoric means the art of persuasion, it emphasises the pragmatic dimension of persuasive speech. Rhetoric is the study of discourse, new developments are in the study of misunderstanding and its remedy and in the psychology of effective communication (Molinie, 1992). Marcus (1979) presents a limited metalanguage for visual rhetoric. He adopts and transfers classical rhetorical devices associated with language to visual rhetoric and shows their application to visual communication. The visual rhetorical structure is built entirely upon the sequencing of images and changes in the individual syntactic qualities of images such as size, orientation and detail. This metalanguage is adapted in the following section to describe self-explaining icons.
Emphasis & Punctuation
Emphasis, in the case of highlighting, is used to direct the user's attention, to clarify the precise referent, to eliminate unnecessary ambiguity, or to stress the content of the message itself. To help people resolve any doubt about what is being pictured, the object may be repeated, the style and number of objects represented varying with each picture.
An example of hyperbole is that of the earth being pictured as having the form of a human skull in order to stress that the increase of population is creating food and energy supply problems which will lead, if unchecked, to the death of the earth. A similar approach could be adopted to the warning 'smoking can damage your heath': a cigarette slowly transforms itself into a tombstone. This method has a striking effect and is especially effective for warning messages such as hazardous machinery or a computer message of the type 'warning, your programme might be deleted'. Exclamation and question can be integrated at the level of the icon, as in information and warning icons. The application-icon and the question mark could illustrate a control message of the type: 'are you sure you want to quit?'. These procedures have a bearing on the type of computer icons and mode of communication.
Figure 4: Design student projects (Frascara 79)
Comparison
The techniques of comparison are employed to clarify the meaning of an icon. Antithesis is used when it is not always easy to convey comparative notions, such as 'big vs. small', or 'slow vs. fast'. Simple explanations could be provided by presenting a big and a small arrow, or by displaying an object moving faster and then slower. By producing more information, in a comparative form, the user is able to deduce the relation. Such comparative explanations are based upon the results of a psychological experiment in which a blue square is presented. Double-clicking this icon results in a red square, a green triangle and a blue circle appearing, and the user then determines that the icon means 'blue'.
Polishing is a procedure in which different instances of a concept are offered (see Figure 4). If road transportation is represented by the symbol in Figure 5, then different instances of the icon could represent 'car', 'lorry' and 'coach'.
Another approach to polishing is to show different views of the same object or different backgrounds to highlight different contexts of use. An essential feature of apposition is that it describes a sequence of units which have identity or similarity of reference. It enables us to bring precision to an icon: if a red on the chest of a man signifies a doctor, in the explanation we might show different medical objects. Alternatively we might vary the type and style of the icon, the stylised man becoming an image of a real doctor. Similarly, when a concrete object is represented by an abstract icon, the animation could show the concrete version.
In the computer environment, metaphors are created to relate the computer world to its real-word equivalent. For example, the desk-top metaphor is demonstrated to the user by relating each element of the computer interface to its real-word counterpart (e.g. a file goes into a filing-cabinet). Another use of metaphor, at the level of individual icons, is to express abstract concepts or emotions: e.g. the scales of justice, or the heart to represent love. For this approach, different solutions exist if the metaphor is animated. It could simply be made more comprehensible, or new details could be added. Alternatively a different metaphor or metaphors could be introduced.
Repetition
Doubling and multiplying can express quantity. Neurath's charts are the first systematic example of this procedure and the techniques are mainly employed for statistical data (Neurath, 1978). Or duplication could involve a special selected screen object which would start to multiply until the user performed the required action. Climax is a very common cartoon and animation technique where a particular symbol persists throughout a sequence of an animation (as opposed to showing the two sides of a metaphor, for example).
Figure 5: Icon for road transport'
Substitution & Miscellaneous figures
Synechdoche often allows multiple representations. If the White House is used to represent the USA, then the Statue of Liberty, the dollar-sign, and the American flag are all alternative representations.
We have already seen that the transition procedure is often used in animation as history to review steps of a complex process. In hyperbation all icons are reworked to keep stylistic and syntactic consistency.
Marcus (1979) provides a good framework in which self-explaining icons can be generated. With similar aims as Neurath, he wants to develop a coherent narrative conceptual structure to illustrate global dependencies: such as the world-wide energy, food and pollution problems. To develop selfexplaining icons animation is used within the icon frame itself, if other explanations are required they are shown in a separate area of a generally larger size. There are many forms of such explanation, therefore more work is required developing an appropriate methodology.
Conclusion
When an iconic interface contains many icons it is easy for the user to get confused. There are various remedies to this situation: the careful design of icons, consistency and respect for conventions are all essential. A method to create self-explaining icons, by carefully studying the syntax and semantics of icons and creating explanations for the most difficult cases, would further help the designer. Visual rhetoric techniques are one of the most promising approaches to the problem of how such explanations can be designed. To further this aim a help-notebook is being developed supplying illustrations of these different techniques. It will provide a guideline of ideas similar to '101 buttons' (Interactive design, 1988) for anyone developing an iconic interface.
References
Arntz G & Broos K (1979) Symbols for education and Statistics. Uitgever, The Hague.
Baecker R (1987) Animation at the interface. In: R Baecker and W Buxton (eds.) Reading in HCI, a multidisciplinary approach, Morgan Kaufman, California, 251-269.
Beardon C & Dormann C (1992) Saying thing with pictures: a theoretical approach to iconic communication. RSRC Research Report 93002, University of Brighton.
Dreyfuss H (1972) Symbol Sourcebook. McGraw-Hill, London.
Frasca J (1979) Design students project-graphic symbols for public information. Iconographic 14/ 15, 38-45.
Interactive Design (1988) 101 Scripts and Buttons. Individual software incorporated, Belgium.
ISO/IEC (1 992)Information Technology-Text and office systems - graphical symbols used on screens: interactive icons. Report No JTC1/SC 18. ANSI, USA.
Marcus A. (1979) Visual rhetoric in pictographicideographic. Semiotics unfolding. Proceedings of the second congress of the International Association for semiotic studies,Vienna, July 1979, III, 6. Mouton publishers, New York 1501-1508.
Molinie G. (1992) Dictionnaire de rhetorique. Librairie Generale Francaise.
Neurath 0. (1978) International picture language. University of Reading, Reading.
Noth W (1990) Handbook of semiotics. Indiana University Press, USA.