All Collections
Search Results Page (SERP)
Search Results Page (SERP)

Guidelines to build best looking and converting SERP

Lari Lehtonen avatar
Written by Lari Lehtonen
Updated over a week ago

Search results page or SERP is the area where users get their expected experience. Popular search engines like Google, Amazon, Youtube, and others have set the standard of search experience, and users expect it in any website they browse. Therefore, our goal is for users to successfully land SERP and find products they would like to buy among the first search results.

The emphasis always goes on product cards where image, price, title, and sometimes other attributes should be well visible. In addition, facets should be visibly displayed on the desktop, usually on the left side or on top. At the same time, in mobile, the well-visible filters button expands all filtering options.

We support any SERP design and frontend elements. However, we only recommend that all SERP elements look the same way as listings in category pages. Users shouldn’t feel a difference exploring products as both search & categories help users find products and experiences should be aligned.

0 results search page

In scenarios where users cannot find results due to the unavailability of desired products or highly creative search queries, it is essential to ensure that they do not encounter a blank page and leave the website. To optimize user experience and boost engagement, we suggest incorporating a Nosto Recommendations block on the "No Results Found" page. This feature will showcase relevant or similar products tailored to the user's preferences, promoting product discovery and enhancing the likelihood of a sale.

The proposed solution provides several benefits:

  1. Maintains user engagement: Displaying tailored recommendations keeps users engaged on the website, preventing them from leaving due to a lack of search results.

  2. Encourages product discovery: By presenting alternative or similar products, users have the opportunity to explore and find items that may be of interest to them.

  3. Increases sales potential: The added recommendations act as an additional channel for users to discover and purchase products, ultimately contributing to the website's revenue.

  4. Enhances user satisfaction: Users will appreciate a more personalized experience, as the recommendations will be based on browsing behavior and preferences.

To further elevate the user experience, consider implementing the following UI elements on the "No Results Found" page:

  1. Clear and concise messaging: Ensure that users understand why their query has no results. Provide a friendly and informative message, such as "We couldn't find any results for your search. However, here are some similar products you might like."

  2. Intuitive layout: Arrange the Nosto Recommendations block in an easily accessible and visually appealing manner, emphasizing the showcased products.

  3. Search query refinement: Offer users the option to modify their search query or apply filters to narrow down their search criteria.

  4. Prominent call-to-action (CTA): Incorporate a clear and compelling CTA that guides users to explore the recommended products or return to the main product catalog.

By integrating these UX and UI recommendations, your website will effectively manage instances of no search results, fostering a more engaging and satisfying user experience.

Best Practices

If you are looking for inspiration to create your best category listings and SERP, we suggest following Baymard Institute’s guidelines and research.

To help you out, we've put together some valuable guidelines and advice for creating an eye-catching and high-converting SERP. Remember, your goal is to offer users a seamless and enjoyable shopping experience.

  1. Prioritize Clarity and Visual Hierarchy: Make sure your SERP is easy to scan and understand. Organize the content in a way that highlights the most important elements first, like product images, titles, and prices. Use whitespace and clear typography to guide users' eyes through the content.

  2. Responsive Design: Design your SERP to be responsive, so it works well on different devices and screen sizes. This will ensure a smooth experience for users, whether they're browsing on a desktop, tablet, or smartphone.

  3. Use High-Quality Images: Images play a crucial role in attracting users and boosting conversions. Ensure that product images are high-quality, clear, and accurately represent the products. Offer multiple views or zoom functionality if possible.

  4. Consistent Design Elements: Make sure your SERP design elements are consistent with the rest of your site. This includes using the same colors, fonts, and overall style, which helps create a cohesive brand experience for users.

  5. Relevant Faceted Navigation: Offer relevant and easy-to-use facets to help users narrow down their search results. Include essential filters like product category, price range, customer ratings, and more.

  6. Pagination: Depending on your site design, consider implementing pagination for easy navigation through search results. Infinite scrolling can be more engaging for users, while pagination offers more control, and it's recommended to use with Nosto's Search. One page should consist of anywhere from 24 to 36 products.

  7. Showcase Customer Reviews: Leverage the power of social proof by showcasing customer reviews and ratings. This can help users make informed decisions and improve conversion rates.

  8. Highlight Promotions and Offers: Draw attention to promotions, discounts, or special offers within the search results to entice users and increase the likelihood of a purchase.

  9. Enjoy Nosto Search speed: A fast-loading SERP is crucial for user satisfaction and conversion. Nosto search is super fast search engine, but to make it even faster, optimize your images, reduce unnecessary elements, and leverage caching techniques to ensure a speedy experience.

Lastly, make sure to regularly test and iterate your SERP design to ensure it remains effective and user-friendly. By following these guidelines and the Baymard Institute's research, you're on your way to creating a top-notch search experience for your eCommerce site.

Did this answer your question?