StomperNet Design Tactic #1: Understand F-Patterns
Several eye tracking studies have revealed that most website visitors don’t read website pages the same way they read books or magazines. That is, top to bottom, left to right.
Instead, website users tend to read pages in an F-Pattern… That is, they read in horizontal “sections”, and read less and less of each line as they read down the left side.
Here are some examples:
Notice the pattern? Although it’s more pronounced on some pages than others, it’s still unmistakable.
So how do you apply this to Sales, Squeeze or Landing pages?
Here is an example of a page I designed recently for a launch:
PPC Classroom Sales Page, February 2009
Notice how much attention I paid to F-Patterns as I laid out the most important elements of the page? Starting at the top left, the first thing people see is the company logo (My clients were building a long-term brand with this business, so this was important to them. Then, as you “F-Pattern” the rest of the page – notice what sticks out…
“Discover the secrets”…
“Interactive eLearning system”…
“Claim your Free DVD”…
“Proof Positive”...
These four things (along with the logo) were the five most important items we wanted to communicate with the entire page. The platform (the eLearning system) was a huge selling point, and the Free DVD was integral to the offer…
And the entire offer hinged on the massive proof that we had from students who had previously taken the course. So of course “Proof Positive” is in the headline.
(By the way, this page converted well over 12%… And I bet my bottom dollar our close attention to F-Patterns was partly responsible for the massive conversions.)
Here is an example of the exact opposite:
(Some random site I found on the Internet… YIKES!)
It looks like an e-Book threw up on this page.
What happens when you F-Pattern this page? Nothing! You get the word “Congratulations!”
This page is simply too busy and too poorly designed to work well.
The bottom line here is that understanding F-Patterns can make a huge difference in your page conversions. Just keep the following in mind…users won’t read your text word-by-word.
You need to make the first three-five words of each focal point really, really good.
The first two paragraphs should state the most important information. Make sure to start subheads, paragraphs, and bullets with enticing words that users will notice when scanning.
StomperNet Design Tactic #2: Give People What They Are Used To.
Famed Madison Avenue Advertising Legend David Ogilvy once said:
“The eye is trained from an early age. Move away from what the eye is used to, and you stop readership.”
I couldn’t agree more, and all my testing and tweaking over the past three years has proven it time and time again. You have to meet people where they are and give them something they are familiar with.
And in many cases, this means building an “Internet Marketing” looking page… Even if it’s NOT a sales letter. Build your blog posts, and content pages the same way, too. Create your product content in the same format.
People are trained to read bigger, bolder words… so make your headlines bigger and bolder. Make them red, too… so they stand out (More on the color Red in a minute) from the rest of your text.
Give your sub-headlines and paragraph titles a bit more emphasis than your regular body copy…
And use plenty of whitespace so your page doesn’t look crowded.
Keep is simple and create a familiar hierarchy with your content.
When it comes to font use, I suggest you use Sans-Serif fonts for your headlines and sub-headlines, and Serif fonts for your regular in-line body copy.
Sans Serif fonts are fonts without those little doo-hickeys on the tops and bottoms of the letters. Serif fonts have the extra little “embellishments.

So for headlines and sub-headlines, use fonts like Impact, Tahoma Bold, and Helvetica Bold.
For your regular in-line body copy, use Serif fonts. Serif fonts have been used in print for years (Magazines, Newspapers, books) and have been proven to create higher readability. This includes fonts like Courier New, Georgia, and Times New Roman.
StomperNet Design Tactic #3: Use Colors!
Most marketers throw a couple outsourced “mini-site” graphics on their page and hope for the best.
But not you, my fellow readers. Because you’re about to understand the unlimited power of using the correct colors to market your products.
You see, colors create immediate subconscious reactions in people. Some colors set off warning bells, others trigger the libido, or even make you feel safe.
And just like with well-written copy, you can often use color theory to slide right in under the radar and get into your prospects minds to influence their buying habits.
I know, I know… You might be thinking “That sounds creepy” but I assure you it’s not. You will simply have an edge because you understand how people tend to react.
Take Blue for example:
Blue is, obviously, the color of the ocean, and also the sky.
It should come as no surprise then that Blue is proven to work well when promoting air and sky products (airlines, air conditioning units, fans, air filters, etc. etc.) and also water and sea products (cruise vacations, water filters, boats, bottled water, etc. etc.)
Blue is often associated with depth and stability. It automatically evokes emotions of trust, security, intelligence, peace, and loyalty in people.
On the other hand, avoid blue when promoting food and cooking products. Blue suppresses the appetite.
Red is often associated with passion, desire, war, danger, strength, power, and love.
Are you surprised that Red works well in the dating and seduction niches? You shouldn’t be. Red also works well with products like energy drinks, automobiles, and items related to sports and action.
Most traditional designers (Print designers, for example, working in design houses or advertising agencies) understand Color Theory…
But the average person who puts up a blog or website most likely doesn’t know these things. They might put up a blue cooking blog and never understand why they aren’t getting sales.
It’s because of color.
Want some more examples?
Bright yellow is an attention getter, which is the reason taxis are painted this color. When overused, yellow can have a disturbing effect. Tests show that babies cry more in yellow rooms.
Yellow is seen before other colors when placed against black; which is why this combination is often used to issue warnings.
Men tend to see yellow as a lighthearted, ‘childish’ color, so it is not recommended to use yellow when selling prestigious, expensive products to men. This explains why you don’t ever see Yellow in high-end watch advertisements, or advertisements for expensive cars.
I could go on and on about color use, but it’s probably about time for me to wrap things up. Here is a short list of common emotions associated with other popular colors:
- Black – Power, class, seriousness, drama, sophistication, and boldness. (Prestigious products)
- White – Purity, peace, cleanliness, freshness. (Great for medical products and weight loss products)
- Purple – Sophistication, royalty, mystery, spirituality. (Great for Yoga products)
- Green – Freshness, safety, growth, vitality, calmness, prestige. (Great for Drugs, Medical products, and Nature and Natural products as well. Use Darker Green for Financial or Make Money products)
- Orange – Enthusiasm, fascination, happiness, creativity, determination, attraction, success. (Works great for toys and puzzles.)
|
Hopefully this quick look at color helps you start thinking about these things when you design your marketing collateral. Keep in mind that this is only a rough guide: There are hundreds and hundreds of books about the psychology of color and how it affects buying habits.
I will include some additional resources at the end of this article for you Stompers who want to learn more.
Summary
Pay close attention to where you position things on your pages. Follow an F-Pattern with your layout to make sure the highest number of people possible sees your vital information.
Use fonts people are familiar and comfortable with, and above all else make sure your creatives are easy for people to look at and consume.
Use colors that create positive emotions with your audience and frame them towards buying what you are offering. |