web applications - software - Interfaz de usuario para reordenar una lista de elementos

user interface design software (14)

1) Una variación de Click to Move implicaría tener una lista de objetivos separada, donde el usuario selecciona la ranura en la que se moverá su elemento, luego hace clic en el elemento original para moverlo.

Por ejemplo, en el siguiente diagrama, el usuario ya ha puesto ''E'' a la cabeza de la lista reordenada y ha seleccionado la ranura tres para su próxima elección. El siguiente paso sería elegir qué elemento de la lista anterior entra en la ranura tres de la lista nueva. (La fila de asteriscos es un intento débil para mostrar que la ranura tres está resaltada o seleccionada).

old new ----- ----- | A | | E | | D | | | | C | |*****| | | | | | B | | | ----- -----

Al hacer clic en un elemento en la nueva lista, se selecciona y se resalta su ranura original en la lista anterior, que ahora es un objetivo. Al hacer clic en el elemento por segunda vez lo devuelve a ese espacio original.

La nueva lista también debería mostrar indicadores de algún tipo para mostrar que tiene regiones seleccionables, tal vez botones discretos (con baja opacidad) numerados en sus ranuras o alguna otra característica informativa.

2) Otro enfoque sería permitir a los usuarios dibujar líneas entre las posiciones original y deseada.

Independientemente del método que se elija, el proceso no tiene que ser parlanchín: no hay razón para que esto no se pueda hacer del lado del cliente (con la opción de guardar y confirmar los cambios en el servidor).

Tengo una lista de elementos como parte de una aplicación web. La pregunta es cómo el usuario podría manipular el orden de los elementos en la lista (no el orden de clasificación de la lista). La forma típica es usar los botones de flecha para mover los elementos hacia arriba o hacia abajo. La otra forma es arrastrar y soltar.

Pero, ¿hay alguna otra manera para que una interfaz de usuario pueda reordenar la lista?

Algunos pensamientos: sin embargo, mucho sobre las ideas en lugar de la implementación final ...

1 - Proporcione flechas hacia arriba y hacia abajo y arrastre y suelte, y monitoree cuál es más popular, qué tipo de usuarios usan qué etc., luego personalice desde allí una vez que tenga algunos datos

2 - Agregue un botón "aleatorio" que genere el orden aleatoriamente - podría ser inútil, podría ser divertido dependiendo de su aplicación

3 - Agregue un campo de "orden de visualización" al costado de cada elemento y permita al usuario manipularlo (pero asegúrese de tener algún código para actualizar automáticamente el resto de los números cuando cambie) personalmente, creo que esto podría ser muy confuso, pero para algunos usuarios podría funcionar

4 - En lugar de arrastrar y colocar en su lugar, haga que los usuarios arrastren a una nueva lista

5 - Para una versión muy simple, tenga una casilla de verificación "favorita", y luego haga que la lista solo muestre primero los favoritos, (en orden alfabético o algo así)

6 - Tener grupos: asigna un número de grupo a un elemento, todos los grupos aparecen primero, seguidos por el grupo 2, etc.

Espero que este divagar aleatorio haya sido útil, si pienso en algo más, volveré ...

De hecho, creo que el iphone / itouch hace esto muy bien cuando se mueven iconos de aplicaciones.

Si no lo has visto, mira aquí: http://www.youtube.com/watch?v=qnXoGnUU6uI

Los iconos "temblorosos" son una señal visual muy buena de que algo es movible / arrastrable.

Así que sugeriría este enfoque con arrastrar y soltar. Hacer clic y mantener presionado un elemento podría ponerlo en ''modo movible'' y esto se indicaría mediante una sacudida (o una señal visual más fácil de codificar). Luego, arrastrar y soltar funcionaría de la manera normal.

Implementar esto en javascript es, por supuesto, el desafío ...

Otra cosa en la que pensar: la mayoría de las personas comete el error de combinar la usabilidad con la capacidad de aprendizaje. Piensa quiénes son los usuarios de esta aplicación (¿la usarán con regularidad y se les enseñará cómo usarla, o son usuarios públicos de la web que pueden usarla con poca frecuencia y no se les enseñará cómo usarla)? Puede darte una respuesta diferente a lo que debería ser la solución.

