Affordances
Affordances are at the heart of every call to action. How do your users know to click, press, swipe, tap or un-box a feature? One of the ways is an element in your design that screams “use me this way”. In this episode, Frank talks more about how important affordances are in your design. Please post your comments below, we would love to hear your thoughts.
Transcript of video above…
Affordances
Frank Spillers, founder of Experience Dynamics, and it’s time for this week’s UX Power Up.
So, in today’s session I’d like to talk to you about Affordances. Affordances are one of these things in interaction design that are important because they’re the things that give us indication of what’s actionable, what’s clickable, what’s selectable and what’s a call to action on your screen. So the classic example of an affordance – or what Don Norman, the founder of User Centered Design said, he called it a perceived affordance, so it’s not necessarily something that looks actionable but that you perceive as such. Think of the door, so you have push / pull. So with this door, which one is the push and which one is the pull? The correct answer is the plate is your push and your handle is your pull. But when you go to a door that uses the opposite, that uses the handle for the push, it can be confusing. And then sometimes on those doors you see like a little arrow saying “Push” or “Pull” and so that’s the help strategy, right? Giving you that, oh it’s not intuitive, so I have to tell you. So affordances should be intuitive in designs. Whether it’s door handles in the real world or it’s buttons on your site.
Let’s look at examples of affordances. The most common one is the button. So, a button should look like a button. That means that 3D, bezeling, outlining, shading, your button might have an additional icon in it like Amazon does.. it has a little shopping cart. It might have an arrow there. Something to call attention to the fact that it’s a button, as opposed to just a link or a small piece of shaded area on the screen, like a little box of blue or something. The other thing, of course, is links. Links should look like links. They should look clickable. So you have to be careful with your style sheet if you are making your links kind of subtle because it adds to the overall nice look and feel of the site, you might actually be watering down you affordance with a link. So affordances, again just in summary, are those things which we perceive as actionable, those things that look like they’re clickable – such as a button, such as a link. And if you’re thinking mobile, for example, a quick example of a pull down menu, or a selectable slide up type of control… this is the one that’s most commonly used in mobile, should look like it’s something that you can move or drag. Another one would be an object that you can move or drag, or open up in a collapse / expand type example. So those are all examples of affordances, whether in mobile or whether on your site, or even in the real world. Next time you go to that door, maybe it’s at your office or a hotel and you push and it’s supposed to be a pull or vice-versa, just think of the affordance that needs to be intuitive in your design as well. Thanks a lot, we’ll see you next time.
