Layout

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.

El diseño es el ajuste de tamaño, el espaciado y la colocación del contenido dentro de una ventana o página. El diseño eficaz es fundamental para ayudar a los usuarios a encontrar lo que buscan rápidamente, así como hacer que la apariencia sea visualmente atractiva. El diseño eficaz puede marcar la diferencia entre los diseños que los usuarios entienden inmediatamente y los que dejan a los usuarios sintiendo desconcertados y abrumados.

Nota: Las directrices relacionadas con la administración de ventanas se presentan en un artículo independiente. El ajuste de tamaño y el espaciado específicos recomendados se presentan en sus respectivos artículos de directrices.

Conceptos de diseño

Jerarquía visual

Una ventana o página tiene una jerarquía visual clara cuando su apariencia indica la relación y la prioridad de sus elementos. Sin una jerarquía visual, los usuarios tendrían que averiguar estas relaciones y prioridades.

La jerarquía visual se logra mediante la combinación hábil de los siguientes atributos:

  • Centro de atención. El diseño indica dónde deben buscar los usuarios en primer lugar.
  • Flow. El ojo fluye suavemente y naturalmente por una ruta clara a través de la superficie, buscando elementos de la interfaz de usuario (UI) en el orden adecuado para su uso.
  • Agrupar. Los elementos de interfaz de usuario relacionados lógicamente tienen una relación visual clara. Los elementos relacionados se agrupan conjuntamente; los elementos no relacionados son independientes.
  • Énfasis. Los elementos de la interfaz de usuario se resaltan en función de su importancia relativa.
  • Alineación. Los elementos de la interfaz de usuario tienen ubicación coordinada, por lo que son fáciles de examinar y aparecen ordenados.

Además, el diseño efectivo tiene estos atributos:

  • Independencia del dispositivo. El diseño aparece según lo previsto, independientemente del tipo de letra o tamaño de fuente, puntos por pulgada (ppp), pantalla o adaptador gráfico.
  • Fácil de escanear. Los usuarios pueden encontrar el contenido que buscan de un vistazo.
  • Eficacia. Los elementos de la interfaz de usuario que son grandes deben ser grandes y los elementos que son pequeños funcionan bien pequeños.
  • Capacidad de resizbilidad. Si resulta útil, una ventana se puede cambiar de tamaño y su diseño de contenido es eficaz independientemente del tamaño o el tamaño de la superficie.
  • Equilibrar. El contenido aparece distribuido uniformemente a través de la superficie.
  • Simplicidad visual. La percepción de que un diseño no es más complicado de lo que debe ser. Los usuarios no se sienten abrumados por la apariencia del diseño.
  • Coherencia Ventanas o páginas similares usan un diseño similar, por lo que los usuarios siempre se sienten orientados.

Aunque el ajuste de tamaño, el espaciado y la colocación son conceptos sencillos, el desafío con el diseño es lograr la combinación correcta de estos atributos.

En Windows, el diseño se comunica mediante métricas independientes del dispositivo, como unidades de diálogo (DTU) y píxeles relativos.

Un modelo de diseño para leer

Los usuarios eligen lo que leen por la apariencia y la organización del contenido. Para crear un diseño eficaz, deberá comprender lo que los usuarios tienden a leer y por qué.

Puede tomar decisiones de diseño mediante este modelo de diseño para leer:

  • Las personas leen en un orden de izquierda a derecha y de arriba abajo (en culturas occidentales).

  • Hay dos modos de lectura: lectura inmersiva y examen. El objetivo de la lectura inmersiva es la comprensión.

    figure of red arrow in zigzag reading pattern

    Este diagrama modela la lectura inmersiva.

    Por el contrario, el objetivo del examen es localizar cosas. La ruta de acceso general del examen tiene este aspecto:

    figure of red arrow in diagonal reading pattern

    Este diagrama modela el análisis.

    figure of red arrow in a down and arc pattern

    Si hay texto que se ejecuta a lo largo del borde izquierdo de una página, los usuarios examinan primero el borde izquierdo.

  • Al usar software, los usuarios no se sumergen en la propia interfaz de usuario, sino en su trabajo. Por lo tanto, los usuarios normalmente no leen el texto de la interfaz de usuario que examinan. Después, solo leen fragmentos de texto de forma completa cuando creen que necesitan.

  • Los usuarios tienden a omitir los paneles de navegación en el lado izquierdo o derecho de una página. Los usuarios reconocen que están allí, pero miren los paneles de navegación solo cuando quieran navegar.

  • Los usuarios tienden a omitir bloques grandes de texto sin formato sin leerlos.

    figure of text with arrows showing scanning text

    Los usuarios tienden a omitir bloques grandes de paneles de texto y navegación cuando examinan.

  • Todas las cosas son iguales, los usuarios primero ven en la esquina superior izquierda de una ventana, examinan por la página y terminan su examen en la esquina inferior derecha. Tienden a ignorar la esquina inferior izquierda.

    figure of page and upper-left to lower-right arrow

    Todas las cosas son iguales, los usuarios leerán estos números en el orden siguiente: 1, 2, 4 y 3.

  • Pero en la interfaz de usuario interactiva, no todas las cosas son iguales, por lo que los distintos elementos de la interfaz de usuario reciben distintos niveles de atención. Los usuarios tienden a examinar los controles interactivos, especialmente los controles situados en la parte superior izquierda y el centro de la ventana y el texto destacado en primer lugar.

figure of screen with sharp and blurred text

Los usuarios se centran en los controles interactivos principales y en la instrucción principal destacada, y examinan otras cosas solo cuando necesitan.

  • Los usuarios tienden a leer etiquetas de control interactivas, especialmente aquellas que parecen relevantes para completar la tarea a mano. Por el contrario, los usuarios tienden a leer texto estático solo cuando creen que necesitan.
  • Los elementos que aparecen diferentes atraen la atención. Texto en negrita y texto grande destaca del texto normal. Los elementos de la interfaz de usuario con color o en un fondo coloreado destacan. Los elementos con iconos destacan de los elementos sin iconos.
  • Los usuarios no se desplazan a menos que tengan una razón. Si el contenido situado encima del plegado no proporciona un motivo para desplazarse, no lo harán.
  • Una vez que los usuarios han decidido qué hacer, detienen inmediatamente el examen y lo hacen.
  • Dado que los usuarios dejan de examinar cuando creen que han terminado, tienden a ignorar cualquier cosa más allá de lo que parece ser el punto de finalización.

