How to enhance your search experience using Related Tags

Related Tags are a great tool to help users articulate a more specific query . They provide refinement suggestions that are inferred through collaborative filtering (i.e. from user search sessions). This playful way of refining the original query speaks the user’s language and becomes really handy when they are looking for generic terms or categories, leading to increases in findability.

Here are my top tips on how to integrate and measure Related Tags to get the most out of them:

1. Present Related Tags after the query has been performed: Related Tags should belong to the refining phase of your search journey, i.e. when users are happy with their query. If your search is instant, consider calling this endpoint only when the user hits enter, clicks on a suggestion or starts to scroll down after typing a query. It's not recommended to display search-as-you-type suggestions and Related Tags at the same time.
2. Allow users to de-select Related Tags: Related Tags can be used as an exploration tool by discovery users. Allowing them to select and deselect Related Tags, instead of replacing the query, will make their experience much more enjoyable.
3. Keep the original Related Tags: Depending on the nature of your catalogue, the behaviour of your users, and the volume of queries, multi-term queries may not have enough data to calculate Related Tags. In these cases, clicking on a Related Tag when searching for a single term may cause all other Related Tags to disappear. It's generally a good idea to preserve the Related Tags that are presented originally, instead of requesting them again. Don’t worry about no results situations if someone wants to catch 'em all. Partial results will come to the rescue if that happens!
4. Use a different origin to measure Related Tags performance: Both Search and Tagging APIs support the origin parameter to specify where the query originated. This enables analytics data segmentation. If you send the additionalFields=true parameter in the API request, it will also return the origin to be used for the subsequent query and related events.
5. Use the blacklist: No one will prevent users (or bots) from searching for unexpected things. If the volume is high enough, those might be returned as Related Tags. No need to be concerned if that happens. There’s a blacklist to remove undesired terms.

You can find more information about the Related Tags endpoint in the API docs for your environment .

How to build a sliding panel for your Related Tags

Designing experiences for mobile devices is always a challenge. Not only is the screen space limited, but users are less willing to perform complex actions. Related Tags are key to inspire, guide, and help users to express their intention in an effortless way. One cool approach to implementing Related Tags in mobile devices is the sliding panel. This panel, positioned right on top of the results, condenses this essential part of the search journey into a really small space. The great news is that building a sliding panel is extremely easy. All you need are a few lines of CSS!

Using the HTML structure below, (and removing from the equation all aesthetic properties such as margins, sizes and colours), we can easily turn the Related Tags container section into a sliding panel:

<section class="sliding-panel">
 <div class="related-tag"></div>
 <div class="related-tag"></div>
 <div class="related-tag"></div>
</section>

.sliding-panel {
 /* Arrange elements horizontally */
 display: flex;
 /* Make the container scrollable on the x-axis */
 overflow-x: auto;
 /* Disable text selection */
 user-select: none;
}

That alone would be enough to make it functional and touch-compatible, but not particularly attractive. The scrollbar is still there and there’s no momentum to the scrolling action. Luckily, those are UX issues that can be easily solved in WebKit-based browsers ( ~95% of mobile users ). They are also hackable with a bit of dark magic in browsers like Firefox for Android. These two simple rules make the sliding panel look cleaner and behave more naturally thanks to the touch acceleration they apply:

.sliding-panel {
 /* Enable scrolling momentum */
 -webkit-overflow-scrolling: touch;
}
 .sliding-panel::-webkit-scrollbar {
 /* Hide the scrollbar */
 display: none;
}

One of my favourite implementations of this feature is on Pull&Bear ‘s site. They decided to incorporate the sliding panel also in their desktop version by fading out both ends of the panel to white and by adding little navigational controls. Kudos to them! And you? How are you implementing Related Tags? I’d love to hear from you in the comments.