Problems With Using Icons

Author: Alan C. Dube

Date: 8/19/95

Problems With Using Icons in GUI Applications

Introduction

Icons are of central importance to the successful utilization and acceptance of a graphical user interface (GUI) and its related applications. Icons can lead to faster decision making (Spence & Parr, 1991) and improve long-term memorability (Rogers, 1989). However, there are many issues and problems associated with using icons in this context. This paper will discuss some common problems found with icons in GUI applications, and suggest ways to improve their design, aesthetic quality, and context functionality. The discussion will close by raising new issues to investigate concerning icon design and implementation.

Design Problems Associated With Icons

Hutchins, Hollan, and Norman (1986) define an icon as "a representation that stands for its object by virtue of a resemblance to it" (p. 114). It appears, however, that in their efforts to remain competitive, many software vendors are releasing icon-driven applications that do not follow this basic concept. Instead of making applications easier to use and understand, software designers have confused the end user by incorporating "icon overload" into their products. They are offering ambiguous choices, too much clutter, and are displaying icons that are tiny, hard to interpret, and require the user to seek an explanation of its intended meaning and function.

Many of the problems associated with using icons in GUI applications stem from the way applications are developed. Software companies typically use a team approach to application development, with each team member responsible for a certain portion of the overall product. Although standards are often enforced for the source code and screen layout, they are not for icon design: The designer tends to create the iconic representation of an assigned functional component from their point of view only. What may be intuitive to the designer may not be intuitive to the target audience. Kay (1990) points out that this is one of the most interesting puzzles in iconic communication: why a disparity exists between how understandable images are while they are being constructed and how obscure one's own constructions can appear the next day.

When and where to use icons properly within an application presents a significant challenge to software developers. Icons are typically used within a GUI application to represent a file, or trigger a program, procedure, or setting. Icons are also used for integration into other objects, to save space in an application work area, and to provide an alternative to a menu selection. A recent trend, indicated by such products as Microsoft Word and Excel, is to place icon groups within a user- configurable "button-bar" arrangement at the top of the application workspace. This is in contrast to buttons, such as those labeled "OK" or "Close" within an application. Buttons are usually placed in the lower quadrant of an application area. As explained by Shirk and Smith (1994), icons are different in their functionality from buttons on computer screens in that icons provide the opportunity for the user to execute on-line functions and actions; buttons provide consistent orientation that helps a user move through an application. Using icons for both navigation and on-line functionality results in user confusion.

