Mobile App Interface Designers Guide to using Affordances

< Blog
Updated on: August 23rd, 2022Ken Braun7 min read
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.

Published on: February 4th, 2015

Related articles

How to convert your website visitors into business leads
4 min read

How to convert your website visitors into business leads

August 23rd, 2022

Potential customers are visiting your website every day. Are you taking advantage of that? If not then you definitely need to read about this awesome new [...]

A quick guide to mobile ux diagnostics
6 min read

A quick guide to Mobile UX Diagnostics

August 23rd, 2022

Mobile UX diagnostics are not a requirement when you are building a mobile website or app, but if you want to put the best product out [...]

Can your employees also be brand ambassadors
7 min read

Can your employees also be brand ambassadors?

August 23rd, 2022

Who are your company’s brand ambassadors? For many businesses that task falls to company leaders and management with the occasional celebrity spokesman for those that can [...]

How to create a successful customer facing mobile app
5 min read

How to Create a Successful Customer-Facing Mobile App

August 23rd, 2022

Customer-facing mobile apps are quickly becoming a great way for a business to connect and communicate with customers. The idea is to create an app that [...]

5 tips to increase social media interaction
5 min read

5 Tips to Increase Social Media Interaction

August 23rd, 2022

Social media offers a unique opportunity for a business to broaden brand exposure which is why understanding how to go about social media interaction properly is [...]

Why should you be using an Android Launcher
5 min read

Why should you be using an Android Launcher?

January 18th, 2024

Are you getting the most out of your smart phone? That is a great question and for those people who use an Android-based phone the answer [...]

Mobile App Interface Designers Guide to using Affordances
Share On:
Newsletter Sign Up

"*" indicates required fields

0 of 60 max characters
0 of 60 max characters

Request a Proposal

Fill Out Our Form & We’ll be in Touch Shortly

"*" indicates required fields

Name*
Type of Project**

New York City
112 West 34th Street
18th Floor
New York, NY 10120
Long Island
991 Main St.
Suite 200
Holbrook, NY 11741
Washington D.C.
1101 Connecticut Avenue NW
Suite 450
Washington, DC 20036
Nashville
424 Church St
Suite 2000
Nashville, TN 37219
Los Angeles
1100 Glendon Avenue
17th Floor
Los Angeles, CA 90024
Miami
1221 Brickell Ave
Suite 900
Miami, FL 33131
Charleston
170 Meeting Street
Charleston, SC 29401
Richmond
919 E. Main Street
Suite 1000
Richmond, VA 23219