Casillas

Artículo
06/13/2023

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 una casilla, los usuarios toman una decisión entre dos opciones claramente opuestas. La etiqueta de casilla indica el estado seleccionado, mientras que el significado del estado desactivado debe ser el opuesto inequívoco del estado seleccionado. Por lo tanto, las casillas solo se deben usar para activar o desactivar una opción o para seleccionar o anular la selección de un elemento.

captura de pantalla de una de las cuatro casillas activadas

Un grupo típico de casillas.

Nota

Las directrices relacionadas con el diseño se presentan en un artículo independiente.

¿Es este el control adecuado?

Para decidirte, intenta responder a estas preguntas:

¿Se usa la casilla para activar o desactivar una opción o para seleccionar o anular la selección de un elemento? Si no es así, usa otro control.
¿Los estados seleccionados y borrados están claros e inequívocos opuestos? Si no es así, use botones de radio o una lista desplegable para que pueda etiquetar los estados de forma independiente.
Cuando se usa en un grupo, ¿el grupo incluye opciones independientes, a partir de las cuales los usuarios pueden elegir cero o más? Si no es así, considere los controles para las opciones dependientes, como botones de radio y vistas de árbol de casillas.
Cuando se usa en un grupo, ¿el grupo comprende las opciones dependientes, de las que los usuarios deben elegir una o varias? Si es así, use un grupo de casillas de verificación y controle el error cuando no se selecciona ninguna de las opciones.
¿El número de opciones de un grupo es 10 o menos? Dado que el espacio de pantalla utilizado es proporcional al número de opciones, mantenga el número de casillas en 10 o menos. Para más de 10 opciones, use una lista de casillas.
¿Sería mejor elegir un botón de radio? Donde las casillas solo son adecuadas para activar o desactivar una opción, los botones de radio se pueden usar para opciones completamente diferentes. Si ambas soluciones son posibles:
- Use botones de radio si el significado de la casilla desactivada no es completamente obvio.
  
  Incorrecto:
  
  En este ejemplo, la opción opuesta de Horizontal no está desactivada, por lo que la casilla no es una buena opción.
  
  Correcto:
  
  En este ejemplo, las opciones no son opuestas, por lo que los botones de radio son la mejor opción.
- Use botones de radio en las páginas del asistente para que las alternativas se desactiven, incluso si una casilla de verificación es aceptable.
- Use botones de radio si tiene suficiente espacio en pantalla y las opciones son lo suficientemente importantes como para ser un buen uso de ese espacio de pantalla. De lo contrario, use una casilla o una lista desplegable.
  
  Incorrecto:
  
  En este ejemplo, las opciones no son lo suficientemente importantes como para usar botones de radio.
  
  Correcto:
  
  En este ejemplo, una casilla es un uso eficaz del espacio de pantalla para esta opción de periféricos.
Use una casilla si hay otras casillas en la ventana.
¿La opción presenta una opción de programa, en lugar de datos? Los valores de la opción no deben basarse en el contexto ni en otros datos. Para los datos, use una lista de casillas o una lista de selección múltiple.

Patrones de uso

Las casillas tienen varios patrones de uso:

Uso	Ejemplo
Una elección individual Se usa una sola casilla para seleccionar una opción individual.	Se usa una sola casilla para una elección individual.
Opciones independientes (cero o más) Se usa un grupo de casillas para seleccionar entre un conjunto de cero o más opciones.	a diferencia de los controles de selección única, como botones de radio, los usuarios pueden seleccionar cualquier combinación de opciones en un grupo de casillas. Se usa un grupo de casillas para las opciones independientes.
Opciones dependientes (una o varias) También se puede usar un grupo de casillas para seleccionar entre un conjunto de una o varias opciones.	es posible que tenga que representar una selección de una o varias opciones dependientes. dado que microsoft?windows no tiene un control que admita directamente este tipo de entrada, la mejor solución es usar un grupo de casillas y controlar el error cuando no se selecciona ninguna de las opciones. Se usa un grupo de casillas donde se debe seleccionar al menos un protocolo.
Opción mixta Además de sus estados seleccionados y desactivados, las casillas también tienen un estado mixto para varias selecciones para indicar que la opción está establecida para algunos objetos, pero no todos.	Casilla de verificación estado mixto.

Instrucciones

General

Casillas relacionadas con el grupo. Combine opciones relacionadas y distintas opciones no relacionadas en grupos de 10 o menos, usando varios grupos si es necesario.

