As some who is into website designing, you must understand how affordances work in interface design. An affordance, in website designing, refers to the characteristics of the page’s visual elements that direct the actions of the users. Simply put, they are the symbolic instructions that drive the user to act clearly on the web-page. For example, the image of a shopping cart right next to the product image and under its description conveys to the user that he/she can put that product in their cart to buy immediately.

To make things clear and concise, let us have a look at the four most prominent affordances experienced in digital interfaces.

1) Explicit Affordance

Explicit affordance is where the object’s language or physical appearance directly specifies what needs to be done. A raised button stating ‘Click Here’ would be a suitable example that uses language as well as physical cues. Further, the raised appearance of the button makes it clear that there is a need to click.

Explicit Affordance

It is well evident that language plays a vital role in letting users understand and communicate. For instance, when you ask the user to add a full name to some form, there is no way the user would not understand what you mean. Language hence comes out as a clear understanding as to how things should be done. However, make sure your design has a requisite direction to follow and does not solely rely upon language.

2) Pattern Affordance

A pattern affordance is the one that is defined well by mixing elements. For instance, the logo available at the topmost corner of the web-page could be kept clickable. It is sort of a pattern that most of us have seen at several websites. One could further identify the linked content through a change in colour over hovering, text underlined or italic among the body text. Other things that are patterned are the signs, such as envelope for emails and a gear for settings. As suggested in this example, emails are represented as envelopes, but in actual emails do not require the same for representation. It is just a metaphorical pattern used for years, hence making it is a convention.

As a whole, patterns are best for making things easy on the communication part, but only when patterns are popular among the majority of users. Some patterns are being introduced from time to time, such as the hamburger menu, which is not that popular among the users. So, when creating a design, use pattern affordance that the users are familiar with.

3) False affordance

False affordance in the digital world is when the user, by mistake, settles for something other than the expected outcome. An example from day to day routine that explains it well is when you are asked to turn on the lights, but instead, you switch on the TV. You can find such an affordance almost everywhere over the Web. You must have across some button that you click, thinking that it looks clickable, but it is not.

False affordance could be found easily in situations where you see that the details are missing or some link is broken. Another case is where the colours seem switched. For instance, green, which is good, is replaced by red, which is bad. Switching the two leads to arousal of confusion among the users. Nobody would ever like to see false affordances within the designs, so being cautious is the best alternative.

False and hidden affordance

4) Hidden affordance

Hidden affordance deals with physical objects. However, in the digital world, actual affordance is not said to be available until an action has not been taken to reveal it. The best example would be when you are supposed to hover over a button to know if it is clickable. Another example would be the drop-down menus that you cannot see until you click the parent list item.

In most cases, hidden affordances are utilized for easing out the visual complication of design. When you look into the drop-down menu, a drop-down navigator is used to hide all the navigation options. For a user who wishes to navigate somewhere, it has to be done within the drop-down, which they will have to find on their own. This comes as a drawback as sometimes the user fails to find whether affordance exists or not. It might seem like a guessing game for the users.

It is advisable to be wary of these affordances to optimize your website design further, from the point of view of the users.

Previous Next