Five tips for creating a holiday gift guide that converts

Many brands will be releasing their holiday gift guides soon and as you prepare to inevitably release your own, we’ve put together some UX design tips to ensure your holiday gift guide bangs this sale season.

But, with unexpected spikes in discretionary and essential categories, it may be difficult to predict what consumers will be spending their money on this year. It is now more important than ever to closely monitor what categories have been purchased at a steady rate, and what categories are seeing unexpected spikes, especially if you have access to our e-Merchandising platform.

What we do know is that more than 75% of consumers have tried new shopping behaviors, methods, brands, and places over the last year (thanks, pandemic!).

So here are some holiday gift guide UX tips for developers to help you optimize your product categories and gift guides ahead of the peak holiday shopping season.

1. Avoid creative that takes up most of the screen — especially on mobile!

We have seen over and over again that users are not likely to be exposed to content when there is a false bottom. Ensure that the next section is partially visible, and while you don’t have to try to fit all your content at the top, we want to make sure that highly converting content will most likely be seen below the fold.

Holiday gift guide UX tips: limit website banner size to encourage users to scroll further down a page

Target’s banner size lets users see there is more content on the page, encouraging users to continue scrolling.

On this Target landing page, the hero image, while large, still allows for part of the next section to be visible. This avoids the ‘false bottom’ and indicates to users that there is additional content below. This can encourage users to continue scrolling and ensure site content lower on the page is still seen.

2. Be specific with category and gift guide labels

Every time a user clicks on content or a category push on your homepage, they are taking a chance on you. With limited time and pageviews to convince someone they should purchase, all copy and labels should be specific. It is more difficult for users to narrow down a large product listing page than to visit a page with a narrower scope, especially if exposure is low past the fold on listing pages. Opt for more specific category pushes, rather than generic categories that are more difficult for users to anticipate.

Holiday gift guide UX tips: a female clothing brand offers highly-specific gift guide landing pages to appeal to specific buyers

A female clothing brand offers highly-specific gift guide landing pages to appeal to specific buyers

Gift guide categories are intentional and speak to users’ personalities. Above these categories, there are also specific guides based on price for swift navigation to what’s most important to users.

3. Provide a seamless way to navigate to other categories or gift guides from the list page

There is no reason a user should have to navigate all the way back to the homepage just to find another category they were interested in. As category pushes tend to perform better than single product pushes on the homepage, you may want to consider providing ways to easily navigate to other closely related categories and gift guides directly from the list page the user is on.

Madewell makes it easy to narrow down search results by price point

At least 3 categories are seen on the Homepage, and do not take the full length of the page. Once the user clicks to the gift guide list page, they can also use a category dropdown to jump to more specific gift guide categories.

4. Don’t forget to include any seasonal or relevant parameters within your filters

In addition to navigating to peak season categories, you can help users by adjusting your filter options to better match shopping behaviors during this time. You don’t want to overwhelm your user with a long product list, but rather encourage your user to utilize the filters effectively. For example, are your consumers concerned with price? Provide parameters that allow them to filter by ‘Gifts under $25,’ Gifts under $50,’ etc. Make sure your filters are clearly visible and easily reachable from anywhere on the page. (Make them sticky!)

5. Be intentional (and creative) with the images and media you use

Choosing images is notoriously difficult, but when the images themselves are cluttered, the page feels cluttered as well. Busy images can be distracting and make the page harder to read, even if the font is legible on the page. Especially if there is text on your images, ensure the images have empty spaces on which the text can be read easily. This is a pro tip for any carousels you may be utilizing. (Don’t forget, you don’t want to auto-rotate your carousels!)

This is also a good time to get creative with your media. More dynamic and interactive media is used to communicate brand or product features, such as auto-playing GIFs, which are quick to load and communicate the type of products being featured, as well as the brand tone.

J. Crew’s gift guide features a fun and festive GIF to get visitors in the holiday spirit

On the J. Crew homepage above, the gift guide category uses an engaging GIF that automatically plays. On the gift guide list page, there is a category dropdown that helps users jump to different gift categories. Users can also easily narrow down listings using buttons like ‘Best Selling’ and ‘Gifts under $25.’

Target’s 2019 gift guide takes a fun, interactive approach to connect customers with great gifts for everyone on their list

Gift lists with fun and approachable descriptions mimic the layout of a Pinterest collage, posing product images on a colorful combination of background colors. Each tile lists the price and produces a popover panel that allows the user to navigate to the PDP or view similar gifts.

And there you have it!

Five gift guide UX tips to help you create a memorable and helpful gift guide this holiday season.

Overall, you want to ensure seamless navigation for your users. This may be the first time for many to be shopping all their gifts online, and just like the in-store experience, no one wants to be confused about where to find something they’re looking for. On the plus side, this is an opportunity to guide your customers to great gift ideas and increase your digital sales.

