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:
You can find more information about the Related Tags endpoint in the API docs for your environment.
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.