UI + UX Search, Browse, And Discovery standard

Recommendations

Provide recommendations as clearly labelled, bounded suggestions with item-specific reasons, source and sponsorship disclosure, feedback controls, personalization settings, cold-start fallbacks, and filtering for unavailable or inappropriate items.

Decision first

Choose this pattern when the problem matches

Use when

  • Users need discovery help in a large item, product, content, service, or action space.
  • The system has reliable context, behavioral, similarity, aggregate, or editorial signals that can rank a small set of useful suggestions.
  • Recommendation quality can be monitored and corrected through feedback, availability filters, and source-specific auditing.
  • The product can explain recommendation basis and provide controls proportionate to the data and risk involved.

Avoid when

  • The product has too few items for ranking to reduce effort.
  • The team cannot explain or control why items appear.
  • Recommendations would reveal sensitive activity on a shared or public surface.
  • Users need a complete taxonomy, exact search, saved list, or recently viewed history instead of inferred suggestions.
  • The only purpose is undisclosed promotion, dark-pattern upsell, or replacing required workflow guidance with vague suggestions.

Problem it prevents

Users can struggle to discover useful items in large catalogs, content libraries, workflows, or feeds, but opaque recommendation rails can mislead them when the basis, availability, commercial influence, or personalization control is hidden.

Pattern anatomy

What a strong implementation has to make clear

User need

The product has enough content, products, records, services, or actions that manually browsing every option is inefficient.

Pattern promise

Provide recommendations as clearly labelled, bounded suggestions with item-specific reasons, source and sponsorship disclosure, feedback controls, personalization settings, cold-start fallbacks, and filtering for unavailable or inappropriate items.

Required state

Default recommended state with labelled section, item identity, reason, source, and action controls.

Recovery path

Recommendations become opaque persuasion because users cannot see why items appear.

Access contract

Use a heading or labelled region that names the recommendation set and does not rely on carousel position alone.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A benefits dashboard shows Recommended for you with cards labelled Because you saved appeals guidance, Popular with benefits caseworkers, and Editorial fallback for Benefits, each with Not interested and Save controls.
  • A commerce product page shows Pairs well with this camera, hides out-of-stock accessories, limits the rail to three visible items, and marks manually selected merchant recommendations separately from generated recommendations.
  • A user hides a benefits recommendation as Not interested, chooses a reason, and the list immediately replaces it with a lower-ranked item without changing their recently viewed history.
  • A signed-out shopper sees Popular in backpacks rather than fake personalized copy, then gets personalized reasons only after activity exists and consent settings allow it.
Weak implementation

Vague, hidden, hard to recover from

  • A carousel says You will love this, hides that the first card is sponsored, and gives no reason or dismissal control.
  • A recently viewed rail contains predicted items the user never opened.
  • Users assume recommendations are mandatory next steps because the UI mixes them with required workflow tasks.
  • A user repeatedly dismisses a sensitive topic, but the model keeps resurfacing it with new wording.
UI guidance
  • Render recommendations as a labelled set of suggested items with clear item identity, recommendation reason, source or basis, availability, and a visible way to dismiss or tune at least the current item.
  • Separate organic, sponsored, editorial, manual, personalized, trending, and fallback recommendations with text labels before users act, and avoid implying that recommended items were viewed, saved, or required.
UX guidance
  • Use recommendations to reduce discovery effort when the system has evidence that a small set of items, products, services, content, or next actions may be useful in the user's current context.
  • Give users agency over personalization by supporting Not interested, hide, feedback reason, history or activity controls, reset, and cold-start fallback states rather than treating model output as an unchallengeable answer.
Implementation contract

What the implementation must handle

States

  • Default recommended state with labelled section, item identity, reason, source, and action controls.
  • Personalized state that identifies the activity or preference category used without exposing private raw history unnecessarily.
  • Generic or cold-start fallback state labelled as popular, trending, category-based, or editorial.
  • Dismissed or Not interested state that removes the item and confirms the feedback effect.

Interaction

  • Opening a recommendation navigates to that item or action and records the event according to the disclosed analytics and personalization rules.
  • Dismissing a recommendation hides that item immediately from the current set and updates future ranking or feedback data within the stated scope.
  • Feedback controls affect recommendation behavior only; they do not delete the underlying item, saved item, or recently viewed history unless that action is separately labelled.
  • Turning off personalization stops using the selected activity source and switches to a clearly labelled generic or editorial fallback.