Comparing Products: Design Practices to Help Your Users Avoid Fragmented Comparison

Users aren’t always intent on purchasing. They may need to conduct extensive research first, meaning they’ll often visit a site multiple times, compare ui/ux and delay their purchase until they’re confident they’re making the right product choice.

Comparing services and products can be time-consuming, especially when you’re flipping back and forth between pages, websites, and information. This is especially harder on mobile, which helps explain why most industries have higher traffic from mobile yet a higher conversion on desktop.

Here are some guidelines that can be applied to pages that use a comparison matrix. 

Keep product names, links, and purchase CTAs accessible at all times

Because most comparison tables can’t be viewed fully on desktop or mobile screens, it’s important to keep the most important information and actions fixed to the top of the matrix, such as linked product titles, prices, and purchase CTAs. As users scroll down, these elements should remain viewable to help encourage conversions. 

Lengthy comparison tables can frustrate users who are only looking for a general overview of each product. So consider collapsing part of the table with an accordion to ’Show more’ based on user preference. This allows those who want a top-level comparison to see more content below the comparison matrix, and not get stuck in the finer details.

 

comparing products - GIF of apple's comparison tool on mobile

Product titles remain at the top of the page as users scroll the listed features, with the option to change the model of the product they’re comparing. Users can also interact within the table to see different visual specifications specific to each model, allowing the user to see the wider range of possibilities when choosing a product.

 

Comparing products - GIF of Samsung's desktop comparison tool between phones

Once users add products to the comparison tool, the product names and conversion CTAs remain sticky at the top of the page.

Comparing products: Help users easily identify key differences

It’s unlikely your users will read every detail, so it’s imperative the design allows them to easily skim the differences. This helps them decide quickly which product is most appropriate for them. 

3 top tips for your comparison matrix

  1. Use white space or hyphens to imply a lack of features, and check marks to indicate the existence of a feature. 
  2. If you include descriptions of features, use short and succinct phrases.  Lengthy descriptions will hinder your user as well as clutter the matrix. 
  3. Avoid using text in every row or column; this defeats the purpose of the user being able to compare products easily.

 

Webflow's desktop site comparing products in a table

The key differences are easily seen with the use of white space. There is no attempt to fill every row with information, which allows the user to see clearly which plan has the most features. Text is only used when the products all contain the same features and they are clarified further to delineate the differences.

 

 

Best Buy's mobile comparison tool

The comparison tool takes advantage of the horizontal scroll on mobile to allow users to compare many products at once. Users can also toggle the table view to highlight the key differences, making it easier to spot which features are differentiated by product. In addition, the user is provided a preview of the main features, with an option to expand the rest of the details. The comparison tool even compares reviews and ratings from customers.

Comparing products: Answer common questions as users browse the product comparison

Though highly informative, the comparison matrix is unlikely to answer all your users’ questions. They may have common questions about your line of products or pricing that isn’t necessarily a highlighted feature. They may also need clarification on specific features that the table doesn’t provide.

It’s important to answer common questions here, as the comparison page is a key conversion point of the journey. Make sure to check which types of product pages are more likely to lead to conversion using Page Comparator within the Contentsquare platform. Then understand whether navigation away from the page is likely to lead to an exit using our Journey Analysis feature.

In this case, tooltips within the matrix or a condensed section of FAQs below the matrix are both extremely effective methods of answering common questions. Rather than rely on graphic icons to delineate tooltips, consider using text to phrase common questions as the tooltip itself. Tooltips phrased as common questions are more relatable and easier to spot than a smaller graphic icon.

 

Webflow's desktop product comparison page where the user can anchor to the bottom of the page

Comparing products: Use a soft offer close to the main CTA

Providing a soft offer can be the golden ticket when encouraging users to try the product without a full commitment. Promoting free trials or offering a free consultation close to the main CTA can be an effective way to reach prospective clients. 

 

H&R Block's product comparison page on deskto

The product CTAs and titles remain sticky at the top of the matrix, with an emphasis on starting a trial.

 

Asana's product comparison table with two different offers

The CTAs focus on trying a free trial, but offer a text link for users that are ready for more commitment.

Be transparent about pricing prior to checkout

Lastly, because many products have various pricing methods and commitments –  annual versus monthly, for example – it’s important the user understands exactly what they’re signing up for. 

Allow users to toggle different views of the comparison matrix that adjust the pricing to their specifications. Clearly state whether users are expected to make annual commitments, and whether plans or products can be canceled at any time. 

 

Hubspot's desktop view comparing products and prices

Users can easily toggle the different pricing options; the price adjusts based on the selected method.

