Use carousel for a small ordered set of peer slides in one visual slot, tabs for sibling content panels, recommendations for ranked suggested items, and pagination for moving through ordered result pages.
Use carousel for a small ordered set of peer slides in one visual slot, tabs for sibling content panels, recommendations for ranked suggested items, and pagination for moving through ordered result pages.
Practice the judgment: Imagine this situation: Slides rotate before users finish reading and the pause control is missing or hard to reach. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Carousel | Tabs | Recommendations | Pagination |
|---|---|---|---|---|
| UI or UX | 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 | 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 | 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 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 | 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 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 | 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 | 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 | 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 | 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 | 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 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. |