In “Web Design Principles to Improve Conversions: Part 1”, we discussed above and below the fold. We also found out that putting all content above the fold doesn’t apply to most websites; and we’ve got samples to prove it. We also looked at how to create a professional looking website by working with whitespace or negative space.
In this article, I will discuss working with fonts and how to use them to compel action. Next, I’ll expose why working with the right combination of colors is the right thing to do. Lastly, I’ll give you a simple web design layout to improve your conversion by observing how your visitors scan your site.
Are you having a hard time convincing people to fill an application form? Is your headline readable enough to encourage interaction? Does your blog attract readers in droves?
If not, maybe you should be looking at your fonts.
Researchers Hyunjin Song and Norbert Scwarz conducted 3 studies to show how fonts affect comprehension, commitment and impression. In the first study, they asked a group of students to read two sets of exercise routine printed in: a) Arial, 12 point and b) Brush, 12 point. The students were to estimate whether the exercise is easy to follow or not based on how the manual was written.
In case number 2, the students were asked to read two versions of a Japanese roll recipe printed in: a) Arial, 12 points and b) Misral, 12 points. The participants were asked to estimate how long to prepare the dish and their willingness to do so.
In case number 3, the students rated how much skill is involved in preparing the dish based on the materials they’ve read.
Here’s what the researchers have found out:
Their special report, “If it’s Hard to Read, It’s Hard to Do”, clearly indicates how you can take advantage on using fonts to compel readers into action. As Neuromarketing suggest:
Alternatively, you can bold some text to highlight a message and increase their size to get attention:
There’s no such thing as “The Best-Selling Color”.
Period.
And even if it exists, do you want to live in a world where everything is blue, red, or yellow because it’s “The Best-Selling Color” ever? I don’t.
I believe it’s all about the right combination. It’s how you mix strong colors with the gentle ones. The darker hues from the lighter shades. Mixing the right blend of colors can go a long way. Remember, humans are visual creatures. And it only takes a homepage like this to scare your prospects away:
Take a look at Mint:
The dark background compliments the headline printed in white. Green was added to represent the company’s color scheme and to bring balance. Orange spotlights the “sign up free” button to tell visitors what to do next.
As you can see, each one has its purpose without overpowering one another.
Here are some helpful resources about the right use of colors:
Thus says Jakob Nielsen in his article, “F-Shaped Pattern For Reading Web Content”.
A user's tendency to scan your site isn’t different from the way they read a book: left to right, top to bottom.
By using this natural reading behavior, we’ll notice an “F” pattern where:
So, what can we learn from here?
There’s a reason why high-converting websites stay on top. They know how to turn readers into subscribers, doubters into believers and leads into buyers. Your design principles should work hand-in-hand to drive your message across prospects. It has to be functional. It must have a purpose.
And your purpose: to guide your prospects by the hand; to be with them every step of the way.
There’s no point in making your site beautiful if it can’t convert. There’s no hope in well-written content if your design scares away your prospects.
Let me leave you with two quotes to ponder as you think about a high-converting web design:
“Content precedes design. Design in the absence of content is not design, it’s decoration.” -Jeffrey Zeldma
“What separates design from art is that design is meant to be… functional.” ― Cameron Moll