Experimentation Agency Message Testing Blog Search Start 7-day trial for $1 Training Community Job Board Resources Help

Ecommerce Guidelines: Homepage Design (clarity)

Guidelines 35-40

Ecommerce Best Practices » Homepage & Sitewide » Clarity » Design

The primary objective of any design is to get the site’s message across. For ecommerce business it’s usually ‘buy this product’ or ‘explore our products’. Essentially, the message is a story, and the story should relate why and how to buy from the site. In a good design that facilitates the story, every shape, color, image, and font works together to create a clear message.

Great design contributes to the message, bad design distracts from the message and frustrates users.

When evaluating design clarity, Peep suggests asking yourself the following questions for each and every page of the site…

  • “Is there strong visual hierarchy in place? Does it follow most wanted action?
  • Are less important things also less important design wise?
  • Is there enough white space to draw attention to what matters?
  • Are the visuals in place that support the content?
  • Does call to action stand out enough?
  • How much top priority information is below the fold?
  • If there’s more information below the fold, is it clear that they should scroll? Any logical breaks that stop the eye flow?
  • Is the eye path clear?
  • Is the body copy font size large enough easy reading? In most cases the optimal size is 16px, but that depends on the font.”

6 guidelines for ecommerce design:

  1. The CTA’s location should complement the customer’s journey.
  2. Eliminate any design elements that detract from taking the “most wanted” action.
  3. Avoid placing advertisements (and content that resembles ads) in prime content locations.
  4. Relevant/specific promotions (seasonal promotions, sales for particular product categories) should not resemble banner ads.
  5. Don’t use prime real estate for social media icons; display them in the footer.
  6. Personalize homepage content when possible.

Guideline #35. The CTA’s location should complement the customer’s journey.

Most people read/scan over a webpage in the same sequence (left to right, top to bottom).

Over the years, researchers and web designers have created several formal diagrams for this common viewing pattern. These include the Gutenberg diagram, letter F-pattern layout and the letter Z-pattern layout. Each offers slightly different information on where to place your most important information (including CTAs) on any given web page.

When deciding where to placing the CTA, remember that the homepage is meant to relay the site’s key message (what and why to buy) and to get the customer to act. Putting the CTA below the fold or in a unnoticeable place effectively hides a main component of the site’s message. Conventional design places CTAs in the center or on the right side of the page above the fold.

Look for a spot that complements taking action. For example, if your website currently has a sale, place an “apply discount” CTA next to the promotion. If there’s a graphic explaining how the site sells locally sourced products, put a “shop local” CTA next to this graphic.

How to do it RIGHT

Lowe’s

This complementary CTA is smartly placed on top of prominent kitchen and bathroom photos.

On a UX benchmark analysis, Lowe’s ranked with a 73% score for the UX dimension “Clarity”.

J. Crew

The CTA is designed as part of the promotion on this homepage so users can start browsing with the applied discount right away.

On a UX benchmark analysis, J. Crew ranked at the very top with a 97% score for the UX dimension “Clarity”.

why they’d buy from here versus a competitor – “very legitimate and professional feel.” & “because it has a nice look and it’s easy to use”.

user quotes on J. Crew

How NOT to do it

Go Electronic

Instead of a wall of technical product descriptions, this homepage should increase the size of their featured product thumbnails and place a “shop feature products” CTA nearby.

On a UX benchmark analysis, Go Electronic ranked at the very bottom with a 5% score for the UX dimension “Clarity”.

Hatland

The “fast & free shipping” offer for three or more hats is a good offer. It would be even more enticing if users could click a button to “browse hats” right after reading it.

On a UX benchmark analysis, Hatland ranked at the very bottom with 11% score for the UX dimension “Clarity”.

Guideline #36. Eliminate any design elements that detract from taking the “most wanted” action.

Conversion optimizers are in the business of attention management, just like magicians.

Essentially, everything that does not contribute to your most wanted action is a distraction. For example…

  • Large navigations that take up a lot of screen space
  • Distracting fonts and colors
  • Moving images
  • Additional calls to action with high contrast colors

Note that it is not only internal factors that distract your visitors. They can also be distracted by external factors (their phones, their environment, their social media, their email).

It’s your job, as an optimizer, to direct attention and focus your visitors on the next step. Yet, so few of us do this effectively. Landing pages are full of distractions, CTAs are cluttered, and advertisements and promotions can take away from the primary goals.

