Best PracticesInteraction Design

Affordances by Victor Valle on May 13, 2019

1 Min Read

featured image for Affordances

Summary

Affordances are properties or characteristics of an object that guide an interaction.

Example:
As you can see in the image below, depending on how the pipe is positioned its physical properties suggest us how can it be used.

This is also true in digital interfaces with button, links, checkboxes, radios, etc. The affordances for all basic components like these are already established and accepted. We don't need to recreate them each time, as our users most likely get confused.

Takeaway

  • You don't need to reinvent the wheel with well established components and patterns. However, keep in mind improvements can be made as technology evolves.

  • For new components that you create, find a way that signals to users the intended interaction.

  • Breaking interaction conventions forged along the time make users feel lost or not able to complete their tasks.

Previous

Design At Scale: One Year With Figma

More posts by Victor Valle

image for Multicultural Design Teams In Large Organizations
https://d33wubrfki0l68.cloudfront.net/bd45e6014eb534d6fcccd1d3a1781d3657d7cf44/ab404/images/headshots/valle-victor-h.jpg

Multicultural Design Teams In Large Organizations

2 Min Read

Liferay.Design

Part of Liferay, IncPowered by Gatsby and Netlify