Tap any tip to open toggle ā”Ā some gifs may take a moment to load
Featured ideas š¦Ā are rare ideas you may not have seen before ;-)
š”Ā Ideas and tips
Indicate the number of matching results in page heading š
This simple feature has been disappearing from search results pages! Showing the number of results helps customers instantly gauge if theyāve gone too narrow or too broad in their search
š¦Ā Use dynamic filtering (thumbnails swap to match color or other attribute) š
Many search applications today support dynamic results that will swap image thumbnails to match query context. For example, Searchspringās āDynamic imagingā is available on some tiered plans, and Algolia lets you code āDynamic filtering rulesā using their API.
š Ā Marks and Spencer shows only red variant thumbnails when searching for āred heelsā
š¬Ā Contrast this with static results that hide variant context. A search for āpurple blushā returns matches, but you must click each one to check the color
Consider tabbed results / promoted filters š
Tabbed results are essentially promoted filters, which help customers further refine results without fiddling with filter menus.
Keep in mind that your UI design will influence how intuitive these tabs are (tabs typically get overlooked due to their subtlety).
šĀ Cariumaās Mens and Womens department filters are implemented as tabs
šļøĀ River Island displays its tabs within its header, and also displays the number of results with each chip
Consider tabbed content results š
If you publish articles, customer service information or other documents, consider showing them with catalog search.
Remember that theyāre āsecondaryā results and should be styled as such, but certain UI patterns can make them āinvisible.ā
The North Face and ASDA place the Articles/Recipes tabs inline with results, versus Michaelsā pill-style toggle that may be harder to spot (below):
Set up custom merchandising for specific searches and themes š§ Ā Donāt leave it up to your search tool to match thematic queries like āChristmas gift for Dad.ā John Lewis set up custom merchandising rules to craft the experience ā and these search URLs can be used as landing pages for email/social and your main header nav
Display related searches for deeper drilldown š
This either comes out-of-the-box with your search app or it doesnāt ā but you do have influence over how itās presented on your front end.
These suggestions help users further refine their results without conducting a new search, and can remind them of important attributes they didnāt think of when searching
š«£Ā Cautions
Donāt show irrelevant products when āno results foundā š
Most sites today are afraid to serve null results, thinking itās better to show something than nothingā¦
But showing longshot matches doesnāt help customers, rather it confuses them. Thereās so many creative ways to handle No Results Found conditions that are more helpful to users. Donāt show sponsored banners or ads above search matches š
Itās tempting to monetize your site search feature, but the whole point of search is relevance. Avoid sponsored listings that push down matches and irritate customers
Avoid showing category banners above search matches š
While showing promoted subcategories above product list results works nicely within Category pages, theyāre much less relevant and more distracting on search pages ā especially in mobile context
Avoid using a search app that canāt match your Collection page UI (Shopify) š
Many Shopify search apps are black boxes that canāt take your Collection customizations or replicate your look and feel, leading to inconsistent user experiences and missing functionality.
One workaround Iāve used with Shopify clients is to set up search redirects to relevant collection pages for frequently searched terms, to bypass the app experience.
An example of Collection page UI (above) vs search app experience (below):
Back to Site search ideas
šĀ Follow on LinkedIn for daily ideas š”
