Muchas personas no saben cómo seleccionar elementos en un control HTML <select>, entonces ...?

Question

Conozco a muchas personas que usan computadoras todos los días, que no saben cómo seleccionar varios elementos en un cuadro/lista de selección de HTML. Ya no quiero usar este control en mis páginas:

Please pick 3 options: 
<select name="categories" size="10" multiple="yes"> 

¿Qué alternativas más fáciles de usar sugiere? Tal vez tenga 10 tickboxes ... ¿o tal vez solo tenga cada opción en un bloque de color que cambie de color cuando haga clic para elegirlo? Esto se vuelve más complicado cuando considero que mi lista actual de 20 opciones podría crecer a 50 finalmente.

De cualquier forma que escoja va a ser una pena validarlo (usando Javascript), para asegurarse de que la persona elige al menos 1 elemento y no más de 3. No se trata de detectar cuántas opciones han elegido, el problema es más acerca de cómo transmitir esto al usuario de una manera amistosa!

Editar: supongo que podría utilizar etiquetas, como aquí en stackoverflow, pero me siento estos son menos apropiada si los usuarios son no técnica (y la mitad de ellos serán).

Answer 1

Puede utilizar simplemente una lista manual de elementos (por ejemplo, enlaces simples), que tienen el comportamiento de Javascript en el clic que deselecciona/selecciona manualmente. Básicamente cambiando la clase css entre dos valores y comprobando estos css (o algún otro atributo) durante el envío para determinar las selecciones.

Esto permitiría al usuario simplemente seleccionar un elemento haciendo clic en, y deseleccionar haciendo clic, en lugar del requisito estándar de Ctrl + Click.

Answer 2

Alternativas he utilizado en el pasado son:

1) Para pequeño número de artículos utiliza una lista de casilla de verificación. Las casillas de verificación son mucho más intuitivas y fáciles de usar, pero para una gran cantidad de elementos puede convertirse en un problema. Sin embargo, cuando la cantidad de elementos va en aumento, puede agregar un:

<div style="overflow: scroll" /> 

con una altura fija.

2) Para un gran número de elementos, resulta difícil ver lo que realmente se selecciona, especialmente cuando hay pocos elementos realmente seleccionados. En este caso, dos listas junto a la posibilidad de mover elementos de una a otra es un enfoque mucho mejor.

3) Cuando el número de elementos no es muy grande pero mayor que algunos, utilicé un menú desplegable con casillas de verificación internas que tienen la ventaja de ocupar solo un espacio pequeño. Algo como this podría ser de ayuda.

Answer 3

Para los usuarios poco frecuentes que tienen tres menús desplegables que podría funcionar mejor>:

<select><option>Capa Verde</option></select> 
<select><option>Holiday</option></select> 
<select><option>Competition</option></select> 

Alternativamente, es posible que tenga una serie de botones que stick una vez que se hace clic. Sin embargo, va a ser difícil transmitir la limitación de hasta tres opciones.

Si es necesario marcar cada fotografía individualmente y hay un número limitado de categorías, podría mostrar una lista de categorías (puede estar en varias columnas) justo encima de la fotografía (obviamente, tendría que asegurarse los elementos son legibles e indican que permiten hacer clic) y permiten a los usuarios seleccionar y anular la selección de las etiquetas con un solo clic. No es muy amigable para el teclado, sin embargo, es casi imposible de usar la web sin algún tipo de dispositivo señalador.En este caso, usaría el posicionamiento espacial para conectar categorías y fotografías.

Hay varias opciones con dos pilas (disponibles y seleccionados) etc.

puede usted hacer al menos un "pasillo" de pruebas de usabilidad?

¿Cuál es la tarea real en términos de usuario y quiénes son los usuarios?

Answer 4

Sugiero usar dos cuadros de lista, uno con los disponibles, y uno con los seleccionados. Hacer clic o hacer doble clic en un elemento en una de las listas debe mover el elemento a la otra lista. Para mayor comodidad, también incluiría dos botones "Mover" para hacer lo mismo. Este enfoque funciona sorprendentemente bien con usuarios promedio, en aplicaciones web y aplicaciones de escritorio.

Answer 5

Odio la selección múltiple, especialmente cuando el elemento puede editarse más tarde (si hace clic sin presionar CTRL, pierde lo que ya había seleccionado). Las dos mejores opciones en mi experiencia son:

1. Tiene tres opciones de selección separadas (si limita a tres). El beneficio aquí es que sus instrucciones de "seleccionar hasta tres" se mantienen muy bien con la experiencia del usuario y con un poco de JavaScript puede eliminar la primera selección del segundo menú desplegable, eliminando la confusión.
2. Uso de casillas de verificación. El beneficio de las casillas de verificación es que probablemente coincida mejor con su base de datos, además de que la información es bastante intuitiva para el usuario y, con un poco de reflexión sobre cómo presenta las opciones, la experiencia del usuario puede ser bastante sólida. Ex. agrupando sus casillas de verificación en áreas que tengan sentido.