The concept of affordances is a somewhat lesser known topic in UI/UX design. However, it plays a key role in how we interact with technology every day.
The term affordance was originally coined by James Gibson in the 1970's to denote action possibilities provided to the actor by the environment. In other words, affordance is when the physical characteristics or properties of an object suggest an intended use for the object. It's much easier to understand through example rather than definition so here are a few in our every day lives:
When we see a keyhole, we intuitively know that we can insert a key into it and turn the knob. There are actually two examples of affordance going on here: one example is the keyhole, the second is the door knob. Keyholes "afford" (are for) keys. Door knobs afford turning.
Another example is a light switch. When you see a switch on the wall you instinctively know there is only one thing you can do with it. You don't need a label or a document to tell you what to do.
Yet another good example is a car door handle. If you've opened a car door even one time, you intuitively then know how to open just about any car door because of the shape, design and purpose of the handle.
Yet More examples
By now you've probably caught on to the idea and can even think of a few more examples on your own.
Affordance in User Interface Design
Affordance in the digital realm is something that software designers should strive to achieve. It's not as straightforward to accomplish as with physical objects but there are still some clear situations where it makes sense to use. I'll cover just a couple of examples drawing from the Giving Change web app that I built in 2017.
The toggle switch pictured above is a UI control that looks and acts kind of like a light switch in the physical world. It is either on or off, there is no in between. It is fairly obvious what you're supposed to do with it; clicking or tapping the control toggles the switch to the only other state that it is allowed to be in. In this case, it even toggles through a slight animation sequence to make it feel even more like a real-world control. This is one example of where affordance can be used in a UI design.
What's commonly knows as a "spinner" control (the pink plus and minus buttons) is another example of affordance in UI design. The acceptable input here in this situation is a whole number. Instead of asking the user to key this in and possibly making a mistake, the UI affords the user the chance to use the appropriate plus or minus button to configure the desired input.
Conclusion
Introducing affordance in any design is always a good idea. It requires less thought from the user and provides a more intuitive experience. Although it can be harder to carry out digitally as compared to the physical world, there are several ways to capitalize on affordance in user interface design. If you are interested in learning more on how I can help you build an intuitive user experience in your own software, please contact me today.