screen shot of keyboard options

Los usuarios dejan de escanear cuando creen que han terminado.

Por supuesto, habrá excepciones a este modelo general. Los dispositivos de seguimiento ocular indican que el comportamiento real de los usuarios es bastante errático. El objetivo de este modelo es ayudarle a tomar buenas decisiones y desventajas, no a modelar el comportamiento del usuario con precisión. Pero como ha leído esta lista, esperamos que haya reconocido también muchos de sus propios patrones de lectura.

Diseño para el examen

Los usuarios no leen, examinan para que deba diseñar superficies de interfaz de usuario para el examen. No suponga que los usuarios leerán el texto como escrito en un orden de izquierda a derecha, superior a abajo, sino que examinan los elementos de la interfaz de usuario que atraen su atención.

Para diseñar el examen:

  • Supongamos que los usuarios empiezan por examinar rápidamente toda la ventana y, a continuación, leer los elementos de la interfaz de usuario en aproximadamente el orden siguiente:
    • Controles interactivos en el centro
    • Botones de confirmación
    • Controles interactivos encontrados en otro lugar
    • Instrucción principal
    • Explicaciones complementarias
    • Texto presentado con un icono de advertencia
    • Título de la ventana
    • Otro texto estático en el cuerpo principal
    • Notas al pie
  • Coloque los elementos de la interfaz de usuario que inician una tarea en la esquina superior izquierda o en el centro superior.
  • Coloque los elementos de la interfaz de usuario que completan una tarea en la esquina inferior derecha.
  • Siempre que sea posible, coloque texto crucial en controles interactivos en lugar de texto estático.
  • Evite colocar información crucial en la esquina inferior izquierda o en la parte inferior de un control o página desplazable largo.
  • No presente grandes bloques de texto. Eliminar texto innecesario. Use el estilo de presentación piramidal invertido .
  • Si haces algo para atraer la atención de los usuarios, asegúrate de que se garantiza la atención.

Siempre que sea posible, trabaje con este modelo en lugar de luchar contra él; pero habrá ocasiones en las que necesite resaltar o desacentar determinados elementos de la interfaz de usuario.

Para resaltar los elementos principales de la interfaz de usuario:

  • Coloque los elementos principales de la interfaz de usuario en la ruta de acceso del examen.

  • Coloque cualquier interfaz de usuario para iniciar una tarea en la esquina superior izquierda o en el centro superior.

  • Coloque los botones de confirmación en la esquina inferior derecha.

  • Coloque la interfaz de usuario principal restante en el centro.

  • Use controles que atraigan la atención, como botones de comando, vínculos de comandos e iconos.

  • Use texto destacado, incluido texto grande y texto en negrita.

  • Colocar texto a los usuarios debe leer en controles interactivos, o con iconos, o en banners.

  • Use texto oscuro en un fondo claro.

  • Rodea los elementos con un espacio generoso.

  • No requiera ninguna interacción, como apuntar o mantener el puntero, para ver el elemento que está resaltando.

    screen shot of windows activation options

    En este ejemplo se muestran muchas maneras de resaltar los elementos principales de la interfaz de usuario.

Para anular el énfasis de los elementos secundarios de la interfaz de usuario:

  • Coloque los elementos secundarios de la interfaz de usuario fuera de la ruta de acceso del examen.

  • Coloque cualquier cosa que los usuarios normalmente no necesiten ver en la esquina inferior izquierda o en la parte inferior de la ventana.

  • Use controles que no atraigan la atención, como vínculos de tareas en lugar de botones de comando.

  • Use texto normal o gris.

  • Use texto claro en un fondo oscuro. El texto blanco en un fondo azul o gris oscuro funciona bien.

  • Rodea los elementos con un espacio mínimo.

  • Considere la posibilidad de usar la divulgación progresiva para ocultar los elementos secundarios de la interfaz de usuario.

    screen shot of large and small interface elements

    En este ejemplo se muestran muchas maneras de desacentar los elementos secundarios de la interfaz de usuario.

Uso eficaz del espacio de pantalla

El uso eficaz del espacio de pantalla requiere equilibrar varios factores: usar demasiado espacio y una ventana se siente pesada y desperdiciada, e incluso difícil de usar en función de la ley de ajuste.

Incorrecto:

screen shot showing too much white space

En este ejemplo, la ventana es demasiado grande para su contenido.

Por otro lado, usa demasiado poco espacio y una ventana se siente estrecha, incómodo e intimidante, y difícil de usar si requiere desplazamiento y otra manipulación para usar.

Incorrecto:

screen shot with too many controls

En este ejemplo, la ventana es demasiado pequeña para su contenido.

Aunque la interfaz de usuario crítica debe caber en la resolución efectiva mínima admitida, no suponga que el uso del espacio de pantalla de forma eficaz significa que las ventanas deben ser lo más pequeñas posible que no deberían ser. El diseño efectivo respeta el espacio abierto y no intenta guardar todo en el espacio más pequeño posible. Las pantallas modernas tienen un espacio de pantalla significativo y tiene sentido usar este espacio de forma eficaz cuando pueda. Por lo tanto, erre en el lado del uso de demasiado espacio de pantalla en lugar de demasiado poco. Al hacerlo, las ventanas se sienten más ligeras y más accesibles.

Sabe que un diseño usa el espacio de pantalla de forma eficaz cuando:

  • Windows, los paneles de ventanas y los controles no tienen que cambiar el tamaño para que se puedan usar. Si lo primero que hacen los usuarios es cambiar el tamaño de una ventana, un panel o un control, su tamaño es incorrecto.
  • Los datos no se truncan. La mayoría de los datos de las vistas de lista y las vistas de árbol no tienen puntos suspensivos y los datos de otros controles no se recortan a menos que la longitud de los datos sea inusualmente grande. Los datos que se deben leer para realizar una tarea no deben truncarse.
  • Las ventanas y los controles tienen el tamaño adecuado para eliminar el desplazamiento innecesario. Hay pocas barras de desplazamiento horizontales y no hay barras de desplazamiento verticales innecesarias.
  • Los controles usan principalmente sus tamaños estándar. Intente reducir el número de tamaños de control, por ejemplo, usando solo uno o dos anchos de botón de comando en una superficie.
  • La superficie de la interfaz de usuario está equilibrada. No hay áreas de pantalla grandes sin usar.

