Controles de muestra progresiva

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 un control de divulgación progresiva, los usuarios pueden mostrar u ocultar información adicional, incluidos datos, opciones o comandos. La divulgación progresiva promueve la simplicidad centrándose en lo esencial, pero revelando detalles adicionales según sea necesario.

screen shot of progressive disclosure controls

Ejemplos de controles de divulgación progresiva.

Nota

Las directrices relacionadas con el diseño, los menús y las barras de herramientas se presentan en artículos independientes.

¿Es este el control adecuado?

Para decidirte, intenta responder a estas preguntas:

  • ¿Los usuarios necesitan ver la información en algunos escenarios, pero no en todos, o en algunos, pero no en todo el tiempo? Si es así, mostrar la información mediante divulgación progresiva simplifica la experiencia de línea base, pero permite a los usuarios acceder fácilmente a la información.

    screen shot that shows the Windows Security app status display

    En este ejemplo, la aplicación Seguridad de Windows muestra el estado de seguridad importante todo el tiempo, pero usa la divulgación progresiva para mostrar los detalles a petición.

  • Si la información se muestra de forma predeterminada, ¿es probable que los usuarios decidan ocultarla? ¿Hay escenarios en los que los usuarios necesitarán más espacio? ¿Los usuarios están suficientemente motivados para personalizar la interfaz de usuario (UI)? Si no es así, muestre la información sin usar la divulgación progresiva.

    Incorrecto:

    screen shot of data choices displayed by default

    En este ejemplo, los usuarios no estarán motivados para ocultar la información.

  • ¿La información adicional está avanzada, sustancial, compleja o relacionada con una subtarea independiente? Si es así, considere la posibilidad de mostrar la información en una ventana independiente mediante botones de comando o vínculos en lugar de usar un control de divulgación progresiva. (La información adicional está avanzada si está pensada para usuarios avanzados. Es complejo si hace que otra información sea difícil de leer o diseñar).

    screen shot of do you want to run this file?

    En este ejemplo, la información sobre el nombre y el publicador del software es significativa principalmente para los usuarios avanzados, por lo que se usan vínculos a ventanas independientes.

  • ¿Es la información adicional un fragmento de oración o frase que describe qué hace un elemento o cómo se puede usar? Si es así, considere la posibilidad de usar una información sobre herramientas o información.

  • ¿La información adicional está relacionada con la tarea actual, pero es independiente de la información mostrada actualmente? Si es así, considere la posibilidad de usar pestañas en su lugar. Sin embargo, las listas contraíbles suelen ser preferibles a las pestañas porque son más flexibles y escalables.

  • ¿Se muestra u oculta la información adicional básicamente un filtro de datos? Si es así, considere la posibilidad de usar una lista desplegable o casillas en su lugar para aplicar el filtro a toda la lista.

Conceptos de diseño

Los objetivos de divulgación progresiva son:

  • Simplifique una interfaz de usuario centrándose en lo esencial, pero revelando detalles adicionales según sea necesario.
  • Simplifique la apariencia de una interfaz de usuario reduciendo la percepción del desorden.

Ambos objetivos se pueden lograr mediante controles de divulgación progresiva, donde los usuarios hacen clic para ver más detalles. Sin embargo, puede lograr el segundo objetivo de simplificar la apariencia sin usar controles explícitos de divulgación progresiva mediante:

  • Mostrar detalles contextuales solo en contexto. Por ejemplo, puede mostrar automáticamente comandos o barras de herramientas contextuales cuando sea relevante para el objeto o modo seleccionado.

  • Reducir el peso de las prestaciones de la interfaz de usuario secundaria.Las prestaciones son propiedades visuales que sugieren cómo se usan los objetos. La tendencia es tener una interfaz de usuario con la que los usuarios puedan interactuar en su lugar, pero para que toda esa interfaz de usuario se dibuje para gritar "hacer clic en mí!" conduce a demasiado desorden visual. En el caso de la interfaz de usuario secundaria, a menudo es mejor usar prestaciones sutiles y dar los efectos completos sobre el mouse.

    screen shot of star icons used to rate photos

    En este ejemplo, el campo Clasificación es interactivo, pero no aparece hasta que el mouse mantenga el puntero.

  • Mostrar los pasos de seguimiento solo después de que se realicen los requisitos previos. Este enfoque se usa mejor con tareas conocidas en las que los usuarios pueden realizar con confianza los primeros pasos.

    screen shot of user-name and password text boxes

    En este ejemplo, la página nombre de usuario y contraseña muestra inicialmente solo los cuadros de nombre de usuario y contraseña opcional. Los cuadros de confirmación y sugerencia se muestran después de que el usuario escriba una contraseña.

