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.
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.
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 ComparisonUsers 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.
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: 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
- Use white space or hyphens to imply a lack of features, and check marks to indicate the existence of a feature.
- If you include descriptions of features, use short and succinct phrases. Lengthy descriptions will hinder your user as well as clutter the matrix.
- Avoid using text in every row or column; this defeats the purpose of the user being able to compare products easily.
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.
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.
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.
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 performancePreparing 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:
- Understand your business and trends
- Review your infrastructure regularly
- Test and Stress Test before peak
- Always aim for the best but prepare for the worst
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.
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.
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.
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:
- It’s directly related to the product
- It’s complementary to the product
- 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.
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.
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 WebsitesWhether 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.
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.
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.
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.
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.
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 AvoidTo 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 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.
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.
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.
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 WinnersAs 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
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:
- Check their spelling
- Try using more general words
- Avoid using brand names
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.
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:
- Offer a search box with the original query still there for the user to easily edit.
- Always provide relevant alternatives whenever possible. ‘No results’ may also be an indication that the product out of stock. If that’s the case, use this as an opportunity to offer up other similar or related items.
- Similarly, provide links to other popular choices or categories on the website. Users are depending on your next response, so use this space wisely to provide them with something of value!
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
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