Alternativas a un solo elemento <select multiple = "multiple"> para grandes conjuntos de datos

Question

A menudo tengo conflictos sobre cómo abordar este problema en mis aplicaciones. He usado varias opciones, entre ellas:

• Un multiselect genérico: esta es mi opción menos favorita y la que se usa con menos frecuencia. Considero que la usabilidad es atroz, un simple error de clic puede arruinar todo su trabajo duro.
• Una solución de "autocompletar" - Desventaja: el usuario debe tener la capacidad de deletrear para encontrar los malditos valores que necesita, no está expuesto a los que quizás no tenga en mente y el potencial rendimiento de back-end de la búsqueda de subcadenas.
• Dos multiselects adyacentes, con un botón de añadir/quitar - Desventajas: Todavía "feo" imo
• Cualquier número de soluciones de Javascript de lujo (http://livepipe.net/control/selectmultiple, http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/, etc.)

No he podido para encontrar cualquier estudio de usabilidad realizado sobre el mejor enfoque para este problema. Muchas de estas soluciones alternativas son geniales cuando se pasa de < 10 elementos a cien, pero pueden romperse por completo cuando pasas de cien a mil.

¿Qué usan? por que lo usas? ¿Me puede indicar estudios de casos de usabilidad? ¿Hay alguna solución "mágica" que aún no se haya descubierto?

Answer 1

Mi consejo es no utilizar múltiples controles genéricos selectos. He estado ejecutando User Experience Research para toda mi carrera, y cada vez que pruebo un sitio con múltiples controles de selección, siempre resulta ser un problema para los usuarios finales.

hice un post sobre este hace un tiempo: Multiple Select Controls Must Evolve or Die

Suena como usted sabía esto de todos modos, sin embargo. Su verdadera pregunta es "¿qué uso en su lugar?" Bueno, para responder a esta pregunta, tiene que averiguar si la tarea del usuario se inclina hacia llamar al o al reconocimiento.

(i) Al llamar al, quiero decir que el usuario sabe lo que quiere elegir antes de siquiera haber visto la lista. En este caso, probablemente sea más fácil para ellos si ofrece una herramienta de autocompletar (como se usa de manera muy efectiva en Facebook, por ejemplo). Esta solución es incluso mejor cuando la lista de opciones también es imposible de presentar en una página (por ejemplo, nombres de ubicación, etc.).

(ii) Pasar al reconocimiento - con esto me refiero a una tarea que involucra al usuario que no sabe lo que quiere elegir hasta que haya visto la lista de opciones. En este caso, autocompletar no les da ninguna pista. Una serie de casillas de verificación sería mucho más útil. Si puede mostrarlos todos a la vez, esto es útil para el usuario. Los DIV de desplazamiento son más compactos, pero crean una carga de memoria para el usuario, es decir, una vez que se han desplazado hacia abajo, tienen que recordar qué elementos eligieron. Esto es particularmente evidente cuando los usuarios guardan un formulario y vuelven a él más tarde.

Entonces, pensando en su problema, ¿necesita una solución para recordar o reconocer?

Answer 2

Eche un vistazo al control Dojo Toolkit's DataGrid. Es de lejos el más flexible y poderoso, y es compatible con múltiples selecciones de filas. También tiene características de accesibilidad integradas.

Answer 3

No puedo señalarle ningún estudio de caso, desafortunadamente, pero lo que sí puedo decirle es que personalmente prefiero grandes matrices de casillas en diseños de dos a cinco columnas. Claro, ocupan mucho espacio, pero son extremadamente precisos y sencillos.

Creo que para cualquier de control - ya sea multiselect básica, doble lista, matriz de casilla, o cualquier otra solución - una vez que se pasa de un cierto umbral de artículos que va a ser un reto para el usuario sin importar qué.

Answer 4

La biblioteca ExtJS tiene algunas soluciones realmente buenas para su problema. Hay un montón de extensiones de usuario para combinaciones ordenadas y cuadros de selección múltiple.

Si quieres un combo de lista de selección, se puede añadir la búsqueda de consultas y la paginación, además de diseñar el desplegable resultante utilizando fácil de plantillas, como en este ejemplo:

http://extjs.com/deploy/dev/examples/form/forum-search.html

Aquí es una buena selección múltiple, en el estilo que parecía describir:

* (main_site)/aprender/Extensión: Multiselect2

puede encontrar todas las extensiones de usuario aquí:

* (main_site)/aprender/Ext_Extensions

Plus, puede incluir fácilmente en una página web existente, sin una gran cantidad de sobrecarga adicional.pila completo de ExtJS es bastante grande, pero para obtener sólo los archivos JS que necesita, proporcionan una herramienta de creación agradable para tomar sólo aquellas partes que necesita:

* (main_site)/productos/ExtJS/construcción/

Solo una advertencia: ExtJS acaba de lanzar 3.0, pero no estoy seguro de que las extensiones de usuario se hayan actualizado. Sin embargo, la "búsqueda de foro" se tomó de un ejemplo de 3.0, por lo que funcionará perfectamente con lo último y lo mejor.

(*) Al parecer, los nuevos usuarios sólo pueden publicar un enlace ...