Gallery
See what others have created
subatomicautobiography
@subatomicautobiography
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.
What to deliver
- Design a related-items section with a clear title and short rationale for why items are shown.
- Show 6–10 suggestions in a grid or horizontal rail with thumbnail, name, and one-line metadata.
- Include one expanded item state with more detail and a clear action.
- Add loading, empty, and no-more-results states for the module.
- Design keyboard and touch navigation for scrolling or paging through items.
Infuse personality with subtle animations when users interact with suggestions—this can drastically improve the user experience and engagement.