I have a catalog that I need to show full on one page. The catalog contains categories, subcategories, and items (5-12 items inside a subcategory). That's what it looks like (please, see the attached picture).

The new challenge is to show a preview of items (picture, title, brief) when a user puts the mouse cursor on a link (please, see the right side of the attached picture).

What do you think there's any better way to show the preview of items? For now, it overlaps much of the rest content (other items of the catalog) when opening.


and/or maybe you know the way how to completely reorganize the current catalog to a better experience.


enter image description here

2 Answers 2


Display on hover, in my opinion, works with scenarios where there's just one or a few previews on the page, not on a page where there are tons of preview links. There are a lot of subcategories and the user's mouse will hover over them on a frequent basis, there will be a lot of pop ups on the screen as the user move their mouse and that can get annoying. If this experience is a must, you might want to consider setting a hover time before showing the preview.

Moreover, what's the interaction like to dismiss the preview? Does it happen when user move away from the link, will there be a close button on the preview? My recommendation is to show preview on click and user can dismiss the preview by clicking a close button.

Another option is to expand the preview inline below the subcategory, similar to how Google Shopping does it here. Click on an item to see it in action.

With this option, you solve for the issue of the pop up covering other contents on the page.


I don't know how often do the users open the products, but if it's really important and happens often, I'd suggest to save them some clicks. The space on the right can be used for the selected element preview. The advantage is that both the list of the elements and the preview are visible at the same time.enter image description here If no element is selected this space may be used for the recently viewed products or the catalogue content can be spread to this space. Also, this space may be used for the comparison of 2 or more elements.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.