UX de arrastrar y soltar: significantes, comentarios y alternativas accesibles
La gente puede descubrir y usar cómo diseñar arrastrando y soltando: agarrar significantes, levantar y obtener una vista previa de comentarios, zonas de colocación, física y la alternativa sin arrastre que requiere WCAG 2.2.
Idea clave
Haga que los elementos que se pueden arrastrar sean obvios con un controlador de agarre o un cambio de cursor, confirme el agarre con un levantamiento y una sombra, obtenga una vista previa del resultado mientras arrastra resaltando las zonas de colocación y coloque el elemento claramente cuando lo suelte, con deshacer. Proporcione siempre una forma sin arrastre para hacer lo mismo; WCAG 2.2 lo requiere en el nivel AA.
Comentarios en cada etapa
La guía de Nielsen Norman Group es que los significantes claros y la retroalimentación clara en cada etapa hacen que arrastrar y soltar sea reconocible y fácil de usar. Una vez que se agarra un objeto, la gente necesita saber que fue agarrado y ver qué sucederá antes de soltarlo.
- Significante: un icono de asa, un cursor de asa al pasar el cursor o ambos.
- Agarrado: levanta el objeto con una sombra y una ligera escala para que parezca sostenido.
- Vista previa: resalta las zonas de caída válidas y muestra dónde aterrizará el artículo.
- Soltado: anima el elemento a su lugar y ofrece deshacer.
Accesibilidad: ofrecer siempre otra forma
El criterio de éxito 2.5.7 de WCAG 2.2, Movimientos de arrastre (nivel AA), requiere que cualquier cosa que se haga arrastrando también se pueda hacer con un solo puntero sin arrastrar, a menos que arrastrar sea esencial. Las alternativas comunes son los botones de subir y bajar, un menú "Mover a" o soporte de teclado con teclas de flecha. NN/g también señala que una alternativa precisa a menudo ayuda a todos, por ejemplo, arrastrar aproximadamente hasta su lugar y empujar con las teclas de flecha.
La física hace que arrastrar parezca directo
Los elementos arrastrados deben seguir el puntero sin demoras. Cuando se suelta, un resorte que lleva la velocidad de liberación al asiento hace que la caída se sienta física, y otros elementos que se mueven hacia un lado muestran suavemente dónde está el espacio. Mantenga estos movimientos cortos y redúzcalos cuando el movimiento reducido esté activado.
Detalles táctiles
En las pantallas táctiles, se distingue un arrastre de un desplazamiento, a menudo con una pulsación larga para levantarlo. Haga manijas lo suficientemente grandes como para golpearlas, desplace automáticamente las listas cuando las arrastre cerca del borde y brinde retroalimentación háptica al levantar y soltar donde la plataforma lo admita.
Principios clave para recordar
- Mostrar lo que se puede arrastrar con controles o cambios de cursor
- Confirma la captura y obtén una vista previa de la caída.
- Resolver con movimiento claro y ofrecer deshacer
- WCAG 2.5.7 (AA): proporciona una alternativa sin arrastre
- Utilice resortes para una liberación natural; reducir para movimiento reducido
Preguntas frecuentes
Fuentes
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI