Understanding Role of Affordance in Design

What are affordances?

Affordances are visual clues in the design. They imply how users should interact with something.

When it comes to everyday life, affordances are everywhere. They’re one of the main differentiators between well designed products and bad ones. For example, take the humble door.

If a door has a handle that sticks out, that’s an affordance. It’s suggesting that you need to pull, and not push.

Go one step further, and think about the handle itself. A circular door knob implies a turning motion. A raised & straight bar implies grasping, and pulling away.

Affordances can be more subtle, too. A door with a metal plate on one side affords you to push it. There’s nothing to grasp, so the action to push becomes the logical assumption.

Ever slammed face-first into a door, trying to push when you should have pulled? That was probably due to bad affordances. The way things look should suggest how they work. It’s a pillar of good interface design.

The Evolution of “Affordances”

In human-computer interaction, we cannot rely on this natural relationship. Aside from touchscreens, interactive elements in screen-based interfaces have affordances that exist in the virtual world alone, and the means of interaction are almost exclusive to this domain. Norman referred to the affordances found in screen-based interfaces as ‘perceived’, on the grounds that users form and develop notions of what they can do according to conventions, constraints, and visual, auditory, and sometimes haptic feedback.

Norman’s distinction between real and perceived affordances is an important one for designers, especially those involved in the development of graphical user interfaces. While we have tacit knowledge of how the perceptible characteristics of physical objects will be interpreted, the design of graphical elements requires an understanding of what the user assumes or perceives will occur as a result of their interaction(s).

Affordances in digital spaces

Digital interfaces are special. They allow us to do things that are limited to a two-dimensional world that is a computer screen. There are so many things we could do within any app, website or program; but they all have one big, crippling limitation: they cannot provide you with physical clues as to what you can do. Instead, they all rely on visual clues or affordances. This can be very tricky if you don’t understand the important role affordance plays in creating successful interfaces.

If you understand how affordances work, you will be able to use them to your advantage. When you can make affordance a tool you will be able to create designs that are intuitive and easy to use. Intuitive designs have this certain appeal to them — most likely because we find a lot of websites or apps tedious and annoying — so it’s really refreshing to use them. Additionally, affordance effects conversions, which matter

Affordances make the ‘interactive stuff’ easier to pick out. They give the users clues about how they should interact… And what will happen when they do. Here are just a few examples of affordances in UI design.

Contrast & depth in buttons

Clever use of contrast, borders and shadows can make buttons feel raised. It gives them the impression of being pushable, just like a real life button.

This is known as ‘skeuomorphic’ design. Adapting the visual qualities of something psychical into a digital interface.It creates an expectation by drawing on a user’s past experiences with a physical thing.

Skeuomorphic design doesn’t suit every design. In a world of minimalist branding and ‘flat design’, it can seem garish. Luckily, we don’t always need to go so far to create decent affordances. Using an interesting shape or a high contrast colour can be enough.

Design choices should be in-keeping the wider look-and-feel. The more ‘noisy’ your user interface, the more prominent you’ll need to be with your affordances.

If your site design is fairly minimal, then you don’t need to put borders and drop-shadows on everything. The important point is that buttons look clickable.

Visible ‘focus’ on a text inputs

Focus refers to which element on the screen is currently receiving input from the user. To show focus on text inputs, most applications show a black flashing line. This is sometimes called the ‘text cursor’. The field itself might also be highlighted in some way.

These characteristics all draw the user’s attention. They hint at interaction.

Search engines like Google will automatically put focus on the search bar. Login or registration forms will do the same on the first field, such as ‘username’. When the user sees this, they know they’re supposed to start typing.

Clear, visible focus helps people know that they’re ready to type. It encourages action.

Iconography for navigation

Pictures tell a thousand words. Using clear icons can help convey a link’s purpose, and reinforce what something does.

Once again, past experiences are important here. Functions and features that are common across websites and apps have become universally associated with certain icons. Think ‘save’, ‘undo’ or ‘refresh’. Make sure you’re mindful of this when selecting a visual language for your navigation.

False affordances

These are affordances that appear to afford one action but actually afford another action or no action at all. A piece of text that is colored and underlined but not linked is a false affordance. A greyed out button which affords the pattern of being inactive but is actually clickable is a false affordance. This is the case on Medium, the ‘Manage Publications’ and ‘Manage Newsletters‘ buttons are greyed out and thus look inactive but they are actually clickable.

How to design the best affordances

When done right, affordances reduce user errors and cognitive load while improving user experience and increasing conversions. Here are some tips to help you design the best affordances.

1. Always put the users first by researching their needs and their context. This information will help you to design helpful affordances for your users.
2. Create logical and clear affordances which will make it easy for your users to intuitively understand your affordances.
3. Use signifiers to provide more information to your users about the affordances you design. You can use text labels, highlights, color and shadows to male affordances obvious.
4. Follow common design conventions to make it easy for users to understand your affordances.
5. Use size to show your users the affordances that they should prioritise.

Thank you for reading and hope you found this article helpful.