Estaba pensando en "Mover seleccionado aquí":

Permitir que todos los elementos sean seleccionables mediante casillas de verificación
Permita que todos los elementos tengan un botón o icono que signifique "Mover seleccionados aquí"
Cuando se hace clic en "Mover seleccionado aquí", todos los elementos seleccionados se mueven a este elemento en el orden existente

Los casos extremos aquí son cuando los artículos se deben mover a cualquier extremo de la lista. Una forma de resolver eso, es mover todos los elementos seleccionados antes del objetivo, y reservar un botón / icono especial al final para mover la selección allí.

Hay otros dos métodos de clasificación (además de los que mencionaste). He visto cuál funciona bastante bien.

Haga clic para moverse

El método utilizado para ordenar elementos en el álbum de fotos web de la Gallery funciona bastante bien para ordenar fotografías, y debería funcionar igual de bien para cualquier conjunto que se pueda representar como un grupo ordenado de elementos seleccionables:

Presente su lista de elementos como elementos seleccionables.
Al hacer clic en un elemento "lo selecciona", se resalta para indicar que está seleccionado.
Al hacer clic en otro elemento, se mueve el elemento seleccionado a una posición justo antes del elemento en el que se hizo clic.
Repita hasta que todos los elementos estén en el orden deseado.
Se muestra un ítem ficticio al final de la lista para mover ítems hasta el final.

Esto es un poco más fácil de usar que arrastrar y soltar, ya que requiere menos destreza, y no tiene que mantener presionado el botón del mouse mientras calcula dónde desea "soltar" el elemento.

El método podría ampliarse fácilmente para permitir la selección de varios elementos (mediante un clic de mayúsculas o similar) que luego podrían colocarse en una nueva posición de la misma manera.

Proporcionar números de orden

Utilizado por Netflix y algunas aplicaciones internas con las que he trabajado. Esto funciona mejor si sus usuarios tienen una idea concreta de exactamente qué debe ser el orden numérico (se usa cuando se trabaja con listas de pasos de instrucciones en nuestra aplicación interna).

Presente su lista de artículos uno por línea.
Proporcione un cuadro de entrada de texto al lado de cada elemento donde se muestra el número de orden, comenzando con 1.
El usuario cambia los números de orden en los campos de texto como desee.
Si a varios elementos se les da el mismo número de orden, se colocan uno al lado del otro.
Proporcione un botón para "aplicar" el ordenamiento en JavaScript para que el usuario no tenga que enviar toda la página para ver la lista reorganizada. Esto hace que sea más fácil trabajar en incrementos.

Editar: Un par de pensamientos adicionales sobre Arrastrar y Soltar . Puede haber usado estos antes o no, pero hay algunas cosas que pueden hacer que el método de arrastrar y soltar sea más indulgente y fácil de usar:

Resalta el área donde aparecerá el elemento cuando se suelte. Por ejemplo, muestre una línea horizontal prominente entre los dos elementos existentes donde se insertará el artículo si se quita.
Fantasma el elemento arrastrable a medida que se arrastra para que sea obvio lo que se mueve, en lugar de utilizar un cursor genérico de "arrastre". Esto funciona mejor si los elementos que se arrastran siguen siendo legibles si se muestran uno encima del otro con transparencia.
Asegúrese de que las áreas de destino donde puede arrastrarse el arrastrable sean lo suficientemente grandes. Las áreas más grandes pueden ser útiles para las personas que tienen problemas con la coordinación requerida.

Hemos encontrado que arrastrar y soltar puede ser contra intuitivo para personas no técnicas. Hemos explorado la flecha hacia arriba que funciona, pero también puede ser engorrosa, ya que necesita seguir haciendo clic hacia arriba y hacia abajo, lo que genera mucho tráfico.

Otro paradigma que hemos explorado es el botón Mover para que cada elemento de una lista tenga un botón Mover elemento al hacer clic en él. Se agregan nuevos botones antes y después de cada elemento en la lista para permitirle mover el elemento a cualquier ubicación.

Esto funciona bien cuando cada elemento de la lista ocupa mucho espacio, si cada elemento de la lista es solo una fila, puede generar una interfaz desordenada. En nuestro caso, cada elemento era media docena de líneas de texto o más. También tenemos el botón Agregar elemento aquí antes / después de cada elemento para permitir la inserción.

Survey Monkey también usa este paradigma e inspiró algo de lo que hacemos.

Implementar una función de estilo copiar / pegar? Esto significa que puede sacar un elemento de la lista, seleccionar otro y hacer clic en "pegar" o CTRL + V. Esto es bastante intuitivo y permitiría manipular fácilmente grandes listas.

Podría implementar la selección múltiple fácilmente para mover un gran bloque de elementos adyacentes.

El tráfico de red sería bajo (solo una o dos solicitudes).

Debe asegurarse de que el "pegado" sea consistente. Es decir, pegar siempre se inserta encima del elemento seleccionado.

Eche un vistazo a Checkvist para obtener más inspiración.

La ordenación, haciendo clic en los encabezados es muy popular. Sin embargo, tal vez solo se considere como un reordenamiento de la vista de la lista real.

Otra forma es proporcionar una pequeña entrada de texto al lado de cada elemento, para que el usuario pueda ingresar un orden numérico por sí mismo; luego hacen clic en un botón para reordenarlo todo a la vez. (Solo he visto esto usado en sitios que almacenan el orden de los artículos, como la cola de Netflix o los enlaces de Livejournal).

Para mí, realizar un arrastre y soltar los elementos de la lista en su lugar (es decir, dentro de la propia lista) es el mejor enfoque.

No solo puede darles a sus usuarios la idea inmediata de cómo se verá su lista (la lista se está reorganizando ante sus ojos), sino que también es muy fácil para ellos comprender el mecanismo de movimiento. Y esta es la forma más breve de que sus usuarios ordenen la lista en el menor número de movimientos.

Por cierto, previendo que una lista podría ser más larga que unos pocos elementos, junto con el método DnD podría proporcionar una manera asíncrona de ordenar la lista: otorgar al usuario la capacidad de atribuir un número de pedido a cada entrada, y luego hacer clic en " Botón "Orden". Manejando de manera inteligente y correcta la entrada del usuario, esto podría acelerar la edición de listas más largas.

Puede mostrar los botones "Subir" y "Eliminar" tal como lo hace Google para SearchWiki. La mayoría de la gente tiene al menos alguna experiencia con eso ahora. La mayoría de la gente se molesta solo con ''Upping'' su elección. Si no les gusta nada, y quieren rechazarlo, será más fácil eliminarlo de la lista con la ayuda del botón ''Eliminar'' mencionado anteriormente.

Puede mostrar una superposición al pasar el ratón sobre un elemento. Esta superposición muestra 4 flechas (n / e / s / w) y puede hacer clic y mover el elemento en consecuencia.

Si está tratando de usar artículos en una cuadrícula como las funciones de agrupamiento de fotos de facebook y picasaweb, entonces esa es la única forma de manejar eso

si tuviera 3 columnas cada una con una lista de elementos, al hacer clic en cualquiera de los elementos se movería el elemento a la izquierda o a la derecha, la columna del medio podría mostrar la opción para la izquierda o la derecha. aún podría permitir arrastrar y soltar o clasificar usando la funcionalidad típica para eso.

Puedes experimentar arrastrando y soltando usando los ejemplos de jQuery UI Sortables . Para que sea obvio para los usuarios no técnicos o nuevos, podría usar pistas visuales, como identificadores o flechas, y tal vez una información sobre herramientas al pasar el mouse para sugerir que se arrastre el elemento.

Incluso podría proporcionar un gif animado que demuestra el gesto.

Tan pronto como un usuario aprende cómo hacer esto, creo que es el método más fácil de ordenar una lista.

También puede usar las teclas de flecha para moverse hacia arriba y hacia abajo.