Eh, can you use that in a sentence, please?

Affordances are the properties of an object that show the possible actions a user can take with it. Affordances suggest how a user should interact with the object. For example, a button on a website or app could look like it needs to be clicked or pushed, the visual appearance of the button informs the user what interaction & outcome is expected, which in turn form its affordances.

How this relates to UI design

Affordances are super important to designers when building products and interfaces that are intuitive and easy to use. Personally, I see my role as a designer split into 2 separate goals that come together to make functional and aesthetically-pleasing products. Affordances play an important part in the 1st goal, to make things functional.

1) Making sure the product (web site/app/ interface) is easy to use and intuitive.

This goes without saying and it is the foundation on which everything else sits upon. Affordances come into play when considering the elements that make up the interface. A button has to look like a button. In its most basic form, is this element going to do what the user thinks it should do?

If the user has to work out what to do, then you’ve just lost the affordance for that element my friend.

This can also work in reverse. For example, when developing the 1st iteration of our own website, I incorporated some brand elements into a flat visual of one of our pages (see below). When gathering feedback it was pointed out that the small “X” could be miss read as close button by the end user.

To everyone inside Scaffold Digital, this was simply injecting some visual identity into part of the website, because we knew and had been exposed to the brand in its entirety, but to the general public who had never seen our brand before, it read as a close button and served up a moment of confusion. Not what we want from a functional website.

2) Taking what we have in the 1st part and injecting it with some personality, usually from the brand guidelines. Things like colour, type, imagery, etc, to make it aesthetically pleasing.

As mentioned in the 1st point, there is a lot of scope for affordances to slip in the pursuit of designing something “beautiful”, the temptation as designers is to put the emphasis on how the interface looks rather than how it functions. I believe there are a few things which play into this mindset, one of which is a particular workflow – but that’s a story for a different day.

So you can see it’s a fine balance between form and function when designing a UI, as a rule of thumb its always better to start of making sure your elements communicate clearly to the user and they have the correct affordances, then build on it from there. But be careful not to overdo it in the pursuit of the “beautiful” UI. Get it right and your work will shine and stick around for longer, get it wrong… Well you can always upload a shot to your dribble.