How to Design a great Home Page? What are the web design principles that will boost conversion rate?

Read in Malay

In Small Ditch Studio, our guidance for selling online are based on these 3 areas:
(1) Good website
(2) Pull more traffic
(3) Increase conversion rate

Three powerfull basic steps of how to sell online

Many marketers focus more in pulling the traffic by harp on the importance of SEO, social media, facebook ads, yet having an excellent website design to start with is so often overlooked. While all of these components do matter, your web design isn’t just a “pretty face”, it can actually make or break your conversion rates.

Whether or not your website is aesthetically pleasing also plays a big role in conversion rate optimization. Given 15 minutes to consume content, two-thirds of people would rather read something beautifully designed than something plain. So if you want people to read your blog posts, they need to look attractive.

But that’s not all. If your website is unattractive, people will actually leave your site altogether. So regardless of whether or not design is your forte, you can’t afford to overlook it. Learn web design, hire a freelancer, employ a designer, or do whatever it takes!

Here’s how to go about designing a home page that converts.

The logo

People expect to see your logo in the top left corner. Clicking on the logo takes you to the home page from every internal page. Don’t mess with it. You can get a designer to design your logo or simply choose the text logos.

Navigation

People are used to 2 kinds of menus: horizontal and vertical. Don’t innovate here – familiar layouts work best. Some more, they are the output of real proven research.

Remember people spend most of their time on OTHER websites. People don’t need to see a menu to know where the ‘contact’ link is at – by default they look for it as the last link in a horizontal menu or the bottom link in a vertical one. Ensure they find it there.

Check Papypal navigation below. Everything is common and all is clear, right? No surprises here.

Paypal Navigation Design great homepage to increase conversion rate

Value proposition

This is the most important part of your home page. Your Value Proposition is a concise chunk of text (headline, sub-headline and and maybe a few bullets points) that should address these questions:

What is this site about?
What can I do here?
How is it useful to me?
Why should I buy from you instead of the competition?

People’s attention span and patience are extremely limited. The world suffers from attention-deficit disorder. If they don’t get the answers from your home page within seconds, they will leave. Nobody will TRY to understand what you’re about nor read long pages of text. If you haven’t captivated them on your home page, you’ve lost them.

There are several ways to craft and present your Value Proposition. Kid.io has a good Value Proposition:

Value Proposition in a website to boost conversion rate

Bold headline – stating what it is and who is it for
A specific, benefit-oriented paragraph underneath describing the service
Big visual to support the text

Build a connection

This is an interesting part. Quick questions to ask you.How tall are you? How much do you weight? Where do you normally walk (to office, always ride a bike, etc)?

Now let’s say I’m selling shoes and you need a pair. You have 2 options. The first pair is designed for everyone. The second one is designed exactly for people your height and weight, and for walking on terrains you normally walk on. The price is the same. Which pair will you buy? No doubt about it, right?

This is why you have to state who your product or service is for, and it has to be true. If you’re trying to sell to everybody, you will lose (unless you have a gazillion dollars to spend). Talking to everybody in your copy works for almost nobody.

Look at the below example of Shopify website. They have included the target group in their Value Proposition. There’s no doubt who this service is designed for, is there?

Value proposition example on shopify website

Most wanted action

Remember paradox of choice: the more choice you give somebody, the easier it is to choose nothing. Choice paralyzes. If you think people will invest time to figure out where to click next, think again.

Thinking is hard, and you should not make your customers think. Instead, clearly indicate the next action you want them to take. In one experiment they changed the home page to focus on a single action, and saw the users doing exactly what they wanted them to do. It works.

The Hick’s Law

Hicks Law applied to boost conversion

Speaking of the customer choice, you might like to apply the Hick’s Law.

Hick’s Law is a popular theory that’s cited by a variety of individuals for different purposes, but is frequently referenced in terms of web design. Named after British psychologist William Edmund Hick, the law states that the time it takes for an individual to make a decision is directly proportionate to the possible choices he or she has.

In other words, by increasing the number of choices, the decision time is also increased.

One famous study by the psychologists described a display table with 24 varieties of jam attracted less interest than a table displaying only six varieties of jam. In fact, people who saw the larger display were only one-tenth as likely to buy as people who saw the small display!

That is an example of Hick’s Law in action: action is lost in proportion to the number of choices being presented.

In terms of web design, you can boost conversions by limiting the number of choices users have. The first thing that comes to mind when thinking about where to cut back on the number of choices on your website is the navigation bar. Obviously, you don’t want to have too many links to choose from, otherwise the user will lose interest in them altogether.

