| UI or UX | UI + UX - Pointer or touch movement that picks up an object and drops it onto a valid destination | UI + UX - Touch-first gesture vocabulary and fallback contract for taps, swipes, drags, pinches, and multi-touch interactions | UI + UX - Sustained pointer contact that reveals secondary actions, selection, preview, or drag pickup | UI + UX - Drop-zone file upload enhancement with file input fallback | UI + UX - Workflow-state board for cards moving through columns | UI + UX - Control for changing the order of an existing result set |
| UI guidance | Render drag and drop with a visible draggable object, pickup affordance, drag preview, valid and invalid drop targets, insertion or placement feedback, cancellation, and a non-drag equivalent move path. | 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. | Show long press as a sustained-contact gesture with a discoverable hint, press progress, hold threshold, cancellation, release behavior, and a visible non-gesture equivalent. | 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 workflow columns with visible names, status mapping, card counts, WIP limits, overloaded states, empty columns, and cards that show title, owner, priority, age, due date, blocked state, and enough metadata to understand the work. | Place the active sort control above or inside the result region it affects, with a visible label such as Sort by and an option name that includes both the attribute and direction. |
| UX guidance | Use drag and drop when direct object movement between destinations is faster and more understandable than choosing source and destination from separate controls. | 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 long press when a touch-first surface needs a secondary action that benefits from deliberate dwell time and can coexist with tap, scroll, swipe, and drag. | 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 Kanban board when teams pull work through a shared workflow and need to see WIP pressure, bottlenecks, blocked items, stale cards, and status changes at a glance. | Use sort controls when users need to rearrange the same matching results by a meaningful attribute while preserving the current search query, filters, page size, and view context. |
| Good UI | A task card has a visible drag handle, lifts on pickup, highlights valid columns, previews the insertion position, blocks Done with a WIP warning, and offers a Move to column menu. | 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 file tile shows a short Touch and hold for actions hint, displays a hold ring after press down, opens a context menu at the tile after threshold, and keeps a visible More actions button. | 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 product board shows Backlog, Ready, In progress, Review, and Done columns with card counts, WIP limits, blocked badges, owners, due dates, and visible over-limit styling in Review. | A search results page shows Sort by with options like Relevance, Due date (oldest first), and Amount (highest first) above the results. |
| Bad UI | Cards move only by pointer drag, with no keyboard move controls or destination menu. | A map can only be zoomed with a two-finger pinch and has no plus, minus, or reset controls. | A long press silently deletes an item with no hint, progress, confirmation, undo, or visible alternative. | 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 board has columns named Important, Maybe, Later, and Random with no workflow meaning, no status mapping, and cards that never change state. | A menu labelled Sort contains Status: Open, Last 30 days, and Owner, which are filters rather than ordering rules. |
| Good UX | A user picks up a card, drags it over Review, sees the insertion line and WIP count, drops it, then receives Moved to Review with Undo. | 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 user touches and holds a photo, sees the hold progress cross threshold, receives haptic feedback, then a context menu opens with Copy, Share, Favorite, and Delete. | 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. | A developer moves a card from In progress to Review, sees the status update, receives an over-limit warning, and can undo or help clear the bottleneck instead of pulling more work. | A user searches for case, changes Sort by from Relevance to Due date (oldest first), and the same filtered records reorder while the query and filters remain. |
| Bad UX | A user starts scrolling a board and accidentally drags a card into Done. | A user with a head pointer cannot trigger a two-finger gesture and has no single-pointer alternative. | A user taps a card slowly and accidentally opens a hidden destructive menu. | A user drags a file over the page, misses the small target, and the browser navigates to the file, wiping unsaved answers. | A user drags a card to Done but the underlying status remains In progress, so reports and automations disagree with the board. | Changing sort clears the search box and removes active filters. |
| Best fit | Users need spatial or ordered movement between clear sources and destinations. | A touchscreen interaction needs deliberate design for gesture vocabulary, thresholds, feedback, target sizing, cancellation, and equivalent controls. | A touch-first interface needs an optional shortcut to secondary item actions, selection mode, preview, or drag pickup. | Users often upload files from a desktop file manager and benefit from dropping one or more files into a visible target. | Work progresses through visible stages and the team uses the board to decide what to pull next. | Users need to compare or act on a result set in different orders. |
| Avoid when | The action is rare, destructive, high-impact, or hard to preview before release. | 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. | The action is primary, required, urgent, destructive, security-sensitive, consent-related, payment-related, or account-changing. | The main audience is mobile-only or cannot reasonably drag files from the operating system. | Columns are arbitrary categories with no workflow meaning. | Users need to narrow which records are shown rather than change their order. |
| Required state | Idle state with draggable object identity and visible drag handle or move affordance. | Idle state with visible touch targets, gesture hints when needed, and no reliance on hover. | Idle target state with visible identity and alternate action path. | Idle drop zone with visible label, requirements, and choose-file fallback. | Default board state with columns, card counts, WIP limits, visible filters, selected board, and at least one card per active workflow stage. | Default sort state that identifies the initial order and why it is appropriate. |
| Accessibility burden | Provide a single-pointer alternative without dragging for non-essential drag functionality. | Provide a simple single-pointer alternative for multipoint or path-based gestures unless the gesture is essential. | Do not require sustained contact as the only way to access functionality. | Keep a visible label and instructions that name both drag-and-drop and choose-file paths. | Expose board name, active filters, sorting, grouping, column count, column names, card counts, and WIP limits as text. | Use a native select, radio group, or correctly implemented menu button for standalone sort controls. |
| Common misuse | Making drag the only way to move, reorder, assign, or change status. | Requiring pinch, rotate, two-finger swipe, or shape gestures with no single-pointer alternative. | Hiding required or primary actions behind undiscoverable long press. | Replacing the normal file chooser with a drop zone that only pointer users can operate. | Using Kanban columns as decorative categories rather than workflow states. | Putting filtering criteria such as date ranges, status, category, or owner inside a sort menu. |