Remove customer friction with Contentsquare 

Find out why your customers behave the way they do with our industry-leading customer experience analytics platform. Use our Session Replay feature to understand why customers aren’t interacting with your chatbot design, or discover your most profitable digital paths with in-depth Sunburst visualizations, covering data from 100% of your customer journeys.

Interested to learn more? Book a demo with us today.

How to ensure your site is operating at peak performance

Preparing for the holiday shopping season is as much about reducing risk as it is about finding innovative ways to improve the site experience. Slow pages and technical errors are the quickest way to ensure new visitors don’t find what they’re looking for on your site.

But with so many things contributing to technical performance, how do you know where to focus ahead of the holidays?

Luckily, we brought in the expert.

Introducing Radek

Radek Kowalski is the SEO Technical Director at Manchester-based digital marketing agency, McCann Connected. With more than a decade’s experience and (whisper it) close ties to the Google mothership, Radek has helped hundreds of brands optimize their websites.

In this short Q&A video, we discuss how to prioritize ahead of the peak holiday shopping season, where to find quick wins you can action today, and why pessimism is your friend.

Enjoy!

Key takeaways:

  1. Understand your business and trends
  2. Review your infrastructure regularly
  3. Test and Stress Test before peak
  4. Always aim for the best but prepare for the worst
3 Upsell UX Best Practices to Drive eCommerce Sales

Upselling and cross-selling can be a challenge to implement in any industry. A poorly-time distraction can frustrate users, or worse, cause them to leave your site. At the same, cross-selling, when done right, can prove to be an effective way to increase revenue and sales. In fact, product recommendations drive 10-30% of eCommerce site revenue, according to Forrester research analyst Sucharita Kodali. But, you can’t push just any product at any point in the buyer’s journey. In order to really drive value for your customers, you need to be mindful about what you suggest and about your upsell UX.

There’s no doubt that companies should take advantage of upsell and cross-sell opportunities to surface relevant, popular products to customers and drive sales. After all, pushing a product at the right time can help increase the average order value at checkout. The tricky part, however, is executing these recommendations in a seamless, unobtrusive way.

To help you perfect your eCommerce upsell UX and cross-sell strategy, we’ve put together some best-in-class examples that show how you can incorporate upsells and cross-sells within your existing site design.

 

1. Present recommendations in the cart preview or add-to-bag confirmation modal

Placing product recommendations within the cart or add to bag confirmation allows users to make quick decisions about adding products they may have missed during their browsing session, while catching their attention before the end of their purchase journey 

Recommendations should stand out from the cart in their own container and design. This helps users quickly distinguish between areas of the cart page, while still capturing their attention.

Wayfair's upsell UX: Once a user adds an item to their bag on home goods company Wayfair’s site, they receive recommendations within the same modal for relevant warranties and accessories.

Once a user adds an item to their bag on home goods company Wayfair’s site, they receive recommendations within the same modal for relevant warranties and accessories. Users can choose to add items, continue to the cart, or exit out of the modal to return to their browsing experience.

 

2. Surface recommendations to the shopping cart

Adding cross-sell recommendations directly to the cart without having to navigate away from the browsing experience allows for a hassle-free experience. Make sure to have just enough key details to empower your users to make an informed decision, such as the product title, an image thumbnail (if applicable), and the price. Have the cart update seamlessly and automatically if a user decides to add one or more of these items to their cart, and check for long page reloads when users use this feature to minimize frustration.

When creating your upsell UX, consider providing a tooltip or a quickview for users that require more information about the product before adding.

Away's upsell UX displays product add-ons on the right-hand side of a users cart, allowing them to easily add these additional items to their cart before continuing to checkout


On luggage and travel accessories company Away’s site, add-ons are displayed on the right-hand side of a users cart using a panel with a different background color to help set it apart from the rest of the cart. Users can click on the plus icon to add these items directly to their cart.

Joybird’s site upsell UX offers users optional add-ons for eligible products wIthin a cart preview module

On furniture retailer Joybird’s site, the company’s upsell UX offers users optional add-ons for eligible products wIthin the cart preview. From this view, users can directly add these warranties and protection plans to their cart.

 

3. Personalize your recommendations

Your recommendations should be straightforward and fairly intuitive to your users. You don’t want to surface a product that seems completely unrelated to their interests or needs. Items should be of lower cart value, or at least a necessary addition to the item that was added. That way, your users can quickly perceive the value of these additional items, decide whether the item is right for, and seamlessly add it to their cart.

Any item you recommend should fit into one of these three categories:

  1. It’s directly related to the product
  2. It’s complementary to the product
  3. It’s personalized for the user

So, how can you ensure the value and convenience of these items are communicated clearly to your customers? The secret lies in optimizing both your user interface (UI) and using easy-to-understand copy. Here’s how to improve your upsell UX using these two factors: 

