If your Shopify store has plenty of excellent products, you can't expect online shoppers to browse the entire store to find what they want. Search is like a bridge between the user and your store: the user expresses their purchase intent via query and the system responses through a set of results.
While it's the search box supports for query input, autocomplete, the layout and design of the search results can affect the users' attention to a purchasable product. It may drive them to the check-out page quickly or make them close the page and stop shopping on your sites. Here are some practical tips for delivering a functional 'results' page to maximize your profit and take your business to a higher level.
Best practices to design effective search result pages
- Retain the users’ search entry even after search is done
- Choose a proper layout for your data
- Provide relevant results
- Product loading
- Display the number of search results and filtered navigation
- Build a great ‘No results’ page
1. Retain the users’ search entry even after search is done
Constructing a query is a critical step in the search journey. Give users the flexibility to make modifications to the current query if they don't find what they want. To reduce the interaction cost for them, leave the initial search term in the search box, so they don't have to retype the entire query again.
Credit: https://www.etsy.com/
2. Choose a proper layout for your data
One of the challenges of displaying the search results is selecting the proper layout. Online stores like Walmart, Home Depot may present search results in list view or grid view or allow visitors to toggle between. The design you choose should be derived from how much information a customer needs to choose between products.
List view: This format contains a small product image on the left side, and on the right side is the product description, price, SKU. It is more suitable for products that require extensive information to support users' decision-making process. Online retailers selling products like appliances, auto parts, electronics, hardware may prefer this pattern as product details like dimensions, model numbers, and technical specifications are significant factors in the selection process.
Grid view: This layout shows a product image thumbnail with a small amount of its information below. It's mostly used to provide an excellent visual experience where users can make a purchase decision based on the appearance of the products. The grid view is preferred and applied mainly by lifestyle and apparel retailers like Macy's, Kohl's, Nordstrom.
Ideally, respect users' preferences by allowing them to switch between the list-view and grid view for search results.
Credit: https://www.walmart.com/
3. Provide relevant results
The first results page acquires much attention from users. It's essential to return the most relevant and correct results to users; otherwise, it can lose the trust of customers. The search results page should display results most relevant to the user based on higher ranking.
The way that products are presented on an eCommerce site can have a significant impact on the customer purchase decision. You can combine merchandising techniques to grab the visitor's attention to the enticing products. Merchandising is described as the art of promoting products, especially by their presentation to engage customers. Online retailers can merchandise search results page to promote particular products related to the query. These products can be pinned on the top results so that shoppers can quickly find and buy them.
4. Product loading
There are three ways to help customers navigate through a long list of search results on a page: 'Pagination, 'Infinite scroll,' and 'Load more.'
Pagination is the most popular practice today. However, the Baymard study showed that with pagination, users often browse less of the entire product list than on websites that offer' Load more' buttons or 'Infinite scrolling.' On the upside, they spent relatively more time on the first page of results.
Credit: https://www.rei.com/
Infinite scrolling is a technique allowing customers to scroll down to the last product in the collections or search results page. Usability testing by Baymard Institute indicates internet users tend to browse and view the most products with infinite scroll than when viewing with pagination. But its downside is that users focus less on specific products. Moreover, it's hard for them to locate items and come back later.
A search for Jeans on American Eagle returns 842 results. With infinite scrolling, there is so much information coming up that it is impossible to predict when it ends. It makes users uncomfortable and disoriented.
Load more is the combination of 'Pagination' and 'Infinite scroll.' With 'Load more' users tend to browse more products than on those with pagination links. Still, because loading additional products requires an active choice and click, they put more attention to displayed items than on websites with infinite scrolling. One thing that makes the 'Load more' and 'Infinite scrolling' take advantage of "Pagination" is that the product list grows without reloading the page.
Credit: https://www.carters.com/
There's no one-size-fits-all method for every eCommerce site. However, the Baymard large-scale usability study on top eCommerce sites suggests that:
- For collection pages, use a combination of “Load more” and lazy-loading.
- For search result pages, use the “Load more” button
- On mobile, use the “Load more” button, but loading a lower number of products than on desktop.
5. Display the number of search results and filtered navigation
The result pages should display the total number of search items available on the top so that users will be informed to decide how long they want to spend looking through results.
If your search results have so many matching items, users might become overwhelmed and feel difficult to navigate to their desired products. Instead of forcing them to try another search until they get the right kind of result, offering a means to refine results is a valuable usability improvement. You should provide them filtering and sorting options that are relevant for their search, enabling them to narrow down the product list. The findability has a direct impact on the sales funnel: the faster a shopper finds what he's looking for, the more likely he is to make a purchase.
For example, Target search result page would be a mess without filtered navigation. A general search query for a 'DSLR camera' returns with over 250 results. While you could certainly pick up a camera, there's little chance you would feel confident that it's the best choice you can find. Luckily, Target offers a large number of filter options to refine the results. You can narrow down the list matching with some criteria such as brand, megapixels, zoom, resolution, price, and guest rating.
Credit: https://www.target.com/
While implementing the filtered navigation for your search result page, follow these design tips to create a positive experience for your customers: Filter and Sort aren't the same tasks. Unlike filtering, sorting doesn't narrow down the list shown to the user, but it changes the display order for results. Do not hide the Sort feature within the Filter navigation bar.
- Limit the number of visible filter options. It’s important not to overwhelm users with too many options. If your search results have a lot of filter options, you can set them collapsed by default.
- Prioritize important filter options. Identify what criteria for your products so that you can arrange the filters accordingly. For example, Bestbuy knows that price matters most to user’s purchase intent when searching for a camera, so they put it on top.
- Make it clear what filter options were applied to the search results by using attribute-based breadcrumbs.
- Allow them to deselect the filters applied by unchecking the attribute breadcrumbs or clicking on “Clear all.”
6. Build a helpful ‘’No results’’ page
On the search journey, users may face with no results page. You should have a well-prepared plan for this scenario to keep them moving forward, instead of leaving them clueless and driving them to leave the store.
- Clearly explain that there are no matching results.
- Suggest ways to refine the search query such as Try checking your spelling
- Alternate queries: If the search engine has identified the nearest matching queries that would yield results, it could offer "Did you mean" suggestion.
- If we don't have what the user wants, we can still suggest a relevant category, popular products, or even featured collections to prevent them from leaving after a failed search. At the very least, we might catch the user's attention and encourage them to move on their discovery.
- Offer customer support via phone number to sales, a chat feature, and other help links.
Wayfair gives a humanized explanation of the failure. It indicates what went wrong. The most prominent thing on the page is a big button to 'contact us.' There's a chance that by taking the conversation offline, Wayfair can still secure a sale.
Giving the user someone to talk to at this critical point can help us understand what they wanted, and hopefully, provide a solution.
Conclusion
A well-designed search-results page is well worth the effort since it is the key to helping your users successfully achieve their goals and enticing them back to your site. All of the pages are essential to the successful shopping experience must be well designed to support your user's goals. One of the most frequently used pages is the search-results page, and it is well worth the additional design effort.
