You never get a second chance to make a first impression.
When we are talking about making a good first impression, we need to keep in mind that we are talking about the first few seconds of people’s attention. Statistically, it takes 0,2 of a second to form an opinion about your website. And at the most interesting parts of the page, people look up to 7 seconds.
So today, we’ll talk about how to grab their attention right away and increase your homepage conversions.
3 main patterns of visual perception
Before choosing the elements you want to add to your Magento 2 homepage, you need to understand the principles of website users’ perception. Here are the 3 most important ones.
Emphasis on the upper left corner
Surveys, which used eye tracking to analyze consumers’ behavior, have shown that the upper-left corner of a website is the most noticeable area. When a user opens your website, they start from this point and move to the right and down. Here is how it looks like:
Source: CXL
Important note: never forget about your target audience and their features. These researches were made with the participants who read from left to right.
The Gutenberg diagram confirms that the same pattern works for pages with a lot of content or text:
Source: CXL
The only difference between these theories is that the Gutenberg Rule defines the lower-right corner of the page as the perfect place for Call to Actions and buttons.
Scrolling
The above-the-fold area gets the most attention from users, but pulling up all the information there is not a good idea. Users do scroll until the bottom of the page. Some researches show that it gets a lot of views. So when designing your Magento 2 homepage, you need to put your main valuable offer above the fold and guide users to scroll down. Wiltshire Farm Foods is an example of how you can do with it:
Eyecatchers
Finally, eye-tracking studies highlight 2 main points that are important to grab additional user attention when setting your Magento home page: visual content and headliners. And if everything is more or less clear with the headings, then the choice of visualizations should be approached with caution during the Magento set homepage process. Avoid not only small and blurry pictures but also oversized images showing men who look like models. Studies show that a picture of a “normal” person facing the camera is the most attractive option.
Now, when we know the main behavioral patterns, let’s talk about content.
What content to include
All Magento 2 homepages have similar layouts and structure:
Source: WebsiteBuilderExpert
The content of each block may differ from site to site, but the main idea is the same: first comes primary content with the most critical information about your company, then more details about your offer with trust indicators, and the bottom line’s content summarizes all we covered above. Let’s look closer at the most important elements.
How to customize XML Magento homepage layout →
Navigation and search
First off, you need to check if your Magento homepage has an easy and clear navigation system. Include only the most important links in your top menu. Say, you have a hardware store. Probably 2 most popular categories of your store will be smartphones and laptops. So, it will be logical to place them at the beginning of your navigation in the most noticeable upper-left corner. Thus, users will see them first. The exact sort order you can define by analyzing your statistics. Check which product category users visit most often and put it in the first place. And then arrange all other categories in descending order of the number of views. If you don’t yet have this statistic, you can launch A/B testing and compare 2 versions of your website navigation. In 2-4 weeks, you will have enough data to make an informed decision about what version is the most convenient for users. Moreover, you can use WebVisor to track suspicious sessions and better understand user behavior.
Also, building your menu, keep in mind that every additional click a user needs to make to find the needed product or information will decrease the conversion rate of your website.
Pro tip: Enable sticky menu to provide users with access to basic navigation elements at any part of the page and enable smart category filters with our Improved Layered Navigation.
Also, read our article on how to set up Google Analytics in Magento 2 →
Headline and sub-headline
What does your company do? What problem do you help to solve? The headline and sub-headline should answer these questions in 1-2 sentences with words so that a newcomer will grab this idea from the first sight.
CTA
There are many ways your button/text call-to-action (CTA) can look like. And you probably know already what works best for your audience. Here we want to stress only one important moment: never underestimate testing. Even if you are 100% sure that your CTA is working well right now, but you have a new idea, test it. You can always do better.
Benefits
Marketing specialists say: “Features tell, benefits sell.” That’s why you need to focus on your benefits first. This is what makes your store look unique and stand out from competitors. Why should visitors choose you? Moreover, the benefits section should affect the emotional side of people, so focus on consumer pains you can solve.
Highlights or feature list
Next, you have 2 options here. If you have one or 2 main products, you can make a list of their main features and place it on your homepage. But for large multi-brand stores, this is the best place to highlight top products and categories.
Pro tip: use personalized product recommendations on your homepage to improve conversions.
Social proofs and testimonials
77% of users read reviews before making a purchase. Thus, if you have valuable testimonials, reviews, and quotes from experts or top customers, it’s a good idea to put them on your homepage. People are more likely to buy from businesses they trust. So gather everything that can show your credibility.
Pro tip: add the Google Reviews badge on your store pages and gather new reviews automatically.
Top 3 homepage examples
In the end, we want to inspire you by giving some real-life examples of catchy Magento homepage design.
Create your ideal store design with Amasty Jet Theme →
Poketo
The main feature of this brand is the use of bright saturated colors. Also, their website is disabled-friendly.
Skullcandy
Skullcandy has the right balance between visual and text content.
Jackie Smith
Jackie Smith is another brand that is not afraid of anything other than black and white colors. They use them not only for images but for products as well.
Share your homepages with us. What approach did you use while creating a new one?
Still have any questions? Please, check our UI\UX service.