Application · lesson 18 of 20 · Search, Browse, And Discovery

Recommendations

Underlying principle: Discovery supports several starting points: a known term, a broad category, a partial memory, or a set of constraints. The interface helps people refine their understanding while they search.

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.

Start with the decision

Does this fit your task?

Users need discovery help in a large item, product, content, service, or action space.

Review the boundary: Compare the task with the alternatives in the decision section.

Review the decision →
Study the interaction

Follow the task before choosing the component

Discovery supports several starting points: a known term, a broad category, a partial memory, or a set of constraints. The interface helps people refine their understanding while they search.

01 / Recognize the need

What the person is doing

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

02 / Design the response

What the interface must communicate

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.

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

03 / Judge the outcome

What to look for

What exact signal or rule caused this item to be recommended?

Opening a recommendation navigates to that item or action and records the event according to the disclosed analytics and personalization rules.

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.
  • 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

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

Test the behavior

Try strong and weak versions of the interaction

Open the working example, try its controls, and compare the behavior against the decision guidance.

In the lab you can
  • switch between strong UI, weak UI, strong UX, and weak UX;
  • trigger required, empty, loading, error, and recovery states;
  • inspect keyboard and accessibility expectations beside the demo.
Launch Recommendations in the lab
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.

Failure to inspect

The UI conflates recommendations with recently viewed, related links, saved items, ads, or required tasks.

Access contract

Make recommendation reasons, sponsored labels, availability, and item type available as text.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • 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 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.
  • A caseworker turns off recent-activity personalization and the recommendations switch to a labelled generic fallback while saved items remain separate.
Weak implementation

Vague, hidden, hard to recover from

  • A recommendation list keeps showing unavailable, out-of-stock, permission-restricted, or already dismissed items because the UI only validates card shape.
  • 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.
  • The UI conflates recommendations with recently viewed, related links, saved items, ads, or required tasks.
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.
  • Generic or cold-start fallback state labelled as popular, trending, category-based, or editorial.
  • 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.

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.
  • 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.

Accessibility

  • Make recommendation reasons, sponsored labels, availability, and item type available as text.
  • Provide keyboard-reachable item actions for opening, saving, dismissing, and feedback.
  • 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.

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?
  • Can users turn off or reset the activity source used for personalization?
  • Which unavailable, sensitive, duplicate, completed, or repeatedly dismissed items are filtered before rendering?
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

Source trail checked:

Saved items