The search results page (or SERP) is the main area around product discovery experience. The key goal is to show your users products they would like to buy and that are aligned with their affinities and preferences so every user gets a personalised experience.
The emphasis always goes on product cards where image, price, title, and 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, on mobile devices, the well-visible filters button expands all filtering options.
Nosto Search supports any SERP design and frontend elements. We 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 the experience should be aligned throughout the shop.
0 results search page
In scenarios where users cannot find results (e.g. due to the unavailability of desired products) 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:
Maintains user engagement: Displaying tailored recommendations keeps users engaged on the website, preventing them from leaving due to a lack of search results.
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.
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.
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:
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."
Intuitive layout: Arrange the Nosto Recommendations block in an easily accessible and visually appealing manner, emphasizing the showcased products.
Search query refinement: Offer users the option to modify their search query or apply filters to narrow down their search criteria.
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 search result and category listings, we suggest following Baymard Institute’s guidelines and research.
To help you out, we've put together some valuable guidelines and advice for creating eye-catching and high-converting product listings. Remember, your goal is to offer users a seamless and enjoyable shopping experience.
Prioritize Clarity and Visual Hierarchy: Make sure your product listing 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.
Responsive Design: Design your product listing 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.
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.
Consistent Design Elements: Make sure your product listing 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.
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.
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.
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.
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.
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.