| UI or UX | UI + UX - Anti-pattern where timed carousel rotation changes visible content without user control | UI + UX - Sequential slide viewer for a small peer content set | UI + UX - Section-switching component | UI + UX - Ranked suggestions generated from context, behavior, item similarity, popularity, editorial rules, or recommendation models | UI + UX - Paged navigation control |
| UI guidance | Treat automatic slide rotation as motion that must be controlled before it changes content: expose a reachable pause or stop control, current slide position, named slide controls, and a visible motion state. | Render a carousel as a labelled region with one current slide or a small visible subset, clear previous and next controls, named slide picker controls or thumbnails, current slide position, and a pause or play control if rotation exists. | Render a tablist with short tab labels, selected tab styling, visible keyboard focus, and a single associated tabpanel that is visually connected to the active tab. | 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. | Render a labeled pagination nav near the affected results with current page, previous, next, nearby pages, optional first/last or ellipsis, and clear disabled edge states. |
| UX guidance | Prefer user-started rotation or a static first slide; users should never need to race a timer to read, compare, submit, dismiss, or recover information. | Use carousel only when several peer slides must share one constrained space and users can browse them safely without missing required information. | Help users switch between sibling sections in the same page context without changing routes or losing local work. | 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. | Help users move through an ordered result set with a stable sense of position, progress, and returnability. |
| Good UI | A campaign carousel loads paused, shows Stop rotation before Next and Previous, names each slide, and changes only after the user chooses Start rotation. | A product tour carousel shows one feature slide at a time with Previous, Next, Stop rotation, labelled slide dots, and text announcing Slide 2 of 4. | Tab labels are short, active tab is obvious, focused tab is distinguishable, and panel content is visually attached to the selected tab. | 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. | Current page, previous/next, disabled edges, page numbers, result range, and total count are visually clear. |
| Bad UI | A homepage hero advances every four seconds, hides Pause after the slide dots, and keeps moving while keyboard focus is inside a slide CTA. | A homepage hero rotates every three seconds, hides the pause control, and uses unlabeled dots that do not identify the current promotion. | Tabs wrap unpredictably or look like unrelated buttons. | A carousel says You will love this, hides that the first card is sponsored, and gives no reason or dismissal control. | Tiny numbers with no current state. |
| Good UX | A keyboard user tabs into the carousel, lands on Pause rotation first, stops motion, opens the visible slide action, and focus remains stable. | A keyboard user tabs to Stop rotation first, pauses the carousel, moves to Next slide, activates slide 3, and focus remains on the chosen control while the status updates. | Users switch between sibling sections without leaving page context or losing panel-local notes. | 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. | Users move through pages while query, filters, and sort persist. |
| Bad UX | A reader starts scanning eligibility details and the carousel advances before they finish, with no way to stop or restore the slide. | A user starts reading shipping details and the carousel advances to a different slide before they finish. | Using tabs as primary navigation to unrelated pages. | Users assume recommendations are mandatory next steps because the UI mixes them with required workflow tasks. | Changing page resets filters. |
| Best fit | Use this anti-pattern entry to audit or reject timed carousels that cannot provide immediate pause, stop, focus, hover, reduced-motion, and interaction-stability behavior. | A small set of peer slides must share one constrained display area. | Users switch between sibling panels frequently. | Users need discovery help in a large item, product, content, service, or action space. | The collection has many ordered results. |
| Avoid when | Do not treat this as permission to build an auto-rotating carousel; use the standard carousel pattern when motion is fully controlled or avoided. | Every item is important or users need to compare items. | The destinations are unrelated pages. | The product has too few items for ranking to reduce effort. | Users need uninterrupted reading or comparison. |
| Required state | Rotation stopped by default state with visible current slide, total count, and Pause or Start rotation control. | Initial slide state with carousel label, slide identity, current position, and previous or next controls. | Default active tab and visible panel. | Default recommended state with labelled section, item identity, reason, source, and action controls. | First page with disabled previous control. |
| Accessibility burden | Provide a keyboard-reachable pause or stop control before rotating content and before slide navigation controls. | Label the carousel region by its purpose, such as Featured product tour or Case study slides. | Expose the active tab and associated panel. | Use a heading or labelled region that names the recommendation set and does not rely on carousel position alone. | Use a labeled navigation region. |
| Common misuse | Hiding Pause behind carousel dots, hover-only controls, or an overflow menu. | Auto-advancing slides without a pause or stop control. | Using tabs as a primary site navigation system. | Counting schema-valid recommendation cards as complete without reasons, controls, or source disclosure. | Using pagination for a tiny collection. |