Casillas de verificación - Check Boxes

  • 05/31/2018
  • 10 minutos para leer

Con una casilla de verificación, los usuarios toman una decisión entre dos opciones claramente opuestas. La etiqueta de la casilla de verificación indica el estado seleccionado, mientras que el significado del estado borrado debe ser el opuesto inequívoco del estado seleccionado. En consecuencia, las casillas de verificación solo deben usarse para activar o desactivar una opción o para seleccionar o deseleccionar un elemento.

captura de pantalla de una de las cuatro casillas de verificación seleccionadas

Un grupo típico de casillas de verificación.

Note

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

¿Es este el control correcto?

Para decidir, considera estas preguntas:

  • ¿Se utiliza la casilla de verificación para activar o desactivar una opción o para seleccionar o deseleccionar un elemento? Si no, use otro control.

  • ¿Los estados seleccionados y borrados son claros y no ambiguos? De lo contrario, utilice los botones de opción o una lista desplegable para poder etiquetar los estados de forma independiente.

  • Cuando se usa en un grupo, ¿el grupo incluye elecciones independientes, de las cuales los usuarios pueden elegir cero o más? De lo contrario, considere los controles para las opciones dependientes, como los botones de opción y las vistas de árbol de casilla de verificación .

  • Cuando se usa en un grupo, ¿el grupo comprende opciones dependientes, de las cuales los usuarios deben elegir una o más? Si es así, use un grupo de casillas de verificación y maneje el error cuando ninguna de las opciones esté seleccionada.

  • ¿El número de opciones en 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 de verificación en 10 o menos. Para más de 10 opciones, use una lista de casillas de verificación .

  • ¿Sería un botón de radio una mejor opción? Donde las casillas de verificación son adecuadas solo para activar o desactivar una opción, los botones de opción se pueden usar para opciones completamente diferentes. Si ambas soluciones son posibles:

    • Use los botones de radio si el significado de la casilla de verificación desactivada no es completamente obvio.

      Incorrecto:

      captura de pantalla de una casilla de verificación etiquetada paisaje

      En este ejemplo, la opción opuesta de Landscape no está clara, por lo que la casilla de verificación no es una buena opción.

      Correcto:

      captura de pantalla de dos botones de radio

      En este ejemplo, las opciones no son opuestas, por lo que los botones de opción son la mejor opción.

    • Use los botones de opción en las páginas del asistente para dejar claras las alternativas, incluso si una casilla de verificación es aceptable.

    • Use los botones de opción si tiene suficiente espacio en la pantalla y las opciones son lo suficientemente importantes como para hacer un buen uso de ese espacio en la pantalla. De lo contrario, utilice una casilla de verificación o una lista desplegable.

      Incorrecto:

      captura de pantalla de mostrar y no mostrar botones de relación

      En este ejemplo, las opciones no son lo suficientemente importantes como para utilizar botones de radio.

      Correcto:

      captura de pantalla de la casilla de verificación con no mostrar mensaje

      En este ejemplo, una casilla de verificación es un uso eficiente del espacio de pantalla para esta opción periférica.

  • Utilice una casilla de verificación si hay otras casillas de verificación 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 u otros datos. Para datos, use una lista de casillas de verificación o una lista de selección múltiple .

Patrones de uso

Las casillas de verificación tienen varios patrones de uso:

Una opción individual Una sola casilla de verificación se utiliza para seleccionar una opción individual.
captura de pantalla de una casilla de verificación con recordarme la etiqueta
Se utiliza una única casilla de verificación para una elección individual.
Opciones independientes (cero o más) Se utiliza un grupo de casillas de verificación para seleccionar de un conjunto de cero o más opciones.
a diferencia de los controles de selección única, como los botones de opción, los usuarios pueden seleccionar cualquier combinación de opciones en un grupo de casillas de verificación.
captura de pantalla de dos de las tres casillas de verificación seleccionadas
Se utiliza un grupo de casillas de verificación para elecciones independientes.
Opciones dependientes (una o más) Un grupo de casillas de verificación también se puede usar para seleccionar de un conjunto de una o más opciones.
Es posible que deba representar una selección de una o más opciones dependientes . Debido a que Microsoft® Windows no tiene un control que admita directamente este tipo de entrada, la mejor solución es utilizar un grupo de casillas de verificación y controlar el error cuando no se selecciona ninguna de las opciones.
captura de pantalla de una de las dos casillas de verificación seleccionadas
Se utiliza un grupo de casillas de verificación donde se debe seleccionar al menos un protocolo.
Selección mixta Además de sus estados seleccionados y borrados, las casillas de verificación también tienen un estado mixto para la selección múltiple para indicar que la opción está configurada para algunos, pero no todos, los objetos.
captura de pantalla de una casilla de verificación de solo lectura azul sólido
Una casilla de verificación de estado mixto.

Pautas