Ejemplo de grupos de opciones relacionadas e independientes.
Reconsidere el uso de cuadros de grupo para organizar grupos de casillas , lo que suele dar lugar a un desorden de pantalla innecesario.
Enumere las casillas en un orden lógico, como agrupar opciones muy relacionadas o colocar primero las opciones más comunes, o seguir alguna otra progresión natural. No se recomienda ordenar alfabéticamente porque depende del idioma y, por lo tanto, no se puede localizar.
Alinee las casillas verticalmente, no horizontalmente. La alineación horizontal es más difícil de leer.

Correcto:

En este ejemplo, las casillas se alinean correctamente.

Incorrecto:

En este ejemplo, la alineación horizontal es más difícil de leer.
No use el estado mixto para representar un tercer estado. El estado mixto se usa para indicar que se establece una opción para algunos objetos secundarios, pero no todos. Los usuarios no deben poder establecer un estado mixto directamente, sino que el estado mixto es un reflejo de los objetos secundarios. El estado mixto no se usa como tercer estado para un elemento individual. Para representar un tercer estado, use botones de radio o una lista desplegable en su lugar.

Incorrecto:

En este ejemplo, se supone que el estado mixto indica que el servicio Theme no está instalado.

Correcto:

En este ejemplo, los usuarios pueden elegir entre una lista de tres opciones claras.
Al hacer clic en una casilla de verificación de estado mixto, debe recorrer todos los estados seleccionados, todos desactivados y los estados mixtos originales. Por perdón, es importante poder restaurar el estado mixto original porque la configuración puede ser compleja o desconocida para el usuario. De lo contrario, la única manera de restaurar el estado mixto con confianza sería cancelar la tarea y empezar de nuevo.
No use casillas como indicador de progreso. En su lugar, use un control de indicador de progreso .

Incorrecto:

En este ejemplo, las casillas se usan incorrectamente como indicador de progreso.

Correcto:

Ejemplo de una barra de progreso típica.
Mostrar casillas deshabilitadas con el estado de selección correcto. Aunque los usuarios no pueden cambiarlos, las casillas deshabilitadas transmiten información para que sean coherentes con los resultados.

Incorrecto:

En este ejemplo, se debe borrar la opción "Leer siempre esta sección en voz alta" porque la sección no se lee cuando la opción está deshabilitada.
No use la selección de una casilla para:
- Realizar comandos.
- Mostrar otras ventanas, como un cuadro de diálogo para recopilar más entradas.
- Muestra dinámicamente otros controles relacionados con el control seleccionado (los lectores de pantalla no pueden detectar estos eventos).

No volver a mostrar este <elemento>

Considere la posibilidad de usar una opción No volver a mostrar este <elemento> para permitir que los usuarios supriman un cuadro de diálogo periódico solo si no hay una alternativa mejor. Intente determinar de antemano si los usuarios realmente necesitan el cuadro de diálogo; si lo hacen, muestre siempre el cuadro de diálogo y, si no lo hacen, elimine el diálogo.

Para obtener más instrucciones y ejemplos, vea Cuadros de diálogo.

Controles subordinados

Coloque los controles subordinados a la derecha o debajo (sangría, vaciado con la etiqueta de casilla) la casilla y su etiqueta. Finalice la etiqueta de casilla con dos puntos.

En este ejemplo, la casilla y su control subordinado comparten la etiqueta de casilla y su clave de acceso.
Deje habilitados los cuadros de texto editables dependientes y las listas desplegables si comparten la etiqueta de la casilla. Cuando los usuarios escriban o peguen cualquier cosa en el cuadro, seleccione la opción correspondiente automáticamente. Al hacerlo, se simplifica la interacción.

En este ejemplo, al escribir un encabezado o pie de página se selecciona automáticamente la opción .
Si anida casillas con botones de radio u otras casillas, deshabilite estos controles subordinados hasta que se active la opción de alto nivel. Esto evita confusiones sobre el significado de los controles subordinados.
Convierta los controles subordinados en una casilla contigua con la casilla en el orden de tabulación.
Si la selección de una opción implica la selección de casillas subordinadas, active explícitamente esas casillas para que la relación se desactive.

Incorrecto:

En este ejemplo, las casillas subordinadas no están seleccionadas.

Correcto:

En este ejemplo, se seleccionan las casillas subordinadas, lo que hace que su relación con la opción seleccionada se desactive.
Use casillas dependientes si las alternativas agregan complejidad innecesaria. Aunque las casillas deben ser opciones independientes, a veces alternativas como los botones de radio agregan complejidad innecesaria.

Correcto:

En este ejemplo, el uso de botones de radio es preciso, pero crea complejidad innecesaria.

Mejor:

