Landing Page Course Home

Part Seven

Landing Page Design Principles - Affordance

The design principle of affordance is about how clearly the design of an object reflects how it can be used. It can be leveraged to create buttons and interactive landing page elements that appear more clickable. It can have a great impact when used on multi-step process or signup flows, where the situation calls for dominant and subordinate buttons.

©2018 Unbounce.com - The Conversion Platform for Marketers

Try the Unbounce Landing Page Builder

No signup required. Give it a whirl to see what you think.

PLAY WITH THE UNBOUNCE LANDING PAGE BUILDER^ TOP

Landing Page Design Principles - Affordance - 7:41

Skip IntroMore Design Videos

The design principle of affordance. Now, affordance is all about how clearly an object's design infers how it should be used. Think of a round door handle. That implies you can turn it. A flat one, push it down like that, or a door with a handle you pull, a flat panel you push. For a button, the affordance level is concerned with how clickable it appears. We have high affordance down to low affordance. At the top we have a button with some depth. It's got a drop shadow. It's a little bit 3D, and it has rounded corners. That looks like a clickable button. Beneath that we have no drop shadow. It's just a flat button, but it still has rounded corners, so it looks like a button.

Third, we take away the rounded corners, and it's just kind of a rectangle. It doesn't look that clickable. Moving further down we have the ghost button, very trendy. Design trends are a dangerous thing to copy, unless you validate their impact. In this case, you can have a contrast problem with a ghost button, because basically the insides are transparent, so all you see is the stroke, that's the line outside, and the word inside. This is our call to action, CTA. If you watch the video on contrast, you'll understand why this can be a problem. If you have a complex background behind your call to action, it might be an image, it might be a video, that can impact the readability, because that's gonna show through the button.

Now, ghost buttons look really cool, but if they're not done right, used in the right way, they can cause readability problems. From years of using the web, we're familiar that a word underlined is a link, so that as far as text is concerned have pretty high affordance, but then if you remove the underline, this is now essentially just a word, and you have to use color, again, as contrast in order to make that stand out as being different from the rest of the text. So, those are the levels of affordance. Now, how can we use this principle to create a better user experience?

You can use affordance to great effect if you have some kind of flow. This might be a multi-step form or a sign up or purchase funnel, where someone has to go through multiple steps. Typically, in a multi-step process, you can go forward, and you can go back. Look at the top here. There are two buttons that are exactly the same design wise. Neither one is dominant, and without the words on it, there's nothing to really suggest visually which one goes in which direction.

You have to have the words there to understand the meaning of the button, whereas this one here, we have higher affordance here than there, showing that forward progress is he dominant action that you want someone to take, and there's the subdominant action for someone to go back if they need it. But you're applying the principle to move people down your process. Finally, you can add the principal of direction, put some arrows on there to really make it clear that you've got a back and forward movement. That is how you use affordance to create a better user experience.

Now, I'm going to jump inside of the Unbounce Landing Page Builder to show you how to use affordance to create a better experience. Back inside the Unbounce Landing Pager Builder with our optimization kit example for these videos, and you'll see this call to action at the tip. Let's talk about affordance again. This is the scary ghost button. You can see it's hard to read, because it's transparent. Let's give this some more affordance.

The first thing we'll do, we will increase the contrast. Now, it really stands out. Now, we want to give it some depth, so it looks really clickable. To do that I'm just gonna add a box here behind it. Now, you can see it has all that depth. It looks like it's clickable. I'm gonna make it a slightly different color. Okay. So, it's a bit more connected. Now, you can see, it's a big, chunky button. It looks kind of cool. Sometimes you do need this extra button up there, let's say to show someone a demo. This is the sign up button.

You might want a second call to action to watch a demo, but if you remember from the distraction video talking about attention ratio, it's okay to have links on your landing page if they don't take you away from the page. They can jump you around the same page. They can be a document download, terms and conditions, things like that. They're not actual real damaging distractions, and you can also pop things up in a light box, so you can show extra content if you need to without taking someone away.

So, I'm gonna add a secondary button beside this main call to action. I'll duplicate this one. But now we want to make this a ghost button, so that it has less dominance than the main CTA. So, now you can see, as a ghost button, this one look secondary, because it's a ghost button, and this one has the full, high contrast, high affordance, which makes it dominant. Now, to make sure we don't leave the page, we're gonna make this secondary call to action pop up a video player. Over on the right hand side here we can change the action of the button to show a light box. We will create a new light box, which has appeared up here.

So, now, this is gonna pop up over the landing page without taking someone away, and I'm gonna put a video in here to show an example demo. Now, I've just gone to YouTube, and I'm gonna find a video. This is one of my talk videos, and I'm just going to grab the embed code from YouTube and paste that into the video element here. Now, I have my light box with a video all set up, and we'll go check it out in the preview. There we have our secondary CTA. If I click that, we've got my YouTube video embedded in there.

What we've done here is used three design principles. First, contrast. The main CTA really stands out with a contrasting blue color. Then affordance. We made it look like a button by adding that depth to it there, and we used the principle of distraction to make sure any extra links we have don't take us away from the page, in this case, launching a light box for the video. The more design principles we understand and apply together, the better the user experience we'll create in our marketing, and then ultimately we'll increase our conversion rates.

Video Transcription - The Landing Page Design Principle of Affordance