Recommendations should make sense to the user based on their relation to other items in the cart. For example, are they normally bought together out of necessity? Or, are you surfacing this recommendation because most users bought these items together?  Indenting cross-sell recommendations within the same listing and using the right language can be a subtle, but effective way to indicate direct relation to the cart item. 

 

On Apple’s cart page, recommended add-ons and protection plans are listed in the same container as the cart item

Apple’s upsell UX recommends add-ons and protection plans in the same container as the cart item. Users can use a simple ‘Add’ link to automatically add the coverage to their cart within the cart page, so they never have to leave the page and their checkout flow is not disrupted. 

 

Van's upsell UX recommends related products right on its product display page

Another way to suggest related products to customers is on a product display page. Shoe company Vans offers its popular Water & Stain Shield product on the PDP for its shoes. Customers who are buying a new pair of Vans will probably want them to stay in good condition for as long as possible. So, they can easily add the spray to their cart and help protect their new shoes from stains and moisture. 

 

Despite the difficulty of incorporating recommendations without being intrusive, cross-sell and upsell product recommendations can ultimately be very beneficial for users. It’s a great way to surface relevant products that a customer may have missed during their browsing journey. For you, it’s an opportunity to drive more sales, but also to increase the discoverability of your products and help your customers find what they need more easily and efficiently. 

It can be an effective way to maximize their experience without the difficulty and time-consuming activity of looking for specific items that pair well together with the product they already plan on purchasing. At the end of the day, cross-sells should be considered as a seamless part of the experience rather than an afterthought to the design.

4 Tips for Perfecting Promo Code UX on eCommerce Websites

Whether it’s the holiday season or not, it’s imperative that your promotions and coupon codes work effectively for the user. Promotions and discounts go a long way in encouraging users to buy and makes it crucial to mitigate any confusion or friction. But, having confusing exceptions and bad promo code UX can sometimes do more harm than good.

In a recent survey we did with CommerceNEXT and BizRate Insights, we asked 1,000 online shoppers what they value when shopping online. The top two qualities they valued when picking where to shop online were price and deals and promotion. When we asked what would make them shop with an online brand time and time again, 68% of respondents said good value and price had the most influence over their decision to become a repeat customer. 

While price is clearly top of mind for online shoppers, brands need to effectively showcase their sales to attract both new and existing customers. But, when you’re competing on a global scale, you need to ensure you’re highlighting your sales and deals in the right way to catch customers’ attention. Having a strong discount strategy is only half the battle. You also need a strong promo code UX to see positive results.

With over 900 global customers, we’ve put together a list of the best ways we’ve seen brands promote their coupon codes and deals to their customers to help you understand what makes a good promo code UX. Here’s a quick checklist to help you ensure you’ve optimized your coupons codes and promo code UX on your eCommerce site: 

 

1. Clearly and succinctly explain how the user can take advantage of the promotion


Whether you are using an announcement banner across the top of your site or using standalone text on product pages, it’s imperative that your explanation of the deal is not confusing. If users have to use a specific code to redeem the promotion, answer the what, where/how, and why. Simply state what that code is, the benefit of using the code, and how users can redeem it – without any fluff. 

If users have to reach a certain threshold for spending, clearly define that threshold and whether it is before or after tax. If certain categories or exclusions apply, make sure the user knows this prior to browsing. Nothing is more frustrating than to find out right before checkout that actually, the products that you are interested in are not valid for promotion. 

 

2. Don’t overwhelm the user with too many details upfront

Have a lot of things to say about the promotion that’s running? Use clear links that open a pop-up rather than a new window that lists additional details about the promotion that can help the user understand what products and services are eligible as part of the deal. 

Within the pop-up window, make sure that your design is simple and clean — keep your line heights and text sizes readable, avoiding text that resembles fine print. Keep the message as short as possible and avoid adding fluff. Your users are already spending the time to read additional details, you want to make it as easy and clear as possible for them to understand the details and terms of the offer. That way they can spend more time shopping your site and less time getting caught up in the details of your offer. 

 

Abercrombie & Fitch's promo code UX draws attention to site-wide deals directly on its homepage

 

Clothing brand Abercrombie & Fitch uses space on their homepage to clearly outline the parameters of a promotion. The main benefit of the promotion is written right in the title and subtitle. Users are encouraged to use links to navigate to categories. Succinct phrases are used to further clarify any exceptions to the promotion, with a link to view the promotion in detail.

 

3. Surface product-specific promotions on PLPs and PDPs

