| UI or UX | UI + UX - Purpose-level consent and runtime enforcement model for cookies, local storage, pixels, tags, SDKs, and similar device storage or access | UI + UX - Cookie and tracking consent control | UI + UX - Specific opt-in decision for optional data use, participation, communication, sharing, or training | UI + UX - Persistent hub for communication, consent, topic, privacy, language, and personalization choices | UI + UX - Durable privacy-control surface for account, product, device, app-access, activity, visibility, and sharing settings | UI + UX - Explicit agreement gate for terms, conditions, contracts, policies, legal disclosures, or updated service rules before access or transaction commitment |
| UI guidance | Present strictly necessary storage separately from optional cookie purposes such as analytics, advertising, personalization, functional enhancements, pixels, SDKs, and similar technologies. | Render a clearly labelled cookie banner at the top of the document before ordinary page content, with service-specific copy, essential-cookie information, equal accept and reject actions for non-essential purposes, and a link to detailed cookie settings. | Render a consent prompt as a focused opt-in decision that names the requester, purpose, data involved, optionality, benefit, consequence of declining, withdrawal route, and consent record before the user chooses. | Render a preference center as a returnable hub with categories for communications, channels, topics or interests, notification delivery, privacy and data sharing, cookie or tracking consent, personalization, language or locale, required messages, managed values, source-of-truth status, and save feedback. | Render privacy settings as a returnable control surface with current effective values, privacy categories, data types, app or service access, account/device/product scope, source of truth, managed or unavailable reasons, last updated status, and save or immediate-apply feedback. | Render legal acceptance as a required agreement control that names the document, owner, version or effective date, scope, linked or embedded full terms, and consequence of accepting or declining. |
| UX guidance | Use cookie consent when the user must decide which non-essential storage or tracking purposes can run before optional cookies, tags, pixels, local storage, or SDKs are activated. | Use a cookie banner to collect or confirm choices for non-essential cookies, local storage, pixels, service-worker storage, analytics, advertising, personalization, or similar device storage technologies. | Use consent prompt when the product needs the user to knowingly agree to a specific optional data-processing purpose such as marketing, research participation, AI training, personalization, partner sharing, or sensitive-data use. | Use a preference center when users need durable control over what they receive, which channels may be used, which topics they want, which consent purposes are active, how personalization uses their data, and which choices cannot be disabled. | Use privacy settings when users need to inspect and change ongoing privacy posture for saved activity, profile visibility, app access, device permissions, data sharing, ad personalization, location, connected apps, or product privacy dashboards. | Use legal acceptance when users must knowingly agree to terms of service, conditions of sale, workplace terms of use, contract amendments, policy acknowledgements, or other legal documents before proceeding. |
| Good UI | A cookie settings page shows essential cookies locked on, analytics, personalization, and advertising off by default, plus Accept all, Reject all, Save choices, and a vendor details panel. | A service banner says it uses essential cookies and asks to use analytics cookies, with Accept analytics cookies, Reject analytics cookies, and View cookies controls at the same level. | A research signup screen asks whether the user consents to being contacted for follow-up interviews, names the research team, shows what contact data is used, offers Yes and No thanks buttons, and links to withdrawal. | A customer account preference center shows Email, SMS, Push, Topics, Cookies, Data sharing, Language, and Required service messages, each with current status, scope, and last saved time. | An account privacy dashboard groups Saved activity, Profile visibility, Ad personalization, Connected apps, Location history, Device permissions, and Data deletion, with current values, scope labels, last updated times, and unavailable reasons. | A checkout step shows an unchecked I agree to the conditions of sale checkbox beside linked terms, blocks Place order until checked, and validates the missing agreement next to the checkbox. |
| Bad UI | A second-layer settings panel has all optional cookie categories preselected and a prominent Save button. | A banner has a large Accept all button and a small Manage settings link but no reject action on the first layer. | A modal says By continuing you agree to personalized offers and partner sharing, with a large Continue button and a small privacy policy link. | A single Receive updates switch hides whether it controls marketing email, SMS, push, product notices, analytics consent, or service messages. | A Privacy page links only to a legal policy and has no controls for activity history, public profile fields, personalization, app access, or data sharing. | A payment button says By continuing you agree to our terms, but the terms link is hidden below the order summary and no separate acceptance state is recorded. |
| Good UX | A user rejects all optional cookies, continues using the service, later opens Cookie settings, enables analytics only, receives a saved confirmation, and can withdraw again. | A first-time visitor rejects analytics cookies and the site loads without optional analytics, while essential security cookies remain explained. | A user declines partner sharing and can still complete checkout; the service records no partner-sharing consent and shows how to change the choice later. | A user turns off promotional email, keeps outage SMS and account security email, changes language to Spanish, withdraws ad personalization, and sees which transactional messages remain required. | A user pauses saved activity, clears search history for a date range, disables ad personalization, hides birthday visibility, revokes a connected app, and sees which values apply immediately versus after sync. | A returning user sees updated terms with a change summary, old and new effective dates, a download route, an accept action, and a clear message that access pauses if they decline. |
| Bad UX | The user closes the banner and the product treats inactivity as consent to advertising cookies. | Reject only closes the banner while ad pixels and analytics continue firing. | A user clicks Next to finish onboarding and unknowingly opts into marketing because the consent copy was bundled into the terms paragraph. | A user declines analytics in a cookie banner but later cannot find the preference center needed to withdraw personalization consent after signing in. | A user turns off location sharing in account privacy settings, but the device-level location permission remains active and the page never explains the split. | A user cannot access an admin app because terms changed, but the gate shows only Access denied and no policy title, version, decline route, or help path. |
| Best fit | The product uses cookies, local storage, pixels, tags, SDKs, or similar technologies that are not strictly necessary. | The service sets non-essential cookies or similar device storage technologies. | The product needs a user's active agreement for optional data use, marketing, research participation, personalization, partner sharing, AI training, or sensitive-data processing. | Users need to revisit and change communication, consent, topic, personalization, privacy, channel, language, or data-sharing choices. | Users need ongoing control over personal data collection, saved activity, visibility, app access, device permissions, connected services, data sharing, or personalization. | A user must accept terms of service, conditions of sale, policy documents, service agreements, acceptable-use rules, or legal disclosures before access or transaction completion. |
| Avoid when | The product only needs to show the first-layer cookie notice; use cookie banner. | The service uses only strictly necessary cookies and can explain them on a cookies page. | The choice is only about non-essential cookies or device storage; use cookie banner. | The product only needs a small app setting unrelated to communications, consent, or personalization. | The task is a first-time opt-in to one optional purpose; use consent prompt. | The choice is optional data processing, marketing, research, or AI training consent; use consent prompt. |
| Required state | Pre-consent state with optional storage blocked. | First visit with no saved preference. | Pre-consent state with optional processing off and the core task still understandable. | Overview with preference categories and current effective status | Privacy settings overview with categories and current effective values. | Initial unchecked required agreement state. |
| Accessibility burden | Use native buttons and form controls for accept, reject, save, and purpose choices. | Label the cookie banner region with the service name so users know which service is asking for the choice. | Use a labelled region or dialog title that names the consent purpose, not a vague privacy heading. | Group categories with headings, fieldsets, legends, and persistent labels that name the affected channel, purpose, topic, source, and scope. | Use clear headings, labels, descriptions, and status text for each privacy category and control. | Use a labelled checkbox or button whose accessible name includes the document title, not just I agree. |
| Common misuse | Firing analytics or advertising tags before the user chooses. | Accept-only banners. | Treating continued use, scrolling, closing, or inactivity as consent. | Using one master preference switch for communication, privacy, cookies, topics, and required messages. | Replacing privacy settings with a privacy policy link or legal notice. | Relying on continued browsing, payment, account creation, or a footer link as the only acceptance signal. |