Casillas
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 lo contrario inequívoco del estado seleccionado. Por lo tanto, casillas solo deben usarse para activar o desactivar una opción o para seleccionar o anular la selección de un elemento.
Un grupo típico de casillas.
Nota
Las directrices relacionadas con diseño se presentan en un artículo independiente.
¿Es este el control correcto?
Para decidirlo, tenga en cuenta 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í, use otro control.
¿Los estados seleccionados y borrados son claros e inequívocos? Si no es así, use botones de radio o una lista desplegable de para que pueda etiquetar los estados de forma independiente.
Cuando se usa en un grupo, ¿el grupo comprende opciones independientes, a partir de las cuales los usuarios pueden elegir cero o más? Si no es así, considere la posibilidad de controlar 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 uno o varios? Si es así, use un grupo de casillas y controle el error cuando no se seleccione ninguna de las opciones.
¿Es el número de opciones de un grupo 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 una opción mejor 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 desactivar las alternativas, incluso si una casilla de verificación es aceptable.
Use botones de radio si tiene suficiente espacio de 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:
de mensajes
En este ejemplo, una casilla es un uso eficaz del espacio de pantalla para esta opción periférica.
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 lista de selección múltiple.
Patrones de uso
Las casillas tienen varios patrones de uso:
Uso | Ejemplo |
---|---|
Se usa una opción individual una sola casilla para seleccionar una opción individual. |
![]() Se usa una sola casilla para una opció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 de verificación.![]() 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. |
puede 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. |
![]() Una casilla de verificación de estado mixto. |
Directrices
General
casillas relacionadas con el grupo. Combine las opciones relacionadas y separe las opciones no relacionadas en grupos de 10 o menos, usando varios grupos si es necesario.
Ejemplo de grupos de opciones relacionadas independientes.
reconsiderar el uso de cuadros de grupo para organizar grupos de casillas esto suele dar lugar a un desorden de pantalla innecesario.
casillas de verificación Lista 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 tanto, no se puede localizar.
casilla Alinear 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 para 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, se deben 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 usar casillas como indicador de progreso. Use un indicador de progreso control en su lugar.
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 usar la selección de una casilla para:
- Realice 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 vuelva a mostrar este <elemento>
- Considere la posibilidad de usar no mostrar este <elemento> opción de nuevo 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 de o debajo (sangría, vacíe 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 automáticamente la opción correspondiente. 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, deshabilitar estos controles subordinados hasta que se active la opción de alto nivel. Si lo hace, evita confusiones sobre el significado de los controles subordinados.
Haga que los controles subordinados se realicen en una casilla contigua con la casilla en el orden de tabulación.
Si la selección de una opción implica activar casillas subordinadas, active explícitamente esas casillas para desactivar la relación.
incorrecto:
En este ejemplo, las casillas subordinadas no están seleccionadas.
Correcto:
En este ejemplo, se activan las casillas subordinadas, lo que hace que su relación con la opción seleccionada esté desactivada.
casilla Usar dependientes si las alternativas agregan complejidad innecesaria. Aunque las casillas deben ser opciones independientes, a veces alternativas como 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 muestre que las dependencias agregan 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, establecer la 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
Tamaño y espaciado recomendados para las casillas de verificación.
Etiquetas
etiquetas de casilla
Etiquete todas las casillas.
Asigne una clave de acceso única a cada etiqueta. Para obtener instrucciones, consulte Teclado.
Escriba la etiqueta como frase o frase imperativa y no use signos de puntuación finales.
- Excepción: Si una etiqueta de casilla también etiqueta un control subordinado que lo 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 frase una etiqueta para que la selección de una casilla no realice ninguna acción.
- Excepción: no vuelva a mostrar esta <elemento> de nuevo 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 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 es posible 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.
de 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 diga "Seleccione ninguna de las siguientes opciones".
Termine cada etiqueta con dos puntos.
No asigne una clave de acceso a la etiqueta. No es necesario hacerlo y hace que las otras 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 los dos puntos de la tecla de acceso. Incluya la casilla de verificación word.
Haga referencia a una casilla como casilla, no como opción, casilla o solo casilla, ya que la casilla es ambigua para los localizadores.
Para describir la interacción del usuario, use select and clear (Seleccionar y borrar).
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 de.