Avoid inundating the homepage with product-specific promotions. Save these for the PLPs and PDPs so that users aren’t overwhelmed with information and discounts are surfaced in a timely manner. Don’t waste precious real estate on your homepage for product-specific promotions, as these deals may be irrelevant to users on the homepage who are not interested in those specific offerings. Save promotions that are site-wide for your announcement banners, as they should reach and apply to a more general audience.

On the other hand, you know a customer viewing that specific product page would be more interested in your deal, so it makes more sense to feature the deal on that PDP or PLP.  

 

Glossier uses small badges on their PLP to advertise product-specific discounts.

 

Cosmetics and skincare brand Glossier uses the floating announcement banner at the bottom of their mobile site to push site-wide promotions. However, product-specific discounts and promotions are pushed on the PLP using simple and easy-to-read badges that advertise product-specific discounts. In this example, discounts are focused on product bundles.

 

Fenty Beauty uses non-obtrusive PDP popups to alert users about product-specific discounts.

 

Similar to Glossier, cosmetics brand Fenty Beauty’s announcement banner at the top of the site alludes to a site-wide promotion. It is specific about the spending threshold users must reach in order to receive free shipping. In addition, a small pop-up is used next to the “Add to Bag” CTA on specific PDPs to alert users about product-specific promotions and discounts.

 

4. Automate the application of coupon codes


No one wants to have to remember coupon codes or jump from their cart to the homepage to copy and paste a discount code. Make it easy for your customers to see and apply codes with just a click of a button during your checkout process. This helps your users to avoid potential human error, like spelling errors, which can lead to frustration. Helping your user apply codes easily and automatically when promotional requirements have been met is an easy way to earn a brownie point from your user. Plus, it lessens the likelihood of them abandoning their cart to go in search of a coupon code on coupon sites, like RetailMeNot.

 

Old Navy's promo code UX lets users view deals from any website page so they can easily understand how to qualify for a promotion

 

On clothing brand Old Navy’s desktop website, users can expand the available offers section at the bottom of the page and tap to apply a code automatically to their cart. Each offer clearly explains what code is being applied, or whether no code is needed.

 

Bed Bath and Beyond's promo code UX allows customers to view available coupons, check eligibility, and apply them to their cart during checkout

 

On home goods store Bed, Bath, and Beyond’s desktop website experience, users can see whether there are coupons available to use directly from their cart. Users can simply click ‘Apply Coupons” to surface a pop-over with a list of promotions and browse deals. Each promotion has an “Apply” CTA that automatically applies the coupon to the cart. Users receive confirmation of the application and see the update automatically within the cart (without a page reload).

 

Overall, the types of promotions you implement for your customers will determine the best way to surface them within the digital experience. No matter what, communicating clearly and doing the work for your customers will improve the browsing and purchasing experience of your site.

The 3 Most Common UX Mistakes Every Company Should Avoid

To keep up with changing user behaviors and needs, brands have had to pivot and adapt quickly in the past year. While the pandemic pushed many existing digital customers to increase the frequency of their online shopping, it also pushed many new users to convert online for the first time. In order to maintain this surge of new and existing customers, companies have to build an intuitively designed website that helps their customers quickly and easily find what they are looking for. Unfortunately, common user experience (UX) mistakes could be holding you back.

At Contentsquare, we have over 700+ clients across multiple industries and have seen our fair share of exceptional UX design. On the flip side, we’ve also seen a handful of common UX mistakes brands make that can greatly affect the digital customer experience and hurt their on-page performance metrics. 

The good news? These common UX mistakes are easy opportunities to improve your website or app and give your customers a better online experience. 

Here are the three most common UX mistakes we see brands make and how to easily fix them: 

 

1. Creating a “False Bottom”

A “false bottom” occurs when it seems like a page has reached its logical end. For example, a content block may end perfectly at the bottom of the screen, thus creating an illusion that there is no other content on the page. This increases the likelihood that a user will not scroll down the rest of the page, which can cause them to miss out on engaging and relevant content. Users rely on the page design to understand whether there is additional, relevant content, both vertically and horizontally on the page. Even small cues, like an arrow, can signal there’s more content to be seen and encourage them to continue scrolling. 

This can happen often when a hero image or an eye-catching, full-width video is meant to engage users without any indication of important content below the fold. Distinct borders or expansive white spaces between content may also create this illusion throughout the page.

Because of this, we frequently see low exposure rates on content below the fold but have a higher likelihood of interaction or even conversion. Through heatmapping, Contentsquare data reveals that 69% of all website content goes unseen by visitors. 

Solution: 

Charity Water's homepage has content trail off the page to indicate to users that they need to scroll further down the page

Charity Water uses a smaller homepage hero image so the next section of the page is clearly visible, encouraging visitors to continue to scroll down the page.