En este ejemplo, el uso de casillas es más sencillo y permite a los usuarios centrarse en seleccionar las opciones deseadas en lugar de en su relación compleja.

Importante: Aplique esta guía solo en circunstancias extremadamente raras, cuando se muestren las dependencias, se agrega una complejidad significativa sin agregar claridad. En el ejemplo anterior, es poco probable que los usuarios intenten elegir superíndice y subíndice, y si lo hicieran, sería fácil entender que eran opciones exclusivas.

Valores predeterminados

Si una casilla es para una opción de usuario, establezca la opción más segura (para evitar la pérdida de datos o acceso al sistema), la mayoría de los estados seguros y privados de forma predeterminada. Si la seguridad y la seguridad no son factores, seleccione el valor más probable o conveniente.

Ajuste de tamaño y espaciado recomendados

figura de la casilla de verificación sugerida ajuste de tamaño y espaciado

Ajuste de tamaño y espaciado recomendados para las casillas.

Etiquetas

Etiquetas de casilla

Etiquete todas las casillas.
Asigne una clave de acceso única a cada etiqueta. Para obtener instrucciones, consulte Teclado.
Use mayúsculas de estilo de oración.
Escriba la etiqueta como una frase o una frase imperativa y use ningún signo de puntuación final.
- Excepción: Si una etiqueta de casilla también etiqueta un control subordinado que la sigue, finalice la etiqueta con dos puntos.
Escriba la etiqueta para que describa el estado seleccionado de la casilla.
Para un grupo de casillas, use expresiones paralelas e intente mantener la longitud aproximadamente igual para todas las etiquetas.
Para un grupo de casillas, centre el texto de la etiqueta en las diferencias entre las opciones. Si todas las opciones tienen el mismo texto introductorio, mueva ese texto a la etiqueta de grupo.
Use expresiones positivas. No escriba una etiqueta para que la selección de una casilla no realice ninguna acción.
- Excepción: no vuelva a mostrar este <elemento> casillas.
Incorrecto:

En este ejemplo, la opción no usa expresiones positivas.
Describa solo la opción con la etiqueta . Mantenga las etiquetas breves para que sea fácil hacer referencia a ellas en mensajes y documentación. Si la opción requiere una explicación adicional, proporcione la explicación en un control de texto estático mediante oraciones completas y puntuación final.

Nota

Agregar una explicación a una casilla de verificación en un grupo no significa que tenga que proporcionar explicaciones para todas las casillas del grupo. Proporcione la información pertinente en la etiqueta si puede y use explicaciones solo cuando sea necesario. No restablezte simplemente la etiqueta para la coherencia.

En este ejemplo, una etiqueta de casilla tiene texto explicativo adicional debajo.
Si se recomienda encarecidamente una opción, considere la posibilidad de agregar "(recomendado)" a la etiqueta. Asegúrese de agregar a la etiqueta de control, no a las notas complementarias.
Si debe usar etiquetas de varias líneas, alinee la parte superior de la etiqueta con la casilla.
No use un control subordinado, los valores que contiene o su etiqueta de unidades para crear una frase o frase. Este diseño no es localizable porque la estructura de oraciones varía con el lenguaje.

Incorrecto:

En este ejemplo, el cuadro de texto se coloca incorrectamente dentro de la etiqueta de casilla.

Etiquetas de grupo de casillas

Use la etiqueta de grupo para explicar el propósito del grupo, no cómo realizar la selección. Supongamos que los usuarios saben cómo usar casillas. Por ejemplo, no digas "Seleccione ninguna de las siguientes opciones".
Finalice cada etiqueta con dos puntos.
No asigne una clave de acceso a la etiqueta. No es necesario hacerlo y hace que las demás claves de acceso sean más difíciles de asignar.
Para una selección de una o varias opciones dependientes, explique el requisito de la etiqueta.

Correcto:

En este ejemplo, los usuarios podrían pensar que solo pueden realizar una selección.

Mejor:

En este ejemplo, está claro que los usuarios pueden realizar más de una selección.

Documentación

Al hacer referencia a casillas:

Use el texto exacto de la etiqueta, incluida su mayúscula, pero no incluya el carácter de subrayado o dos puntos de la tecla de acceso. Incluya la casilla de verificación de palabra.
Consulte una casilla como casilla, no como opción, casilla o solo casilla, porque la casilla solo es ambigua para los localizadores.
Para describir la interacción del usuario, use select y clear.
Cuando sea posible, dé formato a la etiqueta con texto en negrita. De lo contrario, coloque la etiqueta entre comillas solo si es necesario para evitar confusiones.

Ejemplo: Active la casilla Subrayado .