Accessibility

  • Use a heading or labelled region that names the recommendation set and does not rely on carousel position alone.
  • Make recommendation reasons, sponsored labels, availability, and item type available as text.
  • Provide keyboard-reachable item actions for opening, saving, dismissing, and feedback.
  • Do not hide dismissal or explanation controls behind hover-only affordances.

Review

  • What exact signal or rule caused this item to be recommended?
  • Can users tell whether the item is organic, sponsored, manual, editorial, personalized, trending, or fallback?
  • What happens when the user says Not interested, and how quickly does the list change?
  • Can users turn off or reset the activity source used for personalization?
Interactive lab

Inspect the states before you copy the pattern

Tune recommended items

Inspect the reason for each recommendation, dismiss one, toggle personalization, and check whether the list updates without pretending items were recently viewed.

Recommendations
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Default recommended state with labelled section, item identity, reason, source, and action controls.

Keyboard / Access

Tab moves through the section heading, recommendation cards, primary actions, dismissal controls, feedback controls, and personalization controls in a predictable order.

Avoid Generating

Counting schema-valid recommendation cards as complete without reasons, controls, or source disclosure.

Evidence trail

Source-backed claims behind this guidance

How YouTube recommendations work

YouTube Help - checked

YouTube explains recommendation signals such as watch activity, searches, subscriptions, and Not interested feedback.

Show complementary products on product pages

Shopify Developers - checked

Shopify developer guidance supports visible explanatory headings, limited visible recommendations, async empty handling, and placement near the source product.

Algolia Recommend

Algolia - checked

Algolia documents recommendation models, collaborative and content-based filtering, event requirements, model fallback windows, and daily retraining.

Guidelines for Human-AI Interaction

Microsoft Research - checked

Microsoft Human-AI guidelines support capability disclosure, uncertainty, efficient dismissal, correction, and user control.

Full agent/debug reference

Problem Context

  • The product has enough content, products, records, services, or actions that manually browsing every option is inefficient.
  • The system has useful signals such as current item context, similar-item attributes, aggregate behavior, purchases, saved items, search activity, editorial rules, or user feedback.
  • Recommendations can affect user trust, privacy, commercial outcomes, safety, fairness, or task completion, so users need to understand and control what is being suggested.

Selection Rules

  • Choose recommendations when the system ranks a small set of likely useful items from behavior, context, similarity, popularity, rules, or model output.
  • Use related links instead when the current page only needs a curated, maintained set of onward destinations and no ranking or personalization is involved.
  • Use recently viewed instead when the list should contain only items the current user actually opened, ordered by recency.
  • Use browse by category instead when users need to inspect a stable taxonomy and choose their own path.
  • Show a reason for each recommendation, such as Because you saved this, Frequently bought together, Similar to this product, Trending in this category, or Curated by editors.
  • Provide item-level feedback such as Not interested, Don't recommend this source, hide, remove, or tell us why, and make the immediate effect visible.
  • Expose personalization scope and controls when recommendations use watch history, search history, saved items, purchases, account activity, location, team behavior, or other personal data.
  • Label sponsored, promoted, manually selected, editorial, and model-generated recommendations separately before the click.
  • Use cold-start fallbacks honestly, such as popular, trending, category-based, or editorial picks, instead of fabricating personalized explanations.
  • Filter or mark unavailable, out-of-stock, permission-restricted, already completed, already in cart, already saved, duplicate, stale, and repeatedly dismissed items.
  • Cap repetition, diversify the set, and avoid sensitive or protected-attribute inferences unless the product has an explicit, user-benefiting, compliant reason.
  • Measure recommendation quality with user outcomes, feedback, availability, diversity, and trust, not only impressions or clicks.

Required States

  • Default recommended state with labelled section, item identity, reason, source, and action controls.
  • Personalized state that identifies the activity or preference category used without exposing private raw history unnecessarily.
  • Generic or cold-start fallback state labelled as popular, trending, category-based, or editorial.
  • Dismissed or Not interested state that removes the item and confirms the feedback effect.
  • Feedback reason state for already watched, not relevant, don't like this source, duplicate, sensitive, or wrong category.
  • Sponsored or promoted state with visible disclosure separate from organic recommendations.
  • Manual or editorial recommendation state when a human has pinned, selected, or overridden model output.
  • Unavailable or filtered state for out-of-stock, permission-lost, completed, already-in-cart, stale, or unsafe items.
  • Personalization off or reset state that stops using selected activity and explains what fallback remains.