Aunque la divulgación progresiva es una excelente manera de simplificar las interfaces de usuario, tiene estos riesgos:

  • Falta de detectabilidad. Los usuarios pueden suponer que si no pueden ver algo, no existe. Es posible que los usuarios no mantenga el puntero o haga clic si no ven lo que están buscando. Siempre existe la posibilidad de que los usuarios no hagan clic en cosas como Más opciones.
  • Falta de estabilidad. Se debe esperar una divulgación progresiva o, al menos, sentir natural. Si los controles aparecen y desaparecen inesperadamente, la interfaz de usuario resultante puede sentirse inestable.

Controles de divulgación progresiva

Normalmente, los controles de divulgación progresiva se muestran sin etiquetas directas que describen su comportamiento, por lo que los usuarios deben poder hacer lo siguiente en función de la apariencia visual del control por sí sola:

  • Reconozca que el control proporciona divulgación progresiva.
  • Determine si el estado actual está expandido o contraído.
  • Determine si se necesita información adicional, opciones o comandos para realizar la tarea.
  • Determine cómo restaurar el estado original, si lo desea.

Aunque los usuarios pueden determinar lo anterior por prueba y error, debe intentar hacer que dicha experimentación no sea necesaria.

Los controles de divulgación progresiva tienen una prestación bastante débil, lo que significa que sus propiedades visuales sugieren cómo se usan, aunque débilmente. En la tabla siguiente se compara la apariencia de los controles comunes de divulgación progresiva:

Control Propósito Aspecto Glifo indica
Galones
screen shot of left/right and up/down chevrons
Mostrar todo: Muestre u oculte los elementos restantes en contenido completamente o parcialmente oculto. Los elementos se muestran en su lugar (con un solo botón de contenido adicional) o en un menú emergente (con un botón de contenido adicional doble).
Los comillas angulares apuntan en la dirección en la que se producirá la acción.
Estado futuro
Flechas
screen shot of left/right and up/down arrows
Mostrar opciones: Muestra un menú de comandos emergente.
Las flechas apuntan en la dirección en la que se producirá la acción.
Estado futuro
Controles más y menos
screen shot of two small plus and minus buttons
Expandir contenedores: Expanda o contraiga el contenido del contenedor en su lugar al navegar por una jerarquía.
Los símbolos más y menos no apuntan, pero la acción siempre se produce a su derecha.
Estado futuro
Triángulos giratorios
screen shot of two small triangles
Mostrar detalles: Mostrar u ocultar información adicional en su lugar para un elemento individual. También se usan para expandir contenedores.
Girar triángulos algo parecidos a las palancas giratorias, por lo que apuntan en la dirección en la que se ha producido la acción.
Estado actual

Si sólo haces una cosa...

Los usuarios deben poder predecir el comportamiento de un control de divulgación progresiva correctamente mediante la inspección por sí solo. Para ello, seleccione los patrones de uso adecuados y aplique su apariencia, ubicación y comportamiento de forma coherente.

Patrones de uso

Los controles de divulgación progresiva tienen varios patrones de uso. Algunos de ellos están integrados en controles comunes.

Galones

Los comillas angulares muestran u ocultan los elementos restantes en contenido completamente o parcialmente oculto. Normalmente, los elementos se muestran en su lugar, pero también se pueden mostrar en un menú emergente. Cuando está en su lugar, el elemento permanece expandido hasta que el usuario lo contrae.

Los comillas angulares se usan de las siguientes maneras:

