Image credit: Nick Babich

Previously we’ve covered product details and cart summary pages. Today, it’s time to cover search results page.

Search is a critical element of online shop conversion. Customers typically rely on the search to find a product they’re looking for. Well-designed search functionality will help users find what they want quickly and easily.

Let’s review eight essential tips for creating a better search results page:

1. Show original search query at the top of a page

Reassure users that the system shows search results for the query they’ve provided. Without a visible query, they might start to doubt that the page provides relevant results.

Search input field is available at the top area of the screen.

2. Provide the most relevant products at the top of a page

Above the fold area of the search results pages is golden — users make an assumption about the quality of the search mechanism based on a few items that they see at the top of the page. That’s why the first 2 or 4 items that users see should be 100% accurate; otherwise, users will start to doubt the quality of the search tool.

3. Allow users to filter & sort search results

Users should be able to narrow down search results. Give them this opportunity by providing filter and search controls:

• Sorting allows users to control in which order they want to see the results
• Filtering allows users to set preferences for search results.

Quick tips:

• Don’t hide sorting inside the filters. Sort and filter are two different types of operations.
• Clearly highlight enabled filters. Users know what filters are active.

Applied sorting (Best Match) and enabled filters are visible at the top area of the screen. The user can reset the filter in on tap.

4. Show the total number of items

When users see the total number of items, this information helps predict how much time they will spend on this page.

Show how many products found

5. Choose proper page layout

Different types of products require different types of layouts. The number of columns can vary from one to three on mobile.

The key for selecting the correct number of columns is not an available screen space but the nature of products you sell in your store.

The product’s specifics are the key to determining the layout.

Quick tips:

• User horizontal scroll to break the monotony of a vertical scroll. A horizontally scrollable gallery of products can fit well in the otherwise vertically scrollable layout.
• When designing a grid layout, pick the right size of images. The images should be large enough to be recognizable yet small enough to fit more products into a viewport.
• For a one-column layout, its possible to use video instead of images. Add short videos with the product overview that starts playing automatically as a user reaches an item and stops scrolling for a second.

6. Provide crucial details about each item

Show the bare minimum of information about an item (i.e., essential information that a user needs to know about the item). Optimize the formatting of individual item cards for fast visual scanning and comparison.

For appliances, details like model numbers, ratings, and dimensions are major factors in the selection process, while for clothing, customers usually rely on photos to make a decision.

Quick tips:

• Add “Like” button so that users can add a particular item to favorites to return to it later
• Show a product rating if this information helps users make a decision.

7. Use lazy loading

Lazy loading is a mechanism of dynamic content loading. It helps you minimize the number of clicks/taps since the new items automatically appear on the screen. Ideally, search results should be displayed immediately, but if it’s not possible for some reason, you can use a progress indicator (like infinite spinner) at the bottom of the page to give users visual feedback that the system is working.

8. Never show “No results” page

There are two ways you can handle zero results page:

• You can suggest alternative products from a similar category. Provide valuable for the user alternatives.
• You can suggest how to re-phrase the original search query.

Want To Learn UX?

Try Designlab. Join the UX Academy Foundations course! You’ll embark on a 1-on-1 journey with your Designlab mentor to learn the fundamentals of design.