icon/dark/fileicon/dark/foldericon/dark/folde-openicon/dark/hashtagicon/dark/line-graphicon/dark/listicon/dark/localicon/dark/lock

The advantage of having a physical store, no matter how big or small, is that you always have people available to guide and assist customers.

This is not the case for a website! On a website the home page is like the main entrance. Without people to guide visitors you could lose potential custom (bounce rate). To get round this, you must make certain website design considerations, ideally in the most efficient and time-saving manner.

There are three main reasons a website's home page design needs the utmost attention to detail:

  • Most Popular Page: Most other sites will link to your home page by default and it will appear most often in SERPs, compared to inner pages.
  • Most Socially Shared: The home page link can easily be shared as it is the shortest URL.
  • Domain Popularity: Domain popularity is established by the number of links built to a website, its conversion rate, its usability and its various SEO elements. Domain popularity plays a major role in the positioning of your content (ideally highly) in Google SERPs, as discovered in a previous blog, Google SERPs Analysis.

Here are five tips to create a home page that is optimized for conversions, including examples.

1. Home Page Colors

  • The colors on various elements of the home page should highlight certain areas more than others. The goal is to direct the eye toward the section of the website that will lead to conversions.
  • The colors in the logo, main menu, title, call-to-action (CTA) and supporting text or images must coordinate with one another to create a pleasing aesthetic on the page.
  • Do not use too much color on a page, and stick to three to four main shades for the home page. Make sure one of these colors is black or white. Exceptions to this could include websites that deal with kids, lifestyle and fashion, home decor or entertainment.

Example 1:

A Bad Example Of Colors Used On A Home Page

A Poor Example Of Colors Used On A Home Page

What's wrong with the example?

  • Too many colors! When this many colors are used it's impossible to highlight information – your eye has no place to rest.
  • The design is messy and does not look professional. This will put off anyone who lands on this page with the intention of buying something.

Example 2:

A Good Example Of Colors Used On A Homepage

A Good Example Of Colors Used On A Home Page

What's good about this example?

  • Three colors- yellow, black and white, are used in a fantastic manner that is attractive to a new site visitor and engages them with prominent-yet-tasteful text colors.

2. Home Page Banners:

Rotating flash banners should generally be avoided as they provide a poor user-experience. As a website designer or owner you might find it easy to read and understand multiple banners or a rotating banner but you have seen the content a thousand times. For new visitors flashy banners create poor readability, thus increasing bounce rates.

Depending on the theme of your website you may be able to avoid a home page banner altogether, but if not, stick to a static banner. Also, use a color that contrasts with the rest of the page and is wide enough to hold the prominent message of your site in both text and image. It should also be able to highlight your call-to-action button.

Example 3:

A Bad Example Of A Homepage Banner

A Poor Example Of A Home Page Banner

What's wrong with this example?

  • The image has nothing to do with the nature of the business, i.e. SEO.
  • The text holds little value for the site visitor.
  • There is no call-to-action.
  • Besides the banner, the bottom-right corner image does not load properly.

Example 4:

A Good Example Of A Homepage Banner

An Example Of an Optimized Home Page Banner

What's good about this example?

  • It has a prominent screenshot of the product, in this case an email marketing software.
  • Although this was a rotating banner, the text was minimal, the screenshots were big and the call-to-action buttons were placed in the same position on all the banners. For these reasons the banner did not poorly affect the website's usability.

3. Home Page Title and Supporting Text:

The title text on the home page describes the content of the website in a few words. It can also describe the kind of customers your business caters to or the benefits of the products and services offered. Do not confuse this with the Meta title of a home page – what we're talking about here is the text and/or image placed prominently on the site as a message about what you have to offer to site visitors.

The factors to consider in your home page title text are as follows:

  • Does it sound like an advertisement jingle? (It should not!)
  • Does the message contribute to conversions, ie. is it user-oriented?

Sometimes you cannot explain your message completely in the title. In such cases you need supporting text.

The factors to consider in your home page title's supporting text are as follows:

  • Does it have good readability? (Think bulleted lists.)
  • Do the colors take the user's attention away from the title or call-to-action? (They should not!)

Example 5:

A Bad Example Of A Home page Title

A Poor Example of a Home Page Title

