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.

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.

  

  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:

  

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

  

  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.

  

  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.

  

  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	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	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	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	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 marcadores de contenido 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 marcadores de contenido adicional se usan de las siguientes maneras:

Uso	Ejemplo
Interfaz de usuario local el objeto asociado recibe el foco de entrada y el solo botón de contenido adicional se activa con la barra espaciadora.	En estos ejemplos, los comillas angulares simples 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 solo botón de contenido adicional se activa con la barra espaciadora.	En este ejemplo, el botón de 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.	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.	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.	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 contexto al navegar por una jerarquía. El elemento permanece expandido hasta que el usuario lo contrae. Aunque estos tienen un aspecto similar a los 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 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.	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.	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.	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.	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 marcadores de contenido adicional, se muestra o oculta información adicional en su lugar. El elemento permanece expandido hasta que el usuario lo contrae. A diferencia de los chevrones, los glifos tienen una representación gráfica de la acción, normalmente con una flecha que indica lo que ocurrirá.

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

Las flechas de vista previa se reservan mejor 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.

Instrucciones

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 progresivas. Use solo los controles de divulgación progresiva presentados en la sección Patrones de uso. Sin embargo, use vínculos para navegar a temas de Ayuda.

  Correcto:

  

  Incorrecto:

  

  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

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

  

  En este ejemplo, la información sobre herramientas indica el efecto de un control de botón 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 puede contraer y viceversa, y que la operación inversa es obvia. Al hacerlo, se fomenta la exploración y se reduce la frustración. La mejor manera de hacer evidente la operación inversa 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:

  

  

  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 Replace se convierte en el comando Replace, por lo que no hay forma 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 use puntas de flecha con forma triangular para un propósito distinto de la divulgación progresiva.

  Incorrecto:

  

  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:

  

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

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

  Incorrecto:

  

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

Galones

• Use botón de contenido adicional único para mostrar u ocultar en su lugar. Use botón de contenido adicional doble para mostrar u ocultar mediante un menú emergente. Sin embargo, siempre debe usar los comillas angulares dobles para los botones de comando con etiquetas internas.

  Correcto:

  

  Incorrecto:

  

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

  Correcto:

  

  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 alineados a la derecha, puede haber bastante distancia entre un botón de contenido adicional y su control asociado.

  Correcto:

  

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

  Incorrecto:

  

  En este ejemplo, no hay ninguna relación visual clara entre el botón de contenido adicional local 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 Back, Forward, Go o Play. Utilice puntas de flecha simples en forma triangular (flechas sin tallos) en fondos neutros.

  Correcto:

  

  Estas flechas son controles de divulgación claramente progresivos.

  Incorrecto (para divulgación progresiva):

  

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

  Incorrecto (para atrás, adelante):

  

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

Ajuste de tamaño y espaciado recomendados

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

Etiquetas

• Para los botón 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 cambie 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.
    • Nombre de objeto> más o menos<. Se usa para otros tipos de objeto, 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 objeto, como carpetas.
• Para los botóns de contenido adicional en un botón de comando con una etiqueta interna, siga las instrucciones del botón de comando estándar.

Documentación

Al hacer referencia a controles de divulgación progresivas:

• 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 etiqueta o no es fijo, 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 contraste con otros controles de divulgación progresiva que no sean botones.

• Para describir la interacción del usuario, use click. 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 botón de 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.