Landing Page Course Home

Part Seven

Landing Page Design Principles - Interruption

The design principle of interruption uses visual breaks and separators to enhance the clarity of your landing page. Visual interruption can be a very effective way to separate information into groups that make comprehension easier and faster. In this video, you'll learn how to purposely break the flow of your landing page to make sections more obvious, and simple graphical lines can have a dramatic impact on visual clarity.

©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 - Interruption - 5:30

Skip IntroMore Design Videos

I'm Oli Gardner from Unbounce. And in this video series, I'll show you how to use fundamental design principals to increase the conversions of your landing pages. Whether you're a marketer, designer, copywriter, just a business person; It doesn't matter, because when you understand how design works, you can get more clicks, more leads, more conversions, and more sales from the traffic you're sending to your landing pages. And I'll show you exactly how to do it.

The design principal of interruption. This is a really powerful one. It can really aid the clarity and visual comprehension of your landing page design. If you'll look at these nine squares, they're all the same. They're all hanging out doing the same thing together. But if we add some interruption, everything will change. Simply by adding one line interrupting the layout, we've created two sections that are now different.

These six are grouped together, and these three. We've created separation through interruption. Here's a real-world example of the power of interruption. I travel a lot as a speaker, so I'm in a lot of different hotels and different cities. And this happens to me all the time. I was in Dublin, and I came out of the elevator. I saw the sign on the wall for, pointing to the rooms. I turned the way I thought was the correct way, and walked down the corridor.

And it's not until I saw the pattern of the numbers on the doors that I realized I was going the wrong way. I was frustrated by this, so I took a photo of the sign. And I started running some five-second tests, experiments, to see if there was a design problem with this sign.

This is the sign I was looking at, so I took a photo of that, and I ran a five-second test. If you're not familiar, this is where you show a screen shot of your landing page for five seconds to someone. Then you hide it and you ask a question. So, I asked people, if you are in Room 323, would you turn left or right? Thirty-three percent got it wrong. Made me feel a little bit better that I was walking in the wrong direction, but it was a cue that there was a design problem.

So, I mocked up a version of the sign graphically so that I could make changes and try and improve it. But first of all, with my new graphic version, I ran the experiment again, a five-second test. Same exact result, 33 percent went the wrong way. Now I was convinced there was a design problem. So I ran a few more experiments using four design principals to try and make this experience better.

First principal I used was contrast. And you'll see here, I changed how the headlining looks. I made it bold and bright to stand out, because they're semantically different. This is where we are; This is where we're going.

Then, I used the principal of grouping. And I moved the room numbers closer to their corresponding directional arrow. Finally, I added some white space to give them a bit of separation and visual clarity.

I ran the experiment again; Only eight percent went the wrong way. Making strides here. Finally, I used interruption. I just split it down the middle. These rooms are that way; These rooms are that way. I ran the experiment one more time; Everybody chose the right direction. That is the power of design principals. And when you understand them, you can start applying them to so many different situations. And in particular, when you combine them, they can be very, very powerful.

There are many ways you can apply this to your landing page design. So, I'm going to jump inside the Unbounce Landing Page Builder, and I'll show you how you can use interruption throughout your page to add visual clarity and separate our content.

Back inside the Unbounce Landing Page Builder. Here's our landing page that we're working with in this video series. We're going to use the principal of interruption. Now, if we come down here you'll see ... Here's a page section with a bunch of features, but it just bleeds right into this next page section with the pricing.

So, we want to provide a little bit of interruption there to make it clearer and more easy to separate those sections, because they have a different purpose. So, we'll drop a page section in here, and we're going to change the background to be an image.

I have some background images in here, BG. Let's use this one. Okay, so you can see how it's broken the page down so there's a clear delineation between this section and the next section. Makes it much easier to comprehend all of the content.

And to give it a nice effect, I'm going to add parallax to that. And you'll see in the preview how that appears. Now, we're in preview mode. We scroll down; There, you can see the nice break. And the parallax effect, which is just kind of cook as it switches between one section to the next. That's interruption.

That's another landing page design principal you have in your tool kit, so please, try them out on your landing pages. You'll improve the clarity. You'll improve the impacts of the design. And ultimately, increase conversions.

I recommend you check out You can follow me on Twitter, Oli Gardner. Click that link, up there. It will take you to a preview of the Unbounce Landing Page Builder. You can play around with it, see how easy it is to use. Apply some of the design principals I've been teaching you, and you'll have converting landing pages in no time.

You can check out more landing page design videos down below. If you're watching on YouTube, go to where I'll teach you a whole bunch more about high impact, high converting landing pages.

Video Transcription - The Landing Page Design Principle of Interruption