Casilla de verificación

Aquí tienes la traducción del archivo fuente de la guía de diseño al español, buscando que suene lo más natural posible:

Un checkbox es un elemento de interfaz de usuario que permite a los usuarios seleccionar una o varias opciones de las que se ofrecen.

§Casos de uso

Cuando se activa, el checkbox no desencadena una acción de forma inmediata. Los usuarios deben hacer clic en un botón de confirmación (por ejemplo, Guardar, Aplicar, Enviar) para aplicarlo. En la mayoría de los casos, el checkbox se utiliza junto con una etiqueta explicativa. Sin embargo, en algunos escenarios, los checkboxes pueden usarse sin etiquetas, como en tablas o donde incluir una etiqueta de "habilitar" junto a cada checkbox sea redundante. Comienza tu texto con una redacción positiva, por ejemplo, usa "Habilitar" en lugar de "Deshabilitar", para evitar que el usuario tenga que resolver un acertijo lógico.

§Anatomía

El checkbox consta de:

1. Contenedor: Área rectangular visual que rodea el checkbox. El contenedor indica los límites y activa el checkbox.
2. Marca de verificación: Símbolo que aparece dentro del contenedor cuando el usuario habilita el checkbox. Este símbolo confirma visualmente que el usuario ha seleccionado el checkbox.
3. Etiqueta de texto (opcional): Texto colocado a la derecha del checkbox. La etiqueta de texto explica el significado o propósito del checkbox.

§Tamaños

El componente de checkbox tiene dos tamaños principales:

M es el tamaño predeterminado, con dimensiones estándar adecuadas en la mayoría de los casos. En este tamaño, el contenedor es de 14x14 px y la etiqueta de texto utiliza una fuente de 13 px.

L se utiliza cuando el checkbox necesita destacar entre otros elementos de la interfaz o si la interfaz requiere elementos más grandes para un uso más fácil. En este tamaño, el contenedor es de 17x17 px y la etiqueta de texto utiliza una fuente de 15 px.

§Estados

Predeterminado es el estado principal del checkbox que el usuario puede habilitar o deshabilitar con un clic.

Hover es el estado cuando el usuario mueve el cursor sobre el área del checkbox (checkbox + etiqueta).

Deshabilitado es el estado cuando el usuario no puede interactuar con el checkbox por alguna razón.

Indeterminado es el estado de la cabecera en un grupo de checkboxes cuando se selecciona uno de varios elementos (generalmente ocurre en tablas con selección de varias filas).

§Recomendaciones

§Usar

• Selección de opciones si deseas que el usuario seleccione una o varias opciones de una lista.

• Habilitar/deshabilitar funciones si deseas que el usuario habilite o deshabilite ciertas funciones en la interfaz. Por ejemplo, los usuarios pueden habilitar o deshabilitar notificaciones o reproducción automática y otras funciones. En tales casos, los checkboxes proporcionan una interacción clara e intuitiva.

• Selección múltiple en tablas o listas si deseas que el usuario seleccione varios elementos para operaciones masivas, como eliminación o exportación. Esto simplifica las operaciones de datos y facilita las acciones masivas.

• Filtrado de contenido o resultados si deseas que el usuario seleccione parámetros para filtrar contenido o resultados de búsqueda.

§Evitar

• Selección de una sola opción. Si esperas que el usuario seleccione una opción de un conjunto mutuamente excluyente, utiliza botones de radio.

• Habilitación/deshabilitación de dos posiciones (acción instantánea). Si la opción tiene solo dos estados, habilitado y deshabilitado, y los cambios surten efecto instantáneamente, sin un botón "Aplicar", utiliza interruptores (switches). Los interruptores presentan tales opciones de manera más clara y compacta, y los cambios se aplican inmediatamente después de cambiar.

• Selección segmentada. Si ofreces varias opciones mutuamente excluyentes que los usuarios pueden seleccionar simultáneamente en diferentes categorías, utiliza controles de segmento. Permiten al usuario seleccionar opciones en diferentes segmentos o categorías.

• Selección entre numerosas opciones. Si proporcionas una lista larga de opciones de las cuales elegir una sola, utiliza una lista desplegable (select). Esto ahorra espacio en pantalla y facilita la elección de un gran conjunto de opciones.

§Redacción de textos

• Busca la brevedad en las descripciones de texto. Evita frases largas o oraciones complejas.
• Utiliza verbos activos que indiquen claramente la acción asociada con la elección. Por ejemplo, "Suscribirse al boletín" en lugar de "Suscripción al boletín".
• Proporciona a los usuarios una comprensión completa de lo que sucederá cuando seleccionen el checkbox. Por ejemplo, "Recibir notificaciones sobre nuevos artículos" en lugar de "Notificaciones".