Design Principle
Drag and drop is useful direct manipulation, but sorting, moving, and upload need non-drag alternatives.
Principle
Drag and drop is useful direct manipulation, but sorting, moving, and upload need non-drag alternatives.
Design action
Provide buttons, menus, or keyboard movement as alternatives; show drop zones, order changes, and completion feedback.
Examples
Positive example: Boards, list sorting, file upload, layout editors, and component assembly move objects directly. Counterexample: Drag is the only operation path.
Apply when
Boards, list sorting, file upload, layout editors, and component assembly move objects directly. Users need to judge state, scope, risk, or next action quickly.
Source notes
Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles. Apple HIG Motion: https://developer.apple.com/design/human-interface-guidelines/motion Material Design Motion: https://m3.material.io/styles/motion/overview/how-it-works GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Shopify Polaris Patterns: https://polaris-react.shopify.com/patterns Atlassian Empty State: https://atlassian.design/components/empty-state
Agent Directive
Provide buttons, menus, or keyboard movement as alternatives; show drop zones, order changes, and completion feedback.