The purpose of the homepage is to direct visitors to the most wanted action.

Noise and distraction is not just about how many products you have. It’s how busy your layout is, how many competing design elements there are, all asking for attention.

Peep Laja, CXL

How to do it RIGHT

GNC

There are no pointless elements on this homepage. This, plus the ample amount of whitespace, makes it easy for site visitors to notice the CTA.

On a UX benchmark analysis, GNC ranked at the top with a 78% score for the UX dimension “Clarity”.

I like how everything was laid out and easy to understand.

user quote on GNC

J. Crew

Once again, there are no needless elements on this page. The 30% off sales promotion graphic (and CTA inside it) are prominent.

On a UX benchmark analysis, J. Crew ranked at the very top with a 97% score for the UX dimension “Clarity”.

It’s incredibly clean and modern. It presents itself as a high quality website with high quality products or items for sale. It’s classic and cool and easy to navigate. I found it to be very intuitive and I was able to find what I wanted relatively fast and easy.”

user quote on J. Crew

I loved how clean and simple the site was. It was easy to navigate and I really liked that whenever I clicked on something (women, shirts, sweaters) it came up with more options to narrow down my search.

user quote on J. Crew

How NOT to do it

Hatland

There is so much going on with this homepage that it’s impossible to know what the most wanted action is. Many elements should be eliminated to create some clarity and visual hierarchy.

On a UX benchmark analysis, Hatland ranked at the very bottom with an 11% score for the UX dimension “Clarity”.

Pequannock Feed

The most wanted action is unclear on this homepage. There is no CTA, sales promotion, or product display. This site would benefit from creating some sort of call-to-action above the fold.

On a UX benchmark analysis, Pequannock Feed ranked at the very bottom with a 3% score for the UX dimension “Clarity”.

Guideline #37. Avoid placing advertisements (and content that resembles ads) in prime content locations.

If a website homepage is cluttered with irrelevant information, first-time visitors may become distracted or overwhelmed. More time is spent trying to simply figure out the purpose of a site and, if the page is confusing enough, visitors will abandon a website when this task becomes too difficult. This issue can lead to short and long-term decreases in sales.

It’s important to be mindful of the effects of internal promotions and third-party ads on user perceptions. As stated in the previous guideline, a homepage should relay one primary goal to the visitor. Anything else is secondary and potentially distracting.

The question to ask is always: Does this contribute to someone taking the most wanted action?

Simplify, unclutter, create some negative space. The pages were too jam packed, either with external ads crunched too close in the products, or else internal ads for other products, in banners both above AND below the item being looked at.

How to do it RIGHT

American Eagle Outfitters

There are no ads (or graphics that resemble ads) on this homepage. The small red banner displays a site promotion, but it takes up minimal real estate and it doesn’t look like an ad.

On a UX benchmark analysis, American Eagle Outfitters ranked with a 70% score for the UX dimension “Clarity”.

How NOT to do it

Entirely Pets

Half of this homepage (above the fold) is taken up by a Frontline ad. Even if it is a good brand or promotion, banner blindness causes to users to ignore it.

On a UX benchmark analysis, Entirely Pets ranked at the bottom with a 22% score for the UX dimension Clarity.

The site had a clutterly feel to me. I would clean it up a bit.

user quote on Entirely Pets

Fitness First USA

The majority of this page is taken up by an ad. There is very little information about the website and what it sells besides this one product.

On a UX benchmark analysis, Fitness First USA ranked at the very bottom with a 8% score for the UX dimension “Clarity”.

Guideline #38. Relevant/specific promotions (seasonal promotions, sales for particular product categories) should not resemble banner ads.

In 2013, Nielsen reported in its “Trust in Advertising” study that online banner ads are the least trusted form of advertising among consumers falling even behind traditional ads like in the newspapers or magazines.

This is due to many reasons, mainly:

  • a lack of credibility
  • doesn’t meet expectations
  • amateur ad design
  • plain old ‘banner blindness’

Since users have learned to navigate the internet comfortably, they directly look for information in places on a web page where it is most likely to be. This is a result of our selective attention – an allocation of limited mental resources to the completion of a goal while avoiding any detractors. Banners of any sort are considered detractors. For this reason, website promotions should not resemble ads.

