Landing Page Course Home

Part Seven

Landing Page Design Principles - Direction

The design principle of direction is about leveraging the direction of human (or animal) gaze and graphical arrows (directional cues) to focus your visitor's attention on important page elements such as your call to action. In the video below you'll see how you can use these techniques in your landing page designs to direct attention where you want it.

©2018 - The Conversion Platform for Marketers

Try the Unbounce Landing Page Builder

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


Landing Page Design Principles - Direction - 5:38

Skip IntroMore Design Videos

The design principle of direction. Now there are two main ways you can use this to focus people's attention on what you want them to do on your landing page. There is the gaze off your eyes or your face or gesture. Or there are graphical direction cues like an arrow. You can see here the direction of gaze implies this person is looking over there. It makes you do the same thing.

Take a look at this higher education landing page. You'll notice the direct eye gaze of the person in the photo so you look directly at them. Also, notice that the headline of the page is kind of stuck up at the top of the page out of your direct line of sight. My immediate thought in this page was the direct gaze was a distraction from allowing me to kind of look around at the rest of the page.

Now Andy Stattmiller has a good example of this where if you're doing an ad, a display banner ad, let's say on Facebook, direct eye contact could be a good thing. We're trained as humans that when people look at us we want to look back. Why are you looking at me? This can be great on a busy page like on Facebook because that direct eye gaze can make you look at it.

When you arrive on a landing page, you don't necessarily want that direct eye contact. Instead, you want to try and direct someone's gaze at something important such as the headline so they can read it quickly. Now because I was a little concerned about how this line of page was structured, I ran a five second test to see if I could figure out if there was a problem. A five second test is and experiment where you show people a screen shot of your landing page for five seconds. Then you hide it and you ask them a question or a series of questions to see how much information they can recall. It's a great way of uncovering clarity problems. There are several ways you can run a five second test. Online you can use a tool such as usability hub or you can just use your laptop screen, close after five seconds, or a piece of paper.

In this series of experiments, I ask the same two questions. What course is it? Communication management. And what level is the course? It's a Master's degree. I wanted to see how many people could give me the correct answer after seeing the page for only five seconds.

In the first experiment with the direct eye contact, only eight percent knew what the course was about and 22% knew that it was a Master's degree. That's pretty terrible, right? If this was your page, your course that you're trying to advertise and people could only figure out that much information when they see it in five seconds, that's not good.

When I replace the photo with someone looking at the headline to see if this directional gaze would draw people's attention to that and help them comprehend what the page was about more quickly. You'll see in the results that twice as many people knew what the course was and also more people knew that it was a Master's degree. We're making progress using the design principle of direction.

To take it a step further I added a ridiculous green arrow pointing directly at the headline, I ran the experiment again. Number of people understanding what the course was doubled, yet again. And the Master's degree recollection also went up. That's the power of directional cues and the design principle of direction.

Now we'll jump inside the unbalanced line page build up and I'll show you a really cool technique for focusing people's attention on your call to action using the principle of direction.

All right, we're back inside the Unbounce landing page builder with the landing page we're using as an example throughout this video series. Now I want to apply the design principle of direction to help focus attention on something important on the page. In this case we're going to us the call to action in the top right corner. I want more customers so to draw more attention to that choose and arrow icon from my library. Fix the size and I'm going to position it right there pointing up at the call to action. Now this header has been set up to be a sticky header. It's the one you scroll. It's always there so the call to action is always present.

I'm going to enter the preview mode so you can see how it works and how this directional cue is adding that focus. So now you can see as we scroll this remains and view always drawing attention to that call to action. That's how you can use the principle of direction to focus people's attention.

That's another landing page design principle that you have in your tool kit so please try them out on your landing pages. You'll improve the clarity. You'll improve the impact of the design and ultimately increase convergence.

Video Transcription - The Landing Page Design Principle of Direction