| Multimodal icons reflect the attributes of objects. |
Introduction
This paper presents an icon design methodology that emphasizes the attributes of an object. Attributes may be reinforced along several dimensions of a design. As an example, we develop a series of icons for queries in an information retrieval system.
Related Work
Marcus [4] describes the use of a corporate look in developing icons for computer systems. He applies standard graphic design techniques to a set of icons in a graphical computer system. The result is a set of icons that retains a consistent look. Marcus applied his technique to the wide range of icons present on a system; this paper focuses on a closely related set of information-bearing icons.
Henry and Hudson [3] describe multidimensional icons. An icon is considered as a three dimensional cube; various faces of the cube can be exposed to provide information about a file.
Blattner et al. [1] describe how sounds can be attached to icons, and consider the various properties of sound and their consistent meaning in a sonic environment. They propose a sort of grammar of sound attributes, and attach them to actions on various types of objects.
Gaver [2] attached sounds to icons and events in a graphical user interface. He believes that his approach leads to an increase in direct engagement, and provides flexibility in providing information to the user. He suggests, but doesn’t develop the idea, that visual and auditory effects can be designed to reinforce each other.
The present research is closest in spirit to Gaver’s. Workstations have evolved to the point where designers can exploit a unified approach in visual, auditory, and kinesthetic design. As Gaver suggests, multiple sensory modes, reinforcing each other, should increase the sense of engagement and provide more information to users.
Methodology
There is a range of variability possible within an icon. Table 1 identifies some of the possibilities. Some attributes are on a linear scale (such as sets); others are just sets of values (e.g., color). Some have obvious representations in current systems (such as shape); others do not (e.g., temperature).
| Visual | Audio | Kinesthetic |
|---|---|---|
| Size | Pitch | Weight |
| Visual Density | Timbre | Physical Density |
| Color/Shade | Volume | Temperature |
| Shape | Rhythm | |
| Pattern |
A multimodal icon design will map the attributes of our information object onto the attributes of our icons:
- Identify the attributes of interest in the abstract object.
- Identify the variable attributes available for icon design.
- Map the object attributes onto the icon attributes.
Important attributes of the information object should be mapped to multiple icon attributes, to reinforce the infomration provided. Linear information attributes (e.g., object size) should generally be mapped onto linear icon attributes (e.g., density), not non-linear ones (e.g., color).
Example
As an example, we apply the approach outlined above to queries in an information retrieval system. In a typical system, many queries are made, and the user must keep track of the sets of documents returned by the system. To make these sets more directly manipulable, we might wish to provide icons for them.
For this example, we will consider only two attributes of our result sets: their size and the type of query that generated them. We might identify four dimensions of variability for our icons: density, sound, dragging speed, and color. Note that icon density and color are always apparent; the sound and dragging speed are known only when the pointing device is involved.
Since the size of the set and the visual density of the icon are both on a linear scale, we’ll map set size to density. The sound and dragging speed will also be mapped from set size. Query types, a discrete set, will be mapped to color.
To complete the example, we must develop the actual icons. For the set sizes typically found in information systems, result sets range from one or two to thousands of documents. This suggests the possibility of using a logarithmic scale, and we will do just that. The visual density of the icon will be proportional to the logarithm of the set size. Triangular figures will be used to support this; the number of lines in the icon will be proportional to the log of the set size. (An earlier version used filled rectangles, which didn’t hint at the logarithmic scaling involved.) Thus, we might have this sample of icons:
The sound associated with an icon will be heard when the mouse is clicked on it. Sounds will differ in their timbre: the first icon will have a noise with a lot of reverb and “rattle”; succeeding icons will have less reverb and sound more dense.
The dragging weight will come into play when the icon is moved. A normal mapping might be 1″ of mouse movement causing 1″ of screen movement. We will vary this from 1:1 for one item up to 2:1 for a million items. This will cause the larger sets to seem heavier.
Finally, we will map query types onto colors, e.g., blue for author queries, yellow for date queries, and green for keyword queries.
Since set size is represented in multiple sensory modes (visual, auditory, and kinesthetic), these attributes should reinforce each other in providing continuous feedback, more direct engagement, and better information (as Gaver proposes).
Future Work
This proposal has not been applied to a real system; this is the natural next step.
The techniques described should be applicable to many areas where icons are (or could be) information-bearing. For example, folders on the Mac could vary their shade depending on how many items are (recursively) in the folder.
This proposal is independent of multi-dimensional icons. Each face of a multi-dimensional icon has all the opportunity for variation possible for simple two-dimensional icons.
Virtual reality systems may have virtual objects corresponding to icons, and would provide an opportunity to map physical dimensions such as “squishyness” and temperature.
Summary
This paper has presented a modest methodology for icon design. It provides guidance in mapping information object attributes into the attributes of icons.
An example made this mapping more clear. It applied the mapping to a range of icons representing a single sort of object, rather than an assorted collection of icons. Mapping the same information across multiple sensory modes can provide reinforcement of information.
References
[1] Blattner, Meera M., Denise A. Sumikawa, and Robert M. Greenbertg. “Earcons and Icons: Their Structure and Common Design Principles,” Human-Computer Interaction, v. 4, 1989, pp. 11-44.
[2] Gaver, William W. “The SonicFinder: An Interface That Uses Auditory Icons,” Human-Computer Interaction, v. 4, 1989, pp. 67-94.
[3] Henry, Tyson R., and Scott E. Hudson. “Multidimensional Icons,” ACM Transactions on Graphics, v. 9, no. 1, January, 1990, pp. 133-137.
[4] Marcus, Aaron. “Corporate Identity for Iconic Interface Design: The Graphic Design Perspective,” IEEE Computer Graphics and Applications, December, 1984, pp. 24-32.
Acknowledgements
I would like to acknowledge discussions with the Envision Project team, particularly Dr. Ed Fox. This work was done in 1992 while I was a grad student at Virginia Tech. I was partially supported by NSF grant 4-27343.
[Originally written 2-20-1992. Modified 5-28-99 to include acknowledgments and to use the figure from “Logarithmicons” rather than re-generating the original figure which had the triangular icons only.]