| 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. | Use carousel only when several peer slides must share one constrained space and users can browse them safely without missing required information. | 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 map can only be zoomed with a two-finger pinch and has no plus, minus, or reset controls. | A homepage hero rotates every three seconds, hides the pause control, and uses unlabeled dots that do not identify the current promotion. | A decorative map background contains unlabeled pins with no coordinate meaning, no current region, no selected marker, no legend, and no list fallback. | A bottom panel covers the entire map immediately, has no handle, and hides the selected pin. | A dashed rectangle says Drop here but has no label, no click fallback, no accepted formats, and no state change while files hover over it. | A glossy chart card shows unlabeled bars with no axis, unit, baseline, data range, source, or explanation of what the colors mean. |
| Good UX | A user pinches a diagram to zoom, sees the scale change, releases outside the threshold without committing a rotate gesture, then uses visible Zoom in and Reset controls with one finger. | 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 with a head pointer cannot trigger a two-finger gesture and has no single-pointer alternative. | 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 dashboard truncates the y-axis to exaggerate a small change without indicating the baseline, leading a team to overreact. |
| 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. | The main audience is mobile-only or cannot reasonably drag files from the operating system. | The data question is a single number, a record list, a geographic location, or an event audit trail. |
| Required state | Idle state with visible touch targets, gesture hints when needed, and no reliance on hover. | 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 | Requiring pinch, rotate, two-finger swipe, or shape gestures with no single-pointer alternative. | Auto-advancing slides without a pause or stop control. | Using a map as decoration when the positions do not affect the task. | 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. | Using decorative charts that do not answer a data question. |