UI + UX Personalization And Preference established

Favorites

Provide explicit favorite and unfavorite controls, a recognizable saved-favorites list or filter, item context, scope and visibility cues, separate handling from pins, recents, saved views, and subscriptions, plus repair states for moved, restricted, or unavailable items.

Decision first

Choose this pattern when the problem matches

Use when

  • Users need to mark preferred or personally important objects for later return.
  • The product contains more items than users can comfortably re-find through browse or search alone.
  • Favorite state can be persisted and shown consistently across item surfaces.
  • A simple user-item preference relationship is enough and does not need collection metadata, notification delivery, or top placement.

Avoid when

  • The goal is to keep a small set at the top or in a stable user-defined order.
  • The goal is automatic resume from personal history.
  • The goal is future notifications, watched activity, or subscription delivery.
  • The saved object is a data view, query, filter, layout, or report configuration.
  • The product cannot offer a reliable way to view, filter, or remove favorites.
  • Marking preference would expose sensitive intent in a shared, public, or managed environment.

Problem it prevents

Users need a durable way to mark preferred or personally important items for return access, but recency, search ranking, recommendations, and pinned prominence do not reliably express personal affinity.

Pattern anatomy

What a strong implementation has to make clear

User need

The product has revisitable objects such as files, folders, repositories, topics, records, reports, saved searches, messages, products, places, or help articles.

Pattern promise

Provide explicit favorite and unfavorite controls, a recognizable saved-favorites list or filter, item context, scope and visibility cues, separate handling from pins, recents, saved views, and subscriptions, plus repair states for moved, restricted, or unavailable items.

Required state

No favorites state with a path to favorite eligible items.

Recovery path

Users cannot tell whether a star means favorite, rating, pin, vote, watch, follow, or recommendation feedback.

Access contract

Use an accessible name and state such as Add to favorites, Remove from favorites, or Starred instead of relying on a star icon alone.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A file hub has a Favorites section with file names, file types, folder paths, owner labels, filled star buttons, and an explanation that removing a favorite keeps the file in its folder.
  • A repository card has a Star button that shows the selected state, keeps the repository reachable from a stars page, and distinguishes starring from watching or following updates.
  • A user stars three policy folders for personal access, filters the workspace to Favorites, and removes one favorite without deleting or moving the folder.
  • A developer stars a repository to return to it later, understands that watching handles notifications separately, and can find all starred repositories from a personal saved list.
Weak implementation

Vague, hidden, hard to recover from

  • A star icon appears beside items with no label, no selected state, and no way to tell whether it favorites, rates, pins, recommends, or subscribes.
  • Favorited files are mixed with pinned files and recent files in one Important list, so users cannot tell whether order, history, liking, or future delivery controls the result.
  • A user removes a favorite and loses the underlying record because the product treated unfavorite as delete.
  • A dashboard automatically favorites every recently opened item, causing users to distrust both favorites and recents.
UI guidance
  • Show a clearly labelled Favorites or Starred area with item identity, item type, location, ownership or scope, selected favorite state, and an unfavorite control that is visually tied to each item.
  • Keep favorite controls available where users encounter eligible items, and show whether the favorite is personal, synced, public, shared, unavailable, or also used by recommendation or popularity systems.
UX guidance
  • Use favorites when users want to mark affinity, preference, or personal save-for-later access without necessarily changing list order, top placement, notifications, or the underlying object.
  • Separate favorites from pinned items, recently viewed, saved views, subscriptions, collections, and recommendations so users can predict whether starring affects quick access, display prominence, delivery, public signals, or only a personal saved list.
Implementation contract

What the implementation must handle

States

  • No favorites state with a path to favorite eligible items.
  • Favoritable item state, favorited item state, favorite pending, unfavorite pending, and failed-save states.
  • Favorites list or filter with item name, type, location, owner, scope, and last-known availability.
  • Personal favorite, synced favorite, public or counted favorite, shared favorite, and policy-limited favorite states when those scopes exist.

