¿Cuál es el mejor método para obtener un número de un usuario?

Question

Me preguntaba por una pequeña lista de los números [1..20], qué tipo de control se le aconsejará para pedir al usuario para su selección.

Yo estaba pensando en un control NumericUpDown pero no existe para el formulario Web y para empeorar las cosas, estoy desplegando en una solicitud de los pilones (Marco Python)

¿Se siente será suficiente un control desplegable? De alguna manera todavía me siento un control NumericUpDown es mucho más intuitivo y fácil de usar desde el punto de vista del usuario.

Amará las opiniones de la comunidad SO y quizás asesorar sobre las mejores prácticas.

Gracias tanto!

edit: se olvidó de mencionar que estoy usando la biblioteca de YUI y la biblioteca webhelpers y a lo mejor de mi escaso conocimiento, no existe tal control con una funcionalidad equivalente a la NumericUpDown

Answer 1

Si el usuario está interactuando en su mayoría con el teclado, considere sólo un cuadro de edición regular con una prueba en los límites. Es mucho más fácil que golpear la flecha hacia abajo para seleccionar algún otro número.

Si está basado en el ratón y tienes habitación, una rejilla de botones o de radiocomunicación sería rápido.

Si se basa teclado, a continuación, Jakob Nielsen escribió en su artículo Alertbox contra caídas abajo menús: Utilice con moderación , esta nota de precaución:

  

diseños que se deben evitar

     

Menús desplegables tienen sus ventajas. En primer lugar, se conservan espacio en la pantalla. También evitan que los usuarios introduzcan datos erróneos, ya que sólo se muestran las opciones legales. Por último, debido a que son un widget estándar (incluso si una desagradable), los usuarios saben cómo tratar con un menú desplegable cuando se encuentran con él.

     

A pesar de estas ventajas, la usabilidad web aumentaría si los diseñadores utilizan menús desplegables con menos frecuencia. Con ese fin, he aquí algunos ejemplos de diseños que deben evitarse:

     

  

• Menús de abreviaturas del estado, como para las direcciones de correo de Estados Unidos. Es mucho más rápido para los usuarios escribir simplemente, por ejemplo, "NY", que para seleccionar un estado de un menú desplegable desplazamiento. de entrada de forma libre en campos con opciones restringidas requiere la validación de datos en el backend, pero desde una perspectiva de usabilidad a menudo es el mejor camino a seguir. (Esta es la directriz # 178 para de comercio electrónico usabilidad debido a los muchos errores que hemos detectado en salida formularios con menús desplegables de estado.)

  

• Menús de datos bien conocida por los usuarios, como el mes y el año de su nacimiento. Dicha información es a menudo cableado en los dedos de los usuarios, y de tener que seleccionar tales opciones de un menú rompe con el paradigma estándar para ingresar información e incluso puede crear más trabajo para los usuarios, como muestra el siguiente ejemplo.

  

Answer 2

Un desplegable está bien, gama pequeña de números, permite un acceso rápido a los números en cada extremo de la gama rápidamente. Recuerde sin embargo que un usuario puede cambiar el valor seleccionado de la lista desplegable usando Firebug o algo así que usa la validación para asegurar al número que está en el rango.

Answer 3

Gracias por el tipo responde chicos.

Desde algunas pruebas de usabilidad, Calculo que

1. el control NumericUpDown aka NumberSpinner es el mejor para la selección de números dentro de un pequeño rango de por ejemplo 1-100

2. un cuadro de texto validado funciona bien para entrar en grandes cantidades

3. un menú desplegable puede ser sólo adecuado para número menor oscila por ejemplo 1-10 debido a la longitud de la gota abajo (usuarios netbook? Usuarios de teléfonos móviles)

4. una cuadrícula de botón de opción no es tan bueno como un menú desplegable ya que el usuario tiene que escanear toda la longitud de la pantalla para recoger su número

Un felicitaciones a Damián a su consejo sobre la validación para evitar la alteración de los números usando Firebug.

Answer 4

Si prefiere el estilo NumericUpDown, se puede hacer una versión simple con bastante facilidad usando javascript. Lo he hecho con jQuery, por lo que no puedo dar detalles en hacerlo con YUI, pero en general, esto es lo que he implementado. Crear un cuadro de texto estándar con el valor por defecto preestablecido en ella, y que establece en sólo lectura. Añadir botones arriba y abajo y el estilo de ellos cómo desea (utilicé divs, abajo a la izquierda de la caja, arriba a la derecha). Añadir un evento de clic a cada grupo de botones para aumentar o disminuir el valor del cuadro de texto. En su guión, limitar el rango de los valores, sino también validar la entrada para asegurarse de que no se cambia como se aconseja antes. Estoy admittidly ningún experto en nada de esto, lo que puede haber formas más sencillas de hacerlo.