Elija tamaños de ventana que sean lo suficientemente grandes como para cumplir bien su propósito. (Y si la ventana se puede cambiar de tamaño, este objetivo se aplica a su tamaño predeterminado). Una combinación de datos truncados o barras de desplazamiento y un montón de espacio de pantalla disponible es un signo claro de diseño ineficaz.

Ajuste de tamaño del control

Normalmente, el primer paso para usar el espacio de pantalla de forma eficaz es determinar el tamaño adecuado para los distintos elementos de la interfaz de usuario. Consulte la tabla De ajuste de tamaño de control , así como el ajuste de tamaño recomendado en los artículos de directrices de control específicos.

La Ley de Ajuste indica que cuanto más pequeño sea un objetivo, más tiempo se tarda en adquirirlo con el mouse. Además, para los equipos que usan Tecnología táctil y Tablet PC de Windows, el "mouse" podría ser realmente un lápiz o el dedo del usuario, por lo que debe considerar dispositivos de entrada alternativos al determinar los tamaños de los controles pequeños. Un tamaño de control de 16 x 16 píxeles relativos es un buen tamaño mínimo para cualquier dispositivo de entrada. Por el contrario, los botones de control de número de píxeles relativos estándar de 15 x 9 son demasiado pequeños para que los lápices los usen de forma eficaz.

Espaciado

Proporcionar espacio generoso (pero no excesivo) hace que el diseño se sienta más cómodo y fácil de analizar. El espacio efectivo no es un espacio sin usar, desempeña un papel importante en la mejora de la capacidad de los usuarios de examinar y también agrega al atractivo visual del diseño. Para obtener instrucciones, consulte la tabla Espaciado.

En el caso de los equipos que usan Tecnología táctil y Tablet PC de Windows, de nuevo el "mouse" podría ser un lápiz o el dedo del usuario. La selección de destino es más difícil cuando se usa un lápiz o un dedo como dispositivo señalador, lo que da lugar a que los usuarios pulsen fuera del destino previsto. Cuando los controles interactivos se colocan muy cerca, pero no están tocando realmente, los usuarios pueden hacer clic en el espacio inactivo entre los controles. Dado que hacer clic en el espacio inactivo no tiene ningún resultado o comentarios visuales, los usuarios a menudo no están seguros de lo que ha ido mal. Si los controles pequeños están demasiado espaciados, el usuario debe pulsar con precisión para evitar pulsar el objeto incorrecto. Para solucionar estos problemas, las regiones de destino de los controles interactivos deben tocar o tener al menos 3 DTU (5 píxeles relativos) de espacio entre ellos.

Sabe que un diseño tiene buen espaciado cuando:

  • En general, la superficie de la interfaz de usuario se siente cómoda y no se siente estrecha.
  • El espacio aparece uniforme y equilibrado.
  • Los elementos relacionados están próximos y los elementos no relacionados están relativamente separados.
  • No hay espacio muerto entre los controles que están diseñados para estar juntos, como botones de la barra de herramientas.

Ventanas redimensionables

Las ventanas redimensionables también son un factor en el uso eficaz del espacio en pantalla. Algunas ventanas constan de contenido fijo y no se benefician de ser redimensionables, pero las ventanas con contenido de tamaño redimensionable deben ser redimensionables. Por supuesto, la razón por la que los usuarios cambian el tamaño de una ventana es tomar avanzadas del espacio de pantalla adicional, por lo que el contenido debe expandirse en consecuencia proporcionando más espacio a los elementos de la interfaz de usuario que lo necesitan. Windows con contenido dinámico, documentos, imágenes, listas y árboles se benefician más de ventanas de tamaño redimensionable.

screen shot of resized control getting scroll bar

En este ejemplo, cambiar el tamaño de la ventana cambia el tamaño del control de vista de lista.

Dicho esto, las ventanas se pueden estirar demasiado anchas. Por ejemplo, muchas páginas del panel de control se vuelven inconfundibles cuando el contenido es más ancho que 600 píxeles relativos. En este caso, es mejor no cambiar el tamaño del área de contenido más allá de este ancho máximo o cambiar el origen del contenido a medida que se cambia el tamaño de la ventana. En su lugar, mantenga un ancho máximo y un origen fijo de la esquina superior izquierda.

El texto se vuelve difícil de leer a medida que aumenta la longitud de la línea. En el caso de los documentos de texto, considere una longitud máxima de línea de 80 caracteres para facilitar la lectura del texto. (Los caracteres incluyen letras, signos de puntuación y espacios).

Incorrecto:

screen shot of wide message box with long text

En este ejemplo, la longitud larga del texto dificulta la lectura.

Por último, las ventanas redimensionables también necesitan usar el espacio de pantalla de forma eficaz cuando se hace más pequeño, ya que reducen el tamaño del contenido y quitan el espacio de los elementos de la interfaz de usuario que pueden funcionar eficazmente sin él. En algún momento, la ventana o sus elementos de interfaz de usuario se vuelven demasiado pequeños para poder usarse, por lo que deben asignarse un tamaño mínimo o algunos elementos deben quitarse por completo.

screen shot of window with tall, intrusive ribbon

screen shot of window with no ribbon

En este ejemplo, el panel tiene un tamaño mínimo.

Algunos programas se benefician del uso de una presentación completamente diferente para que el contenido se pueda usar a tamaños más pequeños.

screen shot of centered media player buttons

En este ejemplo, Reproductor multimedia de Windows cambia su formato cuando la ventana se vuelve demasiado pequeña para el formato estándar.

Foco

Un diseño tiene el foco cuando hay un lugar obvio para buscar primero. El foco es importante para mostrar a los usuarios dónde empezar a examinar la ventana o la página. Sin foco claro, el ojo del usuario se desambulará sin objetivo. El punto focal debe ser algo importante que los usuarios necesitan encontrar y comprender rápidamente, y deben tener el mayor énfasis visual. La esquina superior izquierda es el punto focal natural para la mayoría de las ventanas.

Solo debe haber un punto focal. Al igual que en la vida real, el ojo solo puede centrarse en una cosa a la vez, los usuarios no pueden centrarse en varios lugares simultáneamente.