Uso Ejemplo
Interfaz de usuario local
el objeto asociado recibe el foco de entrada y el único botón de contenido adicional se activa con la barra espaciadora.
screen shot of the Windows Security app status display
En estos ejemplos, los comillas angulares individuales en contexto se colocan a la derecha de su control asociado.
Botones de comando con etiquetas externas
El botón de comando recibe el foco de entrada y el botón de contenido adicional único se activa con la barra espaciadora.
screen shot of chevron with 'more options' label
En este ejemplo, el botón de contenido adicional único se etiqueta y se coloca a la izquierda de la etiqueta. Con este patrón, el botón sería difícil de entender sin su etiqueta.
Botones de comando con etiquetas internas
El botón de comando recibe el foco de entrada y se activa con la barra espaciadora.
screen shot of 'more' and 'less' command buttons
En estos ejemplos, los botones de comando normales tienen el doble botón de contenido adicional colocado para sugerir su significado.

Flechas

Las flechas muestran un menú de comandos emergente. El elemento permanece expandido hasta que el usuario realiza una selección o hace clic en cualquier lugar.

Si el botón de flecha es un control independiente, recibe el foco de entrada y se activa con la barra espaciadora. Si el botón de flecha tiene un control primario, el elemento primario recibe el foco de entrada y la flecha se activa con las teclas Alt+flecha abajo y Alt+flecha arriba, como con el control de lista desplegable.

Las flechas se usan de las siguientes maneras:

Uso Ejemplo
Botones independientes
la flecha está en un control de botón independiente.
screen shot of arrows to the right of controls
En estos ejemplos, los botones de flecha independientes situados a la derecha indican un menú de comandos.
Botones de comando
la flecha forma parte de un botón de comando.
screen shot of label and arrow on command button
En estos ejemplos, los botones de menú y los botones de división tienen las flechas situadas a la derecha del texto.

Controles más y menos

Los controles más y menos se expanden o contraen para mostrar el contenido del contenedor en su lugar al navegar por una jerarquía. El elemento permanece expandido hasta que el usuario lo contrae. Aunque estos parecen botones, su comportamiento está en contexto.

El objeto asociado recibe el foco de entrada. El signo más se activa con la tecla de flecha derecha y el signo menos con la tecla de flecha izquierda.

Los controles más y menos se usan de las siguientes maneras:

Uso Ejemplo
Árboles contraíbles
una jerarquía de varios niveles para mostrar el contenido del contenedor.
Screenshot that shows a Windows Explorer folder tree with 'Behavior' selected.
En este ejemplo, los controles más y menos se colocan a la izquierda del contenedor asociado.
Listas contraíbles
una jerarquía de dos niveles para mostrar el contenido del contenedor.
screen shot of list expanded to show two levels
En este ejemplo, los controles más y menos se colocan a la izquierda del encabezado de lista asociado.

Triángulos giratorios

Los triángulos giratorios muestran u ocultan información adicional en su lugar para un elemento individual. También se usan para expandir contenedores. El elemento permanece expandido hasta que el usuario lo contrae.

El objeto asociado recibe el foco de entrada. El triángulo contraído (que apunta a la derecha) se activa con la tecla de flecha derecha y el triángulo expandido (hacia abajo) con la tecla de flecha izquierda.

Los triángulos giratorios se usan de las siguientes maneras:

Uso Ejemplo
Árboles contraíbles
una jerarquía de varios niveles para mostrar el contenido del contenedor.
screen shot of windows explorer folder tree
En este ejemplo, los triángulos giratorios se colocan a la izquierda del contenedor asociado.
Listas contraíbles
una jerarquía de dos niveles para mostrar información adicional en su lugar.
screen shot of list displaying additional data
En este ejemplo, los triángulos giratorios se colocan a la izquierda de sus elementos de lista asociados.

Flechas de vista previa

Al igual que los comillas angulares, se muestra u oculta información adicional en su lugar. El elemento permanece expandido hasta que el usuario lo contrae. A diferencia de los comillas angulares, los glifos tienen una representación gráfica de la acción, normalmente con una flecha que indica lo que ocurrirá.

screen shot of arrow glyphs pointing diagonally

En estos ejemplos de Microsoft Reproductor de Windows Media, los glifos tienen flechas que sugieren la acción que ocurrirá.

