Arrastrar y soltar: cuándo ayuda y qué alternativa ofrecer

Arrastrar y soltar ayuda cuando la persona necesita mover, reordenar, agrupar o cambiar el tamaño de algo que ve en pantalla, y cuando espera hacerlo con ese gesto. Sale caro en distancias largas, en ajustes finos y en el celular. Por eso no debería ser el único camino. Las WCAG 2.2, las pautas de accesibilidad del W3C, piden que toda acción hecha arrastrando funcione también con un clic o un toque simple, salvo cuando arrastrar es esencial (WCAG 2.2, criterio 2.5.7 (en inglés)).

Qué es el gesto

Arrastrar y soltar es un tipo de manipulación directa: la persona actúa sobre el objeto que está viendo, y el efecto aparece al momento. El término es de Ben Shneiderman, de principios de los años 1980, cuando lo normal era escribir comandos (Nielsen Norman Group, el NN/g, sobre manipulación directa (en inglés)). Mover un archivo a otra carpeta es el ejemplo clásico. En la línea de comandos, la misma tarea exige recordar el comando y la ruta de las dos carpetas.

Page Laubheimer, en el NN/g (en inglés), describe el gesto en cuatro pasos:

el objeto está visible en la pantalla;
la persona lo toma, con un clic o una pulsación larga;
sin soltarlo, lo lleva hasta el destino;
lo suelta, y el objeto cambia de lugar o dispara una acción, como borrar el archivo que cae en la papelera.

Cuándo ayuda

La ventaja está en ver cómo ocurre todo. El artículo sobre manipulación directa (en inglés) enumera los beneficios: el objeto queda a la vista, el efecto aparece enseguida, el error se deshace fácil y se aprende rápido. La persona reconoce lo que puede hacer, en lugar de memorizarlo.

Según el NN/g (en inglés), el gesto encaja en cuatro tareas: agrupar, reordenar, mover y cambiar el tamaño. Un tablero de tareas con columnas, como Trello, es el caso típico. La columna de destino está ahí, la tarjeta también, y el movimiento cuenta el cambio sin necesidad de texto.

Dónde sale caro

El mismo gesto tiene un costo físico. El NN/g (en inglés) dice que puede ser lento, impreciso y agotador, sobre todo en distancias largas. El mouse llega al borde de la mesa, el dedo tiene que cambiar de posición, y el objeto cae en el lugar equivocado. Entonces la persona empieza de nuevo.

La ley de Fitts ayuda a entender por qué. Dice que el tiempo para alcanzar un objetivo crece con la distancia y baja con el tamaño del objetivo (NN/g, ley de Fitts (en inglés)). Soltar algo en un punto exacto es justo el caso del objetivo pequeño.

Las tareas repetidas también sufren. En el ejemplo del NN/g sobre manipulación directa (en inglés), una lista de reproducción de YouTube con 113 videos dejaba arrastrar el video o mandarlo al principio o al final. Para llevar un video a la mitad de la lista, una opción para moverlo a una posición numerada habría sido más rápida.

En el celular no existe el hover, el estado en que el cursor se posa sobre algo, que suele avisar que se puede arrastrar. Por eso el NN/g (en inglés) recomienda el gesto en pantallas táctiles solo cuando la investigación muestra que las personas lo esperan y cuando no hay una alternativa más simple, como un menú. Gmail es el ejemplo del artículo: en la computadora, el mensaje va a la carpeta arrastrándolo; en el celular, va por menú.

Qué pide la accesibilidad

El criterio 2.5.7 de las WCAG 2.2 (en inglés) es nuevo en esta versión y tiene nivel AA. Pide que toda función hecha arrastrando también pueda hacerse con un puntero único, sin arrastrar. Un puntero único es un mouse, un dedo o un lápiz, un punto a la vez. Quedan fuera los casos en que arrastrar es esencial y los gestos del propio navegador, como desplazar la página.

El motivo está en la página que explica el criterio (en inglés). Hay personas que no logran sostener y mover al mismo tiempo con precisión. Otras usan un puntero controlado con la cabeza, un rastreador de mirada o comandos de voz que imitan el mouse. Para ellas, arrastrar es lento y falla.

La misma página (en inglés) trae ejemplos que sirven de modelo:

