Definition:

Affordance is the influence the physical characteristics of an element or environment have on the user's ability to know how to use it. Buttons look like they can be pressed, objects with round shapes on the bottom look like they can be rolled and drawers with handles on them look like they can be pulled out.

Interaction Design:

Interaction design often involves buttons that the user can click to invoke an action. This digital representation comes directly from it's physical counterpart because the affordance is so high. Shadows and gradients on these butons are very important because they mimic real buttons, and are the only clues that show what's a button and what's just an area on the screen. The design of the new form submission buttons on the Rackspace Cloud Apps Control Panel have been meticulously designed to look clickable when they're allowed to be clicked, and to look clearly disabled when you can't.

User Experience Design:

Affordance rules are often broken in the kitchen. Imagine you are at a friends house and need to find a spoon. From your previous experience with your own kitchen, you know that silverware drawers are commonly very wide. You reach for a drawer near the sink and pull. It seems stuck. You pull again. After a few puzzled seconds, you realize that this drawer doesn't pull out because it's purely decorative — the sink's internals are behind it. In this case the (poor) designer decided (erroneously) that uniformity between cabinet units was greater than the experience of finding an object in a drawer. This may seem like a very insignificant event— and it is — but why place a knob on a drawer that doesn't function. If it looks like a knob, it should function as a knob. Once a few of these hiccups happen to a user while experiencing your product or environment, it starts to add up.