Avoid accidentally creating a “false bottom” by providing visual signifiers that indicate users can swipe or slide horizontally, or partially bleed content off the screen. Use strong headlines and section headers to separate content, and be mindful of the content flow of your page.

AirBnB's homepage content bleeds off the carousel to indicate to users that they can scroll to see more.

AirBnB’s mobile homepage has carousels that use the illusion of continuity to entice users to scroll and to encourage discoverability.

 

2. Not Having a Sticky Main Navigation

When the main navigation is not sticky to the page (on both desktop and mobile), it can be difficult for users to navigate to other areas of the site. Users can also experience difficulty when browsing lengthy content or list pages where the navigation can only be reached by excessive scrolling. This experience is exacerbated on mobile due to its limited content view. 

Although there should be plenty of alternate navigation on the page that is relevant to the content, the main navigation is a universal indicator for navigation that users are already familiar with. This is also a good tool to browse areas of the site that are not accessible directly from the page they are currently on.

Solution:

By making the main navigation “sticky” so it’s permanently on users’ screens even as they scroll down a page, you may see increased click rates, engagement rates, and faster time before first clicks on your content. 

A sticky navigation bar on Lo & Son's mobile experience

The navigation bar on Lo & Son’s remains sticky as users scroll, making it easy to navigate to other areas of the site regardless of where the user is on the page.

Ensure that your menu’s hierarchy is correlated to the areas your users are most interested in to least interested in, so they can more easily and intuitively find what they’re looking for. This might require you to remove sections or rearrange the architecture of your navigation bar content to match what is most useful to your user based on your visual app analytics. Keep in mind what mental models your audience may have or terminology they are familiar with in regards to your products and content. A mental model is how a user thinks something works. For example, if the information architecture of a site uses internal company jargon, instead of the language used and expected by the customer, that can negatively affect the user’s customer journey. To avoid this, just use vocabulary that your user understands and expects. 

 

3. Not Ensuring Content is Legible and Readable

A common UX mistake we often encounter at Contentsquare is when content is either difficult to read or difficult to understand. While typically you want on-page text to be as succinct as possible, that’s not always possible, especially when you have to meet legal or SEO requirements. You can, however, ensure it’s readable and legible.

Solution:

To improve legibility, always make sure that your fonts are 14px or above, with a contrast ratio of 4.5:1 (minimum) for normal text and 3:1 for larger text. Users can have difficulty reading text that is smaller, or with low contrast. Note that these ratios are the standard for legibility for an audience with healthy, normal vision and does not only include those with disabilities. For a more inclusive and accessible design, W3C’s level AAA success criterion requires a 7:1 contrast for normal text and 4.5:1 for large text to allow users with low vision who do not use assistive technology to clearly see the text. 

Try to keep your text on plain surfaces. If text is placed on busy images or backgrounds, it can be difficult to read. If you do overlay it on an image, ensure that it’s on an uncluttered area of the image with high contrast. That may require additional collaboration before new creative work is planned.

For any “fine print” text, consider using a pop-up with a text link or tooltip to share necessary information with your users while avoiding clutter on the page. Choose your typefaces carefully, as certain typefaces require larger sizing and can contribute to decreased legibility.

To improve readability, use simple and short sentences that any reading level can understand. Get to know your audience well. What industry jargon are they familiar with? What will they likely not know? Make sure to be clear, to-the-point, and conversational, while providing clear tooltips that can answer common questions. It is also helpful to break up lengthy content into frequent, short paragraphs. Or, you can use images and diagrams to lighten the cognitive load of maintaining attention to large amounts of text.

 

Although there are many more UX issues that can be addressed, these are three great opportunities for improvement that can help improve any website and any page’s content.

How to Turn ‘No Results’ Pages into Conversion Winners

As both website users and user experience experts, we can all relate to the situation of searching for a specific product or string of words on a company’s website and getting the simple dead-end response: “No Results Found.”

Sometimes they might switch things up with a “0 Results Found,” but most of the time, the effect remains the same. As a user, we feel lost and stranded, without any guide or next steps to follow. This is the first critical mistake of any “no results” page.

We see the effect time and again in Contensquare user session replays: users typically reach an empty “no results” page and then pause to “look around” with their mouse, scrolling up and down. They then attempt to either re-enter a search, hit the back button, or abandon the website entirely.

We can’t help but wonder how many potential customers fall through the cracks after a failed search and abandon their shopping experience altogether. From content to eCommerce sites, the “no results” page is the opportune place conversion optimizations and start flipping those “failed searches” into successful conversion stories. Let’s start with the easiest “no results” page recommendations to implement and move our way up:

 

1. Stop No Results Pages Before They Happen

This is somewhat of a no-brainer, but it’s so important that it’s worth mentioning. Prevention is always better than treatment. To improve your site’s search engine results, make sure all of your product pages are up-to-date and build out your own controlled vocabulary. Do what it takes to ensure that none of your users sees the “no results” page, and you will reap huge benefits.

 

