1-2. Hovering on product
Hover on the product name to highlight box art and change product text link color. Box art displays with an outline around it.
Number of circles pagination indicate amount of product sets.
Why Use This Pattern?
Deliver set of products base on customer common purchasing behavior or purchase history. Allowing customer to browse through a set of product and possibly select one of them to make purchase or learn about the product on a landing page.
What's the Solution?
Arrange a set of product box art and product description on a horizontal line where each product preferably has a box art image displayed. Even though the list of items is long, only 4 images are shown at the same time.
If the user wants to view the rest of the products on the list, he or she must click one of the arrows pointing either left/right. Once one of the arrow is clicked, the next “view” of products is shown and an animation scrolls the current items to the side and at the same times replaces them with new images. The user can in this way browse the list of recommended products back and forth.
When to Use This Pattern?
- Use when there’s a list of recommended products to show but want to let the user concentrate his or her attention only on few items at one time
- Use when you want to tease the user to highlight product recommendation and products that have special offers.
- Use when you do not have enough space to show all items at once.
- Use when you have data about customer common purchasing behavior or has purchase history data information to support the mechanism.
DO NOT Use This Pattern When...
- Carousels should not be overused, as it can cause the user to ignore when frequently used.
- Do not use for links to text articles, documents such as PDF files.