Barras de progreso
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 una barra de progreso, los usuarios pueden seguir el progreso de una operación larga. Una barra de progreso puede mostrar un porcentaje aproximado de finalización (determinado) o indicar que una operación está en curso (indeterminada).
Los estudios de facilidad de uso han demostrado que los usuarios son conscientes de los tiempos de respuesta de más de un segundo. Por lo tanto, debe considerar las operaciones que tardan dos segundos o más en completarse para ser largas y necesitan algún tipo de comentarios de progreso.
Una barra de progreso típica.
Nota
Las directrices relacionadas con el diseño se presentan en un artículo independiente.
¿Es este el control adecuado?
Para decidirte, intenta responder a estas preguntas:
¿Se completará la operación en unos cinco segundos o menos? Si es así, use un indicador de actividad en su lugar, ya que mostrar una barra de progreso durante una duración tan corta sería distraerse. Si la operación suele tardar cinco segundos o menos, pero a veces tarda más, comience con un puntero ocupado y convierta en una barra de progreso después de cinco segundos.
¿Se usa una barra de progreso indeterminada para esperar a que el usuario complete una tarea? En ese caso, no uses una barra de progreso. Las barras de progreso se usan para el progreso del equipo, no el del usuario.
¿Se combina una barra de progreso indeterminada con una animación? Si es así, usa solo la animación. La barra de progreso indeterminada es eficazmente una animación genérica y no agrega ningún valor a la animación.
¿La operación es una tarea en segundo plano muy larga (más de dos minutos) para la que los usuarios están más interesados en la finalización que el progreso? Si es así, use una notificación en su lugar. En este caso, los usuarios realizan otras tareas mientras tanto y no supervisan el progreso. El uso de una notificación permite a los usuarios realizar otras tareas sin interrupciones. Entre los ejemplos de estas operaciones largas se incluyen la impresión, la copia de seguridad, los exámenes del sistema y las transferencias o conversiones masivas de datos.
Cuando se complete la operación, ¿podrán los usuarios reproducir los resultados? Si es así, use un control deslizante en su lugar. Algunos ejemplos de estas operaciones son la grabación y reproducción de audio y vídeo.
En este ejemplo, se usa un control deslizante para indicar el progreso mientras se reproduce el sonido. Al hacerlo, los usuarios podrán reproducir los resultados más adelante.
Conceptos de diseño
Durante una operación larga, los usuarios necesitan una idea general de lo que hace la operación. También necesitan saber lo siguiente:
- Que se ha iniciado una operación larga.
- Ese progreso se está realizando y que la operación se completará finalmente (y, por lo tanto, no se ha bloqueado).
- Porcentaje aproximado de la operación que se ha completado (y, por tanto, el porcentaje restante).
- Si deben cancelar la operación si no vale la pena continuar esperando.
- Si deben seguir esperando o hacer algo más mientras se completa la operación.
Use barras de progreso determinadas para las operaciones que requieren un período de tiempo limitado, incluso si esa cantidad de tiempo no se puede predecir con precisión. Las barras de progreso indeterminadas muestran que se está realizando el progreso, pero no proporcionan ninguna otra información. No elija una barra de progreso indeterminada basada solo en la posible falta de precisión.
Por ejemplo, supongamos que una operación requiere cinco pasos y cada uno de esos pasos requiere un período de tiempo limitado, pero la cantidad de tiempo para cada paso puede variar considerablemente. En este caso, use una barra de progreso determinada y muestre el progreso cuando cada paso se complete proporcionalmente a la cantidad de tiempo que tarda cada paso normalmente. Use una barra de progreso indeterminada solo si una barra de progreso determinada haría que los usuarios concluyeran incorrectamente que la operación se ha bloqueado.
Si sólo haces una cosa...
Asegúrese de proporcionar comentarios de progreso para operaciones largas y de que la información anterior se comunique claramente. Use barras de progreso determinadas siempre que sea posible.
Patrones de uso
Las barras de progreso tienen varios patrones de uso:
Barras de progreso determinadas
| Etiqueta | Value |
|---|---|
| Barras de progreso determinables modales Indique el progreso de una operación rellenando de izquierda a derecha y rellenando completamente cuando se completa la operación. |
Dado que estos comentarios son modales, los usuarios no pueden realizar otras tareas en la ventana (o su elemento primario si se muestran en un cuadro de diálogo modal) hasta que se complete la operación.  En este ejemplo, la barra de progreso proporciona comentarios durante la configuración. |
| Barras de progreso determinantes modales con un botón Cancelar o Detener Permitir que los usuarios detengan la operación, quizás porque la operación tarda demasiado o no vale la pena esperar. |
 En este ejemplo, los usuarios pueden hacer clic en Detener para detener la operación y dejar el entorno en su estado actual. |
