Introduction to UX Concepts

By Daniel Pape

Affordance in digital product design is using visual styling to indicate to the user how the elements on your page function. A good example of affordance is the default styling of a hyperlink: blue underlined text. When a user clicks on that word they expect that another page will be opened.

Affordance is important because every time a user is confused about how to continue their user journey they will break down their trust in the website and are more likely not to visit again.

Here are some affordance techniques you can use to improve the usability of your website:

Design for all states

When designing a component ensure they you've designed for every state, such as hover and disabled. It's important to disclose to the user when an option isn't available so greying out buttons that don't currently function shows that the button currently doesn't afford clicking.

Avoid trends

In iOS 7, Apple removed the borders from the buttons, which created usability issues for users. This was to adopt newer trends in minimal digital product design. Visually the product appeared less cluttered and looked less busy, but the usability of the product was impaired by not following the established guidelines that users expected to indicate a clickable button.

Use consistent styling for buttons and hyperlinks

The functionality of a button and a hyperlink are effectively the same: they both allow the user to navigate from one page to another. Ensuring that there is a consistent styling for both elements will help the user understand what will happen when they click.

Use a visual indicator for gestures

Gestures are a hard element of digital design to get correct. Done correctly, they can make interfaces far easier to use and remove visual clutter, but sometimes important functionality can be hard to use if it is hidden behind a gesture. If your interface affords the user to make gestures to navigate through the app, use a visual indicator like the line at the bottom of the iPhone home screen that indicates to the user they can swipe up to unlock their phone.

Return to main site

Related Articles