Interaction

  • Favoriting records a relationship between the user and the existing item without duplicating, moving, pinning, subscribing to, or changing the item.
  • Unfavoriting removes only the favorite relationship and leaves the underlying item, recent history, pins, subscriptions, and saved views intact.
  • A favorited item can be found again through a Favorites section, filter, shortcut, or saved-list page with the same identity used on the source item.
  • Favorite state is visibly persistent wherever the same item appears, including lists, detail pages, search results, and mobile views.

Accessibility

  • Use an accessible name and state such as Add to favorites, Remove from favorites, or Starred instead of relying on a star icon alone.
  • Keep favorite controls keyboard-operable wherever they appear and preserve focus after toggling.
  • Announce favorite, unfavorite, failed-save, unavailable, and restored outcomes through a stable status region.
  • Do not rely on filled versus outline icons or color alone; include text, aria-pressed, or adjacent state copy.

Review

  • What exactly changes when the user favorites this item: personal quick access, public count, recommendation input, or visible placement?
  • Where can users reliably find all of their favorited items later?
  • Can users unfavorite without deleting, unpinning, unsubscribing, or removing recent history?
  • Is favorite state personal, synced across devices, shared with a team, public, or used by ranking systems?
Interactive lab

Inspect the states before you copy the pattern

Save preferred items for return access

Favorite and unfavorite items, filter to Favorites, switch personal and public effect cues, repair unavailable favorites, restore the list, and compare unlabeled-star, delete-confusion, mixed-pins, auto-favorite, no-list, public-surprise, and dead-favorite failures.

Favorites
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

No favorites state with a path to favorite eligible items.

Keyboard / Access

Tab reaches each favorite control, the item link, list filter, sort or scope controls, and remove actions in a predictable order.

Avoid Generating

Using a star icon with no label or selected state.

Evidence trail

Source-backed claims behind this guidance

Full agent/debug reference

Problem Context

  • The product has revisitable objects such as files, folders, repositories, topics, records, reports, saved searches, messages, products, places, or help articles.
  • Users may want to mark an item for personal return, preference, or liking without making it the top item for everyone.
  • Favorite state can feed a personal list, a quick-access section, public popularity counts, recommendations, or cross-device sync depending on the product.
  • Favorite items can be deleted, moved, permission-lost, hidden by policy, duplicated by similar names, or confused with pins, subscriptions, saved views, and collections.

Selection Rules

  • Choose favorites when the main user intent is personal preference, affinity, or saved return access for known items.
  • Use pinned items when the action changes placement, top-section prominence, stable order, or public profile display.
  • Use recently viewed when the list should be automatic history based on actual openings rather than deliberate saves.
  • Use saved view when the saved object is a reusable presentation or query configuration such as filters, columns, sort, grouping, or density.
  • Use follow / subscribe when users want future update delivery rather than a saved item list.
  • Use collection when users are intentionally building a named set with membership, sharing, ordering, notes, or batch actions beyond simple favorite state.
  • Expose whether a favorite is personal, synced, shared, public, or counted toward popularity before the mark affects other people or recommendations.
  • Keep favorite and unfavorite separate from delete, hide, archive, remove from recents, pin, watch, follow, and unsubscribe.
  • Provide a Favorites list, filter, or search facet once favoriting is available so users can reliably retrieve marked items.
  • Avoid favorites when users need ranked recommendations, task status, workflow assignment, or a canonical source of truth rather than personal preference.

Required States

  • No favorites state with a path to favorite eligible items.
  • Favoritable item state, favorited item state, favorite pending, unfavorite pending, and failed-save states.
  • Favorites list or filter with item name, type, location, owner, scope, and last-known availability.
  • Personal favorite, synced favorite, public or counted favorite, shared favorite, and policy-limited favorite states when those scopes exist.
  • Duplicate-name, moved, deleted, archived, permission-lost, restricted, and unavailable favorite states.
  • Mobile or narrow-screen state where favorite controls and item context remain reachable.

