Perceived Affordance and Four Principles of Screen Interface Design

Psychologist James J. Gibson originally introduced the term “Affordance” in his 1977 article “The Theory of Affordances” and elaborated on it further in his 1979 book The Ecological Approach to Visual Perception. Gibson defined affordances as all “action possibilities” latent in the environment, objectively measurable and independent of the individual’s ability to recognize them, but always in relation to agents and therefore dependent on their capabilities. For instance, a set of steps which rises four feet high does not afford the act of climbing if the person is a crawling infant.

Other scientist and designers have elaborated on this idea and applied it their area of interest but in the design world, it is Dr. Donald Norman use of Affordance in The Design of Everyday Things (1988) that we discuss today.

Not “Affordance” – what is physically possible, but Perceived Affordance – what actions we perceive are possible is what interest design. Donald Norman says it best in his essay Affordances and Design:

“In product design, where one deals with real, physical objects, there can be both real and perceived affordances, and the two need not be the same. In graphical, screen-based interfaces, all that the designer has available is control over perceived affordances. The computer system, with its keyboard, display screen, pointing device (e.g., mouse) and selection buttons (e.g., mouse buttons) affords pointing, touching, looking, and
clicking on every pixel of the display screen.”

Donald Norman has given us four design principles for screen interfaces:

1. Follow conventional usage, both in the choice of images and the allowable interactions. Those who violate conventions, even when they are convinced that their new method is superior, are most likely doomed to fail. Most people don’t like change. Conventions will slowly change – for example, breadcrumbs were not understood when they were first introduced. Only “Power Users” understood and used them so they reserved as a secondary form of navigations. Today, breadcrumbs are often used as a primary form of navigation.

There are sometimes radical changes in convention but they are rare and there is usually a great deal of iterative prototyping and usability testing to create game changing conventions. The iPod click wheel is a good example.

2. Use words to describe the desired action. For example, state “click here” on or near the object that you desire your audience to click. In addition to words, what action and where it is to be done must be clearly understood. Conventions like highlighting, or outlining, or depiction of the actionable object helps.

Research has shown that single word labels fail for most people – use as many words needed to describe the desired action. Be specific. Ideally your audience shouldn’t have to read anything else to understand what they need to do to accomplish their goal – and they are far more likely to read the labels than static text.

Words do cause problems with international adoption… Thus, road signs use international standard of graphics. Unfortunately, most people do not understand those standards. And words are understood more quickly than graphics — even a well known, understood graphic – so words plus graphics are a better bet.

3. Use metaphor. Metaphor is both useful and harmful. The problem with metaphor is that not all people may understand them. Worse, they may take the metaphor too literally and try to do actions that were not intended. The best way – the only way – to ensure that your metaphors are understood by your customer is conduct the appropriate research and iterative prototyping and usability evaluation.

4. Follow a coherent conceptual model so that once part of the interface is learned, the same principles apply to other parts. Coherent conceptual models are valuable and necessary but there still remains the bootstrapping problem… how does one learn the model in the first place?  By conventions, words, and metaphors.