Las flechas de vista previa están mejor reservadas para situaciones en las que un botón de contenido adicional estándar no comunica adecuadamente el comportamiento del control, como cuando la divulgación es compleja o hay más de un tipo de divulgación.

Directrices

General

  • Seleccione el patrón de divulgación progresiva en función de su uso. Para obtener una descripción de cada patrón de uso, consulte la tabla anterior.

  • No use vínculos para controles de divulgación progresiva. Use solo los controles de divulgación progresiva que se presentan en la sección Patrones de uso. Sin embargo, use vínculos para ir a temas de Ayuda.

    Correcto:

    screen shot of chevron with 'show mixer' label

    Incorrecto:

    screen shot of 'show mixer' link text

    En el ejemplo incorrecto, se usa un vínculo para mostrar más opciones en su lugar. Este uso sería correcto si el vínculo navegaba a otra página o cuadro de diálogo o mostraba un tema de Ayuda.

Interacción

  • En el caso de los botóns de contenido adicional y las flechas que no están etiquetadas directamente, use información sobre herramientas para describir lo que hacen.

    screen shot of 'expand the query builder' tooltip

    En este ejemplo, la información sobre herramientas indica el efecto de un control de contenido adicional sin etiquetar.

  • Si un usuario expande o contrae un elemento, haga que el estado persista para que surta efecto la próxima vez que se muestre la ventana, a menos que los usuarios prefieran comenzar en el estado predeterminado. Hacer que el estado persista por ventana, por usuario.

  • Asegúrese de que todo el contenido expandido se pueda contraer y viceversa, y que la operación inversa sea obvia. Al hacerlo se fomenta la exploración y se reduce la frustración. La mejor manera de hacer que la operación inversa sea obvia es mantener el control en la misma ubicación fija. Si necesita mover el control, manténgalo en la misma ubicación relativa dentro de un área visualmente distinta.

    Incorrecto:

    screen shot of 'replace' button with chevron

    screen shot of 'replace' button without chevron

    En este ejemplo, al hacer clic en el botón Reemplazar con el botón de contenido adicional se muestra el cuadro de texto Reemplazar por . Una vez hecho esto, el expansador Reemplazar se convierte en el comando Replace, por lo que no hay ninguna manera de restaurar el estado original.

  • Use solo las claves de acceso adecuadas para el patrón de divulgación progresiva, como se muestra en la sección Patrones de uso. No use Entrar para activar la divulgación progresiva.

Presentación

  • No utilice puntas de flecha con forma triangular para un propósito distinto de la divulgación progresiva.

    Incorrecto:

    screen shot of label with right-pointing triangle

    Aunque este ejemplo no es un patrón de divulgación progresiva, el uso de una flecha aquí sugiere que los comandos se mostrarán en una ventana emergente.

    Correcto:

    screen shot of label with bullet left of the text

    En este ejemplo, se usa correctamente una viñeta.

  • Quitar (no deshabilitar) controles de divulgación progresiva que no se aplican en el contexto actual. Los controles de divulgación progresiva siempre deben cumplir su promesa, por lo que eliminarlos cuando no haya más información que proporcionar.

    Incorrecto:

    screen shot of a dimmed 'more options' control

    En este ejemplo, un control de divulgación progresiva que no se aplica está deshabilitado incorrectamente.

Galones

  • Use comillas angulares simples para mostrar u ocultar en su lugar. Use comillas angulares dobles para mostrar u ocultar mediante un menú emergente. Sin embargo, siempre debe usar comillas angulares dobles para los botones de comando con etiquetas internas.

    Correcto:

    screen shot of single-chevron more options control

    Incorrecto:

    screen shot of double-chevron more options control

    En el ejemplo incorrecto, se usa un botón de contenido adicional doble para la divulgación progresiva en contexto.

    Correcto:

    screen shot of double-chevron more command button

    En este ejemplo, se usa un botón de contenido adicional doble para la divulgación progresiva en contexto porque es un botón de comando con una etiqueta interna.

  • Proporcione una relación visual entre el botón de contenido adicional y su control asociado. Dado que los botóns de contenido adicional en contexto se colocan a la derecha de su interfaz de usuario asociada y se alinean a la derecha, puede haber una distancia bastante entre un botón de contenido adicional y su control asociado.

    Correcto:

    screen shot of graduated shading behind controls

    En este ejemplo, hay una relación clara entre el botón de contenido adicional local y su interfaz de usuario asociada.

    Incorrecto:

    screen shot of solid-white background for controls

    En este ejemplo, no hay ninguna relación visual clara entre el botón de contenido adicional en contexto y su interfaz de usuario asociada, por lo que parece estar flotando en el espacio.

