Guidelines 35-40
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:
- The CTA’s location should complement the customer’s journey.
- Eliminate any design elements that detract from taking the “most wanted” action.
- Avoid placing advertisements (and content that resembles ads) in prime content locations.
- Relevant/specific promotions (seasonal promotions, sales for particular product categories) should not resemble banner ads.
- Don’t use prime real estate for social media icons; display them in the footer.
- 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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”.
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.
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+.
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.
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.
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.
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