The landing site is not at all welcoming, or giving any sense of the site’s “personality.” Instead, it’s just a swarm of ads for a site the user is already on. The banners and boxes are all jampacked together, and each one is packed to the gills with colors and pictures and text of all different fonts and sizes, some of it blinking or moving, and most of it YELLING AT THE USER IN ALL CAPS.

How to do it RIGHT

Bodybuilding.com

The Okto-bro-fest promotion looks nothing like an ad. The promotion incorporates colors from the website’s color scheme, creating a visual connection that tells users “this is not an ad”.

On a UX benchmark analysis, Bodybuilding.com ranked at the top with a 89% score for the UX dimension “Clarity”.

When asked what they liked about this site, users recalled the “engaging images” and said they “loved the promotions!”.

user quotes on Bodybuilding.com

Hayneedle

The large bespoke imagery invites visitors to check out the Fall Outdoor Sale without looking like an ad.

On a UX benchmark analysis, Hayneedle ranked at the top with a 84% score for the UX dimension “Clarity”.

Guideline #39. Don’t use prime real estate for social media icons; display them in the footer.

Distraction is anything that prevents (or slows) your visitors from taking the most wanted action. The vast majority of people on an ecommerce site don’t care about being socially connected to you, they’re just looking to buy something that solves their problem.

Here’s the hard and fast rule: one page, one goal. It’s highly unlikely that connecting to social media is your first, second, or third homepage goal.

Essentially, everything that does not contribute to your most wanted action is a distraction. This includes social media icons.

Keep social media icons from taking up space that could be more wisely used on elements directing users towards the most wanted action.

Especially as you move closer to where the money is (i.e. product pages and in the checkout funnel) anything that doesn’t contribute to the main goal is a distraction. A Like on Facebook is great, but not at the cost of a sale.

Read about eliminating distractions on CXL blog.

How NOT to do it

Pequannock Feed

One of the only functional design elements on this page is the social media buttons. This page needs a clear most wanted action besides connecting to Facebook and Google+.

On a UX benchmark analysis, Pequannock Feed ranked at the very bottom with a 3% score for the UX dimension “Clarity”.

Gertens

The social media buttons should be moved way down the visual hierarchy on this page. To make the most wanted action more apparent, the “Shop Online” CTAs should be visually highlighted, perhaps with a contrasting color and bigger buttons.

On a UX benchmark analysis, Gertens ranked at the bottom with 16% score for the UX dimension “Clarity”.

Guideline #40. Personalize homepage content when possible.

Web personalization is the real-time individualization of a site to suit each visitor’s unique needs and guide them through a custom conversion funnel.

Why is it important? People are drowning in information and options. Personalization reduces the amount of information and the number of options to help guide visitors through a funnel that’s designed just for them and what they like. It can also prime people in the right way to get them in a certain mindset, or to match their mood.

Increased visitor engagement, improved customer experience, and high conversion rates are the biggest benefits of personalization.

The hypothesis is that the more personalized the site/user experience, the more likely visitors are to convert. So, how exactly are marketers personalizing their sites? Well, it seems they’re sticking to the basics for the most part: popups, information bars, call-outs, etc.

This is a common question: What’s the difference between customization and personalization? Often, you’ll see the two terms being used interchangeably. That’s unfortunate because there is a distinction between the two. Definitions may vary, but to summarize…

  • Customization: The visitor deliberately chooses between options designed to make the user experience more personal.
  • Personalization: The visitor is automatically shown personalized pages based on anticipated needs I wants.

Customization is the visitor’s conscious decision to alert the user experience. Personalization is making predictions and automatically altering the user experience based on big data. Check out our course on Personalization.

How to do it RIGHT

Crutchfield

The “Free 3-Day Shipping to Texas” banner is personalized for the Texan who visited this website.

On a UX benchmark analysis, Crutchfield ranked at the very top with a 95% score for the UX dimension “Clarity”.

J. Crew

This site knows its shoppers are getting ready for fall weather and embraces this with a festive apple border bringing attention to the sales promotion.

On a UX benchmark analysis, J. Crew ranked at the very top with a 97% score for the UX dimension “Clarity”.

I really liked the general layout, color scheme, look and feel of the website. It made everything easy to peruse.

user quote on J. Crew

Continue to the next section:

Ecommerce Best Practices » Homepage & Sitewide » Credibility » Design