Flechas

  • No use gráficos de flechas que puedan confundirse con Atrás, Adelante, Go o Reproducir. Use puntas de flecha sencillas en forma triangular (flechas sin tallos) en fondos neutros.

    Correcto:

    screen shot of two small black triangles

    Estas flechas son controles de divulgación claramente progresivos.

    Incorrecto (para la divulgación progresiva):

    screen shot of two small green arrows

    Estas flechas no tienen un aspecto similar a los controles de divulgación progresiva.

    Incorrecto (para atrás, adelante):

    screen shot of two buttons with black triangles

    Estas flechas tienen un aspecto similar a los controles de divulgación progresiva, pero no lo son.

screen shot of recommended sizing and spacing

Ajuste de tamaño y espaciado recomendados para controles de divulgación progresiva.

Etiquetas

  • Para los botóns de contenido adicional en un botón de comando con una etiqueta externa:
    • Asigne una clave de acceso única. Para obtener instrucciones, consulte Teclado.
    • Use mayúsculas de estilo de oración.
    • Escriba la etiqueta como una frase y no use signos de puntuación finales.
    • Escriba la etiqueta para que describa el efecto de hacer clic en el botón y cambiar la etiqueta cuando cambie el estado.
    • Si la superficie siempre muestra algunas opciones, comandos o detalles, use los siguientes pares de etiquetas:
      • Más o menos opciones. Use para opciones o una combinación de opciones, comandos y detalles.
      • Más o menos comandos. Use solo para comandos.
      • Más o menos detalles. Use solo para obtener información.
      • Más o menos <nombre> de objeto. Se usa para otros tipos de objetos, como carpetas.
    • De lo contrario:
      • Mostrar u ocultar opciones. Use para opciones o una combinación de opciones, comandos y detalles.
      • Mostrar u ocultar comandos. Use solo para comandos.
      • Mostrar u ocultar detalles. Use solo para obtener información.
      • Mostrar u ocultar el nombre> del <objeto. Se usa para otros tipos de objetos, como carpetas.
  • Para los botóns de contenido adicional en un botón de comando con una etiqueta interna, siga las directrices del botón de comando estándar.

Documentación

Al hacer referencia a controles de divulgación progresiva:

  • Si el control tiene una etiqueta fija, consulte el control solo por su etiqueta; no intente describir el control. Use el texto exacto de la etiqueta, incluida su mayúscula, pero no incluya el carácter de subrayado de la tecla de acceso.

  • Si el control no tiene ninguna etiqueta o no es fija, consulte el control por su tipo: botón de contenido adicional, flecha, triángulo o más/menos. Si es necesario, describa también la ubicación del control. Si el control aparece dinámicamente, como el control de espacio de página , inicie la referencia describiendo cómo hacer que aparezca el control.

    Ejemplo: Para mostrar los archivos dentro de una carpeta, mueva el puntero al inicio del nombre de la carpeta y, a continuación, haga clic en el triángulo situado junto a la carpeta.

  • No haga referencia al control como un botón, a menos que compare con otros controles de divulgación progresiva que no sean botones.

  • Para describir la interacción del usuario, use haga clic. Si es necesario para mayor claridad, use haga clic en... para expandir o contraer.

  • 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.

Ejemplos:

  • (Para un contenido adicional) Para determinar el tamaño del archivo, haga clic en Detalles.
  • (Para una flecha) Para ver todas las opciones, haga clic en la flecha situada junto al cuadro Buscar .
  • (Para más/menos) Para ver la imagen, haga clic en Imágenes.