What's wrong with this example?

  • For a new site visitor, the title "You Do Creative, We'll Do the Rest" does not convey what the site does or what's in it for the users.
  • The supporting text is a long paragraph that still doesn't lay out what the point of the website is.
  • The supporting text is in a color that has poor contrast with the background color.
  • Since I have already written a post on call-to-action best practices I will not repeat it again here but I would like you to note that this example's call-to-action is not optimized. The colors used are poorly contrasted to the rest of the page and the text says nothing noteworthy for a converting customer.

Example 6:

A Good Example Of A Homepage Title

A Good Example Of A Home Page Title

What's good about this example?

  • The title says what it provides – instant websites.
  • The title says who it is for – non-profits.
  • The title says why users should opt for it – no learning required.
  • The call-to-action highlights a great feature for the user – sign up is free.
  • The image shows sample websites created for non-profits.
  • The call-to-action stands out from the rest of the colors on the page.

4. Home Page Images:

Only use images when they are necessary or useful, typically those that help convey a message about your product to your site visitors. The space images take up must be used wisely, so do not use stock images just for the sake of having them.

Some industries rely heavily on images to grab attention, particularly lifestyle and fashion, entertainment and photography-related sites. It is true that images can have a high impact on conversions if used in the right way. Take note of some pointers for using images that convert on a home page below:

  • If you use an image of your main product (which could be a screenshot), place it above-the-fold.
  • Use text in and around the image(s) rather than forcing your site visitors to guess the purpose of the image.
  • You can add an element of fun, for instance, animated images, but make sure they are relevant to the message of your home page.
  • Logos are conventionally found on the top left-hand corner of a site. Stick to this convention to make it easy for people.
  • Use an image of a person or an animation looking or pointing at your call-to-action.
  • Use short demo videos instead of an image for better conversions, if your business cannot be represented by a static image alone.

Example 7:

A Bad Example Of Homepage Images

A Poor Example Of Home Page Images (a)

  • No eye-catching images are used.
  • The images don't give any clue as to what the site provides or what customers it caters to.
  • It had (very quickly) rotating banners with stock images, and lengthy blog-like supporting text. This site came up for a Google search for the keyword website developers, which you would not have guessed unless I mentioned it.

Example 8:

Another Bad Example Of Homepage Images

Another Poor Example Of Home Page Images

  • The images have little correlation with the content.
  • They waste precious space on the site.

Example 9:

A Good Example Of Homepage Images

A Good Example Of Home Page Images

Example 10:

Another Good Example Of Homepage Images

Another Good Example Of Home Page Images

What is good about these examples?

Example 9:

  • The image clearly shows that the website provides service for a fluid web layout.
  • The image has a Drupal logo indicating that the developers have specialized in the development of Drupal CMS.
  • The image is attractive and maintains the color theme of the home page banner.

Example 10:

  • The images show real people from the company. This develops a sense of trust in the company.
  • The images are not necessary, but they are not a waste of space either.

5. Home Page Navigation Menu:

The navigation menu on an ideal website has some standard elements that people are used to. For instance, the contact tab is usually found on the extreme right of the main navigation menu bar. You can try and experiment with your home page navigation tabs but it may cost you something in the way of good user experience. Instead we recommend keeping the navigation titles and tabs simple and close to the standard navigation used in most popular sites in your niche.

Example 11:

A Bad Example Of Homepage Navigation

A Poor Example Of Home Page Navigation

What's wrong with this example?

  • Unless you are the owner or developer of this site, you will not understand what each of the navigation elements contain.
  • The text and tabs keep the user guessing, which leads to poor user-experience.

Example 12:

A Good Example Of Homepage Navigation

A Good Example Of Home Page Navigation

What's good about this example?

  • It is a simple and conventional navigational pattern that wastes none of the user's time in guessing which tab leads to which page.

Quick Tips:

Remember these in order to increase conversions via your website's home page:

  • No Flash: Avoid using flash pop-ups when the site visitor enters.
  • Freebies: Offer free trials, freemium (free for a lifetime with premium features made available on an upgrade, for example, WooRank) or demo links in your CTA.
  • Testimonials: Show customer testimonials via text or video on the home page.
  • Trust Signals: Display security logos or trust logos on the home page.
  • Social Media Popularity: Display the number of social media fans and followers you have.
  • Client Portfolio: Display logos of popular clients on the home page.
  • Benefits: Rather than focusing on service or product features in the content of the home page, focus on the benefits for the user.

You can always carry out usability testing on your site to find out which elements cause bounce rates on your home page. Identifying the reasons people leave your site will also help in improving the website design for enhanced conversions.

Let us know what you do to improve conversions on your website's home page!