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 Facing whiteboard challenges
https://d33wubrfki0l68.cloudfront.net/bd45e6014eb534d6fcccd1d3a1781d3657d7cf44/ab404/images/headshots/valle-victor-h.jpg

Facing whiteboard challenges

2 Min Read

Liferay.Design

Part of Liferay, IncPowered by Gatsby and Netlify