Para convertir un elemento de interfaz de usuario en el punto focal, puede darle énfasis visual mediante:

  • Colocándolo en la parte superior izquierda o superior central de la superficie.
  • Usar controles interactivos que son importantes y comprensibles fácilmente.
  • Usar texto destacado, como una instrucción principal.
  • Proporcionar los controles la selección predeterminada y el foco de entrada inicial.
  • Colocación de los controles en un fondo de color diferente.

Considere la posibilidad de Windows Búsqueda. El punto focal de Windows Búsqueda debe ser el cuadro Buscar porque es el punto inicial de la tarea. Sin embargo, se encuentra en la esquina superior derecha para ser coherente con la ubicación estándar del cuadro de búsqueda. El cuadro De búsqueda tiene el foco de entrada, pero dada su ubicación en la ruta de acceso del examen, esa pista por sí sola no es suficiente.

Para solucionar este problema, hay instrucciones destacadas en la parte superior central de la ventana para dirigir a los usuarios a la ubicación correcta.

Aceptable:

screen shot of search dialog box with helpful text

En este ejemplo, una instrucción destacada en la parte superior central de la ventana dirige a los usuarios al cuadro Buscar.

Sin las instrucciones, la ventana no tendría un punto focal obvio.

Incorrecto:

screen shot of search dialog box with no text

Este ejemplo no tiene ningún punto focal obvio. Los usuarios no saben dónde buscar.

Si hace hincapié visual en un elemento de la interfaz de usuario, asegúrese de que se garantiza la atención. En el ejemplo anterior incorrecto Windows Búsqueda, el botón Todo resaltado está en la esquina superior izquierda y tiene el énfasis más visual, pero no es el punto focal previsto. Es posible que los usuarios se bloquee mirando este botón tratando de averiguar qué hacer con él.

Incorrecto:

screen shot of highlighted all button

Sin la instrucción prominente como punto focal, el botón Todo resaltado es un punto focal involuntaria.

Flujo

Un diseño tiene flujo cuando los usuarios se guían sin problemas y naturalmente por una ruta clara a través de su superficie, buscando elementos de la interfaz de usuario en el orden adecuado para su uso. Una vez que los usuarios identifiquen el punto focal, deben determinar cómo completar la tarea. La colocación de los elementos de la interfaz de usuario transmite su relación y debe reflejar los pasos para realizar la tarea. Normalmente, esto significa que los pasos de la tarea deben fluir naturalmente en un orden de izquierda a derecha, de arriba a abajo (en referencias culturales occidentales).

Sabe que un diseño tiene un buen flujo cuando:

  • La colocación de los elementos de la interfaz de usuario refleja los pasos que los usuarios necesitan para realizar la tarea.
  • Los elementos de la interfaz de usuario que inician una tarea se encuentran en la esquina superior izquierda o en el centro superior.
  • Los elementos de la interfaz de usuario que completan una tarea se encuentran en la esquina inferior derecha.
  • Los elementos relacionados de la interfaz de usuario están juntos; los elementos no relacionados son independientes.
  • Los pasos necesarios están en el flujo principal.
  • Los pasos opcionales están fuera del flujo principal, posiblemente desconcentados mediante una divulgación progresiva o en segundo plano adecuada.
  • Los elementos usados con frecuencia aparecen antes de usar elementos con poca frecuencia en la ruta de acceso del examen.
  • Los usuarios siempre saben qué hacer a continuación. No hay saltos ni interrupciones inesperados en el flujo de tareas.

Incorrecto:

screen shot of confusing dialog box layout

En este ejemplo, los usuarios no saben qué hacer a continuación. Hay saltos inesperados y saltos en el flujo de tareas.

Correcto:

screen shot of a well-planned dialog box

En este ejemplo, la presentación de los elementos de la interfaz de usuario refleja los pasos para realizar la tarea.

Agrupar

Un diseño tiene agrupación cuando los elementos de interfaz de usuario relacionados lógicamente tienen una relación visual clara. Los grupos son importantes porque es más fácil para los usuarios comprender y centrarse en un grupo de elementos relacionados que los elementos individualmente. Los grupos hacen que un diseño sea más sencillo y fácil de analizar.

Puede mostrar la agrupación de las siguientes maneras (en aumento de la pesadez):

  • Diseño. Puede agrupar controles relacionados junto a otros y colocar espaciado adicional entre controles no relacionados.

    figure of four icons showing four groups of tasks

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

  • Separadores. Un separador es una línea horizontal o vertical que unifica un grupo de controles. Los separadores proporcionan un aspecto más sencillo y limpio. Sin embargo, a diferencia de los cuadros de grupo, funcionan mejor cuando abarcan toda la superficie.

    screen shot of three icons and three separators

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

  • Agregadores. Un agregador es un gráfico que crea una relación visual entre controles muy relacionados.

    screen shot of controls inside an elliptical line

    En este ejemplo, se usa un agregador de límites para resaltar la relación entre los controles y hacer que parezcan un único control en lugar de ocho.

  • Cuadros de grupo. Un cuadro de grupo es un marco rectangular etiquetado que rodea un conjunto de controles relacionados.

    screen shot of check boxes in a rectangular border

    En este ejemplo, un cuadro de grupo rodea y etiqueta un conjunto de controles relacionados.

  • Fondos. Puede usar fondos para resaltar o desacentar diferentes tipos de contenido.

    screen shot of left side of control panel

    En este ejemplo, el panel de tareas del panel de control se usa para agrupar tareas relacionadas y elementos del panel de control.

    Para evitar desorden visual, la agrupación de peso más ligera que hace el trabajo bien es la mejor opción. Para obtener más información, vea Cuadros de grupo, pestañas, separadores y fondos.

Independientemente del estilo de agrupación, puede usar sangría para mostrar la relación de los controles dentro de un grupo. Los controles que son del mismo nivel entre sí deben estar alineados a la izquierda y los controles dependientes tienen una sangría de 12 DTU o 18 píxeles relativos.

screen shot of three levels of indented controls

Los controles dependientes tienen una sangría de 12 DLUS o 18 píxeles relativos, que por diseño son la distancia entre casillas y botones de radio de sus etiquetas.

Sabe que un diseño tiene una buena agrupación cuando:

  • La ventana o páginas tiene como máximo 7 grupos.
  • El propósito de cada grupo es obvio.
  • La relación de los controles dentro de cada grupo es obvia, especialmente la dependencia de control.
  • La agrupación simplifica el contenido en lugar de hacerlo más complejo.

