{"id":2022,"date":"2020-08-04T14:25:21","date_gmt":"2020-08-04T14:25:21","guid":{"rendered":"https:\/\/www.prefixbox.com\/blog\/?p=2022"},"modified":"2024-08-27T09:03:24","modified_gmt":"2024-08-27T09:03:24","slug":"no-results-page-examples","status":"publish","type":"post","link":"https:\/\/www.prefixbox.com\/blog\/no-results-page-examples\/","title":{"rendered":"12 Awesome No Results Page Examples (+6 UI Design Best Practices)"},"content":{"rendered":"\n
<\/div>
<\/div><\/div>
\n

12 Awesome No Results Page Examples
(+6 UI Design Best Practices)<\/h1>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

No matter how much optimization you do, it\u2019s inevitable that some searches on your online store will lead to no-results found pages. Planning for these inevitable dead-ends should be an integral part of your UX design from the start. Search is the most important tool in guiding shoppers to products, but even if you follow all of the most important eCommerce search best practices<\/a>, \u201cno results found\u201d pages still happen.<\/p>\n\n\n\n

<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n\n

<\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Contents<\/span><\/div>\n\n\n\n
\n
\n
\n
\"\"<\/a><\/figure><\/div>\n\n\n\n

Chapter 1<\/p>\n\n\n\n

No results, no control<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/a><\/figure><\/div>\n\n\n\n

Chapter 2<\/p>\n\n\n\n

The Best No Search Results Found UI Design Guidelines<\/p>\n<\/div><\/div>\n\n\n\n

<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/a><\/figure><\/div>\n\n\n\n

Chapter 3<\/p>\n\n\n\n

The Best eCommerce No Results Page Examples<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/a><\/figure><\/div>\n\n\n\n

Chapter 4<\/p>\n\n\n\n

No Search Results Found UI Design Best Practices<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n

Having a great \u201cno results found\u201d page design is an enormous opportunity for you to build trust <\/strong>with your customers, but you can only do that if you design these pages consciously.<\/p>\n\n\n\n

<\/div>
<\/div><\/div>
\n
\n
\n
<\/i><\/div><\/div>\n<\/div>\n\n\n\n
\n

Even though these pages are critical to a online store, according to Baymard<\/a>, “68% of e-commerce sites have a \u201cNo Results Page\u201d implementation that is essentially a dead-end for users, offering no more than a generic set of search tips.”<\/em> Which also means that customizing your page in a user-friendly way is an opportunity to do get ahead of your competitors. And it only takes minimal effort.<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Why are these pages so important?<\/p>\n\n\n\n

It\u2019s because these pages keep shoppers on your site even though they can\u2019t immediately find what they\u2019re looking for. If you have a great \u201cno results found\u201d page, you can effectively re-route the shoppers and help them make another purchase. Whereas, with a bad \u201cno results found\u201d page, the shopper will most likely leave your site and go to your competition instead.  <\/p>\n\n\n\n

This is a big deal. You can avoid this by thinking of the following:<\/p>\n\n\n\n

<\/div>\n\n\n\n
<\/div>\n\n\n\n
Chapter 1<\/span><\/div>\n\n\n\n

No results, no control<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

It’s important to note that while you should aim to guide shoppers with a search bar, this also gives them a sense of confidence and control over their shopping experience<\/strong>. This sense of control is important in creating a good user experience and building brand loyalty with your customers.<\/p>\n\n\n\n

<\/div>
<\/div><\/div>
\n
\n
\n
<\/i><\/div><\/div>\n<\/div>\n\n\n\n
\n

Landing on a \u201cNo Results Found\u201d page that doesn\u2019t provide alternate products or information on what to do next, can easily make shoppers feel like they\u2019ve lost control over their shopping experience.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Why does this happen?<\/p>\n\n\n\n

As Nielsen <\/a>states, shoppers don’t always realize that they arrive at a “no results found” page<\/strong>, simply because conducting searches on the web is such an integral part of our daily lives – we are wired to expect certain results within a certain structure. That is: some information on the top about the search that was just performed, which could usually be skipped over, and the relevant results below.<\/p>\n\n\n\n

In case of a \u201cno results found\u201d page, information about what happened <\/strong>is usually included in the spot that people often skip over, <\/strong>so they don\u2019t realize they search didn\u2019t return any relevant results. Shoppers are often surprised when they see other webpages or products where they expect the results to be. This often confuses shoppers and leads to a negative experience on your website.<\/p>\n\n\n\n

This is why providing tips and alternative products, in a way that the user actually reads them, is very important.<\/strong><\/p>\n\n\n\n

In this article we are going to look at some awesome examples of “no result found” pages.<\/p>\n\n\n\n

But first, we have to talk about the basic guidelines of how these pages should be designed.<\/p>\n\n\n\n

<\/div>\n\n\n\n
<\/div>\n\n\n\n
Chapter 2<\/span><\/div>\n\n\n\n

The Best No Search Results Found UI Design Guidelines<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Now that you see why \u201cno results\u201d pages are so important, let\u2019s check out the best practices for designing pages that help reduce your site-abandonment rate.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Clearly explain what happened<\/h3>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Clear up any potential confusion at the first opportunity to do so.<\/p>\n\n\n\n

And be sure to do it in a way in which the shopper actually sees your message \u2013 otherwise it\u2019s pointless.<\/p>\n\n\n\n

<\/div>
<\/div><\/div>
\n
\n
\n
<\/i><\/div><\/div>\n<\/div>\n\n\n\n
\n

To figure this out, do a heat map analysis of your search results pages, and put the information about the failed search in the place shoppers instinctively look first.<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

You don’t have to over-complicate this: just tell them the search term they entered yielded no results<\/strong>, but they shouldn’t just stop <\/strong>searching. It often happens that the product they\u2019re looking for is in-stock, it just didn\u2019t turn up due to a typo or a difference in naming.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n
<\/div>\n\n\n\n

Always take the blame<\/h3>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Always start these messages with an apology.<\/p>\n\n\n\n

Even if you just include something like “our bad”, “sorry”, “apologies for this” in the text, it eases the frustration<\/strong> the shopper might feel, and will help keep them on the site and take the alternative routes you provide.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Speaking of which…<\/p>\n\n\n\n

<\/div>\n\n\n\n

Provide alternatives<\/h3>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Never leave the user with just a notice and apology: always engage them, urge them to try again,<\/strong> or to take further action on the site.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Keep in mind, your site is likely not the only one they are browsing: if their search ends in no results found in your online store, chances are, they\u2019ll leave and go to one of your competitors.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Check their spelling<\/h3>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Actively provide tips if the shopper misspells a word<\/strong>.<\/p>\n\n\n\n

Instead of simply informing them that they misspelled a word, you should provide a clickable version of the right spelling that will immediately direct them to the results page (yes, like Google and other search engines).<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n
<\/div>\n\n\n\n

Suggest similar results<\/h3>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

You can do this in a number of ways:<\/p>\n\n\n\n

<\/div>
<\/div><\/div>
\n
<\/div>\n\n\n\n