General

  • Agrupar las casillas de verificación relacionadas . Combine las opciones relacionadas y separe las opciones no relacionadas en grupos de 10 o menos, utilizando varios grupos si es necesario.

    captura de pantalla de casillas de verificación relacionadas y no relacionadas

    Un ejemplo de grupos de opciones relacionadas, independientes.

  • Reconsidere el uso de cuadros de grupo para organizar grupos de cuadros de verificación, lo que a menudo resulta en un desorden de pantalla innecesario.

  • Enumere las casillas de verificación en un orden lógico , como agrupar opciones altamente relacionadas, colocar primero las opciones más comunes o seguir alguna otra progresión natural. No se recomienda el orden alfabético porque depende del idioma y, por lo tanto, no es localizable.

  • Alinee las casillas de verificación verticalmente, no horizontalmente . La alineación horizontal es más difícil de leer.

    Correcto:

    captura de pantalla de casillas de verificación alineadas verticalmente

    En este ejemplo, las casillas de verificación están alineadas correctamente.

    Incorrecto:

    captura de pantalla de casillas de verificación alineadas horizontalmente

    En este ejemplo, la alineación horizontal es más difícil de leer.

  • No utilice el estado mixto para representar un tercer estado. El estado mixto se usa para indicar que una opción está establecida para algunos, pero no todos, objetos secundarios. Los usuarios no deberían poder establecer un estado mixto directamente, el estado mixto es un reflejo de los objetos secundarios. El estado mixto no se usa como un tercer estado para un artículo individual. Para representar un tercer estado, use los botones de opción o una lista desplegable.

    Incorrecto:

    Captura de pantalla de la casilla de verificación Servicio de tema azul sólido

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

    Correcto:

    captura de pantalla de la lista desplegable con tres opciones

    En este ejemplo, los usuarios pueden elegir de 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 borrados y originales mezclados. Para el 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 comenzar de nuevo.

  • No utilice casillas de verificación como un indicador de progreso . Utilice un control de indicador de progreso en su lugar.

    Incorrecto:

    captura de pantalla de cuatro casillas de verificación que muestran el progreso

    En este ejemplo, las casillas de verificación se utilizan incorrectamente como un indicador de progreso.

    Correcto:

    captura de pantalla de una barra de progreso parcialmente llena

    Ejemplo de una barra de progreso típica.

  • Mostrar casillas de verificación deshabilitadas utilizando el estado de selección correcto. Aunque los usuarios no pueden cambiarlos, las casillas de verificación deshabilitadas transmiten información, por lo que deben ser coherentes con los resultados.

    Incorrecto:

    captura de pantalla de una de dos casillas de verificación atenuada

    En este ejemplo, la opción "Leer siempre esta sección en voz alta" debe estar desactivada porque la sección no se lee cuando la opción está deshabilitada.

  • No utilice la selección de una casilla de verificación para :

    • Ejecutar comandos.
    • Muestra otras ventanas, como un cuadro de diálogo para recopilar más información.
    • Mostrar dinámicamente otros controles relacionados con el control seleccionado (los lectores de pantalla no pueden detectar tales eventos).

No muestres esto otra vez

  • Considera usar un No mostrar esto otra opción para permitir a los usuarios suprimir un cuadro de diálogo recurrente solo si no hay una alternativa mejor. Intente determinar de antemano si los usuarios realmente necesitan el diálogo; Si lo hacen, siempre muestre el diálogo, y si no lo hacen, elimine el diálogo.

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

Controles subordinados

  • Coloque los controles subordinados a la derecha o debajo (con sangría, al ras con la etiqueta de la casilla de verificación) la casilla de verificación y su etiqueta. Termine la etiqueta de la casilla de verificación con dos puntos.

    captura de pantalla del cuadro de texto debajo de la etiqueta de la casilla de verificación

    En este ejemplo, la casilla de verificación y su control subordinado comparten la etiqueta de la casilla de verificación y su clave de acceso.

  • Deje habilitados los cuadros de texto editables dependientes y las listas desplegables si comparten la etiqueta de la casilla de verificación. Cuando los usuarios escriben o pegan algo en el cuadro, seleccione la opción correspondiente automáticamente. Hacerlo simplifica la interacción.

    captura de pantalla de los cuadros de texto de encabezado y pie de página

    En este ejemplo, al ingresar un encabezado o pie de página, se selecciona automáticamente la opción.

  • Si anida las casillas de verificación con los botones de radio u otras casillas de verificación, desactive estos controles subordinados hasta que se seleccione la opción de alto nivel . Si lo hace, evita la confusión sobre el significado de los controles subordinados.

  • Realice controles subordinados a una casilla de verificación contigua a la casilla de verificación en el orden de tabulación.

  • Si seleccionar una opción implica seleccionar casillas de verificación subordinadas, marque explícitamente esas casillas de verificación para que la relación quede clara.

    Incorrecto:

    captura de pantalla: botón seleccionado, casillas de verificación desactivadas

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

    Correcto:

    captura de pantalla: botón seleccionado, casillas de verificación seleccionadas

    En este ejemplo, las casillas de verificación subordinadas están seleccionadas, lo que hace que su relación con la opción seleccionada sea clara.

  • Use casillas de verificación dependientes si las alternativas agregan una complejidad innecesaria . Si bien las casillas de verificación deben ser opciones independientes, a veces las alternativas, como los botones de radio, agregan una complejidad innecesaria.

    Correcto:

    Captura de pantalla de botones confusos y casillas de verificación.

    En este ejemplo, el uso de los botones de opción es preciso, pero crea una complejidad innecesaria.

    Mejor:

    captura de pantalla de casillas de verificación solamente

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

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

