Let’s have a look at affordances in the digital realm, specifically how we can take these principles and apply them to the everyday UI elements we create such as buttons, form fields, icons, metaphors and other visual elements.
Affor–what?
Affordances are possible actions between an object and an individual. For example, a door knob affords a twisting motion. Whether or not the individual recognises the possibility of that action is irrelevant--the affordance is still there
A “perceived affordance” on the other hand communicates how the user should engage with it. The user will know whether to push, pull, twist and so on. Perceived affordance should be a combination of actions which are actually possible and those which are simply perceived as being possible.
Signifiers suggest to an individual what actions are possible. In various ways, characteristics of an object suggest to the individual what actions are possible. For example, the roundness signifies that it affords twisting.
Why is Affordance Important?
It might seem like common sense to discuss something like door handles because they are so ubiquitous in our everyday life. But think about new technologies and innovations, such as keyless entry cars. They are new territory for many people, therefore signifiers are vital. A small protruding button may offer clues to its function.
- One press open car door/doors.
- Hold the button to lock the car.
Rather than reading a manual, as users we would look to cues from the past, analogous products, to navigate through our ever-changing world.
Form Design
Affordances are also relevant in User Interface design. In this quick article I will discuss their application in form design (form fields, buttons, navigational elements etc) with some relevant examples, suggesting improvements as I go. As they have no actual physical properties, like in industrial design, what I’ll be referring to is “perceived affordances”.
“Flat Button” Designs
Flat button designs are problematic. They often get lost in the design, instead being interpreted as banner graphics.
The following sign up form (based on an app which will remain anonymous) shows a number of elements..
- Headline
- Input Fields
- Main CTA button
- Secondary Button
There are many different elements here, but little to differentiate between them, so they all blend in. It’s a form, which in itself does suggest that there are buttons and input fields present, but a user may struggle to perceive any of them as “affording” a specific action.
Main CTA Improvements
How might we improve the design so that users more readily perceive the directive to “create account”? It may help to do the following:
- Add a subtle drop shadow to express depth hinting at a “pressing” motion. I’m not a huge fan of drop shadows and gradients, but done in the right context it can improve the perceived affordance.
- Perhaps round the edges and make the button smaller, so that it’s not mistaken as a banner or sub header.
- Definitely improve the contrast. Currently, the light grey and white shades are hard to distinguish against each other. A darker grey will really bring out the button and drive user action.
Secondary Button
This super-minimal secondary button gets lost, and signifiers which would otherwise differentiate it from form fields (inner shadows on the inputs, for example) are missing. Some suggestions for improvement are as follows:
- Rounded corners to signify that it’s a button that requires pressing.
- Proximity: positioning the button closer to the “create account” option would more clearly communicate that it’s related in some way.
- Label: instead of “already have an account”, consider something more straightforward like “login” to signify the action of what the button will do.
Form Field Input Controls
Another form example, this time for entering shipping details. The affordances of form fields seem inconspicuous, however, they can have considerable impact.
Some suggestions for improvements include:
- Consider the fact that the postal code field is the same size as all the other fields. In Australia, the post code is four digits, in The Netherlands six. In any case, postal codes are invariably shorter than the first address line, so a more suitably sized input may make users more comfortable.
- Flat design here can be effective, yet it might be more accurately interpreted as a series of input fields if we add some depth. Some people might perceive these fields as being banners or buttons based on the design from previous pages.
- Greater contrast would improve the readability of the form in general, though this isn’t directly connected with affordances.
Conclusion
In this article we looked at some example forms and how their UI relate to perceived affordances in UI design. Understanding a user’s perception gives you insights into how to design in a clear and intuitive way. Your designs will be less likely to confuse users, rather aiding them in completing the user journey in a logical series of steps.