Alignment

La alineación es la ubicación coordinada de los elementos de la interfaz de usuario. La alineación es importante porque facilita el examen del contenido y afecta a la percepción de los usuarios de la complejidad visual.

Hay varios objetivos que se deben tener en cuenta al determinar la alineación:

  • Facilidad en el escaneo horizontal. Los usuarios pueden leer horizontalmente y buscar elementos relacionados entre sí, sin espacios incómodos.
  • Facilidad en el escaneo vertical. Los usuarios pueden examinar columnas de elementos relacionados y encontrar inmediatamente lo que buscan, con un movimiento ocular horizontal mínimo.
  • Complejidad visual mínima. Los usuarios perciben que un diseño es visualmente complejo si tiene líneas de cuadrícula de alineación vertical innecesarias.

Alineación horizontal

Alineación izquierda

Debido al orden de lectura de izquierda a derecha, la alineación izquierda funciona bien para la mayoría de los contenidos. La alineación izquierda facilita el examen vertical de los datos en columnas.

Alineación derecha

La alineación correcta es la mejor opción para los datos numéricos, especialmente las columnas de datos numéricos. La alineación derecha también funciona bien para los botones de confirmación , así como para los controles alineados con el borde derecho de la ventana.

screen shot of advanced search down-arrow button

En este ejemplo, el control de divulgación progresiva de búsqueda avanzada está alineado a la derecha porque se coloca en el borde derecho de la ventana.

Alineación del centro

La alineación central está mejor reservada para situaciones en las que la alineación izquierda o derecha no es adecuada o aparece desequilibrada.

screen shot of centered media player controls

En este ejemplo, el control del reproductor multimedia se centra para proporcionar una apariencia equilibrada.

No centre el contenido de la ventana solo para rellenar el espacio.

Incorrecto:

screen shot of a window with too much white space

En este ejemplo, el contenido se centra incorrectamente en una ventana redimensionable para rellenar el espacio.

Alineación vertical

Tops de elementos

Debido al orden de lectura de arriba a abajo, la alineación superior funciona bien para la mayoría de los contenidos. La alineación superior facilita el examen horizontal de los elementos de la interfaz de usuario.

Líneas base de texto

Al alinear verticalmente los controles con texto, alinee las líneas base de texto para proporcionar un flujo de lectura horizontal suave.

Correcto:

screen shot of button and label text aligned

Incorrecto:

screen shot of button and label text not aligned

En el ejemplo correcto, el control y su etiqueta están alineados verticalmente por sus líneas base de texto.

Sabe que un diseño tiene una buena alineación cuando:

  • Es fácil escanear horizontal y verticalmente.
  • Tiene un aspecto visual sencillo.

Alineación de etiquetas

Las reglas de alineación generales se aplican a las etiquetas de control, pero es un problema común digno de atención específica. La alineación de etiquetas tiene estos objetivos:

  • Facilidad en el escaneo vertical para encontrar el control correcto.
  • Facilitar el examen horizontal para asociar etiquetas a sus controles.
  • Facilidad en la localización, control de etiquetas que difieren en longitud entre idiomas.
  • Funciona bien con una mezcla de diferentes longitudes de etiqueta.
  • Hace un uso eficaz del espacio disponible al mismo tiempo que evita el texto truncado.

El objetivo general es reducir la cantidad de movimiento ocular necesario para encontrar lo que es probable que los usuarios busquen, pero la naturaleza de los controles y lo que los usuarios buscan dependen del contexto.

Hay cuatro estilos comunes de colocación y alineación de etiquetas, cada uno con sus ventajas:

  • Etiquetas justificadas a la izquierda por encima de los controles
  • Etiquetas justificadas a la izquierda de controles
  • Etiquetas justificadas a la izquierda de controles, controles irregulares a la izquierda
  • Etiquetas justificadas a la derecha a la izquierda de controles

Etiquetas justificadas a la izquierda por encima de los controles

Este estilo es el más fácil de localizar porque el diseño no depende de la longitud de las etiquetas, pero toma el espacio más vertical.

list with two columns of labels above controls

Este estilo toma el espacio más vertical, pero es más fácil localizar. Es una mejor opción para etiquetar principalmente controles interactivos.

Se usa mejor cuando:

  • Los controles que se etiquetan son interactivos (no solo texto).
  • La interfaz de usuario se localizará. Este estilo a menudo ofrece habitación doble o incluso triple la longitud de la etiqueta.
  • La interfaz de usuario usa una tecnología de diseño fija (como Win32).
  • Hay diez o menos controles. Con más controles, las etiquetas son difíciles de examinar.
  • Hay suficiente espacio vertical para acomodar las etiquetas.
  • El diseño debe ser de forma libre, no solo columnas.

Etiquetas justificadas a la izquierda de controles

Este estilo es el más fácil de examinar verticalmente y también funciona bien cuando las etiquetas difieren considerablemente en longitud, pero es más difícil asociar la etiqueta con su control. Este estilo puede usar etiquetas de varias líneas si es necesario.

list with four columns of labels left of controls

Este estilo funciona bien. Sin embargo, hay dos columnas, pero visualmente parece que hay cuatro que hacen que los datos aparezcan más complejos.

Se usa mejor cuando:

  • Es probable que los usuarios examinen verticalmente para encontrar etiquetas específicas.
  • Es probable que los usuarios lean las etiquetas y los controles de una manera de izquierda a derecha y de arriba abajo.
  • Hay suficiente espacio horizontal para acomodar las etiquetas.
  • Las etiquetas varían significativamente en longitud.
  • Hay muchos controles, como con formularios.
  • Hay pocas columnas. Visualmente, las etiquetas y los controles aparecen como dos columnas individuales.

Etiquetas justificadas a la izquierda de controles, controles irregulares a la izquierda

Este estilo facilita el examen de las etiquetas verticalmente y las etiquetas y los controles horizontalmente, y es muy eficiente en el espacio; pero es más difícil examinar los controles verticalmente. Los controles están justificados a la derecha para aprovechar al máximo el espacio disponible.

list of two columns of labels with ragged controls

Este estilo es compacto y fácil de leer, pero es difícil examinar los controles verticalmente.

