Controles de número

Nota

Esta guía de diseño se creó para Windows 7 y no se ha actualizado para las versiones más recientes de Windows. Gran parte de las instrucciones todavía se aplican en principio, pero la presentación y los ejemplos no reflejan nuestra guía de diseño actual.

Con un control de número, los usuarios pueden hacer clic en botones de flecha para cambiar incrementalmente el valor dentro de su cuadro de texto numérico asociado. El término cuadro de número hace referencia a la combinación de un cuadro de texto y su control de número asociado.

Un cuadro de número típico.

Los usuarios suelen preferir controles de número porque pueden realizar cambios sin mover las manos del mouse. Cuando el control de número se empareja con un cuadro de texto, los usuarios pueden escribir o pegar la entrada directamente en el cuadro de texto, por lo que el uso del control de número es opcional.

Aunque los controles de número se usan para la entrada numérica, la entrada no tiene que ser un número entero puro. La entrada puede ser números decimales y puede tener signos negativos, delimitadores (como dos puntos o guiones) y modificadores de unidad.

Nota

Las directrices relacionadas con los cuadros de texto y el diseño se presentan en artículos independientes.

 

¿Es este el control adecuado?

Para decidirte, intenta responder a estas preguntas:

• ¿Se usa el control para la entrada numérica? Si no es así, use otro control, como una lista desplegable o un control deslizante, para seleccionar entre un conjunto fijo de valores. Use barras de desplazamiento para desplazarse.

• ¿Los usuarios piensan en el valor como una cantidad relativa, no como un valor numérico? Si es así, use un control deslizante en su lugar. Use cuadros de número solo para valores numéricos exactos conocidos. Por ejemplo, al ajustar el volumen, los usuarios piensan en términos de bajo o medio, y no piensan que deben ajustar el valor de volumen en 2 o 5.

• ¿El control está emparejado con un cuadro de texto? Si no es así, no use. Los controles de número no se deben usar solos ni con otros tipos de controles además de un cuadro de texto.

  Incorrecto:

  

  En este ejemplo, se usa un control de número para controlar un gráfico dinámico.

• ¿Son válidos los intervalos de valores contiguos? Si no es así, use una lista desplegable de valores válidos en su lugar.

  

  En este ejemplo, no todos los números de unidad de disco son válidos, por lo que una lista desplegable es una mejor opción.

• ¿Está usando el control de giro práctico? El uso de un control de número es práctico para:

  • Escribir un número pequeño, normalmente por debajo de 100.
  • Realizar pequeños cambios en un valor existente o predeterminado.

  Aunque los controles de número se pueden usar para cualquier entrada numérica, son ineficaces en situaciones distintas de estas.

• ¿Es útil el control de giro? ¿Se usa el control en un contexto en el que es probable que los usuarios usen su mouse? Si no es así, considere la posibilidad de usar un control de número opcional.

• ¿Son las listas desplegables de controles del mismo nivel? Si hay otras listas desplegables, considere la posibilidad de usar una lista desplegable para la coherencia.

  

  En este ejemplo, se puede usar un cuadro de número, pero se usa una lista desplegable para la coherencia.

• ¿Son los usuarios táctiles o de lápiz un destino principal? Si es así, considere la posibilidad de usar una lista desplegable en su lugar. Los botones de flecha de un control de número son demasiado pequeños para usarse eficazmente con entrada táctil o lápiz.

Si es posible un control deslizante o un cuadro de número, use un cuadro de número si:

• El espacio en pantalla es limitado.
• Es probable que un usuario prefiera usar el teclado.

Usa el control deslizante si:

• Los usuarios van a sacar provecho de una respuesta instantánea.

Instrucciones

General

• Use controles de número siempre que sean prácticos y útiles. Vea ¿Es este el control correcto?

  • Excepción: Para ser coherente con otros cuadros de texto en la misma interfaz de usuario (UI), use controles de número aunque no siempre sean prácticos.

  Correcto:

  

  En este ejemplo, se usa un control de número con el control de año para la coherencia, aunque no siempre sea práctico.

  Incorrecto:

  

  En este ejemplo, el control de número no se puede usar.

• Haga siempre un control de número el "amigo" del cuadro de texto. Al hacerlo, se coloca el control de número dentro del cuadro de texto.

  Correcto:

  

  Incorrecto:

  

  En el ejemplo correcto, el control de número se coloca dentro de su cuadro de texto asociado.

• Deshabilite un control de número cuando se deshabilite su cuadro de texto asociado. El control de número es un método de entrada complementario, nunca el único método de entrada.

Valores

• Defina el botón superior para aumentar el valor en una unidad y el botón inferior para disminuir en una unidad. Normalmente, la unidad es una, pero debe ser el cambio más pequeño en el valor. Idealmente, el control de número debe cubrir todos los valores válidos y debe ser más cómodo que escribir en el texto.

  

  En este ejemplo, al hacer clic en un control de número, se cambian los valores por .1, que es el cambio más pequeño común en el valor. El uso de una unidad más pequeña abarcaría el intervalo de valores válidos, pero hacer que los controles de número no se puedan usar.

• Use el control de número para limitar la entrada a valores válidos. El uso de un control de número nunca debería dar lugar a un valor incorrecto.

• Al final de un intervalo de valores válidos, reinicie el intervalo. La metáfora del control de número es que el usuario gira una rueda de valores, por lo que este comportamiento similar a la rueda.

  • Excepción: No reinicie el intervalo si el valor resultante es incorrecto.

    

    En este ejemplo, al hacer clic en el botón de flecha abajo no se reinicia el intervalo (si se va al valor máximo) porque ese valor está seguro de que es incorrecto.

• Use texto en lugar de valores numéricos especiales. Permitir que los usuarios giren a estos valores especiales en lugar de tener que conocerlos y escribirlos.

  

  En este ejemplo, Never es un valor especial, pero los usuarios pueden girar a él.

• Si el valor tiene delimitadores, el cuadro de texto asociado debe tener varios puntos de enfoque de entrada. Si lo hace, los segmentos numéricos se manipularán individualmente.

  

  En este ejemplo, el control de número afecta a los valores de horas, minutos, segundos y A.M./P.M., lo que tenga el foco.

• Si el valor tiene unidades, use el control de número para cambiar también esas unidades.

  

  En este ejemplo, el control de número se puede usar para cambiar unidades.

Etiquetas

• Aplique las directrices de etiquetado del cuadro de texto para etiquetar el cuadro de texto asociado. Los controles de número nunca se etiquetan directamente.

Documentación

Al hacer referencia a los controles de número:

• No haga referencia a los controles de número en la documentación del usuario. En su lugar, consulte la etiqueta del cuadro de texto asociado.
• Consulte controles de número y cuadros de número solo en programación y otra documentación técnica.

Ejemplo: En el cuadro Fecha , escriba o seleccione la parte de la fecha que desea cambiar.

Temas relacionados

Glosario