DESIGN SYSTEMS DESIGNER
Designing drag & drop that works for everyone at Optum
This project transforms an inaccessible drag-and-drop pattern into a flexible, WCAG-compliant system with keyboard support, screen reader feedback, and non-gesture alternatives—built for both clinical environments and patient-facing experiences.
THE PROBLEM
Context
Drag-and-drop is widely used across clinical and patient-facing products, but the existing pattern relied on mouse and visual precision. Missing keyboard support and clear affordances created accessibility barriers and increased the risk of error.
“If the order is wrong, that’s not a small mistake. I need to be confident before I save.”
CHARGE NURSE, IN PATIENT UNIT
Daniel García
THE RESEARCH
Methods
I reviewed drag-and-drop patterns across clinical and consumer products to understand common interaction models, affordances, and limitations. In parallel, I conducted an accessibility audit against WCAG guidelines to identify gaps in keyboard support, feedback, and gesture reliance within the existing system.
Insights
Most drag-and-drop patterns prioritized mouse and visual precision, with limited keyboard support and inconsistent feedback. Gesture-only interactions broke down for longer lists and higher-risk tasks, highlighting the need for clearer affordances and non-gesture alternatives.
3. Evidence
A. Mouse-Only Interaction
The drag-and-drop interaction relies on pointer gestures only, with no non-gestural alternative. This prevents users who rely on keyboards or assistive technologies from reordering items (WCAG 2.5.7, AA).
Finding 1 of 4
DESIGN IDEATION
Design ideation and constraints
I explored multiple interaction patterns for reordering items to balance accessibility, efficiency, and scalability across short and long lists.
CONSTRAINTS
Must support keyboard, screen reader, and non-gestural users Must work for short, medium, and long lists Must minimize visual noise and cognitive load
Finding 1 of 3
Testing and insights
A. List Length Drives Interaction Choice
Users preferred drag-and-drop for short, local reordering, but confidence dropped as lists grew longer or changes became more complex. For larger reordering tasks, users favored precise, step-based controls over dragging.
Finding 1 of 4
THE SOLUTION
FEATURE
1.
Short Lists: Direct Drag-and-Drop
For short lists, items can be reordered directly using a visible drag handle. Immediate visual feedback confirms the new position as the item is moved.
DESIGN JUSTIFICATION
Dragging is fast and intuitive for small, low-risk changes, minimizing interaction cost while remaining accessible through clear affordances and keyboard support.
Feature 1 of 6
FEATURE
2.
Medium Lists: Drag with Step-Based Controls
For medium-length lists, drag-and-drop is paired with explicit move controls (e.g., move up/down actions) that allow users to adjust position incrementally without dragging.
DESIGN JUSTIFICATION
This hybrid approach balances speed and precision, giving users flexibility to reorder confidently as complexity increases—especially when dragging becomes less accurate.
Feature 1 of 6
FEATURE
3.
Long Lists: Menu-Based Reordering
For long lists, reordering is handled through menu-driven actions that let users select a destination position or move items in defined steps, without requiring drag gestures.
DESIGN JUSTIFICATION
Menu-based controls reduce cognitive load and error risk in complex scenarios, providing precise, accessible reordering that scales reliably for high-stakes workflows.
Feature 1 of 6
THE FINAL REFLECTIONS
Takeaways
This project reinforced the importance of designing beyond the “happy path.” Seemingly simple interactions like drag and drop break down quickly at scale and under accessibility constraints, requiring flexible patterns that adapt to different list lengths, input methods, and user abilities.
Next Steps
After approval from design system and governance teams, I documented the recommended patterns in Figma and supported adoption across products, ensuring accessibility, consistency, and scalability.
“It’s fast, precise, and works even when I’m moving quickly between patients.”
CHARGE NURSE, IN-PATIENT UNIT
Daniel García