Controles de revelación 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 revelación progresiva, los usuarios pueden mostrar u ocultar información adicional, incluidos datos, opciones o comandos. La divulgación progresiva fomenta la sencillez centrándose en lo esencial, pero revelando detalles adicionales según sea necesario.
Ejemplos de controles de divulgación progresivos.
Nota:
Directrices relacionadas con diseño, menús, y barras de herramientas están presentes en artículos separados.
¿Es este el control adecuado?
Para decidirse, considere estas preguntas:
¿Necesitan los usuarios ver la información en algunos escenarios pero no en todos, o en algunos pero no todo el tiempo? Si es así, mostrar la información utilizando la divulgación progresiva simplifica la experiencia básica, pero permite a los usuarios acceder a la información fácilmente.
En este ejemplo, la aplicación Seguridad de Windows muestra el estado de seguridad importante en todo momento, pero utiliza la divulgación progresiva para mostrar detalles a petición.
Si la información se muestra por defecto, ¿es probable que los usuarios decidan ocultarla alguna vez? ¿Hay situaciones en las que los usuarios necesiten más espacio? ¿Están los usuarios suficientemente motivados para personalizar la interfaz de usuario? Si no es así, muestre la información sin utilizar la divulgación progresiva.
Incorrecto:
En este ejemplo, los usuarios no estarán motivados para ocultar la información.
¿La información adicional es avanzada, sustancial, compleja o está relacionada con una subtarea independiente? Si es así, considere la posibilidad de mostrar la información en una ventana separada utilizando botones de comando o enlaces en lugar de usar un control progresivo de la divulgación. (La información adicional es avanzada si está destinada a usuarios advanced. Es compleja si dificulta la lectura o la presentación de otra información).
En este ejemplo, la información sobre el nombre y el editor del software es significativa sobre todo para usuarios advanced, por lo que se utilizan enlaces a ventanas independientes.
¿La información adicional es una frase o fragmento de frase que describe la función de un artículo o cómo puede utilizarse? Si es así, considere la posibilidad de utilizar un tooltip o infotip.
¿La información adicional está relacionada con la tarea actual, pero es independiente de la información mostrada actualmente? Si es así, considere utilizar pestañas en su lugar. Sin embargo, las listas desplegables suelen ser preferibles a las pestañas porque son más flexibles y escalables.
¿Mostrar u ocultar la información adicional es esencialmente un filtro de datos? Si es así, considere utilizar una lista desplegable o casillas de verificación en lugar de solicitar el filtro para la lista entera,
Conceptos de diseño
Las metas de controles de divulgación progresivos son para:
- Simplificar una UI centrándose en lo esencial, pero revelando detalles adicionales cuando sea necesario.
- Simplificar una apariencia de UI's reduciendo la percepción del desorden.
Ambos objetivos pueden alcanzarse utilizando controles de divulgación progresiva, en los que los usuarios hacen clic para ver más detalles. Sin embargo, puede lograr el segundo objetivo de simplificar la apariencia sin utilizar controles de divulgación progresiva explícitos:
Mostrar detalles contextuales solo en su contexto. Por ejemplo, puede mostrar comandos contextuales o barras de herramientas automáticamente cuando sean relevantes para el objeto o modo seleccionado.
Reducir el peso de las affordances en la IU secundaria. Asequibilidad son propiedades visuales que sugieren cómo se utilizan los objetos. La tendencia es disponer de una interfaz de usuario con la que los usuarios puedan interactuar en el sitio, pero que toda esa interfaz se dibuje al grito de "¡haz clic en mí!" genera demasiado desorden visual. Para la interfaz de usuario secundaria, a menudo es mejor utilizar sutiles affordances y dar todos los efectos al pasar el ratón por encima.
En este ejemplo, el campo Calificación es interactivo, pero no lo parece hasta que el ratón pasa por encima.
Mostrar los pasos de seguimiento solo cuando se hayan cumplido los requisitos previos. Este enfoque se utiliza mejor con tareas familiares en las que los usuarios pueden dar los primeros pasos con confianza.
En este ejemplo, la página de nombre de usuario y contraseña muestra inicialmente solo las casillas de nombre de usuario y contraseña opcional. Los cuadros de confirmación y pista se muestran después de que el usuario introduzca una contraseña.
Aunque la divulgación progresiva es una forma estupenda de simplificar las interfaces de usuario, tiene sus riesgos:
- Falta de visibilidad. Los usuarios pueden asumir que si no pueden ver algo, es que no existe. Los usuarios no pueden pasar el cursor o hacer clic si no ven lo que buscan. Siempre existe la posibilidad de que los usuarios no hagan clic en opciones como Más opciones.
- Falta de estabilidad. La divulgación progresiva debería esperarse o, al menos, resultar natural. Si los controles aparecen y desaparecen inesperadamente, la interfaz de usuario resultante puede resultar inestable.
Controles de revelación progresiva
Los controles de revelación progresiva suelen mostrarse sin etiquetas directas que describan su comportamiento, por lo que los usuarios deben poder hacer lo siguiente basándose únicamente en el aspecto visual del control:
- Reconocer que el control proporciona una divulgación progresiva.
- Determina si el estado actual es expandido o colapsado.
- Determine si se necesita información, opciones o comandos adicionales para realizar la tarea.
- Determine cómo restaurar el estado original, si lo desea.
Aunque los usuarios pueden determinar lo anterior por ensayo y error, usted debe intentar que esa experimentación no sea necesaria.
Los controles de divulgación progresivos son bastante débiles accesibilidad, lo que significa que sus propiedades visuales sugieren cómo se utilizan, aunque débilmente. La siguiente tabla compara el aspecto de los controles de divulgación progresivos comunes:
| Control | Fin | Aspecto | El pictograma indica |
|---|---|---|---|
Chevrones |
Mostrar todos: Mostrar u ocultar los elementos restantes del contenido total o parcialmente oculto. Los elementos se muestran en su lugar (utilizando un solo chevrón) o en un menú emergente (utilizando un doble chevrón). |
Los chevrones señalan la dirección en la que se producirá la acción. |
Estado futuro |
Flechas |
Mostrar opciones: Mostrar un menú de comando emergente. |
Las flechas señalan la dirección en la que se producirá la acción. |
Estado futuro |
Más y menos controles |
Expandir contenedores: Expandir o colapsar contenido de contenedores en lugar de navegar a través de una jerarquía. |
Los símbolos más y menos no señalan, pero la acción siempre ocurre a su derecha. |
Estado futuro |
Rotar triángulos |
Mostrar datos: Mostrar u ocultar información adicional en el lugar para un elemento individual. También se utilizan para ampliar contenedores |
Los triángulos giratorios se asemejan en cierto modo a las palancas giratorias, por lo que apuntan en la dirección en la que se ha producido la acción. |
Estado presente |
Si solo hace una cosa...
Los usuarios deberían ser capaces de predecir correctamente el comportamiento de un control de revelación progresiva solo por inspección. Para conseguirlo, seleccione los patrones de uso adecuados y aplique su aspecto, 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 mandos comunes.
Chevrones
Los chevrones muestran u ocultan los elementos restantes del contenido total o parcialmente oculto. Normalmente los elementos se muestran en su sitio, pero también pueden mostrarse en un menú emergente. Una vez colocado, el elemento permanece expandido hasta que el usuario lo colapsa.
Los chevrones se utilizan de las siguientes maneras:
| Uso | Ejemplo |
|---|---|
| In situ UI el objeto asociado recibe el foco de entrada y el chevron único se activa con la barra espaciadora. |
 En estos ejemplos, los chevrones individuales colocados en su sitio se sitúan a la derecha de su control asociado. |
| Botones de mando con etiquetas externas el botón de comando recibe el foco de entrada y el chevrón único se activa con la barra espaciadora. |
 En este ejemplo, el botón de un solo chevron está etiquetado y situado a la izquierda de la etiqueta. Con este patrón, el botón sería difícil de entender sin su etiqueta. |
| Botones de mando 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 chevron colocado para sugerir su significado. |
Flechas
Las flechas muestran un menú de comando 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 padre, el padre 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 utilizan de las siguientes maneras:
| Uso | Ejemplo |
|---|---|
| Separar botones la flecha está en un control de botón separado. |
 En estos ejemplos, los botones de flecha separados situados a la derecha indican un menú de comandos. |
| Botones de mando la flecha forma parte de un botón de comando. |
 En estos ejemplos, los botones de menú y de división tienen las flechas situadas a la derecha del texto. |
Más y menos controles
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 colapsa. Aunque parecen botones, su comportamiento es in situ.
El objeto asociado recibe el foco de entrada. El 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 utilizan de las siguientes maneras:
| Uso | Ejemplo |
|---|---|
| Árboles plegables una jerarquía de varios niveles para mostrar el contenido del contenedor. |
 En este ejemplo, los controles más y menos se sitúan a la izquierda del contenedor asociado. |
| Listas de Árboles una jerarquía de dos niveles para mostrar el contenido del contenedor. |
 En este ejemplo, los controles más y menos se sitúan a la izquierda del contenedor asociado cabecera de lista. |
Rotar triángulos
Los triángulos giratorios muestran u ocultan información adicional sobre un elemento concreto. También se utilizan para ampliar contenedores El elemento permanece expandido hasta que el usuario lo colapsa.
El objeto asociado recibe el foco de entrada. El triángulo contraído (que apunta hacia la derecha) se activa con la tecla de flecha derecha, y el triángulo expandido (que apunta hacia abajo) con la tecla de flecha izquierda.
Los triángulos rotatorios se utilizan de las siguientes maneras:
| Uso | Ejemplo |
|---|---|
| Árboles plegables una jerarquía de varios niveles para mostrar el contenido del contenedor. |
 En este ejemplo, los triángulos giratorios se sitúan a la izquierda del contenedor asociado. |
| Listas de Árboles una jerarquía de dos niveles para mostrar información adicional en su sitio. |
 En este ejemplo, los triángulos giratorios se sitúan a la izquierda de sus elementos de lista asociados. |
Vista previa de las flechas
Al igual que los chevrones, la información adicional se muestra u oculta en su lugar. El elemento permanece expandido hasta que el usuario lo colapsa. 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 del Microsoft Windows Media Player, los glifos tienen flechas que sugieren la acción que va a ocurrir.
Las flechas de vista previa se reservan mejor para situaciones en las que un chevron 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 una descripción de cada patrón de uso, véase la tabla anterior.
No utilice enlaces para los controles de divulgación progresiva. Utilice únicamente los controles de divulgación progresiva presentados en la sección Patrones de uso. Sim embargo, use enlaces para navegar a Temas de ayuda.
Correcto:
Incorrecto:
En el ejemplo incorrecto, se utiliza un enlace para mostrar más opciones en el lugar. Este uso sería correcto si el enlace navegara a otra página o cuadro de diálogo, o mostrara un tema de Ayuda.
Interacción
En el caso de los chevrones y las flechas que no están etiquetados directamente, utilice información sobre herramientas para describir su función.
En este ejemplo, la información sobre herramientas indica el efecto de un control chevron 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 empezar en el estado por defecto. Hacer que el estado persista por ventana y por usuario.
Asegúrese de que todos los contenidos expandidos puedan contraerse y viceversa, y de que la operación inversa sea obvia. Esto fomenta la exploración y reduce la frustración. La mejor manera de hacer evidente la operación inversa es mantener el control en el mismo lugar fijo. Si necesita mover el control, manténgalo en la misma ubicación relativa dentro de un área visualmente diferenciada.
Incorrecto:
En este ejemplo, al hacer clic en el botón Reemplazar con el cheurón, aparece el botón Reemplazar con cuadro de texto. Una vez hecho esto, el expansor Reemplazar se convierte en el comando Reemplazar, por lo que no hay forma de restaurar el estado original.
Utilice solo las claves de acceso apropiadas para el patrón de divulgación progresiva, como se indica en la sección Patrones de uso. No utilice Intro para activar divulgación progresiva.
Presentación
No utilice puntas de flecha triangulares para otro fin que no sea 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 utiliza correctamente una viñeta en su lugar.
Elimine (no desactive) los controles de divulgación progresiva que no sean aplicables en el contexto actual. Los controles de divulgación progresiva siempre deben cumplir su promesa, así que elimínelos cuando no haya más información que dar.
Incorrecto:
En este ejemplo, se desactiva incorrectamente un control de divulgación progresiva que no corresponde.
Chevrones
Utilice chevrones individuales para mostrar u ocultar en su lugar. Utilice los chevrones dobles para mostrar u ocultar mediante un menú emergente. Sin embargo, siempre debe utilizar chevrones dobles para los botones de comando con etiquetas internas.
Correcto:
Incorrecto:
En el ejemplo incorrecto, se utiliza un doble chevron para la divulgación progresiva in situ.
Correcto:
En este ejemplo incorrecto, se utiliza un doble chevron para la divulgación progresiva in situ porque es un botón de comando con una etiqueta interna.
Proporcionar una relación visual entre el chevron y su control asociado. Dado que los chevrones in situ se colocan a la derecha de su UI asociada y alineados a la derecha, puede haber bastante distancia entre un chevrón y su control asociado.
Correcto:
En este ejemplo, existe una relación clara entre el chevrón colocado y su IU asociada.
Incorrecto:
En este ejemplo, no hay una relación visual clara entre el chevrón colocado y su IU asociada, por lo que parece flotar en el espacio.
Flechas
No utilice gráficos de flechas que puedan confundirse con Atrás, Adelante, Ir o Reproducir. Utilice puntas de flecha sencillas de forma triangular (flechas sin tallo) sobre fondos neutros.
Correcto:
Estas flechas son claramente controles de divulgación progresiva.
Incorrecto (para divulgación progresiva):
Estas flechas no parecen controles de divulgación progresiva.
Incorrecto (para Atrás, Adelante):
Estas flechas parecen controles de divulgación progresiva, pero no lo son.
Tamaño y espaciado recomendados
Dimensionamiento y espaciado recomendados para los controles de divulgación progresiva.
Etiquetas
- Para los chevrones de un botón de mando con etiqueta externa:
- Asigne una clave de acceso única. Para directrices, consulte Teclado.
- Utilice mayúsculas en las frases.
- Escriba la etiqueta como una frase y no utilice signos de puntuación al final.
- Escriba la etiqueta de modo que describa el efecto de hacer clic en el botón, y cambie la etiqueta cuando cambie el estado.
- Si la superficie muestra siempre algunas opciones, comandos o detalles, utilice los siguientes pares de etiquetas:
- Más/menos opciones. Se utiliza para opciones o una mezcla de opciones, comandos y detalles.
- Más/menos comandos. Uso solo para comandos.
- Más/menos datos. Uso solo para información.
- Más/menos <nombre del objeto>. Utilizar para otros tipos de objetos, como carpetas.
- De lo contrario:
- Mostrar/Ocultar opciones. Se utiliza para opciones o una mezcla de opciones, comandos y detalles.
- Mostrar/Ocultar comandos. Uso solo para comandos.
- Mostrar/Ocultar datos. Uso solo para información.
- Mostrar/Ocultar <nombre del objeto>. Utilizar para otros tipos de objetos, como carpetas.
- Para los chevrones de un botón de mando con etiqueta interna, siga la norma botón de comando directrices.
Documentación
Al referirse a los controles de divulgación progresiva:
Si el control tiene una etiqueta fija, refiérase al control solo por su etiqueta; no intente describir el control. Utilice el texto exacto de la etiqueta, incluidas las mayúsculas, pero no incluya el guion bajo de la clave de acceso.
Si el control no tiene etiqueta o no es fijo, refiérase al control por su tipo: chevrón, flecha, triángulo o botón más/menos. Si es necesario, describa también la ubicación del control. Si el control aparece de forma dinámica, como el control espacio de página control, empezar la referencia describiendo cómo hacer aparecer el control.
Ejemplo: Para ver los archivos de una carpeta, mueva el puntero hasta el principio del nombre de la carpeta y, a continuación, haga clic en el triángulo situado junto a la carpeta.
No se refiera al control como un botón, a menos que sea para contrastar con otros controles de divulgación progresiva que no son botones.
Para describir la interacción del usuario, haga clic. Si es necesario para mayor claridad, haga clic... para expandir o contraer.
Cuando sea posible, formatee la etiqueta del título utilizando negrita. En caso contrario, ponga la etiqueta entre comillas solo si es necesario para evitar confusiones.
Ejemplos:
- (Para un chevrón) Para determinar el tamaño del archivo, haga clic en Datos.
- (Para una flecha) Para ver todas las opciones, haga clic en la flecha situada junto a la Buscar cuadro.
- (Para más/menos) Para ver su foto, haga clic en Imágenes.