Se usa mejor cuando:

  • La interfaz de usuario usa una tecnología de diseño variable (como Windows Presentation Foundation).
  • Es probable que los usuarios examinen verticalmente para encontrar etiquetas específicas.
  • Es probable que los usuarios lean las etiquetas y los controles de una manera de izquierda a derecha, de arriba a abajo.
  • Es probable que los usuarios examinen los controles verticalmente.
  • El texto del control varía en longitud y probablemente se truncaría si se usara otro estilo.
  • Los controles son de solo lectura, como cuadros de texto de solo lectura. En el caso de otros controles, esta alineación tendrá un aspecto descuidado. Sin embargo, los controles pueden ser editables al hacer clic.
  • Hay muchas columnas, pero pocos controles en una columna.

Etiquetas justificadas a la derecha a la izquierda de controles

Este estilo es el más fácil de leer horizontalmente para asociar las etiquetas a sus controles, pero es difícil examinar las etiquetas verticalmente y no funciona bien cuando labelsList con etiquetas y controles con sangría difieren en gran medida.

list with indented labels and controls

Este estilo permite un análisis vertical sencillo de los controles, pero dificulta el examen vertical de las etiquetas.

Se usa mejor cuando:

  • Es probable que los usuarios lean las etiquetas y los controles de una manera de izquierda a derecha, de arriba a abajo.
  • Es probable que los usuarios no examinen verticalmente para encontrar etiquetas específicas, posiblemente porque:
    • Hay pocos controles.
    • Las etiquetas son conocidas.
    • Los controles son principalmente autoexplicativos y rara vez están en blanco (posiblemente tienen valores predeterminados para evitar controles en blanco).
  • Hay suficiente espacio horizontal para acomodar las etiquetas.
  • Las etiquetas no varían significativamente en longitud.
  • Hay muchas columnas. Visualmente, las etiquetas y los controles aparecen como una sola columna.

Sin embargo, antes de adoptar cualquiera de estos estilos, tenga en cuenta dos factores más:

  • Prefiere un estilo que pueda usar de forma coherente en todo el programa.
  • Las etiquetas justificadas a la izquierda, ya sea por encima de los controles a la izquierda de los controles, son los estilos más comunes, por lo que deben tener preferencia.

Saldo

Una ventana o página tiene equilibrio cuando su contenido aparece uniformemente distribuido entre su superficie. Si la superficie físicamente tuviera la misma ponderación que tiene visualmente, un diseño equilibrado no se inclinaría hacia un lado.

El problema de equilibrio más común es tener demasiado contenido en el lado izquierdo de una ventana o página. Puede crear equilibrio de las siguientes maneras:

  • Usar márgenes más grandes en el lado izquierdo que el derecho.
  • Colocación de elementos de interfaz de usuario usados para completar una tarea a la derecha.
  • Colocación de elementos de interfaz de usuario usados en toda la tarea en el centro.
  • Alargando controles redimensionables o de varias líneas.
  • Uso de la alineación central estratégicamente.

screen shot of printer on left and text on right

Este diseño de página del asistente bien equilibrado muestra un margen izquierdo mayor que el derecho para mejorar el equilibrio.

Si estas técnicas no logran el equilibrio, considere la posibilidad de reducir el ancho de la ventana o página para que coincida mejor con su contenido.

Para superficies redimensionables, no centre el contenido solo para lograr el equilibrio. En su lugar, mantenga un origen superior izquierdo fijo, defina un área expuesta máxima y equilibre el contenido dentro del espacio utilizado.

Cuadrículas

Una cuadrícula es un sistema de alineación subyacente invisible. Las cuadrículas pueden ser simétricas, pero las cuadrículas asimétricas también funcionan. Cuando se usa en una sola ventana o página, las cuadrículas ayudan a organizar el contenido dentro de una superficie. Cuando se reutiliza, las cuadrículas crean un diseño coherente entre superficies.

El número de líneas de cuadrícula afecta a la percepción de la complejidad visual. Un diseño con menos líneas de cuadrícula parece más sencillo que un diseño con más líneas de cuadrícula.

Visualmente complejo:

screen shot of cluttered dialog box

Visualmente simple:

screen shot of organized dialog box

Las líneas de cuadrícula innecesarias crean complejidad visual.

Sabe que un diseño usa cuadrículas de forma eficaz cuando:

  • Windows o páginas con contenido o función similares tienen un diseño similar.
  • Los elementos de diseño repetidos aparecen en ubicaciones similares entre ventanas y páginas.
  • No hay líneas de cuadrícula de alineación vertical y horizontal innecesarias.

Simplicidad visual

La simplicidad visual es la percepción de que un diseño no es más complicado de lo que debe ser.

Sabe que un diseño tiene simplicidad visual cuando:

  • Elimina capas innecesarias de cromo de ventana.
  • Presenta el contenido mediante, como máximo, siete grupos fácilmente identificables.
  • Usa la agrupación ligera, como el diseño y los separadores en lugar de cuadros de grupo.
  • Usa controles ligeros, como vínculos en lugar de botones de comando para comandos secundarios y listas desplegables en lugar de listas para opciones.
  • Reduce el número de líneas de cuadrícula de alineación vertical y horizontal.
  • Reduce el número de tamaños de control, por ejemplo, usando solo uno o dos anchos de botón de comando en una superficie.
  • Usa la divulgación progresiva para ocultar los elementos de la interfaz de usuario hasta que sean necesarios.
  • Usa espacio suficiente para que la ventana o la página no se sientan estrechas.
  • Cambia los tamaños de las ventanas y los controles adecuadamente para eliminar el desplazamiento innecesario.
  • Usa una sola fuente con un pequeño número de tamaños y colores de texto.

Como regla general, si se puede eliminar un elemento de diseño sin dañar la eficacia de la interfaz de usuario, probablemente debería ser.

Directrices

Resolución de pantalla y ppp

  • Admita la resolución mínima Windows efectiva de 800 x 600 píxeles. Para las interfaces de usuario críticas que deben funcionar en modo seguro, admita una resolución eficaz de 640 x 480 píxeles. Asegúrese de tener en cuenta el espacio utilizado por la barra de tareas reservando 48 píxeles relativos verticales para ventanas mostradas con la barra de tareas.
  • Optimice los diseños de ventana redimensionables para una resolución eficaz de 1024 x 768 píxeles. Cambie automáticamente el tamaño de estas ventanas para resoluciones de pantalla inferiores de una manera que sigue funcionando.
  • Asegúrese de probar las ventanas en 96 puntos por pulgada (ppp) (a 800 x 600 píxeles), 120 ppp (a 1024 x 768 píxeles) y 144 ppp (en 1200 x 900 píxeles). Compruebe si hay problemas de diseño, como el recorte de controles, texto y ventanas, y la extensión de iconos y mapas de bits.
  • Para programas con escenarios de uso táctil y móvil, optimice para 120 ppp. Actualmente, las pantallas con valores altos de ppp son frecuentes en equipos táctiles y móviles.