2. Implement Autocomplete with a Twist

Auto-complete search represents one of the best ways to prevent the no results page from appearing altogether. Presenting autocomplete suggestions accompanied by product thumbnails, like Shoe Me Gorgeous does below, is a smart and user-friendly way to gain a competitive edge. Plus, adding images to on-page autocomplete search results can increase your overall conversions, average order value, and per visit value.

Show Me Gorgeous' search bar includes autocomplete search suggestions with product thumbnails to prevent users from hitting a no results page

Show Me Gorgeous’ search bar includes autocomplete search suggestions with product thumbnails to prevent users from hitting a no results page

 

3. Include Automatic Spell Check 

Google has dramatically shaped users’ expectations for the search experience. Users now expect internal site searches to auto-correct our spelling mistakes or offer a polite, “Did You Mean ___?”

Yet, surprisingly, this functionality is still not yet standard across many sites. Without it, though, potential customers might not recognize their mistake and assume you don’t have the product or service they’re looking for when they hit your “no results” page. Instead of double-checking the spelling of their inquiry, odds are they’ll go somewhere else to find what they need, costing you the sale.

While you should try to implement an automatic spell-check feature on your site search, there are a few alternatives to help you improve the search experience if that’s not a possibility. You can still take advantage of the “no results found” page to make it clear that while there are no matching results to their query, your users should try the following to see more promising search results: 

 

An example of an alternative display for "0 results found" on Shutterstock

An example of an alternative display for “0 results found”

Shutterstock is a good example of what a website can do if a search query pulls up zero results. Its first reminder is that the user should check their spelling. If that does not help, it suggests that users edit their search query term – and then offers further recommendations.

 

4. Always Offer Another Way Forward 

Contentsquare’s zone-based heatmaps confirm that most visitors will abandon a site within 2 minutes if they can’t find what they are looking for. When users are confronted with 0 results and no additional guidance, we see a more scattered distribution of mouse moves and clicks around the page, with the majority of the mouse interactions centering around the search bar or top of the page – either near the back button or the browser bar – indicating users are abandoning both their search and the website.

Mouse Move Heatmap of a "0 results" page, showing excessive mouse movement around the page.

Mouse Move Heatmap of a “0 results” page, showing excessive mouse movement around the page.

The solution is simple: Don’t leave potential customers stranded without any direction on your no results page! Remember, they are only one click away from exiting your website.

Besides offering spelling suggestions and tips on how to better approach or refine the user’s search, you can:

 

5. Optimize for Mobile Search

It goes without saying that mobile users should enjoy the same (or better) experiences as desktop users. Your mobile “no results” page will likely get more hits than the desktop equivalent due to a higher occurrence of misspellings. You need to ensure mobile users have all the same navigation options and suggestions available to desktop users.

Best Buy's "0 results" page pushes searchers to their most-viewed featured products as a potential next step

Best Buy’s “0 results” page pushes searchers to their most-viewed featured products as a potential next step

 

Mobile users have less patience than those on desktop. Plus, they can also be more easily distracted from the task at hand. That’s why it’s important to provide a quick and easy way for them to find what they need. There isn’t too much room for error here – users expect an easy ride on mobile and if they don’t get it, they’ll go elsewhere.

 

6. Add a Personal Touch

Your search bar is designed to help your customers find what they need quickly and easily. That said, it’s also a great opportunity to showcase your brand voice. “0 results found” is frustrating, in part, because it’s cold and impersonal. On the other hand, it’s hard to dislike: “We’re sorry we can’t seem to find anything that matches {query}. How about we try again?” A little empathy can go a long way and help your brand stand out in a positive way! 

Don’t overlook the importance of the “no results found” page. These six “no result” pages best practices will greatly improve the user experience on your site. With a little planning, you can easily turn the many missed opportunities from failed searches into additional conversion winners.

Learn more about how to increase conversions with Contentsquare.

Contentsquare Data Says People Don’t Like Free Beer

Contentsquare’s marketing team ran a campaign this summer offering a custom consultation with one of our resident UX-perts over a cold beer. Because who can say no to the offer of refreshing yourself and your website at the same time? As it turns out… quite a few people. 

Sure, we assumed there would undoubtedly be individuals who weren’t intrigued by the words “eight complimentary craft beers,” but as a marketing team that has gifted brews in the past, we know just how popular the opportunity for free beer can be. That insight, of course, comes from a pre-COVID era. Quite a few things shifted in 2020 and we realized our methods needed to shift with it.

 

Our Hoptimistic Approach

