{"id":1851,"date":"2020-07-24T10:58:13","date_gmt":"2020-07-24T10:58:13","guid":{"rendered":"https:\/\/www.prefixbox.com\/blog\/?p=1851"},"modified":"2024-08-27T09:02:32","modified_gmt":"2024-08-27T09:02:32","slug":"ecommerce-search-results-page-design","status":"publish","type":"post","link":"https:\/\/www.prefixbox.com\/blog\/ecommerce-search-results-page-design\/","title":{"rendered":"11 Ways to Optimize Your eCommerce Search Results Page Design (SERP)"},"content":{"rendered":"\n
<\/div>
<\/div><\/div>
\n

11 Ways to Optimize Your eCommerce Search Results Page Design (SERP)<\/h1>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

You might be thinking \u201cOk this seems like it could be helpful, but what\u2019s a SERP?\u201d. The Search Engine Results Page (SERP) is the page that displays the query results. Aka, where customers find products to buy.<\/p>\n\n\n\n

So it makes sense that the results should be listed in a logical order, with the first 5 products as the most relevant, but that doesn\u2019t always happen.<\/p>\n\n\n\n

Check out the 11 tips below to get started. <\/p>\n\n\n\n

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

<\/p>\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

Pages that aren\u2019t optimized, can have some pretty bad results \u2013 if customers aren\u2019t able to quickly find what they\u2019re looking for on the SERP, they\u2019ll abandon the site and take their business elsewhere. Optimizing your SERP is critical to increasing sales.<\/strong><\/p>\n\n\n\n

Generate SERP Pages Quickly<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Users aren\u2019t likely to wait long for the SERP to be generated, in order to prevent them from leaving your site (which hurts your SEO), be sure to have SERPs that load quickly. In addition to creating a bad user experience, slow pages also harm your company\u2019s reputation.<\/p>\n\n\n\n

Consider using AJAX<\/a> to increase the speed of your search engine. AJAX provides a quicker, better search experience for users since only essential data is sent to the browser. It removes the need for a full refresh after users filter results, change views, or go to the next page \u2013 so your search is much faster.<\/p>\n\n\n\n

Show a Breadcrumb Trail<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Sort of like the one Hansel and Gretel left. A breadcrumb trail is the list at the top of the SERP that shows the searched term and any refinements made to it- basically, it shows users how they got to where they are.<\/p>\n\n\n\n

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

If a user decides they want to change a refinement, this trail helps them navigate backward without needing the back button on the browser, which could delete the search and make them start from scratch, which no one wants.<\/p>\n\n\n\n

Show Related Searches<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Related searches<\/a> are search keyword suggestions that appear at the top and\/or bottom of the SERP. These help users navigate to other products with just one click.<\/p>\n\n\n\n

By recommending products similar to the initial search helps users quickly find what they\u2019re looking for and by providing complimentary suggestions, you increase average order values. A win-win situation.<\/p>\n\n\n\n

Learn more about the most important related search features to increase conversion rates & revenue by 6%.<\/a><\/p>\n\n\n\n

Allow Result Sorting<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

You should automatically sort your results by an algorithm that puts the most relevant and popular first.<\/p>\n\n\n\n

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

However, your web visitors might want to sort products in a different way, so be sure to give them options. Include search filters<\/a> that allow sorting by price, new additions, brand, or most relevant.<\/p>\n\n\n\n

Don\u2019t Place Search Results in Alphabetical Order<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Users want to find the most relevant and most popular products, not a product that starts with a certain letter, so alphabetical sorting isn\u2019t usually helpful.<\/p>\n\n\n\n

The first results should be the products that receive the most clicks \u2013 the ones that provide the most value to the web visitor, not the ones that start with \u201cA\u201d.<\/p>\n\n\n\n

Employ Delayed Loading of Images and Infinite Scrolling<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Users prefer to scroll indefinitely, so infinite scrolling increases the likelihood that users will browse through your inventory.<\/p>\n\n\n\n

Some users may be overwhelmed with all the results infinite scrolling provides, so it\u2019s a good idea to implement delayed loading as a way to limit the number of results shown at once.It also increases the speed of your site.<\/p>\n\n\n\n

If you decide to use infinite scrolling, this means that links commonly found at the bottom of pages can no longer be placed there. Adding another menu on the side or top panel is an easy way to relocate those items.<\/p>\n\n\n\n

If you don\u2019t want to use infinite scrolling, make sure you include a moderate amount of results per page (25 or 50), include an option to change the number of results shown, your paging options are clearly visible, and that you display the total number of results pages.<\/p>\n\n\n\n

Use Fluid Filtering<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

If you decide to use infinite scrolling, you will need a search filter<\/a> menu that stays visible on the page no matter how far people scroll down.<\/p>\n\n\n\n

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

The filter refinements should float alongside the product results while the shopper scrolls, so they stay continually available.<\/p>\n\n\n\n

Format Your SERP<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Have a cohesive theme for your results pages \u2013 all images should be the same size, fonts should match, don\u2019t show product URLs, and decide if you\u2019ll display results in a list or a grid.<\/p>\n\n\n\n

Provide clear titles, use large images of good quality, and consider implementing quick view windows with add to cart options. Showing item prices and sale prices can also be a good idea if you offer discounts. Lots of things go into ensuring your SERP is beautiful.<\/p>\n\n\n\n

It is a good idea to provide an option that lets users toggle between list and grid views or to change the number of option in rows or columns. Be sure to test these variables, so you can find what your users respond to best.<\/p>\n\n\n\n

Have Dynamic Thumbnails<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

If users search for a black jacket, the jackets shown on the SERP should be shown in black \u2013 not another colour with black as an option. If users come looking for a specific item, you should show exactly that, so they don\u2019t have to imagine how it would look or navigate to another page to find out.<\/p>\n\n\n\n

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

According to Baymard<\/a>, 54% of web shops don\u2019t do this, so if you only implement one thing, let it be this and you\u2019ll already get a leg up on your competition.<\/p>\n\n\n\n

Have Alternatives when a Search Displays No Results<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

0-results pages<\/a> are one of the worst experiences search users can have on your site. There are multiple ways to subvert this.<\/p>\n\n\n\n

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

1. Place related keywords and products on the 0-result page so users can easily navigate to other products.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

It\u2019s helpful to style the text of these suggestions differently from the initial query, so the user can easily see it is not part of the original search. Simply bolding the original search term or using different colour can serve as a big enough differentiator. Make sure the \u201cNo Results\u201d text is large and visible, so the users know you\u2019re showing other related searches.<\/p>\n\n\n\n

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

2. If you display results for some of the words in a multi-word query instead of the full term, but be sure to notify the user what you are doing.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Show a message that says \u201cYour search returned no results, but here are some products for ____\u201d or \u201cShowing results for _____\u201d.<\/p>\n\n\n\n

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

3. Have a spell-check function that suggests correct spellings and provide a link that re-directs users to the appropriate products.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Learn more about the most important search autocomplete features to decrease zero-result pages by 31% and increase cart value by 19%.<\/a><\/p>\n\n\n\n

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

Analyze User Behaviour to Improve Results<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

People who use your search box provide a wealth of information, which you can use to improve the relevance of search results. That\u2019s why having site search analytics<\/a> is critical.<\/p>\n\n\n\n

By analysing this data, you can see that users who search a specific term are more likely to click on a certain product \u2013 which becomes valuable when deciding how to rank products.<\/p>\n\n\n\n

If your SERP is good to go, check out a few ways to optimize your search box<\/a>.<\/p>\n\n\n\n

<\/div>\n\n\n\n
<\/div>
Paige Tyrrell<\/span>Head of Marketing \u2013 Prefixbox<\/span>

Paige is the Head of Marketing at Prefixbox, a leading eCommerce site search solution. She\u2019s an American who\u2019s been living in Budapest since 2017 and loves giving #alwayslearning sessions to help people optimize their online stores.<\/p>\n