Think about all the many different important decisions that users have to make on your website, aside from just which navigation link to press.

Here are just a few:
Deciding whether to use the navigation bar or scroll down the page more
Skimming the headlines to see which blog post to read
Deciding whether to download your lead magnet, share your post on social media, or leave a comment
Choosing between making a purchase, reading product reviews, or browsing for more products

These only just scratch the surface of the plethora of decisions that your users have to make. It’s normal to feel overwhelmed trying to figure out where to begin cutting back on these decisions.

The more you can limit your user’s choices, the easier your website will be to use, and your conversions will skyrocket.

Call to action

Call to action wording matters a lot. For example, there is a case study where a wording containing the word buy converted the best. In e-commerce, add to cart always kicks buy now‘s butt.

In one split test they changed Buy SMS Credits to View SMS prices, and saw an uplift in conversions. This change along with minor added trust elements resulted in overall conversion rate improvement of 37.6%.

In another test they achieved a 83.4% improvement after changing the wording of their button from Play right now! to Instant demo!. Test your call to action.

Dollar Shave Club is one good example for a perfect Call To Action. The Get Started button, really help to increase the conversion rate.

Greate call to action example

Web Copy

Copywriting is super important and a huge topic on it’s own. Here’s one tip.

Most people on your website know what they are looking for in a product or service. If they find something that looks similar to what they want, they will follow it (read more, buy etc).

Consequently, having relevant information with the exact wording your customers would use is very important. Talk to your customers and see what language and exact phrases they’re using when talking about your products. Use it on your website.

When one looking for slimming product, that are non-chemicals, 100% organic, save and effective, those become the keywords and should be in the copy.

Above the fold and below the fold

Above the fold is the part of a page that’s visible without scrolling. People do scroll and are not afraid of it, but make sure the most important elements are visible without scrolling:
Value proposition
Some visual
Call to action.

Ideally the part above the fold answers the most important questions the visitor has, and the rest is supplemental reading.

How long the part below the fold should be largely depends on your business. but research has proven that when a long homepage get shrunk, the conversion rate tripled.

Leave room for text

Content is King

Ignoring search engines is not wise. As I mentioned it the beginning, your home page has the best chance among all the pages on your site to rank high in search engines.

This, however, won’t happen unless there is substantial amount of text on the page (500+ words). Use the room below the fold also for SEO – write useful stuff about your products, services and address questions your users have, but make sure the text is optimized.

No text, no ranking.

Visuals

Thousand words and all that. Neuroscience tells us that people “get” images hundreds of times faster than from text (our reptile brain doesn’t even know how to read).

Using images is actually a powerful way to boost up any value proposition. Imagine this website without the large image:

While for a complex products, video is a great way to visual, because watching a 1:30 minute video is less hassle for the user than reading a whole bunch of text

Leverage the Rule of Thirds

The Rule of Thirds is a popular photography principle that can also be applied to web design. With the Rule of Thirds, you’re supposed to visually divide an image (or website page) into thirds (both vertically and horizontally).

This gives you nine equal squares:

Rule of Thirds

According to the rule, the four middle intersections are strategic places of interest. When objects are placed at these points, it creates the most impactful image or design.

Rule of Thirds - the intersections

In terms of web design, you can place the page’s most important elements at these intersections to get people focused on them, boosting your conversions.

Below is one of the example:

Example of the Rule of Thirds

Notice how this website place their navigation bar anywhere near the intersections. This helps to keep visitors focused on the main call to action on the page, rather than leading their eye to navigate somewhere else.

You needn’t design your entire website strictly by the rule of thirds, rather you can use it as a tool to help you place your most important elements.

Try taking a screenshot of your website (just above the fold or just your header section, not the entire length of the page because nobody looks at a website that way), and divide it up into nine equal squares. Then, you can decide if you want to make any tweaks.

Color Matters

Colour is an often underrated aspect of web design but it can play a very important role in usability as well as convey the overall meaning of a brand as well as the overall mood of the website. Different colour combinations can evoke different emotions and reactions.

When choosing a color scheme for your website, make sure to choose a combination that evokes the emotion that you want your brand to convey.

One practical way to do this is by using the curating a Pinterest board with images that reflect your vision for your brand. Then you can upload a few of those images to Adobe’s Color Wheel using the camera icon on the upper right-hand corner of the screen.

Adobe Color Wheel