Interaction Contract

  • Favoriting records a relationship between the user and the existing item without duplicating, moving, pinning, subscribing to, or changing the item.
  • Unfavoriting removes only the favorite relationship and leaves the underlying item, recent history, pins, subscriptions, and saved views intact.
  • A favorited item can be found again through a Favorites section, filter, shortcut, or saved-list page with the same identity used on the source item.
  • Favorite state is visibly persistent wherever the same item appears, including lists, detail pages, search results, and mobile views.
  • If favorites influence recommendations, popularity, or public counts, the product discloses that effect near the control or account setting.
  • When a favorite becomes unavailable, the list explains the status and offers remove, request-access, open-location, or replace paths instead of dead links.
  • Bulk favorite cleanup, import, or sync actions preserve user intent and do not silently change pins, subscriptions, collections, or recent history.

Implementation Checklist

  • Model favorite state separately from pin order, recent history, saved view configuration, collection membership, watch or follow subscriptions, and item deletion.
  • Store stable item IDs with type, location, owner, favorite scope, favorited time, and visibility or public-count behavior.
  • Provide accessible favorite and unfavorite controls with selected state, text labels, and status messages for saves, failures, and removals.
  • Add a Favorites destination, filter, or facet with empty, loading, duplicate-name, unavailable, and permission-limited states.
  • Refresh item metadata in the favorite list and mark moved, deleted, archived, or restricted items before navigation.
  • Respect account sync, private mode, managed accounts, public profile, recommendation, and popularity-count settings.
  • Test long names, similar names, unavailable items, cross-device sync, public versus personal effects, keyboard access, touch targets, and unfavorite-not-delete copy.

Common Generated-UI Mistakes

  • Using a star icon with no label or selected state.
  • Treating favorites as pins, recents, subscriptions, saved searches, recommendations, ratings, or votes without explaining the effect.
  • Removing, archiving, hiding, or deleting the item when users only meant to unfavorite it.
  • Offering favorite buttons without any reliable Favorites list or filter.
  • Leaking sensitive favorited item names across shared, public, or screen-shared surfaces.
  • Automatically favoriting items based on recency, popularity, or algorithmic guesses.

Critique Questions

  • What exactly changes when the user favorites this item: personal quick access, public count, recommendation input, or visible placement?
  • Where can users reliably find all of their favorited items later?
  • Can users unfavorite without deleting, unpinning, unsubscribing, or removing recent history?
  • Is favorite state personal, synced across devices, shared with a team, public, or used by ranking systems?
  • What happens when a favorite is moved, renamed, deleted, archived, duplicated, or permission-restricted?
  • Would a pin, saved view, collection, follow, or recently viewed list better match the user's intent?
Accessibility
  • Use an accessible name and state such as Add to favorites, Remove from favorites, or Starred instead of relying on a star icon alone.
  • Keep favorite controls keyboard-operable wherever they appear and preserve focus after toggling.
  • Announce favorite, unfavorite, failed-save, unavailable, and restored outcomes through a stable status region.
  • Do not rely on filled versus outline icons or color alone; include text, aria-pressed, or adjacent state copy.
  • Provide item type, location, owner, and scope when duplicate names could cause users to favorite or remove the wrong item.
  • Make Favorites filters and list controls reachable on narrow screens without hiding the unfavorite action behind hover only.
Keyboard Behavior
  • Tab reaches each favorite control, the item link, list filter, sort or scope controls, and remove actions in a predictable order.
  • Enter or Space toggles favorite state and leaves focus on the same item unless the item is removed from the current Favorites-only filter.
  • When unfavoriting removes a row from a Favorites-only view, focus moves to the next favorite or the empty-state message.
  • Escape closes favorite action menus and returns focus to the invoking star or menu button.
  • Bulk selection and cleanup support keyboard selection, review, and undo or restore where the scope is broad.
  • Mobile and touch layouts keep favorite controls large enough and do not require hover to reveal them.
Variants
  • Favorite file
  • Favorite folder
  • Starred repository
  • Starred topic
  • Favorite search
  • Favorite product
  • Favorite place
  • Favorite contact
  • Public favorite count
  • Synced favorites list

Verification

Last verified: