Use touch gesture for the general touchscreen interaction contract: gesture vocabulary, thresholds, feedback, cancellation, target sizing, and equivalent controls. Use carousel, map view, bottom sheet, drag-and-drop upload, and data visualization when gesture behavior is only one part of a more specific content or component pattern.
Use touch gesture for the general touchscreen interaction contract: gesture vocabulary, thresholds, feedback, cancellation, target sizing, and equivalent controls. Use carousel, map view, bottom sheet, drag-and-drop upload, and data visualization when gesture behavior is only one part of a more specific content or component pattern.
Practice the judgment: Imagine this situation: A carousel requires a fast horizontal flick and hides previous and next buttons. 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 | Touch gesture | Carousel | Map view | Bottom sheet | Drag-and-drop upload | Data visualization |
|---|---|---|---|---|---|---|
| UI or UX | UI + UX - Touch-first gesture vocabulary and fallback contract for taps, swipes, drags, pinches, and multi-touch interactions | UI + UX - Sequential slide viewer for a small peer content set | UI + UX - Spatial viewport for location-based objects, layers, and routes | UI + UX - Mobile bottom-anchored contextual overlay with detents | UI + UX - Drop-zone file upload enhancement with file input fallback | UI + UX - Encoded visual analysis of quantitative or categorical data |
| UI guidance | Render touch gesture affordances with visible targets, enough spacing, state feedback, and non-gesture controls for the same outcome when a gesture is path-based, multipoint, hidden, or easy to misfire. | 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 real spatial viewport with visible map region, zoom state, scale or distance context, markers or shapes anchored to coordinates, selected-place detail, cluster counts, visible layer/filter controls, and a fallback list or table for the same results. | Render a bottom sheet as a lower-edge surface with a visible handle, rounded top edge, safe-area spacing, meaningful peek content, and controls that remain reachable from the bottom of the screen. | Render a large labelled drop zone with clear copy that says users can drag files there or activate a normal file picker, plus visible format, size, and count requirements. | Render a chart with a specific analytic question, title, dataset scope, mark type, axis labels, units, tick labels, scale baseline, legend, annotations, source or freshness note, selected mark, tooltip or detail, and data table alternative. |
| UX guidance | Use touch gesture when the product needs direct manipulation on a touchscreen, but treat gestures as part of a larger interaction contract rather than the only way to act. | 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. | Use Map view when the user's decision depends on where objects are, how far apart they are, what falls inside the current area, which route or coverage applies, or how dense nearby points are. | Use bottom sheets for mobile contextual details or controls that benefit from lower-edge reach while preserving orientation to the current background object. | Use drag-and-drop upload as an enhancement for users who can drag files from a file manager, while preserving an equivalent click, keyboard, and mobile path. | Use Data visualization when visual encoding helps users detect trends, comparisons, rankings, distributions, relationships, outliers, part-to-whole composition, or uncertainty faster than reading rows. |
| Good UI | A photo viewer supports pinch to zoom, double tap to zoom, plus and minus buttons, a reset button, zoom percent feedback, and a clear pan boundary after zoom. | 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. | A clinic finder map shows visible bounds, zoom level, selected clinic marker, appointment availability markers, a transit layer toggle, cluster counts, distance chips, and a synchronized results list. | A map pin opens a bottom sheet with a handle, station name, distance, primary route action, half-height service details, and full-height stop list. | A drop zone says Drag bank statements here or choose files, shows PDF/PNG/JPG up to 10 MB, highlights when files hover over it, lists two dropped filenames, and keeps a Choose files button visible. | A revenue trend chart shows month on the x-axis, revenue in USD on the y-axis, a target line, color-coded channels with legend labels, selected month tooltip, annotation for a campaign, and a data table toggle. |
| Bad UI | A hidden edge swipe deletes a message while the user is trying to scroll the list. | Auto-rotation moves content before users finish reading. | The selected popup is detached from the marker or opens outside the viewport. | A bottom sheet contains a long settings workflow and bottom navigation links, with the primary action below the device safe area. | The whole page becomes a hidden drop target that opens the dropped file in the browser when users miss the box. | Axes or units are missing and magnitude is ambiguous. |
| Good UX | A user starts swiping a gallery card, sees the next-card preview, changes their mind by moving back under the threshold, and the card snaps back with position unchanged. | 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. | A dispatcher pans to the west district, the result count and list update to the current bounds, a cluster expands at closer zoom, and the selected incident popup remains tied to the marker. | Users open a station sheet from the map, peek at the station identity, expand to half height for next departures, expand to full height for all stops, collapse back to the map, and keep the selected pin visible. | A user drags two PDFs over the zone, sees the target activate, drops them, reviews both filenames, removes the wrong one, uploads the remaining file, and then continues. | An analyst switches from revenue to conversion rate, the y-axis unit changes, target and annotation stay aligned, and the selected month tooltip and table row update from the same data. |
| Bad UX | A user tries to scroll a feed but the product interprets a short diagonal movement as a destructive swipe action. | A user starts reading shipping details and the carousel advances to a different slide before they finish. | A user filters to open locations but the map markers update while the list still shows closed locations, causing the wrong branch to be selected. | Users drag on the list expecting to scroll, but the whole sheet dismisses and loses the selected map pin. | A user drags a file over the page, misses the small target, and the browser navigates to the file, wiping unsaved answers. | A chart filter removes the low-performing segment but the legend and annotation still describe the full dataset. |
| Best fit | A touchscreen interaction needs deliberate design for gesture vocabulary, thresholds, feedback, target sizing, cancellation, and equivalent controls. | A small set of peer slides must share one constrained display area. | Users choose or inspect objects by where they are, how near they are, or what area they fall inside. | Mobile users need extra contextual detail or controls while staying oriented to a map, feed, route, media item, or selected object. | Users often upload files from a desktop file manager and benefit from dropping one or more files into a visible target. | Users need to see trends, comparisons, rankings, distributions, relationships, composition, anomalies, or uncertainty. |
| Avoid when | The gesture is only an implementation detail inside a more specific pattern such as swipe action, pull to refresh, long press, drag and drop, bottom sheet, carousel, or map view. | Every item is important or users need to compare items. | Location is only a label or decorative backdrop. | The surface contains persistent app destinations or global navigation. | A normal file input is sufficient and the extra drop-zone states would add confusion. | The data question is a single number, a record list, a geographic location, or an event audit trail. |
| Required state | Touch down or gesture start state that identifies the active target. | Initial slide state with carousel label, slide identity, current position, and previous or next controls. | Default map state with visible viewport, zoom level or distance context, markers, layer state, result count, and synchronized fallback list. | Closed state with a trigger tied to the current map item, feed card, route, media item, or contextual action. | Idle drop zone with visible label, requirements, and choose-file fallback. | Default chart with title, question, data scope, axes, units, legend, source or freshness note, visible filters, and data alternative. |
| Accessibility burden | Provide a simple single-pointer alternative for multipoint or path-based gestures unless the gesture is essential. | Label the carousel region by its purpose, such as Featured product tour or Case study slides. | Expose the map name, current area, result count, active filters, layers, selected place, and location permission state as text. | Give the bottom sheet a visible heading or context label and expose it as the accessible name. | Keep a visible label and instructions that name both drag-and-drop and choose-file paths. | Expose chart title, purpose, data scope, chart type, axes, units, legend, selected point, filter state, and source as text. |
| Common misuse | Making a hidden gesture the only way to find navigation, delete, refresh, zoom, or edit controls. | Hiding critical content or required tasks on later slides. | Treating geolocation denial as a dead end. | Using a bottom sheet as hidden global navigation or a dumping ground for unrelated commands. | Replacing the normal file chooser with a drop zone that only pointer users can operate. | Choosing a chart type that mismatches the data relationship. |