(541) 754-3010
info@cxglobals.com

March 22, 2016

Affordances: Improving The UX Design

Article by: Andres_cxgs
Categories:

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 phras

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.

marketamerica

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.

aviary

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.

Next Steps? 
Talk to Our Experts

We are ready to help! Let´s start growing your business 
SCHEDULE A CALL

Recent Posts

Marketing during the Pandemic: 5 Key Priorities

Marketing during the covid-19 pandemic

Read More
Content Marketing is the Only Marketing Right Now

Our latest global challenges have changed social interaction and how people work, live, and consume goods and services. Back in 2008, online business guru and entrepreneur Seth Godin said, "content marketing is the only marketing left." Ever since, this quote has been repeated by online marketers ad nauseum, and it has been over a decade. […]

Read More
Marketing Transformation: Now more than ever

Recent global events have made one thing clear: digital transformation means survival. Businesses that can run remotely, in the cloud, online, and 100% digital can endure when a major global event forces businesses to close shop and keeps buyers at home. The means to market, sell, and service customers without needing a physical location exist […]

Read More

Next Steps? 
Talk to Our Experts

We are ready to help! Let´s start growing your business 
SCHEDULE A CALL

About Us

CXGlobals delivers world-class creative and strategic solutions across digital marketing platforms. Our audience-first approach means that every idea is grounded in a deep strategic understanding of the target audience and lives in the media most relevant to them.
+1 (888) 612-6018
envelope-ophone-square linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram