En una cuadrícula, ¿cómo reordenar manualmente las filas?
Deseo permitir a mis usuarios reordenar elementos en una cuadrícula, no ordenar automáticamente en una columna. Seleccionan qué elemento es el primero, cuál viene después del otro, etc.
Pensé y vi algunas soluciones que podrían funcionar dependiendo del caso:
- Arrastrar y soltar: sexy pero no funciona para cuadrículas largas con desplazamiento o paginación. Otro inconveniente es que es invisible, es posible que ni siquiera sepa que esta funcionalidad está disponible. Finalmente se requiere cierta destreza. Sin embargo, se puede usar para mover más de un elemento a la vez.
- Flechas arriba/abajo: comprensible y fácil de usar para movimientos pequeños, pero aburrido cuando tienes que mover el último elemento en primer lugar. Además, cuando mueve un elemento unos pocos pasos, debe atrapar esa flecha después de cada movimiento. Funciona solo en un elemento a la vez.
- Una columna de índice: el usuario ingresa un número que indica la posición del elemento. Útil cuando el usuario conoce la posición absoluta deseada. Es difícil adivinar qué sucederá si se ingresa un número ya existente. Funciona solo en un elemento a la vez.
Estoy tentado a combinar dos de estas técnicas como la columna índice + arrastrar y soltar, pero me temo acumular los inconvenientes de ambos en lugar de tener los beneficios de ambos.
¿Cuáles son las técnicas de reordenamiento que han demostrado funcionar?
Netflix combina tres métodos en su cola. Puede arrastrar y soltar, pero también especificar un número de fila en particular, o hacer clic para moverlo a la parte superior:
Lo que me parece interesante acerca de su enfoque es que han puesto el ícono "Superior" (encerrado en un círculo verde) justo allí en cada fila, en lugar de requerir que el usuario haga una selección y luego haga clic en algún lugar en la parte superior de la página, donde La mayoría de las aplicaciones web ponen tales iconos o botones.
En su caso, usaría arrastrar y soltar, pero pondría un ícono de engranajes en cada fila:
Esto permitiría varias acciones:
El usuario puede arrastrar y soltar una o más filas
El usuario puede seleccionar varias filas, luego hacer clic en el icono de engranajes para que aparezca un menú desplegable y realizar cualquier cantidad de cosas, p. mover la selección a la parte superior o inferior, mover la selección un número específico de filas hacia arriba o hacia abajo (en cuyo caso aparece un pequeño cuadro de diálogo), copiar, cortar, etc. Prácticamente sin límite.
Lo primero que debe preguntarse antes de intentar averiguar cómo hacerlo es con qué frecuencia lo harán los usuarios.
Si se va a usar con frecuencia, trataría de crearlo para que use arrastrar y soltar y simplemente desplazar automáticamente la página una vez que un usuario alcanza un cierto umbral.
Es una buena regla general decir que si un usuario necesita hacer algo con bastante frecuencia y usted puede hacerlo más fácil incluso introduciendo algún tipo de interacción exótica, hágalo. El usuario está de acuerdo con la curva de aprendizaje, ya que los beneficiará más adelante.
Si no se va a usar con frecuencia, haría una flecha hacia arriba/hacia abajo, podría no estar saliendo pero está claro.
Combinaría flechas arriba/abajo con arrastrar y soltar.
Tener que adivinar algún número, o tener que resolverlo de antemano, es simplemente engorroso. Y aunque las colisiones pueden y deben tratarse en código, por ejemplo, simplemente incrementando todos los números que están encima o sobre el ingresado, la mayoría de los usuarios tratarán de resolver el correcto de antemano, aunque solo sea por la incertidumbre sobre cómo un duplicado o Se manejará un número incorrecto.
Las flechas hacia arriba y hacia abajo son una forma mucho más conveniente de reordenar en distancias cortas.
Para distancias más largas y para movimientos de varios elementos, se puede agregar arrastrar y soltar. Para garantizar la usabilidad de arrastrar y soltar en distancias de más de una sola página, también se debe implementar el desplazamiento automático de la cuadrícula. Esto significa que durante una operación de arrastre, la cuadrícula se desplazará automáticamente cuando arrastre el mouse dentro de un cierto margen del borde superior o inferior de la cuadrícula. Que es exactamente lo que hace el Explorador de Windows.
Para aumentar esto aún más, la velocidad de desplazamiento puede comenzar lentamente y aumentar a medida que el arrastre continúa en el área "sensible al desplazamiento". Sin embargo, tenga cuidado con esto, y establezca una velocidad de desplazamiento máxima: el desplazamiento automático que se aceleró tanto y/o tan rápido que me desplacé mucho más allá de donde necesitaba estar me ha llevado a la furia.
El CMS Drupal CMS) tiene una solución relativamente buena para esto que se escala a listas de 30-50 ítems. No estoy seguro de cómo se escalaría más.
La configuración de "bloques" del sitio es un ejemplo: vea la captura de pantalla a continuación.
- Cada elemento tiene un controlador de 4 direcciones que se puede agarrar para operaciones de arrastrar y soltar.
El asa proporciona una "accesibilidad" visual que permite arrastrar el elemento. - La lista está dividida en secciones.
Se puede mover un elemento a una sección en particular seleccionándolo en el cuadro combinado que se muestra para ese elemento
El enfoque de "arrastrar y soltar" es mucho más suave que tener flechas que mueven elementos un paso. JIRA hace eso y es realmente laborioso llevar las cosas al lugar correcto.
Depende de cómo usen los usuarios el sistema:
Si el número de fila es significativo (por ejemplo, posición en la cola), probablemente desee mostrarlo y hacerlo editable.
Si "hacer esto primero" es una acción común, es posible que desee introducir un botón "mover hacia arriba" (o mover hacia abajo).
Si a sus usuarios les gusta que los atajos de teclado agreguen atajos hacia arriba y hacia abajo, asegúrese de que la selección/enfoque siga la fila cuando se mueva, de modo que presionar el atajo hacia arriba 3 veces en realidad moverá la fila hacia arriba 3 lugares.
Puede agregar botones arriba/abajo, a mis usuarios no les gustan mucho (sus usuarios pueden ser diferentes)
Y finalmente, Arrastrar y soltar, la forma favorita de mis usuarios de reordenar filas: en mi aplicación no hay controles de arrastre y los usuarios logran arrastrar y soltar muy bien (sus usuarios pueden ser diferentes)
Y, hagas lo que hagas, asegúrate de probarlo en tus usuarios específicos y ver cómo les gusta.