CATEGORY
DID YOU KNOW WE HAVE A PODCAST?

Become a Better Marketer. Anytime, Anywhere.

Listen and learn on the go with Unbounce’s Call to Action marketing podcast. Tune in and get inspired in the car, while you cook, or at the gym.

Affordance: You Can’t Afford Not to Use This Design Principle on Your Landing Pages

Imagine you’re an extraterrestrial visiting earth for the first time. Upon landing, you stumble into someone’s home and find a toothbrush, which you’ve never seen before.

While you may not immediately understand how to use the thing, there are certain clues about the object that hint at how it can be used. Its handle, just a little longer than your humanoid palm, implies that you can grip it.

Similarly, certain types of door knobs provide clues as to whether a door should be pushed or pulled…

push-pull
Images by Jamesbin via Shutterstock.

These visual clues, also known as Affordances, act as signals that an object can be used to perform a certain action. They’re all around us in the real world, but they’ve also bled into the digital realm.

When your visitor first lands on your website or landing page, they’re much like an alien visiting earth for the first time. You need to show them how to use the page by using familiar visual cues.

PSST. You can read all about Affordances and other conversion-boosting design principles in Unbounce cofounder Oli Gardner’s latest ebook, The 23 Principles of Attention-Driven Design.

Let’s dig a little deeper into the world of Affordances and explore how the principle can be applied to your landing pages so you’re not alienating prospects.

What is Affordance?

Cognitive scientist and usability engineer Don Norman first used the term Affordance in his book, The Design of Everyday Things (1988). In it, he quipped:

Affordances provide strong clues to the operations of things. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing. When affordances are taken advantage of, the user knows what to do just by looking: no picture, no label or instruction needed.

So, the door with a handle on it is meant to be pulled, while the door with the plate on it is meant to be pushed. This should be clear without having to expressly inform a user of the purpose of either the plate or the handle.

Perhaps one of the great examples of Affordance in modern digital life is the play button, as you see below.

play-button

There are very few of us who wouldn’t know what to do with that button, and even someone who does not recognize it may be able to easily ascertain its purpose — within a certain context, at least.

The play button drawn on the side of a fence makes little sense, but place it on an MP3 player, and you may be able to guess at its Affordance.

In a nutshell, Affordances should really do two things:

  • Get the attention of the person who should use it
  • Imply its function

With these two principles at play, an object can be used without having to give a user an extensive user manual. Because at the end of the day, your landing page shouldn’t require instructions, right?

Make Affordances on your landing pages explicit

There are certain design features that tell landing page visitors explicitly what they need to do. A blank field begs to be filled in. A three dimensional button begs to be clicked.

As self-proclaimed “massive nerd” and web designer Natasha Postolovski describes in her Smashing Magazine article about the seven types of Affordances on webpages:

Explicit Affordance is signaled by language or an object’s physical appearance. Text that reads “Click here” explicitly affords clicking. A button that appears raised from the surrounding surface seems tactile and affords pushing.

Here’s a good example of that in action on an Unbounce landing page (below). The play button, bold and 3D, explicitly shows that it is meant to be pushed (or clicked).

try-affordance

Similarly, this page from Asana uses a greyed-out mock email address (“name@company.com”) in a box to instruct users on where to put their email address.

asana-affordance

Using visual language that prospects are already familiar provides gentle instruction that makes your landing page easy to navigate. And that sets people at ease.

Beware of Negative Affordance

Just as certain visual cues imply that an object is meant to be used, other visual cues suggest that items are not to be used. Think of a grayed-out “Save” button that only appears once you’ve entered all required information in a form. In her Smashing Magazine article, Postolovski calls this Negative Affordance.

While this sort of visual cue can come in handy in checkout forms, it is more often than not the enemy of conversion on landing pages.

Think of the recent design trend of ghost buttons, for example:

ghost-buttons-affordance

We have been trained to ignore grayed-out buttons, so when a ghost button or button lacking contrast is used, our first instinct is to overlook it.

To add insult to injury, the button copy does a poor job of serving as Explicit Affordance. “Let’s Go” as a call to action does little to inform the user what will happen next.

When in doubt, test your copy. Test your ghost buttons. But err on the side of being as explicit as you can.

Applying Affordance on your landing pages

Affordances are found everywhere. You can see them on your stereo, your iPad, entranceways and on roads.

When used effectively, they show people how to use an object intuitively. When used poorly, you make your visitors feel like aliens from another dimension.

You want your landing page to be so simple to use that even the kid in the Far Side cartoon above could successfully complete and submit a form on your landing page.

Of course, there are many other principles to consider when designing your landing page. To learn more about using design to convince and convert customers, check out Oli Gardner’s latest ebook, Attention-Driven Design: 23 Principles for Designing More Persuasive Landing Pages.

Get Your Free Guide to Attention-Driven Design

Learn the 23 visual principles for designing more persuasive landing pages



About Mark John Hiemstra
Mark John Hiemstra is a content marketer who formerly worked out of Unbounce’s Montreal office. A writer by day and a reader by night, he is loathe to discuss himself in the third person, but can be persuaded to do so from time to time. Find him on Twitter here: @markjohnh
» More blog posts by

Comments:

  1. Veronika Sudi

    Hi Mark,

    Great article. Let me add a small note to it: Don Norman since then has reviewed his work on affordances and has introduced the word of signifiers referring to the technological changes and social interaction.

    “Social signifiers replace affordances, for they are broader and richer, allowing for accidental signifiers as well as deliberate ones, and even for items that signify by their absence, as the lack of crowds on a train platform. The perceivable part of an affordance is a signifier, and if deliberately placed by a designer, it is a social signifier.”

    You can find his article here: http://jnd.org/dn.mss/signifiers_not_affordances.html

    (5)
    Reply
  2. Azizul Yusof

    Affordance, a new word to me. Sounds like it is something that we are already familiar with its function and we don’t need to be guided on how to use it (Play Button, Door knobs…)

    (2)
    Reply
  3. Giampaolo

    Interessino: I haven’t thought about negative affordance.

    (1)
    Reply
  4. Netta

    Mark – I just want to say that I loved the intro so much. You defined affordances in both a clear and fun way. I’m definitely going to remember that one :) Thanks!

    (1)
    Reply
  5. Nicholas Scalice

    Excellent post! Very important for anyone interested in usability testing to read this. Thanks Unbounce!

    (1)
    Reply
  6. Raul Tiru

    This is an incredibly helpful article. The introduction really nailed it. Up to reading the E-book!

    (0)
    Reply
  7. Rita Iyer

    Explained very nicely, Affordance. Thank you for sharing it, useful for people in social media.

    (0)
    Reply
  8. sonali singh

    your blogs are always use full to me. it gives me great idea thanks for sharing your ideas.
    I love reading your blogs.

    (0)
    Reply
  9. Free Website Template

    Great blog! Most people don’t have the tools, time, or money to create and customize website, and also most people will not have a tough time designing a website. It takes learning a little bit about how they’re made, and you’ll find that you can design a site soon enough to bring in visitors to your new site. But this information above is very helpful. And in some option, I can bring you to get you going in the right direction.

    (0)
    Reply
  10. Monse O.

    Here’s another resource that is really useful when it comes to Landing Page optimization!

    https://ontraport.com/tools/blueprint/the-ultimate-blueprint-to-landing-page-optimization

    (0)
    Reply
Comments