Mobile App Interface Designers Guide to using Affordances

Why are “affordances” key to being good interface designer? In a nutshell it is because they provide the right clues that allow users to perform the proper actions. Without them, users can be stuck in a dark closet bumping against walls while looking for the door handle.

What is an “affordance”?

This is probably a good place to start for those people who don’t actively use Definition.com for every new word they see. An “affordance” is best defined as those signals or clues that indicate that an object may be used for a particular action or function.

For example, a bench sits around the average height of the knees and provides support to sit on and lean against. You would say that the bench affords sitting. A hammer has a handle that is long enough to be easily gripped by anyone because it is longer than the palm. It affords griping.

There are object all around us that have affordances from chairs to signs that are explicit, to others that are more hidden such as using a shovel as a weapon to strike someone. The term is an integral idea in product design.

How do people understand what to do?

When you are designing for a screen interface there are quite a few ways to get a new user to understand what actions they can perform:

• Follow conventional usage – In regards to the use of images and allowable action, you need to follow what is expected. If you have an arrow pointing left you expect o go left. If you have a scroll bar you expect to scroll using it, not tap it to go somewhere.
• Use words – Things as simple as “Click Here” or “Go back” are a staple in design because they describe the desired action. Of course words alone cannot provide everything. Basic, common words are understood easily as are word graphics, but beyond that you risk overwhelming or confusing people with too many words.
• Metaphors – This can be great when done well, but a metaphor can also be more harmful than useful if people miss the point or take it too literally.
• Coherent conceptual model – This is one of the more valuable ideas where a person learns part of the interface and then the same principles can be applied to the other parts. Of course to teach them the first part of the interface you have to use conventions, words and metaphors!

Understanding affordance in an interface

Interface designers have to use affordances to be successful because of the limited space and dimensions they have to work with. There is just one screen to work no matter what application or website you are on compared to comparing physical objects that might have different sizes, shapes or weight to help a person determine use.

To master interface design you to need to understand how affordance works so you can use it as a tool to make your designs easier to use and encourage users to take the actions you want them to take. The design will encourage the newsletter signup or connection to a social network or whatever your goal is.

Types of affordance

To clarify a bit here, the affordance of a touch screen is fairly simple as you can touch it, tap it or drag on it. With that you mix in various types of signifiers to help ensure that the tapping, touching, or sliding is done the way you want to obtain the result the design wants.

• Pattern -This is one of the most common aspects of design. By now most everyone understands the idea of a navigation bar or a single word in an outlined box or button-ish background. Using this “patterns” that the majority of people understand is an easy way to provide a somewhat complex interface that many people comprehend.
• Plain – Basic and straightforward. A raised button indicates it should be pushed. “Click Here” indicates where to click. Plain, basic, or explicit are all straightforward methods by which anyone should be able to guess at how to interact with a given element. As long as a user understands how to perform the action being directed, this type of affordance can be discovered by the user.
• Hidden – These are a bit more difficult to understand because of the hidden nature of the item. For example, on Pinterest you can favorite an item only after you have hovered over it because the “favorite” option is hidden until that point. They are great for less important actions when space is at a premium and you do not want a cluttered design. This should never be used for important actions. Ideally it should be used in a way that wouldn’t upset a user if they never knew about the action.
• Symbolic – This type of design involves using basic symbols that convey general meaning. By now most people are familiar with the idea that an envelope icon or picture denotes use of an email. A phone handset relates to making a phone call. This can communicate actions quickly and easily in limited space with the only limitation being the number of available symbols the majority of people understand.
• Fake – Anything that appears to be something that should be used but does nothing or something that looks like nothing while doing something. No real pros to using this.
• Negative – Something like an entry box for information that is grayed out would be an example of negative affordance. In that case it would signify that you can’t use that function at this time which is useful. Using this can help prevent frustration because you signal it is not current usable so don’t waste the time.

The bottom line

The better your use of affordance, the better the conversion rates and actions that matter most to the website or app will be. That is why using affordances is a key to a good interface design.