| Barras de progreso determinantes modales con un botón Cancelar o Detener y animación Permitir que los usuarios detengan la operación e incluyan una animación para ayudar a los usuarios a visualizar el efecto de una operación. |
 En este ejemplo, los usuarios pueden hacer clic en Detener para detener la operación y dejar el entorno en su estado actual. |
| Barras de progreso dobles determinas modal Indique el progreso de una operación de varios pasos mostrando el progreso del paso actual en la primera barra de progreso y el progreso general en la segunda barra. |
Dado que la primera barra de progreso proporciona poca información adicional y puede ser bastante distraída, este patrón no se recomienda. En su lugar, haga que todos los pasos de la operación compartan una parte del progreso y que una sola barra de progreso vaya a la finalización una vez.  En este ejemplo, la primera barra de progreso muestra el progreso del paso actual y la segunda barra de progreso muestra el progreso general. [! Nota] |
| Modeless determina las barras de progreso Indique el progreso de una operación rellenando de izquierda a derecha y rellenando completamente cuando se completa la operación. |
A diferencia de las barras de progreso modales, los usuarios pueden realizar otras tareas mientras la operación está en curso. Estas barras de progreso se pueden mostrar en contexto o en una barra de estado.  En este ejemplo, Windows Internet ExplorerWindows Internet Explorer muestra su progreso para cargar una página web en la barra de estado. Los usuarios pueden realizar otras tareas mientras se carga la página. |
Barras de progreso indeterminados
| Tipo de barra de progreso | Descripción |
|---|---|
| Barras de progreso indeterminados modales Indique que una operación está en curso mostrando una animación que recorre continuamente la barra de izquierda a derecha. |
Solo se usa para las operaciones cuyo progreso general no se puede determinar, por lo que no hay ninguna noción de integridad. Es preferible determinar las barras de progreso porque indican el porcentaje aproximado de la operación que se ha completado y ayudan a los usuarios a determinar si la operación vale la pena seguir esperando. También son menos distraídos visualmente.  En este ejemplo, Windows Update usa una barra de progreso indeterminada modal para indicar el progreso mientras busca actualizaciones. |
| Barras de progreso indeterminadas Indique que una operación está en curso mostrando una animación que recorre continuamente la barra de izquierda a derecha. |
A diferencia de las barras de progreso modales, los usuarios pueden realizar otras tareas mientras el procesamiento está en curso. estas barras de progreso se pueden mostrar en contexto o en una barra de estado.  En este ejemplo, Microsoft Outlook usa una barra de progreso indeterminada mientras rellena las propiedades de contacto. Los usuarios pueden seguir usando la ventana de propiedades mientras este trabajo está en curso. |
Metros
| Tipo | Descripción |
|---|---|
| Metros Indica un porcentaje que no está relacionado con el progreso. |
Este patrón no es una barra de progreso, pero se implementa mediante el control de barra de progreso. los medidores tienen un aspecto distinto para diferenciarlos de las barras de progreso verdaderas.  En este ejemplo, el medidor muestra el porcentaje de espacio en la unidad de disco usado. |
Directrices
General
Proporcione comentarios de progreso al realizar una operación larga. Los usuarios nunca deben tener que adivinar si se está realizando el progreso.
Indique claramente el progreso real. La barra de progreso debe avanzar si se está realizando el progreso. Si el intervalo de tiempos de finalización esperados es grande, considere la posibilidad de usar una escala no lineal para indicar el progreso durante los tiempos más largos. No quiere que los usuarios finalicen que el programa se ha bloqueado cuando no lo ha hecho.
Indica claramente la falta de progreso. La barra de progreso no debe avanzar si no se está realizando ningún progreso. No desea que los usuarios esperen indefinidamente una operación que nunca se va a completar.
Proporcione detalles de progreso útiles. Proporcione información de progreso adicional, pero solo si los usuarios pueden hacer algo con él. Asegúrese de que el texto se muestra lo suficientemente largo como para que los usuarios puedan leerlo.
En este ejemplo, los usuarios pueden ver la velocidad de transferencia. La tasa de transferencia baja aquí sugiere la necesidad de usar una conexión de red de alto ancho de banda.
No proporcione detalles innecesarios. Por lo general, los usuarios no se preocupan por los detalles de la operación que se está realizando. Por ejemplo, a los usuarios de un programa de instalación no les importa el archivo específico que se está copiando o que los componentes del sistema se registran porque no tienen expectativas sobre estos detalles. Normalmente, una barra de progreso bien etiquetada solo proporciona información suficiente, por lo que proporciona información de progreso adicional solo si los usuarios pueden hacer algo con ella. Proporcionar detalles que los usuarios no importan hace que la experiencia del usuario sea demasiado complicada y técnica. Si necesita información más detallada para la depuración, no la muestre en las compilaciones de versión.
Correcto:
En este ejemplo, la barra de progreso etiquetada es todo lo que se necesita.
Correcto:
En este ejemplo, Windows Explorador copia los archivos seleccionados por el usuario, por lo que mostrar los nombres de archivo que se copian son significativos.
Incorrecto:
En este ejemplo, un programa de instalación proporciona detalles que no tienen sentido para el usuario.
Proporciona animaciones útiles. Si se hace bien, las animaciones mejoran la experiencia del usuario al ayudar a los usuarios a visualizar la operación. Las animaciones buenas tienen más impacto que el texto por sí solo. Por ejemplo, la barra de progreso del comando Outlook Eliminar muestra la Papelera de reciclaje para el destino si se pueden recuperar los archivos, pero no se puede recuperar la Papelera de reciclaje si los archivos no se pueden recuperar.
En este ejemplo, la falta de una papelera de reciclaje refuerza que los archivos se eliminan permanentemente. Esta información adicional no se comunicaría de forma eficaz con texto.
No uses animaciones innecesarias. Las animaciones pueden ser engañosas porque normalmente se ejecutan en un subproceso independiente de la tarea real y, por lo tanto, pueden sugerir progreso incluso si la operación se ha bloqueado. Además, si la operación es más lenta de lo esperado, los usuarios a veces asumen que la animación forma parte del motivo. Por lo tanto, use solo animaciones cuando haya una justificación clara; no los use para intentar entretener a los usuarios.
Animaciones de posición centradas en la barra de progreso. Coloque la animación encima de las etiquetas de la barra de progreso, si tiene alguna. Si hay un botón Cancelar o Detener a la derecha de la barra de progreso, incluya el botón al determinar el centro.
Reproduce un efecto de sonido al finalizar una operación solo si es muy largo (más de dos minutos), poco frecuente e importante. Si es probable que el usuario se aleje de una operación importante mientras se está procesando, un efecto de sonido restaura la atención del usuario. Usar un efecto de sonido tras la finalización en otras circunstancias sería una molestia distraída.
No robe el foco de entrada para mostrar una actualización o finalización de progreso. Los usuarios suelen cambiar a otros programas mientras esperan y no quieren ser interrumpidos. Las tareas en segundo plano deben permanecer en segundo plano.
No se preocupe por el soporte técnico. Dado que los comentarios proporcionados por las barras de progreso no son necesariamente precisos y están flotando, las barras de progreso no son un buen mecanismo para proporcionar información de soporte técnico. Por lo tanto, si se puede producir un error en la operación (como con un programa de instalación), no proporcione información de progreso adicional que solo sea útil para el soporte técnico. En su lugar, proporcione un mecanismo alternativo, como un archivo de registro, para registrar información de soporte técnico.
Incorrecto:
En este ejemplo, la barra de progreso muestra los detalles destinados al soporte técnico.
No coloque el porcentaje completado ni ningún otro texto en una barra de progreso. Este texto no es accesible y no es compatible con el uso de temas.
Incorrecto:
En este ejemplo, no se puede acceder al texto porcentual de la barra de progreso.
No combine una barra de progreso con un puntero ocupado. Use uno u otro, pero no ambos al mismo tiempo.
No use barras de progreso verticales. Las barras de progreso horizontal tienen una asignación más natural y un mejor flujo.
Barras de progreso determinadas
Use barras de progreso determinadas para las operaciones que requieren un período de tiempo limitado, incluso si esa cantidad de tiempo no se puede predecir con precisión. Las barras de progreso indeterminadas muestran que se está realizando el progreso, pero no proporcionan ninguna otra información. No elija una barra de progreso indeterminada basada solo en la posible falta de precisión.
Indique claramente la fase de progreso. La barra de progreso debe ser capaz de indicar si la operación está al principio, al medio o al final de una operación. Por ejemplo, las barras de progreso que se disparan inmediatamente al 99 % de finalización, luego permanecen allí durante mucho tiempo son particularmente informantes y molestos. En estos casos, la barra de progreso debe establecerse inicialmente en un 33 por ciento como máximo para indicar que la operación todavía está en la fase inicial.
Indica claramente la finalización. No deje que una barra de progreso vaya al 100 % a menos que la operación se haya completado.
Proporcione una estimación de tiempo restante si puede hacerlo con precisión. Las estimaciones de tiempo restantes que son precisas son útiles, pero las estimaciones que están fuera de la marca o el rebote alrededor de forma significativa no son útiles. Es posible que tenga que realizar algún procesamiento para poder proporcionar estimaciones precisas. Si es así, no muestre estimaciones potencialmente inexactas durante este período inicial.
No reinicie el progreso. Una barra de progreso pierde su valor si se reinicia (quizás porque se completa un paso de la operación) porque los usuarios no tienen forma de saber cuándo se completará la operación. En su lugar, haga que todos los pasos de la operación compartan una parte del progreso y que la barra de progreso finalice una vez.
Incorrecto:
En este ejemplo, la operación se movió al paso de copiar archivos y restablecer la barra de progreso de ese paso. Ahora los usuarios no tienen idea de cuánto progreso se ha realizado o cuánto tiempo queda.
No haga una copia de seguridad del progreso. Al igual que con un reinicio, una barra de progreso pierde su valor si realiza una copia de seguridad. Aumente siempre el progreso de forma monotónica. Sin embargo, puede tener un tiempo restante estimado que aumente (así como disminuya) porque la tasa de progreso puede variar.
Barras de progreso indeterminadas
Use barras de progreso indeterminables solo para las operaciones cuyo progreso general no se puede determinar. Use barras de progreso indeterminadas para las operaciones que requieren una cantidad de tiempo sin enlazar o que tienen acceso a un número desconocido de objetos. Use tiempos de espera para proporcionar límites a las operaciones basadas en tiempo.
Convierta en una barra de progreso determinada una vez que se pueda determinar el progreso general. Por ejemplo, si tarda mucho más de dos segundos en determinar el número de objetos, puede usar una barra de progreso indeterminada mientras se cuentan los objetos y, a continuación, convertir en una barra de progreso determinada.
No combine barras de progreso indeterminadas con estimaciones de porcentaje completadas o de tiempo restante. Si puede proporcionar esta información, use una barra de progreso determinada en su lugar.
No combine barras de progreso indeterminados con animaciones. Una barra de progreso indeterminada es eficazmente una animación genérica, por lo que debes usar una o la otra, pero nunca ambas.
Correcto:
En este ejemplo, solo se usa una animación para mostrar que una operación está en curso.
Barras de progreso de modeless
Si los usuarios pueden hacer algo productivo mientras la operación está en curso, proporcione comentarios sobre los modelos. Es posible que tenga que deshabilitar un subconjunto de funcionalidades que requiere que se complete la operación.
Si la ventana tiene una barra de direcciones, muestre el progreso del modelo en la barra de direcciones.
En este ejemplo, el progreso de los modelos se muestra en la barra de direcciones.
De lo contrario, si la ventana tiene una barra de estado, muestre el progreso de los modelos en la barra de estado. Coloque cualquier texto correspondiente a su izquierda en la barra de estado.
En este ejemplo, el progreso de los modelos se muestra en la barra de estado.
Barras de progreso modales
Coloque barras de progreso modales en las páginas de progreso oen los cuadros de diálogo de salida.
Proporcione un botón de comando para detener la operación si tarda más de unos segundos en completarse o tiene la posibilidad de que nunca se complete. Etiquete el botón Cancelar si la cancelación devuelve el entorno a su estado anterior (sin efectos secundarios), de lo contrario, etiquete el botón Detener para indicar que deja intacta la operación completada parcialmente. Puede cambiar la etiqueta de botón de Cancelar a Detener en medio de la operación si en algún momento no es posible devolver el entorno a su estado anterior. Centre el botón de comando verticalmente con la barra de progreso en lugar de alinear sus superiores.
Correcto:
En este ejemplo, detener la conexión de red no tiene ningún efecto secundario, por lo que se usa Cancel.
Correcto:
En este ejemplo, la detención de la copia deja los archivos copiados, por lo que el botón de comando está etiquetado como Detener.
Incorrecto:
En este ejemplo, detener la búsqueda no deja ningún efecto secundario, por lo que el botón de comando debe etiquetarse como Cancelar.
Tiempo restante
Para las barras de progreso determinadas:
Use los siguientes formatos de hora. Comience con el primero de los siguientes formatos en los que la unidad de tiempo más grande no sea cero y, a continuación, cambie al siguiente formato una vez que la unidad de tiempo más grande se convierta en cero.
Para las barras de progreso:
Si la información relacionada se muestra en un formato de dos puntos:
Tiempo restante: h horas, m minutos
Tiempo restante: m minutos, s segundos
Tiempo restante: s segundos
Si el espacio de pantalla está en un nivel premium:
h horas, m mins restantes
m mins, s s s restantes
s segundos restantes
Lo contrario:
h horas, m minutos restantes
m minutos, s segundos restantes
s segundos restantes
Para barras de título:
hh:mm restante
mm:ss restante
0:ss restantes
Este formato compacto muestra primero la información más importante para que no se trunque en la barra de tareas.
Realice estimaciones precisas, pero no proporcione una precisión falsa. Si la unidad más grande es horas, dé minutos (si son significativos), pero no segundos.
Incorrecto:
hh hours, mm minutes, ss seconds
Mantenga actualizada la estimación. Tiempo restante de actualización estimados al menos cada 5 segundos.
Céntrese en el tiempo restante , ya que es la información que más le interesan a los usuarios. Conceda un tiempo total transcurrido solo cuando haya escenarios en los que el tiempo transcurrido sea útil (por ejemplo, cuando es probable que se repita la tarea). Si la estimación restante está asociada a una barra de progreso, no tenga texto completo por porcentaje porque la propia barra de progreso transmite esa información.
Ser gramaticalmente correcto. Use unidades singulares cuando el número sea uno.
Incorrecto:
1 minutos, 1 segundos
Use mayúsculas de estilo de frase.
Colores de la barra de progreso
- Use barras de progreso rojas o amarillas solo para indicar el estado de progreso, no los resultados finales de una tarea. Una barra de progreso roja o amarilla indica que los usuarios deben realizar alguna acción para completar la tarea. Si la condición no se puede recuperar, deje la barra de progreso verde y muestre un mensaje de error.
- Cambie la barra de progreso de color rojo cuando haya una condición recuperable del usuario que impida avanzar aún más. Muestra un mensaje para explicar el problema y recomendar una solución.
- Cambie la barra de progreso amarilla para indicar que el usuario ha pausado la tarea o que hay una condición que impedía el progreso , pero que el progreso sigue teniendo lugar (por ejemplo, con una conectividad de red deficiente). Si el usuario se ha pausado, cambie la etiqueta del botón Pausar a Reanudar. Si se impide el progreso, muestre un mensaje para explicar el problema y recomendar una solución.
Metros
- Use barras de progreso solo para el progreso. Use medidores para indicar porcentajes que no están relacionados con el progreso.
Ajuste de tamaño y espaciado recomendados
Ajuste de tamaño y espaciado recomendados para las barras de progreso.
- Use siempre el alto de la barra de progreso recomendada.
- Excepción: Puede usar un alto diferente si la ventana primaria no admite el alto recomendado.
- Use el ancho mínimo si desea que la barra de progreso no sea discreta.
- No use anchos más largos que el máximo recomendado. La barra de progreso no tiene que rellenar el espacio disponible.
- Centre la barra de progreso horizontalmente si la ventana es mucho más ancha que el ancho máximo recomendado.
Etiquetas
Etiquetas de barra de progreso
Use una etiqueta concisa con un control de texto estático para indicar lo que está haciendo la operación. Inicie la etiqueta con un verbo (por ejemplo, Copiar) y termine con puntos suspensivos. Esta etiqueta puede cambiar dinámicamente si la operación tiene varios pasos o está procesando varios objetos.
No asigne una clave de acceso única porque el control no es interactivo.
Si el usuario no inició directamente la operación, puede incluir una etiqueta adicional para dar el contexto y disculparse por la interrupción. Inicie esta etiqueta adicional con la frase, Espere mientras. Esta etiqueta no debe cambiar durante la operación.
En este ejemplo, se pide al usuario que espere porque el usuario no inició directamente la operación.
Coloque la etiqueta encima de la barra de progreso y alinee la etiqueta con el borde izquierdo de la barra de progreso.
Detalles de la barra de progreso
Proporcione detalles en texto estático, antes de los datos con una etiqueta que termina con dos puntos. Especifique unidades (segundos, kilobytes, etc.) después del texto de detalles.
Correcto:
En este ejemplo, los detalles se etiquetan correctamente.
Incorrecto:
En este ejemplo, los detalles no están etiquetados, lo que requiere que los usuarios determinen su significado.
Coloque los detalles debajo de la barra de progreso y alinee la etiqueta con el borde izquierdo de la barra de progreso.
No proporcione el porcentaje completado o restante porque esa información se transmite por la propia barra de progreso.
Botón Cancelar
- Etiquete el botón Cancelar si la cancelación devuelve el entorno a su estado anterior (sin efecto secundario); de lo contrario, etiquete el botón Detener para indicar que deja intacta la operación completada parcialmente.
- Puede cambiar la etiqueta de botón de Cancelar a Detener en medio de la operación si en algún momento no es posible devolver el entorno a su estado anterior.
Títulos del cuadro de diálogo Progreso
Si la barra de progreso se muestra en un cuadro de diálogo modal, el título del cuadro de diálogo debe ser el nombre del programa o el nombre de la operación. No use lo que debe ser la etiqueta de la barra de progreso para el título del cuadro de diálogo.
Correcto:
En este ejemplo, el nombre de la tarea se usa para el título del cuadro de diálogo.
Incorrecto:
En este ejemplo, el texto del título del cuadro de diálogo es una restatez de la etiqueta de la barra de progreso. En su lugar, se debe usar el nombre del programa.
Si la barra de progreso se muestra en un cuadro de diálogo modelado, optimice primero el título para mostrarlo en la barra de tareas colocando concisamente la información distintiva. Ejemplo: "66% completado".