it-swarm-es.com

¿Cuál es la mejor interfaz de usuario para la selección múltiple de una lista?

Tenemos un formulario web y uno de los campos es una lista de selección múltiple. Nuestras opciones son:

  1. Lista de casillas de verificación
  2. Vista de lista (cuadro de selección pero permitiendo selección múltiple)

Ambos parecen ser un poco feos y difíciles de manejar cuando la lista contiene más de 100 elementos.

¿Hay alguna otra solución de interfaz de usuario que sea mejor para tal caso?

80
leora

Una alternativa que he visto en varios lugares es tener dos listas adyacentes, una con elementos disponibles y otra con elementos seleccionados.

Aquí hay un ejemplo de OpenFaces.org que encontré con una búsqueda rápida en Google:

enter image description here

55
Bevan

Otra solución es la "barra de selección múltiple" similar a Facebook. (No sé el nombre exacto)

Puedes encontrar un ejemplo aquí . Básicamente es como un campo de entrada de texto, pero los elementos seleccionados se convierten en "etiquetas". Simplemente pruébelo en la página a la que me he vinculado.

55
Raffael Luthiger

Depende de la interfaz de usuario y el diseño del espacio que tenga. Depende también de la cantidad de elementos en su lista y la cantidad promedio de elementos que el usuario debe seleccionar. Una solución interesante es una lista desplegable + casillas de verificación dropdown checkbox

http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html

Cuantos más elementos estén presentes, menos se adaptará un menú desplegable (hacer que el usuario se desplace dentro de un menú desplegable no es tan bueno). Y aquí debe descubrir cómo organizar/estructurar su lista.

9
Marc D

Dependiendo de la cantidad de opciones, podría elegir una opción de lista desplegable gráfica como la siguiente. Tocar/hacer clic alterna si ese elemento está seleccionado.

Sin embargo, esto no funciona muy bien con listas muy largas.

enter image description here

6
Phillip Quintero

Llego un poco tarde a esta fiesta, pero pensé que agregaría una solución que he estado usando mucho recientemente: una sola entrada de texto con una función dinámica de predicción de texto (piense en el formulario de búsqueda principal de Google).

A medida que el usuario elige "resultados" en el menú desplegable, se puede completar una lista debajo de la entrada, preferiblemente con una opción clara de cómo eliminar cada selección. Para ver ejemplos de esta funcionalidad, piense en sitios que solicitan contenido etiquetado como WordPress o Delicious.

Esta solución requiere que usted y el usuario sean algo simpáticos en el contenido de la lista más grande, pero creo que ahorra mucha angustia y espacio en la página.

6
skybondsor

Parece que llego tarde a este, pero he tenido un problema similar en mi empresa.

Inevitablemente, necesitaba dividir esto en dos requisitos separados (buscar, seleccionar) y luego volver a unirlo en una interfaz de usuario.

Si la búsqueda es simple, entonces algo más simple con un autocompletado debería ser el truco (por ejemplo, http://quasipartikel.at/multiselect/ capta la idea).

6
seanevanking

La casilla de verificación es el idioma más fácil de entender.

Necesitará el botón "Verificar todo" y "Verificar ninguno" y, si el usuario tiene que verificar muchos elementos adyacentes, un botón "Verificar elementos seleccionados" (solo habilitado cuando se selecciona más de 1 elemento)

5
Eduardo Molteni

También he visto esto como una opción. Es una lista de casillas de verificación donde los elementos marcados se mueven/reubican. Una solución híbrida entre los dos.

[ ] item 1
[ ] item 2
[ ] item 3
[ ] item 4
[ ] item n

Después de seleccionar uno:

[ ] item 1                X item 2
[ ] item 3
[ ] item 4
[ ] item n

Los elementos seleccionados se pueden mover a la derecha (quizás usando un div fijo para que permanezca visible mientras se desplaza hacia abajo en la lista de opciones) o se puede migrar a la parte superior de la lista.

3
DA01

Si elige la opción 1 o 2 de su lista, realmente tiene que ver con si desea que la selección sea persistente por cualquier motivo, así como por otros factores. A continuación enumeraré algunas cosas que es posible que desee tener en cuenta al elegir qué metodología seguir.

Arrastrar y soltar

Si desea permitir la reordenación de elementos de arrastrar y soltar, el uso de casillas de verificación puede facilitar que un usuario no pierda el estado de selección en los procesos. Si no permite la reordenación de arrastrar y soltar o no le importa si el estado de selección se pierde durante los procesos, si está permitido, puede ser una opción usar la selección múltiple a través de la tecla Ctrl.

Persistencia a largo plazo

Si la selección que se está haciendo se guardará para más tarde y se volverá a llamar durante una sesión o ejecución posterior de la aplicación, considere usar una casilla de verificación o el paradigma de doble cuadro de lista porque mostrar elementos resaltados generalmente está reservado para el estado de selección transitoria.

Selección múltiple como función avanzada

Si se espera que la selección múltiple sea una necesidad poco frecuente para sus usuarios, quizás no sea la mejor opción cargar a los usuarios con casillas de verificación, ya que no es probable que las usen la mayoría de las veces. En estos casos, puede ser mejor mostrar las casillas de verificación ingresando en un modo de selección múltiple especial o simplemente seguir con el método de la tecla Ctrl de selección múltiple avanzada. En el caso de Edge en el que un usuario necesita un control de grano muy fino sobre la selección y el pedido, y el espacio en pantalla no es una gran preocupación, entonces usar el método que Bevan propuso en su respuesta con dos listas separadas también es una opción decente.

Tenga en cuenta que el Explorador de Windows generalmente sigue el método de la tecla Ctrl para la selección múltiple avanzada de archivos/carpetas, pero se puede configurar para usar casillas de verificación para representar la selección. Lo intenté una vez y cambié de nuevo y descubrí que la mayoría de las personas ni siquiera conocen esa característica.

2
jpierson

Llego muy tarde a la fiesta. Pero me gustaría ofrecer mi propia solución.

Es decir: usar una ventana emergente (también conocida como superposición, modal) para mostrar las casillas de verificación y permitir al usuario seleccionar múltiples valores.

La ventana emergente se abre cuando un usuario hace clic en un enlace de edición en el formulario principal.

Cuando haya terminado de seleccionar los valores, puede hacer clic en un botón HECHO, que tiene un evento de clic, un método de JavaScript que reúne los valores marcados y actualiza algún campo oculto en el formulario principal y/o algún campo de visualización (por ejemplo, área de texto de solo lectura, o un span o un elemento div) en el formulario principal. Y cuando el usuario hace clic en el botón de envío principal, el campo oculto o el campo de visualización se envía al servidor para su persistencia.

Si hay una gran cantidad de casillas de verificación para seleccionar, mostrarlas puede ocupar un espacio de pantalla muy grande, por lo que se puede diseñar una ventana emergente sin desorden para ayudar a enfocar la atención del usuario. Cuando haya terminado, puede cerrar la ventana.

Por supuesto, varios pasos también podrían tener sentido. Pero mi solución es para un solo formulario de envío.

¿Qué opinas de este método? ¿Es un patrón que ya se está utilizando?

Gracias

2
Zack Xu