How to perfect UX with design affordances

Default avatar.
June 05, 2015
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 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 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. marketamericaMarket 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. aviaryOne 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 marcschenker​copywriter​.com.

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…