Once the image uploads, it will automatically create a color scheme for you based on the colors in the photo. You can also move the selections around if you want to tweak the individual colors.

Once you’ve created your color scheme, there is one important thing to keep in mind which will make or break your conversions: Contrast

Use contrast to keep text, headlines, and call to action buttons noticeable and readable. In other words, your font and button colors should be in high contrast with the background (e.g. white background with black text), and the elements that you want to highlight (e.g. subscribe buttons) should be in a color that stands out from the rest of your site.

So if we were to use the color scheme we created above, we would want to make shades of blue the predominant color, and use the bright yellow sparingly as a call to action color (since it provides the most contrast).

Let’s look at below website for example. Which elements draw your eye?

Using contrast in webdesign

Remember to K.I.S.S

You’ve probably heard the Keep it Simple, Stupid mantra before. Well, it applies to web design as well.

Simplicity is super important when it comes to driving conversions. Any time you’re creating a page, ask yourself whether there’s a way to make it simpler. The result is usually more aesthetically pleasing, and it almost always converts better.

Remember Hick’s Law? That comes into play here, but simplicity is more than just limiting the options. It’s about creating a clean overall design that is uncluttered and minimizes distractions.

Similar to Hick’s Law is the fact that people can only handle so much information at one time. Visually, if we see too much stuff all crammed into one page, we get overwhelmed and it bothers us. Creating a great user experience on your website means getting rid of anything that isn’t absolutely necessary to the design.

Use the 8-Second Rule

The general rule of thumb is that you have a mere 8 seconds to get a visitor’s attention, because that is the length of the human attention span. (Yes, it’s shorter than the attention span of a goldfish!)

You only have a very tiny window of opportunity to engage a user when they first land on your site, so make those seconds count!

Here are some tips for grabbing attention and boosting conversions within the first 8 seconds:

Use a large, benefit-driven headline that is brief and to the point.
Use eye-catching imagery that conveys the main point or purpose of your page and draws the eye towards your main call to action.
Make signup buttons large, simple and clear.
Use power words to make your copy more enticing and engaging.
Incorporate multimedia such as video, audio, or other interactive content.
Use hover effects on your buttons (e.g. make them change color on mouse-over) to make them more satisfying to click.
Use animated exit-popups to re-engage visitors who lost interest.

Use Faces to Increase Familiarity

People love human faces. When people see a face, they are automatically triggered to feel something or to empathize with that person. If one user recognize content on a website — such as a problem, dilemma, habit or whatever else — he or she feel connected and understood.

Make sure to incorporate faces into your articles, case studies and testimonials, opt-in pages, and landing pages for a boost in your conversions.

If you are the face of your brand, this is simple to do. Get a photoshoot done, and make sure the photographer takes plenty of horizontal shots with negative space on one side of you. That way, you’ll be able to place a call to action, or some text there.

Using faces in webdesign

However, if you aren’t the face of your brand, you can still use faces on your website by hiring models, or using stock photos. Just make sure the faces you choose represent your brand accurately, so that the user will be able to relate to the face.

Source High Quality Images

If there’s one thing that can really drag down the quality of a blog post or piece of content, it’s low quality images.

In fact, images can make or break a deal. Research found that 60 percent of consumers are more willing to consider search results that include images, and another 23 percent are more likely to contact a business showcasing an image.

Specifically, you should avoid using lifeless stock photos that are irrelevant and bland. Research also prove that if your content includes compelling images, you’ll get an average of 94% more views!

So instead of using bland images, source high quality photos that develop positive associations with the content and that feel personal. Remember: people like brands that they feel are similar to themselves. If your imagery is too “stuffy” or “corporate”, you’ll turn your visitors away.

Trust and security

People don’t buy from you if they don’t trust you. In addition to showing off your contact information and it’s a good idea to prepare the term and policy.

Don’t ignore load speed

It turns out that people are incredibly impatient, particularly when it comes to surfing the web.

According to a study, a mere one second delay in page load time results in a 7% reduction in conversions! So when it comes to page loading speed, every second counts

Speed really matters. Slow sites cause frustration and make people leave, thus obviously hurting conversions. Speeding up sites increases conversions. Google knows it and has included site speed as one of the ranking factors.

Google’s own nifty Page Speed Online tool is terrific for providing you insights into your site speed and what you can do to make it faster. If you use Google Analytics, their Site Speed report will help you learn which of your pages are under performing, so you can address this potential barrier to your conversions.

Google PageSpeed Insights
Pingdom
GTmetrix
KeyCDN
Sucuri