Skip to content Skip to navigation

Universal Principles of Design

In the book Universal Principles of Design, William Lidwell, Kritina Holden and Jill Butler cover 125 design concepts that apply to a variety of different disciplines including graphic and user-interface design. This is a summary of the concepts that can be directly applied to icon design and research.

Classical conditioning is a method commonly used in animal training. Associating a neutral stimulus with a positive stimulus which triggers a desired action, can over time lead to a situation where the positive stimulus is no longer necessary. The neutral stimulus becomes adequate to trigger the response.  With humans it would mean associating a product with positive images and feelings. Similarly the method might be useful in helping users learn to use new icons through positive stimulus in the learning phase.

Contour bias is a tendency to favor objects with contours over objects with sharp angles or points. When presented with objects with sharp angles or pointed features, a region in the human brain that's involved in fear processing, called the amyglada, is activated. When test subjects are presented with similar objects that are angular versus contoured, they prefer the round object. This could also be applied to icon design. Angular designs attract attention where as contoured features generate positive reactions.

Exposure effect is a phenomenon somewhat similar to classical conditioning. It happens when a person is repeatedly exposed to a stimuli that is neutral or positive. In practise this could mean repeating a slogan, advertisement or song. However, if the stimuli is negative the effect can be opposite and the negative reactions can be amplified. Like classical conditioning exposure effect might be applied to icon design, where a new icon design is repeatedly used and over time it becomes accepted.

Form follows function – the phrase popularized by modernist architects in the early 20th century states that functional considerations should be primary in design and aesthetic considerations secondary. It also implies that beauty can be achieved through purity of function. In icon design legibility and functionality should also be the primary concern. Visual effects and pretty graphics are secondary.  The form follows function principle is somewhat contradictory to the aesthetic-usability effect which is a phenomenon where people perceive aesthetic designs as easier to use.

Iconic presentation is the cornerstone of the use and design of interface icons. In their book Lidwell et al. present four distinct types of iconic representation which are derived from Yvonne Rogers' work "Icons at the Interface: Their usefulness" (Interacting With Computers, vol 1. p. 105-118).

  • Similar icons are visually analogous to an action, object or concept. This type of icons is most useful for simple actions. For instance associating a curved arrow with a sharp turn. It's less effective with complex concepts.
  • Example icons use images of things that are closely associated with an action, object or concept. Think of a picture of a plane representing an airport. These icons are good for representing complex concepts.
  • Symbolic icons use images that represent their object at a higher level of abstraction. They are good when actions, objects or concepts involve well-established and easily recognizable objects. For instance a padlock as a symbol for locking a cars doors, or a picture of lightning as an icon for electricity.
  • Arbitrary icons bear no resemblance to the targeted concept. The relationship has to be learned. They are mostly used when developing industry standards that will be used for a long period of time. Meaning that people will have time to learn the meaning. Mostly used for concepts that are otherwise impossible to depict. The icons for radiation, Male, Female are examples of this category.

Mimicry means copying the properties of familiar objects in order to give an affordance how another object can be used. The desktop metaphor of computer interfaces is a good example of mimicry. More specifically surface mimicry, which is subscribed as making a design look like something else. Other types of mimicry are behavioral mimicry and functional mimicry.

Behavioral mimicry is explained as making a design act like something else. The goal of behavioral mimicry can be to improve the likeability of an object or a product.
 
Functional mimicry means making an object work like something else. For instance the interface of a new device can mimic that of another commonly accepted device in order to make learning to use it more simple.
 
Propositional density equals the number of deep propositions relative to the number of surface propositions. The higher the density, the more interesting a design is. The concept is commonly applied to logo design but is also applicable to icons. Deep propositions are the underlying meanings of elements where as surface propositions are perceivable elements of a design.
 
Consider the Whatsapp icon. There are two surface propositions, a speech bubble and a classic phone earpiece. The deep propositions would be conversations and phone calls. Thereby the propositional density is 2/2 which equals one. Propositional densities in logos can be higher, with values up to three and beyond. In the best case the density in an icon shouldn't be less than one.That is, there should be no elements that don't relay a meaning.

Similarity means that elements are seen as being more related to each other than dissimilar ones. Similarity is one of the Gestalt principles. In icon design similarity can be used to create a connection between icons that are used for functions or objects that are connected.

Resources: 

Lidwell, W., Holden, K. and Butler, J. (2003). Universal Principles of Design. Massachusetts. Rockport Publishers.

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

Privacy policy