Skip to content Skip to navigation

Graphic Design for Electronic Documents and User Interfaces

Marcus' book from the ACM tutorial series is a compilation of practical guidelines for the design of digital user interfaces. Published already in 1992, it partly contains advice that are not relevant today, but it also contains general design instructions that are not restricted to time. Parts of it also concern the design of interface icons.

According to the author, at the time of the writing, the expansion of the use of digital interfaces would provide commercial, cultural, technological, political, and educational incentives for a more systematic approach to icon design.

Marcus recognizes three major questions concerning the use of interface icons:

  1. "What exactly are icons and symbols?"
  2. "How can we best use them?"
  3. "What should they look like?"

An often overlooked aspect of the term metaphor in interface and icon design, are spatial metaphors. Visual properties, such as drop shadows, Beveled edges, highlighting, lowlighting, shrinking, and growing, are used to help the user understand the implied spatial aspects of the working environment. These can be metaphors within a metaphor, an illusion of space within the desktop metaphor. According to Marcus the spatial properties can be used for the following purposes:

  1. "Distinguish various elements on the screen"
  2. "Help the viewer to recognize particular classes of objects"
  3. "Add charm or appeal to the design style of the user interface"
  4. "Convey corporate or product design conventions"

Refering to Gibson's 13 principles of spatial depth cueing in Edward Hall's The Hidden Dimension, the following methods are listed:

Position

  • Texture: gradual increase in density of texture of a receding surface
  • Size: gradual decrease in size of distant objects
  • Linear perspective: parallel lines receding to vanishing points

Parallax

  • Binocular perspective: an image with shifted object locations for each eye
  • Motion perspective: objects moving at uniform speeds appear slower if distant

Cues independent of the position and motion of the viewer

  • Aerial perspective: increased haziness and bluish color with distance
  • Blur: objects nearer or more distant than the focal plane appear fuzzy
  • Vertical location: lower part appears nearer, the upper part farther away
  • Shift of texture or linear spacing: abrubt changes appear as depth shifts
  • Shift in double imagery: in distant views, nearer objects have doubling gradient
  • Shift in rate of motion: close objects move much more than distant objects
  • Completeness or continuity of outline: nearer objects overlap others
  • Shift of light and dark: abrupt changes appear as edges, gradual changes as roundness

Symbolism

According to Marcus interface icons and graphics in general serve to provide functional guidance aesthetic charm, and support corporate or product identity. Refering to traditional semiotics Marcus describes the three recognized sign types: icon, index, and sign. Icons look like what they stand for, they are representational and easy to understand. An index has a causal relation to its referent. The example that Marcus gives is how a muddy trail of footsteps can be an index that children have entered. Symbols are described as completely arbitrary in appearance, and the association of symbol and its meaning must often be learned. Marcus states that the term "Icon" as a single term to stand for all the semiotic sign types was established as the use of the term spread in advertisement and literature about Xerox Star, Apple Lisa , and Apple Macintosh. Four other, more technical, semiotic terms are also described: lexical qualities, syntactics, semantics, and pragmatics.

Lexical qualities in this context refers to how signs are produced. For instance are they constructed of pixels or vectors. Syntactics refer to the visual qualities or appearance of the sign. What color is it, and what types shapes it consists of. Semantics here stands for the meaning of the sign – what does it stand for. Pragmatics deals with the practical aplication and limitations for the sign. For instance how the physical display device affects the use of the sign.

Advantages and disadvantages of interface icons

In addition to their visual appeal, icons can be more compact then text labels and they are potentially not restricted by what language the user understands. According to Marcus, well designed icons can also be more rapidly recognizable than than written text. Icons may also be used to support textual information. However, icons can not completely replace written text in interfaces. The use of icons always requires a certain amount of extra work and learning. Existing icon systems do not contain readymade icons for every situation. And even pre-existing icon sets must be re-designed to match the style of the application or brand. Marcus compares the design of a icon system to the design of fonts. He recognizes consistency, clarity, simplicity, and familiarity as key attributes of icon design. 

Color

Marcus introduces the following ten commandments for the use of color.

  1. Use a maximum of five plus or minus two colors. Since short-term memory can accommodate seven colors, this should be the maximum number of distinct colors. Additionally, when organizing a large set of colors, they should be organized according to the spectral sequence (red, orange, yellow, green, blue, indigo, violet). According to Marcus viewers see it as a natural order.  
  2. Use foveal (central) and peripheral color appropriately. The physiology of the human eye should be considered while selecting colors. There are fewer blue-sensitive cones in the eyes retina. Therefore, blue colors should be only used for large areas instead of small details. The center of the visual field is sensitive to red and green colors, whereas the periphery is less sensitive to them. The periphery is more sensitive to black, white, yellow, and blue colors. Sufficient hue and value contrast should also used to distinguish colors. Small variations in the amount of blue will appear fuzzy due to the physiology described above.
  3. Use a color area that exhibits a minimum shift in color and/or size if the color area changes in size. In practice this translates to – use light text and figures on dark background, if the viewing situations are dark. In light viewing situations, use dark text and figures on light backgrounds.
  4. Do not use simultaneous high-chroma, spectrally extreme colors. 
  5. Use familiar, consistent color codings with appropriate references. While color can be used for both qualitative and quantitative coding either independently or in a redundant manner, cultural color denotations and connotations should be considered while selecting colors. 
  6. Use the same color for grouping related elements.
  7. Use the same color code for training, testing, application, and publication. Continuity in the use of colors should be established in all form of media that is related to the interface or product.
  8. Use high-value, high-chroma colors to attract attention. Additionally, according to Marcus, older viewers need higher brightness levels to distinguish colors. Similarly, the ability to distinguish colors gets weaker also with younger viewers over long viewing periods.
  9. Use redundant coding of shape as well as color, if possible. This is especially important for users with color-deficient vision and helps to tackle poor lighting conditions or any shortcoming in the display device.
  10. Use color to enhance black-and-white information. Use of color can make the user experience more pleasant and thereby promote usability or learnability. Marcus also states that memory for color information appears to be superior to that for black-and-white.
Resources: 
  • Marcus, A. (1992). Graphic Design for Electronic Documents and User Interfaces (1st ed.). New York: ACM Press.
  • Hall, E. T. (1982). The Hidden Dimension. New York: Anchor Books.

The content of this site, if not otherwise stated, is shared under the Creative Commons Attribution-Noncommercial 3.0 License.

Privacy policy