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 thegloriouscompanyltd.com.

Read Next

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…