Design View | Articles and opinion on design professionalism, technique and culture by Andy Rutledge

No Instruction Necessary: part 1

June 5, 2006

Affordance is one of the more important elements of design; one closely tied to usability. In fact, without proper affordances the rest of the design doesn’t matter—it will simply fail, partially or entirely.

An affordance is a property of an object or environment that indicates how it can or should be used. I noticed that back when I offered my little design understanding test many people commented that they missed the question related to affordance. This was largely because they were not acquainted either with the principles of affordance or simply with the term itself.

A designer’s being unfamiliar with the term is no grave issue (though it suggests some possible issues). After all, it’s not like the term is some sort of shibboleth for the design profession, but an understanding the principles of affordance certainly is. Either way, affordance is something worth examining, so this is the first in a series of articles where I intend to do just that.

Simple Examples

A common object with an obvious affordance is a glove. When you look at a glove, there appears to be one, and only one way to use it. It even sports a near exact form representation of the thing that interfaces with it. There’s no mistaking the hand shape.

So essentially, each website is, to some degree, its own unique environment that must be designed with contextual affordances.

Another common object with clear affordances is a knife. Sharpened metallic objects in these shapes have widely understood uses. Without any instruction, anybody will immediately understand that to use the knife one grasps the handle part and cuts with the sharpened part. One may not be adept at using a knife with any great skill, but understanding how to interface with it is obvious merely because of its physical properties.

An example that everybody cites when discussing affordance is the fixture on a door. We all know how a door works, but knowing whether you pull it open or push it open (or both) is sometimes not so obvious. This necessary bit of information is easily communicated by affixing either a handle (pull) or a flat plate (push) to the door. If you use the correct fixture, there’s no need at all for a sign that says “push” or “pull.”

So let’s examine how all of this is related to website design.

General Considerations and Complications

Basically, an effort at incorporating affordances into a website means first understanding how the site should be used and then designing the interface in such a way as to make that use and the related functions obvious to site visitors. Okay, that sounds pretty simple, but of course there’s more to it.

That whole “site visitors” thing makes it a bit trickier. That’s because it’s not enough merely to make intended use and functionality obvious to you. You know what’s obvious to you. What’s obvious to everyone else, however, is likely a different matter. You have to account for the intended (and sometimes unintended) audience and make use and function obvious to them.

To further complicate things, there is also the issue of real-world context. How a website refers to something or represents something outside of the digital world often has an impact on affordances.

Therefore, you have to know who the audience is and get to know what they find intuitive and what they typically expect in the way of interface affordances. This is because affordances aren’t relegated just to what the physical form allows or suggests. They also include what people may assume based on their own understanding and individual experience. That’s where demographics and user testing comes in handy.

But that’s still not all. You can’t just account for how this target audience uses and understands “websites.” That’s too general. Websites are used for many different purposes and, therefore, in many different ways. So essentially, each website is, to some degree, its own unique environment that must be designed with contextual affordances.

Context

E-commerce sites differ in content, function and interface conventions from, say, the average weblog …which differs even more from the average web-based application. Furthermore, the desired actions that an e-commerce site owner, a weblog owner and a web-based app developer want their respective visitors to take also differ.

And then there is the difference in consequence between these sorts of sites for visitors not understanding and/or accomplishing these desired actions. Consequences are more dire for the e-commerce site owner and web app developer if their sites are not designed with the right affordances.

To further complicate things, there is also the issue of real-world context. How a website refers to something or represents something outside of the digital world often has an impact on affordances.

For instance, a bookkeeping application could certainly have interface elements that would be meaningful in the context of bookkeeping, but wholly unintuitive if placed into an online stock trading application. This could be true even if the function of that interface element were identical in both applications. In this case, the affordance is determined by the application context, not just by the graphic design of the interface element.

Summing Up

Given the above information, it should be clear that at every step in the design process we have to be in the habit of asking ourselves if there is a reasonable possibility that instructions for basic use are necessary. Ideally, instructions for use are superfluous and indicate poor design. This isn’t always so, but it is generally so, especially when we’re talking about fundamental interface function issues.

Website design presents us with all sorts of opportunities for crafting good and bad affordance. These opportunities run the gamut, from simple universal elements, like site navigation, to more context-specific, esoteric and playful elements, like those found in game sites or viral ads.

In subsequent articles we’ll examine some specifics and play with real-world examples.

Archives

Archive

Practice