Valores predeterminados

  • Si una casilla de verificación es para una opción de usuario, establezca el más seguro (para evitar la pérdida de datos o el acceso al sistema), el estado más seguro y privado de forma predeterminada. Si la seguridad y la seguridad no son factores, seleccione el valor más probable o conveniente.

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

Tamaños y espacios recomendados para las casillas de verificación.

Etiquetas

Etiquetas de casilla de verificación

  • Etiqueta de cada casilla de verificación.

  • Asigne una clave de acceso única a cada etiqueta. Para las pautas, vea Teclado .

  • Utilice el uso de mayúsculas de estilo de oración .

  • Escriba la etiqueta como una frase o una oración imperativa, y no use puntuación final.

    • Excepción: si una etiqueta de casilla de verificación también etiqueta un control subordinado que lo sigue, finalice la etiqueta con dos puntos.
  • Escriba la etiqueta de modo que describa el estado seleccionado de la casilla de verificación.

  • Para un grupo de casillas de verificación, use frases paralelas e intente mantener la longitud aproximadamente igual para todas las etiquetas.

  • Para un grupo de casillas de verificación, centre el texto de la etiqueta en las diferencias entre las opciones. Si todas las opciones tienen el mismo texto de introducción, mueva ese texto a la etiqueta del grupo.

  • Utilice frases positivas. No emplee una etiqueta para que seleccionar una casilla de verificación signifique no realizar una acción.

    • Excepción: no mostrar esto otra vez casillas de verificación

    Incorrecto:

    captura de pantalla de la etiqueta negativa 'apagar'

    En este ejemplo, la opción no utiliza frases positivas.

  • Describa solo la opción con la etiqueta. Mantenga las etiquetas breves para que sea fácil referirse 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 usando oraciones completas y puntuación final.

    Note

    Agregar una explicación a una casilla de verificación en un grupo no significa que tenga que proporcionar explicaciones para todas las casillas de verificación del grupo. Proporcione la información relevante en la etiqueta si puede, y use explicaciones solo cuando sea necesario. No se limite a repetir la etiqueta para la consistencia.

    Captura de pantalla de la casilla de verificación, etiqueta y descripción.

    En este ejemplo, una etiqueta de casilla de verificación tiene un texto explicativo adicional debajo.

  • Si se recomienda una opción, considere 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 de verificación.

  • No utilice un control subordinado, los valores que contiene o la etiqueta de sus unidades para crear una oración o frase. Tal diseño no es localizable porque la estructura de la oración varía con el idioma.

    Incorrecto:

    captura de pantalla de la etiqueta de la casilla de verificación con el cuadro de texto en ella

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

Etiquetas de grupo

  • Use la etiqueta del grupo para explicar el propósito del grupo, no cómo hacer la selección. Supongamos que los usuarios saben cómo utilizar las casillas de verificación. Por ejemplo, no diga "Seleccione cualquiera de las siguientes opciones".

  • Termina cada etiqueta con dos puntos.

  • No asigne una clave de acceso a la etiqueta. No es necesario hacerlo y hace que las otras teclas de acceso sean más difíciles de asignar.

  • Para una selección de una o más opciones dependientes, explique el requisito en la etiqueta.

    Correcto:

    Captura de pantalla de la etiqueta para dos controles: protocolos.

    En este ejemplo, los usuarios pueden pensar que solo pueden hacer una selección.

    Mejor:

    captura de pantalla de la etiqueta: los protocolos seleccionan uno o más

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

Documentación

Al referirse a las casillas de verificación:

  • Use el texto exacto de la etiqueta, incluido su uso de mayúsculas, pero no incluya el subrayado de la clave de acceso ni los dos puntos. Incluir la casilla de verificación de la palabra.

  • Consulte una casilla de verificación como una casilla de verificación, no una opción, una casilla de verificación o solo una casilla, ya que la casilla sola es ambigua para los localizadores.

  • Para describir la interacción del usuario, utilice seleccionar y borrar.

  • Cuando sea posible, formatee la etiqueta con texto en negrita. De lo contrario, ponga la etiqueta entre comillas solo si es necesario para evitar confusiones.

    Ejemplo: Seleccione la casilla de verificación Subrayar .

 

 

 

 

Referencias

Microsoft - Casillas de verificación - Check Boxes

 

 

 



error: Contenido protegido