¿Cómo visualizar la posibilidad de arrastrar y soltar?
Mi aplicación web contiene una lista de elementos, que se pueden ordenar por arrastrar y soltar. ¿Cómo se debe representar visualmente esta función ante los usuarios?
He usado un poco de textura "agarrable" en cosas para mostrar que es arrastrable. Aquí está la textura de Gmail:
Vi una presentación de Sean Kane de Netflix hace unos años, en la que describió cómo funciona la cola de DVD. Debería estudiarlo si puede (si tiene una cuenta o conoce a alguien que la tenga).
Un par de puntos a tener en cuenta:
Dijo que el cursor de movimiento predeterminado no se probó muy bien, por lo que cambiaron a un cursor de agarre , como lo sugiere GoodEnough .
La función de arrastrar y soltar es una mejora progresiva. Todavía puede ordenar rellenando cuadros de texto en la columna de orden de la lista. Muchos usuarios nunca notan que la función de arrastrar y soltar está disponible.
No hay control de arrastre. Puede iniciar el arrastre con el mouse hacia abajo en cualquier lugar de la fila (excepto donde otro objeto, como un enlace, está en primer plano) .
Hay un icono estándar de tres líneas horizontales una encima de la otra que implica que los elementos se pueden arrastrar y soltar.
Implica "fricción" o "manejo" y es un poco similar a las líneas diagonales en la esquina inferior derecha de las ventanas o cuadros de texto que permiten cambiar su tamaño.
El cursor de movimiento se usa comúnmente con elementos arrastrables en aplicaciones web.
css:
cursor:move;
Le sugiero que use la pequeña mano de agarre (abierta al pasar el ratón, cerrada al arrastrar). Tiene algún tipo de icono de agarre (un asa) que se parece a algo que se puede agarrar (en Gmail es un par de columnas de puntos (4 puntos por columna).
También sugeriría que agregue una pequeña animación que muestre el comportamiento a los nuevos usuarios (o usuarios existentes si es una nueva función), simplemente no muestre constantemente la animación cada vez que un usuario esté en su aplicación.
Arrastrar es un lastre. Después de haber terminado recientemente de renovar un par de interfaces de usuario de arrastrar y soltar, he llegado a la conclusión de que la próxima vez las cambiaré a una especie de "clic y soltar". Tenga un widget en cada elemento en el que haga clic para seleccionarlo para moverlo. Luego haces clic donde quieras que vaya. Esto parece estar yendo bien en las pruebas hasta ahora.
Al mover el cursor sobre objetos arrastrables, debe cambiarse a una mano abierta. Cuando se agarra un objeto, se debe cambiar a una mano de agarre. Al agarrar un objeto, las zonas de caída permitidas se pueden enfatizar desde el otro fondo (es decir, a través del sombreado o el color).
¿El símbolo de Whirlpool universal puede ser?.
La aplicación de escritorio con la que trabajo permite arrastrar archivos fuera de las aplicaciones. Ciertas aplicaciones que permiten arrastrar y soltar generalmente tienen un área de colocación o panel de contenido; como una lista de reproducción en un reproductor de música. La usabilidad de arrastrar y soltar es una divulgación progresiva, pero algunos usuarios nunca lo harán de forma intuitiva. En tales casos, lo mejor que puedo pensar en anunciar el área de colocación es tener un fondo de símbolo de hidromasaje.
Estoy llegando a este problema yo mismo con una aplicación de escritorio. La mejor solución que puedo encontrar en este momento es tener una flecha al pasar el mouse, que simplemente señala hacia dónde se puede arrastrar el objeto, con algo de texto que dice arrastrar y soltar, o similar.