How to perfect UX with design affordances

Affordances in design are important to usability and function. They’re one of the components of design that have to come together to provide an impeccable user experience. To understand exactly what makes them so important, we have to define them.

In the web design world, affordances are elements that users encounter while interacting with the design of a site. They can be:

• call to action buttons;
• icons;
• web form fields;
• links;
• images.

Great web designers should really take the time to understand the concept behind these affordances. It’ll ensure that they build their clients stellar websites that take care of job one: the user experience. The big design rule is always to design for the user experience first and foremost; everything else follows that.

There’s no better way to understand this principle than to intimately familiarize yourself with what affordances are and how to successfully incorporate them in your design.

Physical affordance

Physical affordance is based on an object’s physical appearance. Visually, this type of affordance makes instantly clear to a user what action is expected of him in a design’s interface. These are the most straightforward of affordances, and you’ve likely encountered them many times without even knowing what they were called.

The whole point with physical affordances is that anyone ought to be able to guess what action they can perform just by looking at the affordances, especially those people who don’t have much experience browsing websites. That’s why physical affordances have to be pretty blatant.

Peapod, the home grocery delivery service, uses physical affordances on its homepage. Two huge call to action buttons feature rounded corners and slight shading so they look clickable.

Language affordance

A language affordance is another very straightforward kind of affordance. Essentially, it directly communicates to the user that a button or a field affords a specific kind of action. This leaves absolutely no room to the imagination as to what the intended action is, also making this affordance perfect for people with very little, or even no, site browsing experience.

Language affordance is ideal in interface design when mere, visual communication is insufficient to effectively symbolize what action should be performed. For instance, people who haven’t seen many websites are likely not familiar with the magnifying glass symbol indicating “search” at the end of a search field.

Smart designers will understand this and therefore supply an explicit, language affordance to leave no doubt what the action should be.

Nanamee.com uses language affordance in the search field because there’s a hard-to-miss “Search Images” spelled out. This affordance makes it explicitly clear how to interact with this feature, and is far clearer than simply “Search” or even just an icon.

Pattern affordance

Pattern affordance is perhaps more common in web design than even the aforementioned, explicit affordances. That’s because, as the name implies, designers of all stripes utilize these affordances in their designs without so much as a second thought. Users are able to recognize and understand these types of affordances due to their commonality. Here are some examples of widely used pattern affordances:

• navigation menu or bar;
• magnifying glass icon;
• links;
• downward arrow next to word or phrase.

Pattern affordance can be seen on most any website, such as the one by Market America, a product brokerage and Internet marketing company. Right off the bat, we see exactly where these pattern affordances are in effect.

Market America features a very noticeable navigation bar across the top of the homepage. The magnifying glass icon is at the end of the search bar, which also features the language affordance of “Search Market America.” Then, there’s the downward arrow next to the American flag, which offers users the chance to pick a different site language.

Symbolic or iconic affordance

The affordance in an interface can be communicated simply through a symbol or icon. Sometimes called metaphorical affordances, these affordances rely on real-life, physical objects as icons to quickly tell users what action is expected of them. They work well in many, different instances, some of which you’re undoubtedly familiar with already:

• an envelope to afford sending an email;
• a house to afford going back to a site’s homepage;
• a social media button to take you to a social media stream or channel.

The great thing about symbolic or iconic affordances is that they can be context-based, too. For instance, a magnifying glass in a document-viewing program likely indicates that you can zoom in or out on the document. Of course, if the magnifying glass is next to a search bar, then it’s clearly going to afford searching for a specific word or term.

That’s what makes using symbolic or iconic affordance so convenient. You can say so much, and so much quicker, as a designer than if you had to use text.

One app that could use some work on its affordances is Photo Editor by Aviary. Unless you’re super-familiar with this app or with photo editors in general, you’re not going to understand how to touch up blemishes when you only have a choice between three circles of different size.

Affordances are the key to great UX

Understanding what an affordance is — as well as the specific uniqueness between one type and another — can really distinguish you from other web designers. Think of affordances as the gateway to communication for your users.

Without them, even the nicest-looking design would be totally useless because users wouldn’t be able to make sense of it one bit! Since the user experience is the highest priority for designers, making sure you have a solid understanding of affordances is essential.

When your design’s done, it should be affordances that easily and effective empower users to use your design with the least friction possible.

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at thegloriouscompanyltd.com.