As some who is in to website designing, it is important that you understand how affordances work in interface design. To make things clear and concise, lets 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 button makes it clear that there is need to click.
It is well evident that language plays an important role in letting the users understand and communicate. For instance, when you ask the user to add 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 in how things should be done. However, make sure your design has 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 together. For instance, the logo available at the top most corner of the webpage 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 change in color 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 since years, hence making it is a convention.
As a whole, patterns are best for making things easy on communication part but only when patterns are popular among majority of users. There are some patterns that are being introduced from time to time such as the hamburger menu, which is not that popular among the users. So, when creating design, use patter 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 Web. You must have across some button that you click thinking that it looks clickable but it is not.
False affordance is could be found easily in situations where you see that the details are missing or some link is broken. Other situation is where the colors seem switched. For instance, green, which is good is replaced by red which is bad. Switching the two leads to arousal of confusion amid the users. Nobody would ever like to see false affordances within the designs, so being cautious is the best alternative.
4) Hidden affordance
Hidden affordance deals with the physical objects. However, in 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. Other 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 a design. When you look in to 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 as a guessing game for the users.