We want users to unsubscribe to messages they don’t want; we don’t want them to mark them as spam and hurt the reputation of the sender. We have seen by implementing this unsubscribe affordance in the UI that spam marks go down and in some cases are being reduced by 30 to 40%.

Note: The standard variant of the TextField is no longer documented in the Material Design guidelines (here's why), but Material-UI will continue to support it.

Enclosed text fields with a rectangular (box) shape performed better than those with a line affordance

An example of this would be a button that looks clickable but isn’t, underlined text that doesn’t contain a link, or a TV remote that turns on your lights but not the TV. False affordances are often present by mistake or occur due to lack of effective design techniques.

“when affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.”

For instance, when you see a door handle, you assume its function is to open a door. When you see a light switch, you assume it can be flicked to turn on a light. When looking at a chair, you know it can be sat in. All of these are affordances. Don Norman refers to affordances as relationships in his book The Design of Everyday Things. He goes on to say that, “when affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.”

What is an affordance? An affordance is a compelling indicator as to how an item operates and includes both its perceived and actual functions.

Many designers strive to create products that are so easy to navigate, their users can flow through them at first glance. To design something with this level of intuitiveness, it’s imperative designers understand affordances—what they are and how to use them.