Suggestions & Similar Items

Design a related-items module that appears on a product, article, or media detail page. The section should help users continue browsing by showing items that are similar to the current one, plus a short cue for why they’re recommended.

Use a clear section header, then present suggestions as cards in a grid or horizontal rail. Each card should include a thumbnail, title, and one supporting detail such as price, category, length, rating, or creator. Keep the list easy to scan and make the primary action on each item obvious.

Include at least one expanded or hover state that reveals more context without losing the list. If personalization is used, show the signal in plain language, such as 'Because you viewed X' or 'Popular in Y'.

Design the edge states too: loading skeletons, an empty state when no similar items exist, and a fallback when only a few matches are available. The module should still feel useful even when the recommendation set is thin.

Infuse personality with subtle animations when users interact with suggestions—this can drastically improve the user experience and engagement.