Surprising people with beer was one of the highest performing direct-mail campaigns that we ran in 2019. Showing up to the office and receiving an unexpected box filled with eight different craft beers delighted many people enough to take the time to chat with us. 

Then, 2020 happened.  

People swapped their daily commutes and office appearances for the shelter-in-place work from home lifestyle. We were remodeled into remote workers. Toilet paper and hand sanitizer became hot commodities. Happy hours were reduced to Zoom calls. It was a whole new world.

What we initially thought would be a few weeks turned into many months and most of our memories took place within the walls of our respective homes. Everything moved digital – we had meetings, events, and happy hours all online. Even online grocery shopping took off. Direct-mail campaigns were no exception.

People were staying in place for (at least) the foreseeable future and one can only send so many digital gift cards. So the question was, how do we continue to utilize our fan-favorite campaign when the element of surprise was no longer an option? We had to revamp our entire approach. Get “crafty,” if you will.

And so we did. Instead of sending beers to the office world to charm people into taking meetings, we shifted to offering digital consultations over a cold one. We asked prospects to sign up for a quick chat with the promise they would get beers delivered straight to their home to enjoy during the meeting, or after. The surprise may have been taken away, but the free beer remained and that’s all that mattered right? Not exactly…

 

Not Ale It’s Cracked Up to Be

As soon as the campaign went live and the first emails were sent out, we expected the meeting requests to roll in. 

Ok, we aren’t that presumptuous, but we did expect to get at least a few requests the first week. Or maybe by the second week… The third? More than a month into the campaign, we only had two people claim their opportunity to parlay over pilsners. Where did we go wrong?

It was time to take a closer look at the experience and why people weren’t converting. 

Luckily, we have this tool called Contentsquare (shameless plug). As a marketing team, we’re the exact audience to whom we often market our tool and often use it in-house. We activated our CS Live extension to see what was working and, more importantly, what wasn’t on our campaign landing page. People were getting to the page, they just weren’t converting – but why? 

The promise of complimentary craft beers clearly wasn’t enough. We wanted to know where we went wrong. Why were people bouncing without claiming their brews?

We started by investigating click rates. Where were the hot zones on our page? Were any elements particularly frustrating to our landing page visitors? 

Our first move was clear. One of the highest clicked elements on the page wasn’t even clickable! Rookie mistake. An arrow that was meant to signify that scrolling down would reveal more details about the offer was not relaying that message. 

We also checked our click recurrence and noticed that the same element wasn’t just getting clicked, but getting clicked multiple times! The frustration was obvious. 

 

Step 1: Remove Visitor Frustration

To start, we removed the arrow and replace it with the copy, “Scroll down for more info 👇.” Just like that, no more clicking frustration.

This was, of course, only frustrating for the people that actually saw this ultimately annoying arrow. When we checked our exposure rate, we were surprised to find that 50% of our header content (and the CTA!) wasn’t being seen by almost half of our visitors. The good stuff was below the fold.

We may be offering eight hand-selected craft beers, but what good is it if no one sees the offer?

 

Step 2: Bring Key Info Above The Fold

Next, we shrunk the top banner to make sure the most relevant content is above the page fold and entice visitors to scroll down to learn more. 

One of our biggest quick wins was to make sure the submit button was visible when you loaded the page. As one of our client onboarding managers once told me, in order for someone to buy shoes on a website, they need to see the button that says “Buy Shoes.” It was time to cut the dead weight in the contact form and bring that button further up the page. We turned back to our click rate and noticed that 2.58% of visitors clicked to add their postal code but only 1.28% clicked to select their state. Did we need the state if we knew the postal code? No.

 

Step 3: Increase CTA Visibility

Again, we noticed our “Submit” CTA on the page’s form was hiding beneath the fold. People landing on the page couldn’t immediately understand what action we wanted them to take and bouncing. To increase the visibility of the CTA, we cut unnecessary form fields and moved privacy and shipping rules to the bottom of the form. That raised the CTA above the fold and made it easier for viewers to understand what the page was for. 

The last thing we checked was the attractiveness rate, or what percentage of visitors seeing a page element is likely to click on it. Turns out our CTA at the very bottom of the page, or “Book My Hoppy Hour,” was a very popular option for the people who actually reached the bottom of the page. We had some good news, something was working as it should. 

Once we made these slight tweaks to our simple landing page, we saw immediate improvement. Our page visitors were finding the information they needed to feel more confident booking a meeting and the requests started rolling in. 

 

Our Hoppy Results

People do still like free beer! But, it’s not just about the end result, it’s about the journey they have to take to get there. Contentsquare helps uncover exactly how your prospects and customers navigate the digital experiences you create. And sometimes, a few small tweaks can have big results – as we can confidently attest to ourselves!

What to hear how Contentsquare can help your business?

Learn More