Homepage
Mobile
12 notes
1
Ensure content at the top of the page is interesting and relevant enough to prompt further engagement
Users scroll when they are given a reason to do so. They'll engage with content below the fold only if what's above the fold is engaging. They don't scroll out of the blind hope that something useful may be hidden 5 screens down. They make a judgement call quickly, based on the information that's immediately available to them. If it's irrelevant, uninteresting, uninformative, or too sparse, they will quickly decide to navigate elsewhere.
In order to draw visitors in, webpages act like good writing: the goal of every sentence is to make the reader want to read the next one.
Ensure content at the top of the page is interesting and relevant enough to prompt further engagement
2
Lead with a clear and concise value proposition
Your value proposition is the "hook" that draws visitors in. It should be a simple one- or two-liner that tells people exactly what you offer and why it's worth their time. When people land on your homepage, they should be able to grasp the unique value you provide within 5 seconds. A good value proposition gives them a reason to explore further.
Your homepage value proposition will depend on the type of store you run. For example, if you have a small number of products, your homepage value proposition might be more product-focused. If you have a wide range of products, your homepage value proposition might be more company- or brand-focused.
Regardless, keep these guidelines in mind when crafting a value proposition.
Focus on clarity before creativity
Above all, you must ensure your value proposition is clear. Easier said than done, since a value proposition needs to answer many questions—
What product are you selling?
Who should buy your product?
How will buying your product improve the visitor or their life?
Why should the visitor buy from you and not your competitors?
When will the value be delivered?
Understand your customer and their voice
The language you use plays a big role in shaping the perspective of people who end up on your site. Your visitors should see themselves in your value proposition. A good strategy is to use the exact words of your current customers to hook your future customers—look to any existing reviews or testimonials for inspiration.
Emphasize specific benefits, not vague hype
If you've walked down a single block in New York City, you've seen dozens of stores claim to have the "World's Best Coffee." Every sign you encounter makes it a little more difficult to believe the previous one.
Hype, which can come in the form of vague superlatives ("best") and exaggerations ("world's best"), can be dangerous that way. Instead, focus on distinct benefits and the concrete value your product delivers.
Lead with a clear and concise value proposition
3
Avoid using animation to reveal content above the fold
Forego fading text and other animations for above-the-fold content since it slows users down. While judicious use of animation can help a site feel more polished and engaging, it can also increase bounce rates if it hides content for too long. At worst, users might believe a page is broken—or that it's just too slow to load.
Google’s recent research has revealed that the likelihood of users bouncing off a page increases by 32% when the page load time extends from 1 second to 3 seconds.
Avoid using animation to reveal content above the fold
4
Make sure your call to action directs customers towards the next most valuable action
A customer arriving on your site is just the first step. Once they're there, you need to grab their attention and give them a direction to move in.
The button above the fold should work to convince people to the next step, and it should link to a high impact action that's most likely to generate value for the business.
Bestsellers, newest products, or a direct link to the highest conversion product often works well for this. Make sure your CTA text makes it clear why someone might want to click the button and continue.
Make sure your call to action directs customers towards the next most valuable action
5
Prioritize the order of carousel items to make the most interesting items first
Prioritization alleviates the tediousness of sequential access, because users often won’t need to proceed through many steps. By showing the best items first, a prioritized sequence may draw users in and encourage them to stick with the carousel longer than with a random sequence.
Prioritize the order of carousel items to make the most interesting items first
6
Group related elements by placing items close together, or surrounding them with a visual boundary
Grouping is a method for connecting related elements that share a context, such as an image grouped with a caption. It visually relates elements and establishes boundaries to differentiate unrelated elements. Grouping helps users recognize relationships between different elements on a webpage or design layout, improving their overall comprehension and allowing for more efficient navigation.
Explicit grouping uses visual boundaries such as outlines, dividers, and shadows to group related elements in an enclosed area. Implicit grouping uses close proximity and open space (rather than lines and shadows) to group related items.
Group related elements by placing items close together, or surrounding them with a visual boundary
7
Indicate additional carousel content with dots, arrows, semi-hidden content, or other cues
Indicators for a carousel should be obvious. Arrows alone may not be sufficient if they blend in with the background.
Indicate additional carousel content with dots, arrows, semi-hidden content, or other cues
8
Make each element of a product preview area visually distinct to support efficient scanning
To enable users to easily pick out product attributes in product previews, ensure each element is visually distinct. For example, product specs could be presented in bullet points, enabling easy scanning and comparison. Alternatively, font style variations and spacing can be combined to make elements easier to pick out.
When informational elements of a product preview are visually mixed together, users need to carefully read all the info and do the work themselves to break it down into its various components. Furthermore, they'll have to do this for each list item if they want to properly compare products.
One situation where this issue can arise is when the product preview's title is used to communicate not only the product name, but also the type and features of the product. This make it difficult for participants scanning for a specific feature—for instance, the screen size of a laptop—to quickly spot this info at a glance in each product preview. Consequently, customers end up rejecting or investigating products based on inaccurate assumptions.
Make each element of a product preview area visually distinct to support efficient scanning
9
Provide specific details about people in testimonials to increase credibility and familiarity
Every testimonial needs to be associated a name at least. The more information you include however, the more credible the testimonial will appear. Going beyond the bare minimum and including relevant information about the reviewer can help visitors relate to that person and their needs. This can cause people to feel put at ease—"If someone like me loves it, I probably will too."
An image of the reviewer is great. If it's relevant, their job title or company can be included. You can also get creative in providing context, for example a baby toy company might include a testimonial from a parent who's "mom to a 3yo whirlwind."
Provide specific details about people in testimonials to increase credibility and familiarity
10
Keep testimonials benefit-oriented
Customers are looking to your products to solve some form of problem or entertain themselves. Make sure your testimonials are solutions- or benefit-focused to show the kinds of issues your products are good at solving, and how you go about it.
It's not enough if a testimonial says your products are "pretty great," it needs to provide details about why. It should touch on what problem was solved, or what aspect of someone's life was improved.
Keep testimonials solutions-oriented
11
Left justify text that's meant to be scannable
Center- or right-justified text is more difficult to scan since the beginning of each new line is less predictable. Justifying text to the left makes it easier to scan.
Left justify text that's meant to be scannable
12
Write engaging, informative headlines by writing from the user's perspective
Headlines should be focused on the user, rather than the company. When a reader immediately recognizes a message as relevant, it's significantly more engaging.
By clearly outlining what the reader stands to gain, or why they might care, a headline becomes a powerful tool to capture attention and prompt action.
Shifting from a company-centric view ("Subscribe to our emails") to a user-centric one ("Unlock Exclusive Tips and Deals"), effectively communicates the direct impact on the reader's life or interests. This strategy not only attracts the reader's interest but also fosters a connection, increasing the likelihood of engagement and positive response.
Write engaging, informative headlines by writing from the user's perspective