Cuadros de grupo

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.

Un cuadro de grupo es un marco rectangular etiquetado que rodea un conjunto de controles relacionados. Un cuadro de grupo es una manera de mostrar las relaciones visualmente; aparte de proporcionar una clave de acceso para un grupo de controles, no proporciona ninguna funcionalidad.

Un cuadro de grupo típico.

Nota

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

 

¿Es este el control adecuado?

Aunque los cuadros de grupo son un medio visual seguro de indicar relaciones, el uso excesivo de ellos agrega desorden visual y reduce considerablemente el espacio disponible en una superficie. Son visualmente pesados y se deben usar con moderación, solo cuando no hay una mejor solución.

Una tendencia de diseño en Windows es una apariencia más sencilla y limpia eliminando líneas innecesarias.

Para decidir si es necesario un cuadro de grupo, tenga en cuenta estas preguntas:

• ¿Hay más de un control en el grupo? Si no es así, use una etiqueta de texto sin formato en su lugar. Una excepción excepcional es usar un cuadro de grupo con un solo control para mantener la coherencia con otros cuadros de grupo en la misma superficie.

Incorrecto:

En este ejemplo, el cuadro de grupo solo tiene un único control.

• ¿Están relacionados los controles? ¿La relación agrega claridad? Si no es así, presente los controles por separado fuera de un cuadro de grupo.
• ¿Todos los controles están dentro del grupo? Si es así, indique la relación en la superficie más grande, como el cuadro de diálogo primario o la página.

Incorrecto:

En este ejemplo, todos los controles (aparte de los botones de confirmación) del cuadro de diálogo están dentro del cuadro de grupo.

• ¿Puede comunicar eficazmente las relaciones con el diseño por sí sola? Si es así, use el diseño en su lugar. Puede colocar controles relacionados junto a otros y colocar el espaciado adicional entre controles no relacionados. También puede usar encabezados y sangría para mostrar relaciones jerárquicas.

En este ejemplo, el diseño solo se usa para mostrar las relaciones de control.

• ¿Puede comunicar eficazmente las relaciones mediante un separador? Si es así, use un separador en su lugar. Un separador es una línea horizontal que unifica los controles debajo de él. Los separadores proporcionan un aspecto más sencillo y limpio. Sin embargo, a diferencia de los cuadros de grupo, funcionan mejor cuando abarcan todo el ancho de la superficie.
  • Desarrolladores: Puede implementar un separador con un rectángulo grabado con un alto de uno.

En este ejemplo, se usan separadores etiquetados para mostrar relaciones de control.

En este ejemplo, se usan separadores sin etiquetar para mostrar las relaciones de control.

• ¿Puede comunicar eficazmente las relaciones sin texto? Si es así, considere la posibilidad de usar elementos gráficos como fondos o agregadores.

Instrucciones

• No anidar cuadros de grupo. Use el diseño para mostrar las relaciones dentro de un cuadro de grupo.

Incorrecto:

En este ejemplo, los cuadros de grupo anidados dan como resultado un desorden visual innecesario.

Correcto:

En este ejemplo, se muestra la misma relación de control mediante el diseño en su lugar.

• No coloque controles en etiquetas de cuadro de grupo.
  • Excepción: Puede usar una casilla como etiqueta de cuadro de grupo si todos los controles dentro de la casilla están habilitados y deshabilitados por la casilla.

Incorrecto:

En este ejemplo, una lista desplegable se coloca incorrectamente en un cuadro de grupo. En este ejemplo se deben usar pestañas en su lugar.

• No deshabilite los cuadros de grupo. Para indicar que un grupo de controles no se aplica actualmente, deshabilite todos los controles del cuadro de grupo, pero no el propio cuadro de grupo. Este enfoque es más accesible y se puede admitir de forma coherente en todos los marcos de interfaz de usuario.

Etiquetas

• Etiquete todos los cuadros de grupo.
• No asigne una clave de acceso a la etiqueta. Esto no es necesario y hace que las demás claves de acceso sean más difíciles de asignar. En su lugar, asigne claves de acceso a los controles dentro del cuadro de grupo.
  • Excepción: Si una superficie tiene muchos controles, es posible que no haya suficientes claves de acceso disponibles. Si es así, reduzca el número de claves de acceso mediante su asignación a cuadros de grupo en lugar de los controles dentro de los cuadros de grupo.
• Use mayúsculas de estilo de oración.
• Escriba la etiqueta con un nombre o una frase de nombre, no como oración, y no use signos de puntuación final, incluidos los dos puntos.
• Use expresiones paralelas para las etiquetas de cuadro de grupo dentro de la misma superficie.
• Mantenga las etiquetas de cuadro de grupo concisas. No use texto informativo como etiqueta. Sin embargo, puede tener texto informativo en el cuadro de grupo.
• No repita la etiqueta de cuadro de grupo en las etiquetas de control dentro del cuadro. Por ejemplo, si el cuadro de grupo tiene la etiqueta Alineación, etiquete los botones de opción Izquierda, Derecha, etc., no Alineación izquierda o Alineación derecha.
• No haga referencia a cuadros de grupo en el texto de la interfaz de usuario.

Documentación

Al hacer referencia a cuadros de grupo:

• Consulte cuadros de grupo solo en programador y otra documentación técnica. Para el cuadro de grupo, use dos palabras minúsculas.
• En cualquier otro lugar, no es necesario incluir el nombre del cuadro de grupo en un procedimiento a menos que un cuadro de diálogo contenga más de una opción con el mismo nombre. En tales casos, use en con el nombre del cuadro de grupo.
• 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: en Efectos, seleccione Oculto.