| 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 | If the business insists on auto-advance, the pause or stop path must be first, obvious, persistent, keyboard reachable, and honored across focus, hover, background-tab return, mobile interaction, and reduced-motion states. | Make user control stronger than motion: avoid auto-advance by default, stop rotation on focus or hover, preserve focus after slide changes, and keep the current slide stable while users read or interact. | Avoid tabs when users must compare panels, read panels sequentially, or complete required workflow steps. | 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 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. | 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. | Auto-rotation moves content before users finish reading. | Tabs wrap unpredictably or look like unrelated buttons. | A recommendation list keeps showing unavailable, out-of-stock, permission-restricted, or already dismissed items because the UI only validates card shape. | Pagination jumps around as pages load or separates controls from the result list. |
| 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. | Keyboard users can move focus with arrows, activate with Enter or Space, and then reach the selected panel. | 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. | Users move through pages while query, filters, and sort persist. |
| Bad UX | Slides advance before users finish reading. | 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 it when a design review needs concrete evidence that motion is interrupting reading, form entry, recommendation feedback, or assistive-technology output. | 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 | Choose another interaction when the task calls for a different route. | 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. | Make recommendation reasons, sponsored labels, availability, and item type available as text. | Use a labeled navigation region. |
| Common misuse | Hiding Pause behind carousel dots, hover-only controls, or an overflow menu. | Hiding critical content or required tasks on later slides. | Using tabs as a primary site navigation system. | Pretending generated suggestions are recently viewed, saved, or required steps. | Using pagination for a tiny collection. |