Tamaño de la ventana

  • Elija un tamaño de ventana predeterminado adecuado para su contenido. No tenga miedo de usar tamaños de ventana inicial más grandes si puede usar el espacio de forma eficaz.
  • Use una altura equilibrada para la relación de aspecto de ancho. Se prefiere una relación de aspecto entre 3:5 y 5:3, aunque se puede usar una relación de aspecto de 1:3 para cuadros de diálogo de mensaje (como errores y advertencias).
  • Use ventanas de tamaño redimensionable siempre que sea práctico para evitar barras de desplazamiento y datos truncados. Windows con contenido dinámico, documentos, imágenes, listas y árboles se benefician más de ventanas de tamaño redimensionable.
  • En el caso de los documentos de texto, considere una longitud máxima de línea de 80 caracteres para facilitar la lectura del texto. (Los caracteres incluyen letras, signos de puntuación y espacios).
  • Ventanas de tamaño fijo:
    • Las ventanas de tamaño fijo deben ser completamente visibles y de tamaño para ajustarse al área de trabajo.
  • Ventanas de tamaño redimensionable:
    • Las ventanas de tamaño redimensionable se pueden optimizar para resoluciones más altas, pero se reducen según sea necesario en tiempo de visualización a la resolución de pantalla real.

    • Los tamaños de ventana progresivamente más grandes deben mostrar progresivamente más información. Asegúrese de que al menos una parte o control de ventana tiene contenido redimensionable.

    • Mantenga el origen superior izquierdo del contenido fijo a medida que se cambia el tamaño de la ventana. No mueva el origen para equilibrar el contenido a medida que cambia el tamaño de la ventana.

    • Establezca un tamaño de contenido máximo si el contenido puede ser demasiado extendido demasiado ancho. Si el contenido deja de ser dinámico, no cambie el tamaño del área de contenido más allá de su ancho máximo o cambie el origen del contenido a medida que se cambie el tamaño de la ventana. En su lugar, mantenga un ancho máximo y un origen superior izquierdo fijo.

    • Establezca un tamaño de ventana mínimo si hay un tamaño por debajo del cual el contenido ya no se puede usar. En el caso de los controles de tamaño redimensionable, establezca tamaños mínimos de elemento redimensionables en sus tamaños funcionales más pequeños, como los anchos de columna funcional mínimos en las vistas de lista. Los elementos opcionales de la interfaz de usuario deben quitarse completamente.

    • Considere la posibilidad de modificar la presentación para que el contenido se pueda usar con tamaños más pequeños.

      screen shot of media player controls

      En este ejemplo, Reproductor multimedia de Windows cambia su formato cuando la ventana se vuelve demasiado pequeña para el formato estándar.

Tamaño del control

  • Convierta todos los controles interactivos al menos en 16 x 16 píxeles. Esto funciona bien para todos los dispositivos de entrada, incluidos Tecnología táctil y Tablet PC de Windows.

  • Controles de tamaño para evitar datos truncados. No truncar los datos que se deben leer para realizar una tarea. Columnas de vista de lista de tamaño para evitar datos truncados.

  • Controles de tamaño para eliminar el desplazamiento innecesario. Haga que los controles sean ligeramente más grandes si lo hace, elimina una barra de desplazamiento. Debe haber pocas barras de desplazamiento verticales y ninguna barra de desplazamiento horizontal innecesaria.

    screen shot of list sized to avoid a scrollbar

    En este ejemplo, se ajusta el tamaño de la lista desplegable para eliminar la barra de desplazamiento.

  • Reduzca el número de tamaños de control en una superficie. Prefiere usar los tamaños de control recomendados estándar y, cuando sea necesario, use algunos controles más grandes o más pequeños de tamaño coherente. Intente usar un ancho único para cuadros de lista y vistas de árbol, y no más de tres anchos para botones de comandos y listas desplegables. Sin embargo, el cuadro de texto y los anchos del cuadro combinado deben sugerir la longitud de su entrada más larga o esperada.

    screen shot of dialog box with lists and buttons

    En este ejemplo, se usa de forma coherente un cuadro de lista y un tamaño de botón de comando.

  • En el caso de los controles que tienen un tamaño basado en su texto, incluya un 30 % adicional (hasta un 200 % para texto más corto) para cualquier texto que se localice. En esta guía se supone que el diseño está diseñado con texto en inglés. Tenga en cuenta también que esta guía hace referencia al texto localizado, no a los números.

  • Amplíe los controles de texto estáticos, las casillas de verificación y los botones de radio al ancho máximo que caberá en el diseño. De este modo, se evita el truncamiento del texto y la localización de longitud variable.

    Incorrecto:

    screen shot of progress control and partial text

    En este ejemplo, el texto del control se trunca innecesariamente.

Espaciado de control

  • Si los controles no se tocan, tienen al menos 3 DTU (5 píxeles relativos) de espacio entre ellos. De lo contrario, los usuarios pueden hacer clic en espacio inactivo entre los controles. Dado que hacer clic en espacio inactivo no tiene ningún resultado o comentarios visuales, los usuarios a menudo no están seguros de lo que salió mal.

Selección de ubicación

  • Organice los elementos de la interfaz de usuario dentro de una superficie para fluir naturalmente en un orden de izquierda a derecha, de arriba a abajo (en referencias culturales occidentales). La colocación de los elementos de la interfaz de usuario transmite su relación y debe reflejar los pasos para realizar la tarea.
  • Coloque los elementos de la interfaz de usuario que inician una tarea en la esquina superior izquierda o en el centro superior. Asigne al elemento de la interfaz de usuario que los usuarios vean primero el mayor énfasis visual.
  • Coloque los elementos de la interfaz de usuario que completan una tarea en la esquina inferior derecha.
  • Coloque los elementos de interfaz de usuario relacionados juntos y los elementos no relacionados independientes.
  • Coloque los pasos necesarios en el flujo principal.
  • Coloque los pasos opcionales fuera del flujo principal, posiblemente desaconseje mediante una divulgación progresiva o en segundo plano adecuada.
  • Coloque los elementos usados con frecuencia antes de los elementos que se usan con poca frecuencia en la ruta de acceso del examen.

