Text Link

Why affordances are a crucial part of the user experience

May 27, 2021
Blog CTA to explore endless possibilities and contact us

Affordances are everywhere, not just within digital sources like websites, mobile apps, and software programs. They are visible in physical products and things we use every single day.

So what is an affordance, you might ask? Looking back at the evolution of the term affordance, psychologist James Gibson's first described it in 1979 as the interaction between a person and an object in terms of action possibilities. In "The Design of Everyday Things," UX legend Don Norman used the word in reference to the usability of objects, physical or digital.

A door handle, for example, affords the ability to open a door and enter a space. Other less common types of doors include an affordance like a foot pedal or armbar that allows hands-free access, using either your foot or forearm. The knobs or handles on either side of a sink faucet are affordances that indicate the ability to make water flow instantly, and stop just as quickly.

At 3Digit Creative, we employ the following definition of affordance: an observed characteristic of an on-screen element that makes a potential action clear to the user.
Using something new for the first time can be tricky, whether it's in the real world or a digital product viewed on a computer screen. Decisions for a first-time user can be difficult, and learning curves can be steep, so any little help goes a long way.

Web pages tend to be dense and jam-packed with content and features. In these situations particularly, an affordance needs to be clear and obvious to act as an aid. When carried out effectively, an affordance serves as the perfect nudge. There are many different types of affordances, like clickability, sorting, data entry, and more.
Author and UX expert Steve Krug mentions affordances in his book "Don't Make Me Think," emphasizing the importance of clickable elements on the web. Visual hints on the user interface like shape, location, and format help make that clickable distinction obvious.  

A digital affordance involves the presentation of an element like a button. To indicate that a specific button is clickable, a designer might give it a shadow effect to make it 3-dimensional or invert the button background and text color when a cursor hovers over top. On the other hand, a grayed-out button communicates a negative affordance because it's un-clickable.

Digital forms are excellent examples of affordances too. Text entry fields are distinctive from the rest of the interface, with border outlines to indicate a box and placeholder text within the box to indicate what goes there (like 'email address'). When you click inside the box, your cursor changes from a pointer to a blinking line symbol. All of these subtleties give the user clues about how to proceed in filling out the form.

A good rule of thumb on any user interface is to have two affordances built into a particular element. Consider navigation headings that change when clicked and on hover. Pairing two affordances together, like bold and underlined font effects, is more effective than employing just one. The user should recognize their current location on a website and know where they are going without overthinking.

Here at 3Digit Creative, we pay close attention to affordances in everything we design. With a broad knowledge base of interaction design and ux design principles, we incorporate elements like affordances on a case-by-case basis to improve accessibility and usability.

3Digit is a small agile product design shop based outside of Baltimore, MD. We focus on designing user-centered digital products for mobile and web applications, as well as physical prototyping for early-stage startups and entrepreneurs. Our approach relies on research and rapid prototyping to help businesses turn their ideas into reality.