In this article 16 sections
- The homepage as a decision point
- Product types: filters, not categories
- Touch spacing on mobile
- Product variety on the homepage
- Advertising on the homepage: handle with care
- Carousels: if you use them, do it right
- Links with a limited scope: clear link text
- Your own brand imagery
- DTC and small catalogs: show the value
- Recent orders on the homepage
- Themed or guided navigation
- Clear clickable areas
- A logo that links to the homepage
- Geolocation: country and language
- Main categories in plain sight
- The cost of a bad homepage
The homepage as a decision point
An ecommerce homepage has seconds to communicate three things: what you sell, why you’re different, and how to find what I’m looking for. According to NNGroup, 52% of homepage space is wasted on elements users ignore: self-promotion, visual filler and empty space.
Only 24% of the space goes to content users actually care about. The rest is noise.
The problem isn’t aesthetic. It’s about conversion. A user who misreads your catalog on the homepage leaves before seeing a single product.
Product types: filters, not categories
One of the most costly mistakes I see in ecommerce is treating product subtypes as categories when they should be filters.
The problem
If you sell clothing and structure your navigation like this:
Women
├── Coats
├── Jackets
├── Trench coats
├── Bomber jacketsThe user looking for a “leather jacket” has to guess whether it’s under “Jackets” or “Bomber jackets”. They can’t see all the options together. They’re locked in silos that fragment the catalog.
The solution
Implement product types as filters when they share common attributes:
Women
└── Coats and jackets [View all]
Filters: Type (Coat | Jacket | Trench | Bomber)
Material (Leather | Wool | Down | Cotton)
Occasion (Formal | Casual | Sport)| Approach | Behavior | Result |
|---|---|---|
| Subtypes as categories | The user picks one option and misses the rest | Abandonment because the catalog seems limited |
| Subtypes as filters | The user sees everything and refines as needed | More exploration, more products viewed |
The rule: use categories when products are mutually exclusive (appliances vs. clothing). Use filters when they share attributes and the user might want to compare across types.
Touch spacing on mobile
On mobile, interactive elements need enough room for a finger. The minimum standard is 44x44 pixels according to WCAG, but in ecommerce I recommend at least 48px between tappable elements.
| Element | Minimum size | Minimum spacing |
|---|---|---|
| Action buttons | 48x48px | 8px |
| Menu links | 44px height | 12px |
| Filters/chips | 40px height | 8px |
| Navigation icons | 48x48px | 16px |
The typical problem: menus with 32px-tall links and 4px of spacing. On touch screens, users tap the wrong link 20-30% of the time.
Product variety on the homepage
New users use the homepage to judge what kind of site it is and what range of products it offers. If you only show one category or one type of product, they assume that’s all you sell.
What works
- Showing products from multiple categories on the homepage
- Including different visible price ranges
- Representing a variety of styles, colors or uses
What doesn’t work
- A homepage dominated by a single collection or promotion
- Only premium products, or only products on sale
- Generic images with no real products
For DTC (Direct-to-Consumer) sites with a small catalog, the homepage should show a representative sample of the whole catalog. If you have 50 products, the user should be able to get an idea of all 50 from the homepage.
Advertising on the homepage: handle with care
Ads on the homepage are almost universally disliked. On mobile, besides the negative perception, they cause real usability problems:
| Problem | Impact |
|---|---|
| Interstitial ads | They block content and frustrate users |
| Banners that push content down | High CLS, the user loses context |
| Ads that look like content | Confusion, accidental clicks |
| Too many ads | The site is perceived as low quality |
If you need to monetize with ads, keep them below the fold and clearly separated from the content. Never in the first viewport on mobile.
Carousels: if you use them, do it right
Carousels are controversial in UX. NNGroup reports that auto-rotating carousels have very low interaction rates: most users only see the first slide.
Problems with carousels
| Problem | Why it happens |
|---|---|
| Content gets ignored | Users don’t wait for it to change |
| Hard to interact with | Small or barely visible controls |
| Banner blindness | Users assume it’s advertising |
| Accessibility | Hard to navigate with a keyboard or screen reader |
If you decide to use carousels
- Never auto-rotate on mobile: the user can’t predict when it will change
- Prominent controls: large arrows, clear position indicators
- The first slide must be the most important: assume nobody will see the rest
- Pause on hover/focus: users must be able to read without it changing
<!-- Accessible carousel controls -->
<div role="region" aria-label="Featured deals">
<button aria-label="Previous" class="carousel-prev">←</button>
<button aria-label="Next" class="carousel-next">→</button>
<div role="tablist" aria-label="Slides">
<button role="tab" aria-selected="true">1</button>
<button role="tab" aria-selected="false">2</button>
<button role="tab" aria-selected="false">3</button>
</div>
</div>Links with a limited scope: clear link text
On mobile it’s common to show shortcuts like “See what’s new” or “Shop now”. The problem: if the link leads to a limited scope (only new arrivals for women, only one category), the user needs to know that before tapping.
| Wrong | Right |
|---|---|
| ”View collection" | "View Women’s Spring collection" |
| "Shop now" | "Shop men’s T-shirts" |
| "New in" | "New in footwear" |
| "Deals" | "Up to 50% off electronics” |
The link text should include the full scope. If the user expects to see “all deals” and only sees deals from one category, the experience is confusing, and they may leave thinking the catalog is more limited than it really is.
Your own brand imagery
Stock or purely functional images come across as unprofessional. Users judge the quality of the products based on the quality of the images.
| Type of image | Perception |
|---|---|
| Generic stock | ”Unreliable site, dubious products” |
| Product on a white background (only) | “Functional but no personality” |
| Lifestyle with the real product | ”Professional brand, quality product” |
| Your own brand imagery | ”Trust, differentiation” |
Investing in your own photography pays for itself in conversion. An ecommerce site with consistent brand imagery builds more trust than one with a mix of supplier images.
DTC and small catalogs: show the value
For Direct-to-Consumer sites or those with a small catalog, the homepage has to communicate not only what you sell, but why buy from you.
Elements that should be visible
- Unique value proposition: what sets you apart?
- Key policies: free shipping, returns, warranty
- Social proof: reviews, testimonials, press mentions
- Product quality: materials, origin, process
| Element | Recommended placement |
|---|---|
| Value proposition | Hero or just below it |
| Policies (shipping, returns) | Top bar or hero |
| Reviews/testimonials | Below the fold, with products |
| Guarantees/certifications | Footer or near checkout |
Users of niche sites quickly judge whether they can trust the brand. A lack of clarity on any of these points leads to early abandonment.
Recent orders on the homepage
For logged-in users, showing recent orders or the status of open orders on the homepage reduces friction:
- The user doesn’t have to dig through “My account”
- It builds trust (the site remembers their activity)
- It makes it easy to reorder regular products
A typical implementation:
<!-- Recent orders section for a logged-in user -->
<section aria-label="Your recent orders">
<h2>Your latest order</h2>
<div class="order-summary">
<p>Order #12345 - On its way</p>
<a href="/tracking/12345">Track your order</a>
</div>
<a href="/account/orders">View all your orders</a>
</section>Themed or guided navigation
Not every user knows exactly what they want. Offering themed navigation helps people looking for inspiration:
| Traditional navigation | Themed navigation |
|---|---|
| Category > Subcategory > Product | ”Gifts for him” |
| Technical filters | ”Office looks” |
| Keyword search | ”Get ready for your vacation” |
Guided navigation works especially well for:
- Gifts: “For her”, “For kids”, “Under €50”
- Occasions: “Weddings”, “Job interviews”, “Vacations”
- Problems: “Sensitive skin”, “Small spaces”
Consider embedding a wizard on the homepage for users who need help choosing. “Not sure what to pick? We’ll help you in 3 questions.”
Clear clickable areas
Users should know where they can click without having to discover it. Images with multiple clickable zones are a problem if it isn’t clear what each zone does.
Common problems
- A hero image where only part of it is clickable
- Banners where it’s unclear whether the image or the text is the link
- Hover states that don’t exist on mobile
Solution
- If the whole image is clickable, make it obvious with a visible CTA
- If there are several destinations, use explicit buttons
- Add clear hover/focus states for desktop
/* Make it obvious that an element is clickable */
.clickable-card {
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.clickable-card:hover,
.clickable-card:focus-within {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}A logo that links to the homepage
It sounds basic, but the logo should always link to the homepage. It’s a universal convention that users expect. If the logo isn’t clickable or goes somewhere else, it causes confusion.
When users get lost on a site, their first instinct is to click the logo to “go back to the start”. If that doesn’t work, the next step is usually to leave.
Geolocation: country and language
For international sites, detecting country and language by IP improves the first experience:
| Detection | Recommended behavior |
|---|---|
| Country | Preselect it, but make it easy to change |
| Language | Suggest it based on the browser, don’t force it |
| Currency | Show prices in the local currency |
| Shipping | Say whether you ship to the detected country |
The typical mistake: forcing a language with no visible way to change it, or redirecting to a regional site without asking.
<!-- Accessible country/language selector -->
<div role="region" aria-label="Select country and language">
<p>Looks like you're in Spain. <a href="/es">Go to the Spanish store</a></p>
<button>Change country/language</button>
</div>Main categories in plain sight
In sectors where browsing by category is the main discovery method, categories should be visible on the homepage, not just in the menu.
| Sector | Main navigation |
|---|---|
| Fashion | Categories (Women, Men, Kids) |
| Electronics | Categories + Search |
| Groceries | Categories |
| Specialized/niche | Search + Filters |
For fashion or mass-market ecommerce, putting the main categories directly on the homepage (not just in the header) speeds up discovery and cuts the number of clicks to the product.
The cost of a bad homepage
According to Baymard Institute research based on more than 18,000 usability sessions, homepage and navigation problems are among the main causes of early abandonment in ecommerce.
A homepage that doesn’t communicate the catalog properly doesn’t just lose that visit: it creates a negative impression the user will remember if they come across the brand again.
The time you invest in optimizing the homepage has a direct ROI in lower bounce rates and more pages viewed per session. It isn’t cosmetic: it’s conversion.