CS 552, Spring 1998

Guidelines for Icon Design

From K. Mullet and D. Sano, 1995, Designing Visual Interfaces, SunSoft Press.

  1. Determine the essential qualities that should be conveyed by the design. This is typically a short list of adjectives. Also identify any fixed, formal elements - such as a texture, pattern, color, or label - that applies to all icons in the set.

  2. Critically examine each element in the design. Ask yourself why it is needed, how it relates to the essence of the design (identified in the previous step), and how the design would suffer without it. If you can't answer any of these questions, remove the element.

  3. Try to remove the element from the design, anyway. What happens? If the design collapses, either functionally or aesthetically, the element must be included. Otherwise, consider omitting it from the final solution.

From A. Marcus, 1992, Graphic Design for Electronic Documents and User Interfaces, ACM Press.

  1. Analyze the verbal contents and the display environment. Determine how icon parts and complete icons should relate. Icons are often developed in a chaotic manner with elements that may not be relevant, consistent, or useful. Too many parts may confuse the viewer.

  2. Design the initial icons by creating quick sketches. Once the semantic content has been organized, create many quick sketches that may vary from logical abstractions to concrete images. Indicate all visual elements, their approximate size, and their approximate location. It is important not to be too precise or detailed early in the design process. It is more important to explore possible variations. Evaluate which icons seem to meet the needs of the sender, the receiver, the message, and the medium.

  3. Sort the icons into styles. Consistent stylistic treatment has a major effect on the perceived complexity of icons. Styles should be established, in which all the icons are grouped by consistent approach or appearance (for example, curved versus angular shapes). By sorting the sketches, it is easier to keep track of tradeoffs in optimizing the entire set of icons with respect to simplicity, clarity, and consistency.

  4. Design a layout grid that organizes all major elements of the icons. Determine an underlying spatial grid to make consistent all visual components, including point elements, gray patterns, curves, angles, the length and width of rules, etc. It is especially important to use the grid to establish standard horizontal, vertical, and oblique lines and a limited set of sizes for objects.

  5. Use large objects, bold lines, and simple areas to distinguish icons. Once a style of presentation is selected, continue to use the same approach as often as possible within the icon set. Avoid sudden changes in the means of emphasizing or de-emphasizing the importance of certain objects, structures, or processes. Avoid making crucial elements of the icon's significance too small in comparison to the total size of the icon.

  6. Simplify appearance. Icons should be simple and clear. Any extraneous decorative parts should be carefully weighed against the confusion they may cause the viewer. The visual differences in an icon should be as significant as possible from a communication perspective; otherwise, the random or idiosyncratic changes merely add more processing time for the human mind and create a possibility of errors of interpretation.

  7. Use color with discretion Too much variation will confuse the viewer with distracting clutter. In general, for color displays it is reasonable to use five or fewer colors (including black, white, and gray) for icons.

  8. Evaluate the designs by showing them to potential viewers.