it-swarm-es.com

Diseño de interfaz de usuario para ordenar artículos en la lista

¿Qué diseño de componente/interfaz de usuario usaría para ordenar elementos en una lista (una tabla con botones de subir/bajar)?

6
padis

Arrastrar y soltar elementos es probablemente el mejor para la mayoría de las IU. Desafortunadamente, es difícil hacer que esta característica sea reconocible. Un área de "capturador" cerca de cada elemento ayuda. La retroalimentación visual al arrastrar, así como el desplazamiento automático cuando un elemento se arrastra a un borde, son necesarios en una buena interfaz de usuario de clasificación de arrastrar y soltar.

Es bueno proporcionar move up y move down botones, además de arrastrar y soltar. No existe un icono/estilo de "capturador" universal e inmediatamente reconocido. Para las interfaces que se usan con poca frecuencia, el tiempo empleado en los botones algo torpes puede ser menor que el tiempo para que el usuario descubra la funcionalidad más eficiente de arrastrar y soltar.

Además, con arrastrar y soltar hay muchos detalles sutiles que son frustrantes para el usuario si no se realizan correctamente (por ejemplo, desplazamiento automático). Los botones son ineficientes en el uso frecuente, pero evidentes, fáciles de usar y mucho más fáciles de codificar.

5
dbkk

Arrastrar y soltar puede considerarse 'manipulación directa', donde los clics directamente en la lista tienen un efecto, frente a 'manipulación indirecta' donde tiene un botón separado u otra acción que surte efecto en la lista.

Dependiendo de lo que esté en su lista, ambos pueden ser apropiados.

Hagas lo que hagas, ten en cuenta los sabios consejos de Los 10 errores de diseño de aplicaciones principales de Jakob Nielsen :

Los diseños de arrastrar y soltar son a menudo los peores delincuentes cuando no es evidente que se pueda arrastrar algo o donde se pueda soltar algo. (O lo que sucederá si arrastra o suelta). Por el contrario, las casillas de verificación simples y los botones de comando generalmente hacen que sea muy obvio en qué puede hacer clic.

Entonces, si proporciona una capacidad de manipulación directa en una lista, proporcione señales visuales como:

  1. área visual de 'capturador' (serie de puntos o líneas) que sugiere 'capacidad de agarre'
  2. cambio cursor
  3. comentarios a medida que te mueves. Vea esta demostración aunque observe cómo mi punto (1) no es compatible y, por lo tanto, no es obvio que estas listas se puedan ordenar.
4
Julian H

Estoy de acuerdo en que la manipulación directa de elementos probablemente sea preferible ahora.

A pesar de las acusaciones de que 37 Señales son un poco arrogantes, su Basecamp es una aplicación eminentemente utilizable. Casi cualquier lista dentro de esa aplicación permite reordenar elementos mediante arrastrar y soltar.

Primero, debe hacer clic para ingresar al modo de reordenamiento, a través de un enlace de texto en la esquina superior. Luego, hay una pequeña imagen que claramente sugiere 'capturabilidad' en la que hace clic y mantiene presionada y luego manipula para mover el elemento. Ver adjunto.

alt text

2
jameswanless

Los botones arriba/abajo están bien, pero la tendencia es operar directamente sobre los datos, es decir, poder hacer clic (o tocar) en el elemento y luego moverlo. Un ejemplo destacado es la cola de Netflix. Esto puede funcionar incluso al seleccionar varios elementos en la lista.

0
Hisham

Mi preferencia es usar arrastrar y soltar con selectores de arrastre claros que se muestran al pasar el mouse. En nuestra aplicación, usamos una flecha doble arriba/abajo que aparece para indicar que el artículo puede ser reordenado.

Simplemente cambiar el cursor es lo suficientemente bueno para una multitud conocedora de la tecnología, pero para aplicaciones de propósito general desea algo más obvio.

0
Sam