un tablero con columnas abre, al tocar la tarjeta, un menú para elegir la columna de destino;
una lista ordenable muestra botones de subir y bajar junto al elemento elegido;
un control deslizante acepta un clic en cualquier punto de la barra;
un mapa que se arrastra también tiene botones para mover la vista.

Un campo de texto también sirve como alternativa, porque se puede completar con teclado, voz o toque.

Cómo diseñar el gesto

Las recomendaciones del NN/g (en inglés) y de la guía de interfaz de Apple (en inglés) se complementan:

Muestra que se puede tomar. Usa un asa de arrastre y el cursor estándar del sistema. El NN/g (en inglés) advierte que los íconos de asa varían mucho y se parecen al menú de tres puntos o al de tres líneas, así que no alcanzan solos.
Muestra que se tomó. Una sombra, un contorno, una leve inclinación o una imagen translúcida del objeto. Apple (en inglés) sugiere mostrar esa imagen en cuanto el objeto se mueve unos tres puntos, la unidad de medida de pantalla que usa Apple.
Muestra lo que va a pasar. En una lista, los demás elementos abren espacio antes de que la persona suelte. El NN/g (en inglés) sugiere una animación corta, de unos 100 milisegundos, que empieza cuando el centro del objeto pasa el borde del vecino.
Ayuda a acertar el destino. La zona para soltar puede ser un poco más grande de lo que parece, con un resaltado cuando el objeto entra en ella. Apple (en inglés) pide resaltar solo los destinos que aceptan ese contenido.
Avisa cuando no funcionó. Si la persona suelta en un lugar no válido, el objeto vuelve a su origen.
Deja deshacer. Apple (en inglés) recomienda permitir deshacer el arrastre y pedir confirmación cuando la acción no tiene vuelta atrás.
En pantalla táctil, da espacio y una señal. El NN/g (en inglés) pide al menos 1 cm por 1 cm libre para tomar el objeto y una pequeña demora para distinguir toque, desplazamiento y agarre. Una vibración leve confirma que el objeto se tomó.

Dónde las fuentes no coinciden

Apple quiere el gesto en todas partes. Su guía dice que hay que ofrecer arrastrar y soltar en la app “lo más posible”, porque la gente conoce el gesto y lo intenta en todo (Apple, Human Interface Guidelines (en inglés)). El NN/g es más prudente, al menos en pantallas táctiles. Ahí el gesto solo entra con evidencia de que las personas lo esperan y sin una alternativa más simple (NN/g (en inglés)).

Yo junto las dos así: el arrastre como atajo y el menú como camino seguro. La misma guía de Apple pide otras formas de hacer la acción, como un comando de menú para mover el elemento.

La segunda diferencia es el teclado. El NN/g (en inglés) trata la accesibilidad del gesto con el teclado: el asa recibe el foco con Tab, la barra espaciadora toma el objeto y las flechas lo mueven. Las WCAG separan las dos cosas. La página del criterio 2.5.7 (en inglés) dice que un camino con teclado no cumple el criterio por sí solo, porque quien usa una pantalla táctil puede no tener teclado. El teclado lo cubren otros criterios, el 2.1.1 y el 2.1.3.

Dónde lo usé

Vexor instala asistentes de IA en WhatsApp, y el panel que viene con el asistente tiene un tablero de clientes por nivel de interés: nuevo, interesado, caliente, agendado, cliente o frío. Cambiar de etapa es arrastrar la tarjeta a otra columna. La etapa cambia al instante, y el cambio queda guardado en el historial, con la fecha.

Es el terreno donde el gesto ayuda: pocas columnas, todas a la vista, y un movimiento que cuenta el cambio por sí solo. El historial con fecha responde a una parte de lo que piden las fuentes, que es dejar claro qué cambió y cuándo.

Ese tablero también es el ejemplo del propio W3C, así que la regla vale para él. Cambiar de etapa tiene que funcionar además con un clic o un toque simple, como un menú de etapa en la tarjeta. Para la parte del teclado, el texto sobre HTML semántico muestra lo que el navegador ya trae listo.

El error común

El tropiezo más frecuente es hacer del arrastre la única forma de actuar. En una demo, con mouse y pantalla grande, parece natural. Falla con el dedo en el celular, en una lista larga y con quien no puede sostener y mover a la vez. El arrastre puede quedar como atajo. El camino seguro es un botón o un menú que hace lo mismo con un clic.