Foco

  • Elija un único elemento de interfaz de usuario que los usuarios necesiten examinar primero para ser el punto focal. El punto focal debe ser algo importante que los usuarios necesitan encontrar y comprender rápidamente.
  • Coloque el punto focal en la esquina superior izquierda o en el centro superior.
  • Asigne al punto focal el mayor énfasis visual, como texto destacado, selección predeterminada o foco de entrada inicial.

Alignment

  • Normalmente, use la alineación izquierda.
  • Use la alineación correcta para los datos numéricos, especialmente las columnas de datos numéricos.
  • Use la alineación adecuada para los botones de confirmación, así como los controles alineados con el borde derecho de la ventana.
  • Use la alineación central cuando la alineación izquierda o derecha sea inadecuada o aparezca desequilibrada.
  • Al alinear verticalmente los controles con texto, alinee las líneas base de texto para proporcionar un flujo de lectura horizontal suave.
  • Para la alineación de etiquetas, consulte la sección Alineación de etiquetas en Conceptos de diseño.

Accesibilidad

  • No use el diseño como único medio para transmitir información importante sobre una interfaz de usuario. Es posible que los usuarios con discapacidades visuales no puedan interpretar esta presentación. Por ejemplo, asegúrese de que las etiquetas de los controles comunican su relación con otros elementos.

  • No inserte controles subordinados dentro de las etiquetas de control para crear una frase o frase. Estas asociaciones se basan exclusivamente en el diseño y no se controlan bien mediante la navegación por teclado o las tecnologías de asistencia de accesibilidad. Además, esta técnica no es localizable porque la estructura de oraciones varía con el lenguaje.

    Incorrecto:

    screen shot of a text box in middle of a sentence

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

    Correcto:

    screen shot of a text box at the end of a sentence

    Aquí, el cuadro de texto se coloca después de la etiqueta de casilla.

  • Hacer que la agrupación sea accesible. Los grupos definidos por paneles de ventana, cuadros de grupo, separadores, etiquetas de texto y agregadores se controlan automáticamente mediante ayudas de accesibilidad. Sin embargo, los grupos definidos solo por ubicación y fondos no son y deben definirse mediante programación para la accesibilidad.

Para obtener más instrucciones, consulte Accesibilidad.

Ajuste de tamaño del control

En la tabla siguiente se enumeran los tamaños recomendados (ancho x alto o alto si un número único) para los elementos comunes de la interfaz de usuario (para 9 pt. Segoe UI a 96 ppp). Los anchos basados en el elemento más largo en inglés agregan un 30 por ciento para la localización (hasta un 200 por ciento para texto más corto) para cualquier texto (pero no números) que se localice.

Ejemplo Control Unidades de diálogo Píxeles relativos
screen shot of check boxes and their labels
Casillas
10
17
screen shot of combo box
Cuadros combinados
ancho del elemento más largo + 30% x 14
ancho del elemento más largo + 30% x 23
screen shot of a command button
Botones de comando
50 x 14
75 x 23
screen shot of one of two command links selected
Vínculos de comandos
25 (una línea) o 35 (dos líneas)
41 (una línea) o 58 (dos líneas)
screen shot of a drop-down list
Listas desplegables
ancho de datos válidos más largos + 30% x 14
ancho del elemento más largo + 30% x 23
screen shot of a list box
Cuadros de lista
ancho del elemento más largo + 30 % x un número entero de elementos (3 elementos como mínimo)
screen shot of a list of picture files
Vistas de lista
anchos de columnas que evitan datos truncados x un número entero de elementos
screen shot of a progress bar
Barras de progreso
107 o 237 x 8
160 o 355 x 15
screen shot of radio buttons
Botones de radio
10
17
screen shot of slider control
Controles deslizantes
15
24
screen shot of text: 'select time zone'
Texto (estático)
8
13
screen shot of empty text box
Cuadros de texto
ancho de entrada más larga o esperada + 30 % x 14 (una línea) + 10 para cada línea adicional
ancho de datos válidos más largos + 30% x 23 píxeles relativos (una línea) + 16 para cada línea adicional
screen shot of nested folders in windows explorer
Vistas de árbol
ancho del elemento más largo + 30 % x un número entero de elementos (5 elementos como mínimo)

Espaciado

En la tabla siguiente se muestra el espaciado recomendado entre los elementos comunes de la interfaz de usuario (para 9 pt. Segoe UI a 96 ppp).

  Elemento Unidades de diálogo Píxeles relativos
Image showing spacing in dialog box margins
Márgenes del cuadro de diálogo
7 en todos los lados
11 en todos los lados
Image showing spacing between labels and controls
Entre las etiquetas de texto y sus controles asociados (por ejemplo, cuadros de texto y cuadros de lista)
3
5
Image showing spacing between related controls
Entre controles relacionados
4
7
Image showing spacing between unrelated controls
Entre controles no relacionados
7
11
Image showing spacing of first control in a group
Primer control de un cuadro de grupo
11 abajo desde la parte superior del cuadro de grupo; alinear verticalmente con el título del cuadro de grupo
16 abajo desde la parte superior del cuadro de grupo; alinear verticalmente con el título del cuadro de grupo
Aa511279.between-related(en-us,MSDN.10).jpg
Entre controles de un cuadro de grupo
4
7
Image showing spacing between buttons
Entre botones organizados horizontal o verticalmente
4
7
Image showing spacing of last control in a group
Último control de un cuadro de grupo
7 encima de la parte inferior del cuadro de grupo
11 encima de la parte inferior del cuadro de grupo
Image showing spacing from left edge of group box
Desde el borde izquierdo de un cuadro de grupo
6
9
Image showing spacing of text label beside control
Etiqueta de texto junto a un control
3 abajo desde la parte superior del control
5 abajo desde la parte superior del control
Image showing spacing between paragraphs of text
Entre párrafos de texto
7
11
Espacio más pequeño entre controles interactivos
3 o sin espacio
5 o sin espacio
Espacio más pequeño entre un control no interactivo y cualquier otro control
2
3