Hotspots vs Tooltips: how to use them to max effect

  • How hotspots and tooltips improve user experience;
  • Explain the differences between the two;
  • Describe the best use cases and examples of implementing hotspots on the page.

How Hotspots and Tooltips improve UX?

Smooth user experience is one of the top priorities for any website. Otherwise, why bother?

  • The purpose of Hotspots is to balance space and expand the content. You can pack a lot of information behind the spots on the image. At the same time, the presentation will remain balanced and free from clutter.
  • On the other hand, a tooltip is predominantly a background assisting tool. Its primary goal is to explain some aspects of the interface or webpage without being overbearing.

How to use hotspots and tooltips on your website?

1. Hotspots for product cards

Product presentation is one of the biggest challenges of the eCommerce marketplaces. How to make the product more appealing to the user? How to present the value of the product in an engaging/involving manner?

  • No clutter from stacking too much information on the page.
  • Key spots on the image gather all the necessary information, instead of dropping a wall of text.
  • Better engagement because of the interactive elements. Unlike putting all out straight that might result in the user’s quick scan and bounce — hotspots work well as an explorative tool.

2. Tooltips for product feed

The product feed is the other great place for implementing tooltips in the marketplace. The standard feed often looks like a bunch of stuff thrown together. The user needs to go to the product card to see the details. That might be too much.

3. Hotspots for product bundles

Versatility is one of the reasons why hotspots work so well in eCommerce. Aside from product feature showcase — you can also represent product bundles with hotspots serving as a link to the page of the particular product.

  1. Combinations of products, i.e., “shop the look” approach. In this case, there is one hotspot that includes information about all the products on the image. The list is organized as a series of links to the product cards.
  2. Product ranges. In this case, the image depicts one product or type of product sorted by some attribute. Works well with product types that have distinct variations like size, color, length.
  3. Cross-selling — the user clicks on one product and gets suggestions via hotspots about related products (similarly to “people also buy” items).

4. Tooltips for user onboarding and product tour

The first time on the service is often a “make or break” moment for the user. Each website has got its intricacies of the user interface.

5. Hotspots for infographics

Charts and infographics are a good way of explaining complex things in figures and facts. One can use specialized packages for data visualization like D3. But in the majority of the cases, one doesn’t need that much.

In conclusion

These are the most effective ways of implementing hotspots on your website.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store