[Could Your Marketing Go to Waste?] What Should You Never Do When Fixing Your Website's Homepage?

2019/3/23

Article illustration: Start Improving Your Homepage with Its First Screen.

From ACIDHOUSE, INC., this is Tetsuya Ashida.

I sometimes get this question from small and medium-sized business owners with websites.

It's been a while since my website went live, but the homepage looks cluttered and feels rather unimpressive. I'd like to improve it properly. What should I do?

This article should help those with the same question.

Commit to Optimizing the First Screen

That, ultimately, is the answer.

Even on famous, excellent websites, most visitors leave from the homepage's first screen.

So you have to put every effort into attracting customers' interest as much as possible at the homepage's first screen.

Ultimately, what I explained in the article below—“the headline matters most” and “appearance and first impressions matter most”—also applies to the homepage.

[Inconvenient Truth] The Biggest Reason the Web Pages and Articles You Spent Time Making End Up Wasted March 22, 2019

“In most advertisements, the headline is the most important element. On average, five times as many people read the headline as read the body copy. Changing the headline alone can make sales differ by as much as tenfold.”

David Ogilvy

Steps for Optimizing the First Screen

Prepare a page with an improved first screen.
Run an A/B test.
Keep the version with better results.
A/B test elements other than the first screen.
(Repeat.)

In other words, the first screen and the other elements should be A/B tested separately; that's the key.

There are various A/B testing tools, but to begin with, I think using the free Google Optimize would be good.

▶Website, A/B testing and personalization solutions – Google Optimize

Additional note
If you change the homepage layout through a WordPress theme, you may not be able to A/B test it.

In that case, although it won't be exact, I think it's good to evaluate the effects over separate periods.

What Should You Keep in Mind When Improving Elements Beyond the First Screen?

If the first screen's job is to attract customers' interest, the other elements' job is to connect that interest to an action.

Here are the words of world-famous copywriter John Carlton.

“The flow of copywriting is a bucket brigade.”

John Carlton

Applied to a website, this means encouraging the following behavior:

For a landing page: Customers attracted by the first screen want to read more and scroll down the page.
For an owned website: Customers drawn to some content on the first screen click a menu or thumbnail to see more.

Those are the actions you should encourage.

Observe Customers' Movements on the Page

Google Analytics gives detailed numerical and graphical data on external traffic and internal page transitions, but to see customers' movements on the page, use a heatmap.

There are several heatmap tools and they cost a fair amount, but while your traffic isn't very high, try a free version.

I recommend User Heat and Ptengine.

▶Free heatmap analysis tool User Heat: Analytics that shows what gets read

▶Used by over 150,000 companies worldwide: an engine anyone can use to understand users and grow a business with data | User behavior analysis | Heatmaps | Web analytics | Ptengine

This Site's Heatmap

This is only for an owned website, but I'll share it as a reference.

It's based on desktop use, but above, the red area corresponds perfectly to the first screen.

On both desktop and smartphone, the first screen's size is limited, so arrange elements at an appropriate size that customers can clearly recognize.

In particular, smartphones have more users and less display space, making this more important.

*This site displays article lists differently on desktop and smartphone.