Affordances: A way to design intuitively

When you see a door you wouldn’t know if you have to push or pull, whereas there are other doors with a knob that seems natural, how are they supported to open? 

Door image from Unsplash

It’s not only about the doors but also about the electronics or apps. 

Finding out the button to turn on your Apple monitor or finding the next button in apps to switch to the next page. At first, it’s confusing, until you figure out the right way to do it. Figuring the right step takes time, but just imaging if your customers are dealing with financial transactions and are stuck with the next step. Doesn’t it sound frustrating?

UX and UI designs are intuitive, but many can hardly describe what is an intuitive design. 

Let’s get back to the example of the door, if one side of the door has the horizontal bar and the other side has the vertical bar, you intuitively push the door side of a horizontal bar and pull the side having a vertical handle. This is because your body knows how to deal with physical objects. The same goes for the car handle or any other intuitively designed objects, like the handle of a teacup, or the chair and table.

This is called affordance, the designs that are built to be natural, and physiologically intuited. The same concept is used in the virtual world that mimics our physiological understanding. We work to get the players to intuit things in the virtual world by trying to link them to their understanding of the real one. This prevails in every kind of game design, from control to mechanics and game design. 

The first and obvious one modern controllers. We can get players to naturally put their hands in the right place on a controller, to play games based around moving, looking, and shooting simultaneously in a 3D environment. While this may be second nature to most of us at this point, getting 3D shooters to feel even remotely right on a console, was a huge challenge at one point. The most modern controller design is based on that problem. 

Look at how the shoulder buttons have evolved to make it more intuitive to rest your fingers there, instead of gripping the side of the controller. The thumbsticks went from being bowed out to being curved so they naturally seem the place to rest the thumbs. 

The concept of affordance goes beyond this, how do we know sci-fi guns in your games, set in the distant future even are guns? They share a shape we already have an association for. 

Affordances are when the object’s sensory characteristics imply the functional intuitively for its use. 

Unlike physical objects, it is difficult to get the same intuition in the virtual world. 

How lost are we with our affordances?

In physical objects, there are 3 types of affordances,

  • Perceptible affordance.
  • Hidden affordance
  • False affordance. 

Perceptible affordance is when the characters of the objects imply an action. Hidden affordance is when the affordances are not so obvious, and False affordance is when it fails to provide results after the action.

Design your affordances or try some templates

Affordances in the digital world

Digital affordance limits us in 2-D screens. Many apps and games use affordances, but they are all visual clues or affordances. In this case, the designers make affordance as its tool to create designs that are intuitive and easy to use. 

Types of affordances:

There are 6 different types of affordances used in interface design.

  1. Explicit Affordance:

Explicit affordance is similar to perceptible in the real world, a button named “Click me” or the text box named “Full name” indicates the use of the button and text box. The language provides guidelines of action. This kind of affordances makes the design intuitive, as your user can do what is needed.

Example of Explicit Affordance

  1. Pattern Affordance:

Pattern affordance sets the conventions, like clicking on the left corner logo brings you to the homepage of the site. A hyperlinked text that is blue and underlined is linked text, a delete button with bin, email represented as envelope or representation of settings in gears. 

If you see the delete button, email does not require the bin image or image of the envelope to work, but this metaphorical pattern is set for a long time. These patterns communicate the mental shortcuts, but it also requires your user’s awareness. More examples like hamburger menu in menus and navigation use in mobile apps are now seen, in websites and webpages. Pattern affordances are used when you know your audiences are comfortable using them.

Pattern Affordance 

  1. Hidden Affordances:

Hidden affordances are available only after actions like revealing the dropdown box only after a click. Mouse hovers. The drawback is, it requires the user to find the hidden affordances, that may not have a hint of its existence. 

Example of hidden affordance in Facebook

  1. False affordance:

False affordance lacks the functionality, like the inaction of button name “click here”, then clicking on broken links in the webpage. The sudden change of button color when it’s not expected. These types are by accident, as the designers are not aware of the affordances or the published build is damaged. 

Example of false affordance

Design your False Affordance for free now.

  1. Metaphorical affordance:

Metaphorical affordance relies on real objects to communicate, like icons in applications, and imitations of real objects like a cart in a shopping app, a bin instead of the delete button.

Examples of Metaphorical Affordance

  1. Negative affordance :

Negative affordances are bad for UX designs. It gives a false impression of what the webpage or its elements can do. For example, an inactive grey-colored button seems to be active after clicking, or the active button unable to process further information as to its presence is of no use. We see these regular examples when we leave the pages and the website whats us to subscribe to their newsletter. Sometimes it gets difficult for a user to get out of this trap as the button indicates otherwise said on the button. 

Nutshell:

Affordances are cues or signs communicated by the objects, so the user perceives them. There are different types of affordance and it’s up to the UX designer to choose the correct affordance at the right place. There are a lot of applications with built-in templates and customizable templates such as Mocky, Lucid chart … You can custom these templates or design as you want with these automatical tools while improving team collaboration.

Design your Diagram, affordances and mockup for free with Mocky for Confluence or Mocky for Jira.

Or contact us for any questions.