Because of limited "screen real estate," and the differences between graphical and textual user orientation, GUI application developers must decide how to size icons and whether to use icons or text, or a combination of icons and text, to properly convey an action to the user. Shneiderman (1992) suggests that both graphical and textual orientations be respected, and that the designer's goal should be to provide the best of each style to facilitate cross over when desired. Shneiderman further states that "maybe, while you are working on visually oriented tasks, it is helpful to `stay visual' by using icons, whereas, while you are working on a text document, it is helpful to `stay textual' by using textual menus" (p. 209). The effectiveness of this approach is dependent on the quality of the icons and words used to differentiate between graphical and textual modes, and how this adaptation is implemented to communicate the task at hand to the end user. This is especially true for experienced typists, where moving a mouse to invoke a function can be slower than typing a key sequence.

There are additional problems with using icons in GUI applications: a lack of consistency for indicating proper activation, and the avoidance of overlapping meanings. Different methods are currently employed to indicate icon activation within the same platform and across several desktop metaphors. Three dimensional (3D) representations are common in applications on the Windows platform, showing a lowering effect when the icon is activated. Some 3D effects show the opposite: the icon is raised as it is activated. When icons are used to represent a linked or embedded object, they can appear in either outlined or shaded form. The OS/2 desktop prefers the "exploding icon" effect when an icon is invoked. The Macintosh desktop uses shading as its technique. Different GUI applications that run within the same desktop standard may use the same icon to convey different meanings. Microsoft Word uses the magnifying glass to display a WYSIWYG print preview of a document. Others, including Compuserve's Information Manager for Windows, use a similar symbol to search for available on-line services.

Improving Design, Aesthetics and Context Functionality

Shneiderman (1992) offers the following guidelines for icon design and use:

• • Represent the object or action in a familiar and recognizable manner.

  • Limit the number of different icons.

  • Make an icon stand out from its background.

  • Ensure that a single selected icon is clearly visible when surrounded by unselected icons.

  • Make each icon distinctive from every other icon.

  • Ensure the harmoniousness of each icon as a member of a family of icons.

  • Add detailed information, such as shading, thickness, or color.

Additionally, Shirk et al. (1994) offer three psychologically based guidelines to icon designers:

• • Consider a holistic approach to icon design that visually comprehends the essential characteristics of a complete task.

  • Understand all the changes that using an icon will cause before designing how the icon will look and function for the user(s) of the application.

  • Use imaginative processes to help explore and experience icons.

Designers need to be aware of the syntactic, semantic, and pragmatic factors involved when designing icons. Perhaps the greatest factor application developers need to consider is icon dynamics: the activation, dragging, dropping, highlighting, and combining of iconic actions in a consistent, simple, and logical model.

Advances in computing speed and display technology also allow designers to take advantage of animation and context- sensitive help for icons. Spry Software's Air Mosaic browser for the World Wide Web employs an animated globe icon when searches are in progress for Web documents. This helps to give positive feedback to the user about current operations. Microsoft Word uses pointer-sensitive help for its many icons by displaying a small message box next to the icon that provides the user with an instant definition or clarification of the icon's purpose.

New Issues to Investigate

As computing technologies evolve and hardware and software advances are made, the need to effectively understand and implement graphical and iconic strategies in software design assumes a greater importance. However, there are new issues to consider as graphical-computing technology proliferates to the global marketplace: using icons for abstract concepts, enabling the blind to use icon-based applications, and accounting for cultural differences in end users.

Abstract concepts cannot always be displayed in iconic form. A good example is the "Undo" command present in many applications. How does one convey the Undo action effectively as an icon? Many actions do not translate well into visual images. Verbs such as Run, Kill, Abort, and Stop cannot be easily displayed using an icon.

As offerings for textual and keyboard-based applications decline or are ported to a graphical environment, how are blind users affected? Will suppliers continue to offer text-based releases of current applications or develop specialized releases and input devices to accompany graphical applications? Will a touch-screen standard, and an associated raised-icon standard, emerge for the blind computing community?

Finally, the artwork or objects used within an icon can be interpreted differently by different cultures, and by men and women within these cultures. Designers must be careful not to offend anyone that may use their application(s) within this global audience. Using an image of a cow to display a cash surplus in a financial application may be acceptable in the United States, but would it be in India? Always displaying male images for human resource applications can be viewed as sexist. Hutchins et al. (1986) observed that the international iconic symbols for male and female, where the male is wearing trousers and the female is wearing a skirt, are not interpretable to those cultures in which trousers and skirts are not worn.

The use of icons and graphical applications are here to stay. Market forces are causing software suppliers to constantly improve their products, and develop innovative ways to design and use icons to improve the human-computer interface. By paying attention to the human factors involved, the designer can contribute to the success of their company, and the success of the end user.

References

Hutchins, E. L., Hollan, J. D., & Norman, D. A. (1986). Direct manipulation interfaces. In D. A. Norman & S. W. Draper (Eds.), User centered system design: New perspectives on human- computer interaction (pp. 87-124). Hillsdale, NJ: Erlbaum.

Kay, A. (1990). User interface: A personal view. In S. J. Mountford & B. Laurel (Ed.), The art of human-computer interface design (pp. 191-207). Reading, MA: Addison Wesley.

Shneiderman, B. (1992). Designing the user interface: Strategies for effective human-computer interaction (2nd ed.). Reading, MA: Addison Wesley.

Shirk, H. N. & Smith, H. T. (1994). Some issues influencing computer icon design. Technical Communication, Vol. 41, No. 4, 680-689.

Spence, R. & Parr, M. (1991). Cognitive assessment of alternatives. Interacting with Computers 3, No. 3, 270-282. Rogers, Y. (1989). Icons at the interface: Their usefulness. Interacting with Computers 1, No. 1, 105-117.