Interaction Contract

  • Opening a recommendation navigates to that item or action and records the event according to the disclosed analytics and personalization rules.
  • Dismissing a recommendation hides that item immediately from the current set and updates future ranking or feedback data within the stated scope.
  • Feedback controls affect recommendation behavior only; they do not delete the underlying item, saved item, or recently viewed history unless that action is separately labelled.
  • Turning off personalization stops using the selected activity source and switches to a clearly labelled generic or editorial fallback.
  • Reason labels must match the actual source of the recommendation and must update when personalization, category, cart, current item, or availability changes.
  • Sponsored or promoted recommendations remain distinguishable even when they are also relevant.
  • The system must not reinsert dismissed, unavailable, permission-restricted, or sensitive recommendations as if they were new suggestions.

Implementation Checklist

  • Define the recommendation source for each slot: current item similarity, frequently bought together, trending, saved-item affinity, user activity, editorial rule, sponsored placement, or fallback.
  • Store enough metadata to explain each recommended item in user-facing language without revealing private raw history or unsupported model claims.
  • Apply eligibility filters before rendering for availability, permissions, stock, price, cart membership, completion state, safety, duplication, and policy restrictions.
  • Add item-level dismissal, feedback reasons, and source-level suppression where users naturally need control.
  • Provide personalization settings for the activity sources the recommendation system uses, including reset, history deletion, or turning history off when supported.
  • Design cold-start and low-confidence states with honest labels and enough quality guardrails to avoid empty or fake personalized rails.
  • Separate generated, manual, editorial, sponsored, and promoted items in the data model so the UI can disclose them consistently.
  • Limit count, repetition, and carousel depth; avoid auto-advancing rails that hide feedback controls.
  • Log recommendation impressions, opens, dismissals, source labels, availability filters, and feedback outcomes so quality can be audited beyond click rate.
  • Test signed-out, new-user, returning-user, personalization-off, dismissed-item, unavailable-item, sponsored, sensitive-topic, and mobile keyboard states.

Common Generated-UI Mistakes

  • Counting schema-valid recommendation cards as complete without reasons, controls, or source disclosure.
  • Calling promoted or sponsored content recommended without visible disclosure.
  • Pretending generated suggestions are recently viewed, saved, or required steps.
  • Using vague labels such as For you or You might like without explaining the basis.
  • Ignoring dismissals and repeatedly showing the same item under new wording.
  • Using personal data for recommendations without a visible control surface.
  • Showing stale, unavailable, out-of-stock, permission-restricted, or already completed items.
  • Optimizing only for clicks and creating repetitive, sensational, or narrow recommendation loops.

Critique Questions

  • What exact signal or rule caused this item to be recommended?
  • Can users tell whether the item is organic, sponsored, manual, editorial, personalized, trending, or fallback?
  • What happens when the user says Not interested, and how quickly does the list change?
  • Can users turn off or reset the activity source used for personalization?
  • How are cold-start users handled without fake personalized copy?
  • Which unavailable, sensitive, duplicate, completed, or repeatedly dismissed items are filtered before rendering?
  • Is this really a recommendation, or would related links, recently viewed, saved items, or browse by category be more honest?
Accessibility
  • Use a heading or labelled region that names the recommendation set and does not rely on carousel position alone.
  • Make recommendation reasons, sponsored labels, availability, and item type available as text.
  • Provide keyboard-reachable item actions for opening, saving, dismissing, and feedback.
  • Do not hide dismissal or explanation controls behind hover-only affordances.
  • Announce item removal or list replacement through a polite status region.
  • Avoid auto-rotating carousels; if horizontal scrolling is used, provide visible, keyboard-operable controls and preserve focus after dismissal.
  • Keep reason labels concise enough to be scanned but specific enough to distinguish similar recommendations.
Keyboard Behavior
  • Tab moves through the section heading, recommendation cards, primary actions, dismissal controls, feedback controls, and personalization controls in a predictable order.
  • Enter or Space activates buttons according to native behavior; recommendation links use normal link activation.
  • After dismissing an item, focus moves to the next recommendation, the replacement item, or a confirmation status without jumping to the page top.
  • Feedback menus close with Escape and return focus to the invoking recommendation.
  • Turning personalization on or off updates reason labels without moving focus unexpectedly.
  • Carousel arrow controls, if present, move visible items without trapping keyboard users inside the rail.
Variants
  • Recommended for you
  • Related products
  • Complementary products
  • Frequently bought together
  • Trending in this category
  • Because you watched
  • Because you saved
  • Next best action
  • Similar items
  • Editorial fallback
  • Sponsored recommendation

Verification

Last verified: