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 la evolución de una operación larga. Una barra de progreso puede mostrar un porcentaje aproximado de finalización (determinada) o indicar que una operación está en curso (indeterminada).
Los estudios de usabilidad han demostrado que los usuarios son conscientes de los tiempos de respuesta superiores a un segundo. Por consiguiente, las operaciones que tarden dos segundos o más en completarse se considerarán largas y necesitarán algún tipo de información sobre el progreso.
Una barra de progreso típica.
Nota:
Directrices relacionadas con diseño se presentan en un artículo separado.
¿Es este el control adecuado?
Para decidirse, considere estas preguntas:
¿Se completará la operación en unos cinco segundos o menos? Si es así, utilice un indicador de actividad porque mostrar una barra de progreso durante tan poco tiempo distraería la atención. Si la operación suele tardar cinco segundos o menos, pero a veces tarda más, empiece con un puntero ocupado y conviértalo en una barra de progreso al cabo de cinco segundos.
¿Se utiliza una barra de progreso indeterminado para esperar a que el usuario complete una tarea? Si es así, no utilice una barra de progreso. Las barras de progreso son para el progreso del ordenador, no del usuario.
Es una barra de progreso indeterminada combinada con una animación... no es el progreso del usuario. Si es así, utilice solo la animación. La barra de progreso indeterminado es efectivamente una animación genérica y no añade ningún valor a la animación.
¿Es la operación una tarea en segundo plano muy larga (más de dos minutos) en la que los usuarios están más interesados en finalizar que en progresar? Si es así, utilice un notificaciones 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 interrupción. Ejemplos de estas operaciones largas son la impresión, las copias de seguridad, los escaneos del sistema y las transferencias o conversiones masivas de datos.
Una vez finalizada la operación, ¿podrán los usuarios reproducir los resultados? Si es así, utilice un deslizador en su lugar. Ejemplos de estas operaciones son la grabación y reproducción de vídeo y audio.
En este ejemplo, se utiliza un control deslizante para indicar el progreso mientras se reproduce el sonido. De este modo, los usuarios pueden reproducir los resultados más tarde.
Conceptos de diseño
Durante una operación larga, los usuarios necesitan una idea general de lo que está haciendo la operación. También necesitan saber:
- Que ha comenzado una larga operación.
- Que se está avanzando y que la operación acabará completándose (y por tanto no se ha bloqueado).
- El porcentaje aproximado de la operación que se ha completado (y, por tanto, el porcentaje restante).
- Si deberían cancelar la operación si no merece la pena seguir esperando.
- Si deben seguir esperando o hacer otra cosa mientras se completa la operación.
Utilice barras de progreso determinadas para las operaciones que requieren un tiempo limitado, aunque esa cantidad de tiempo no pueda predecirse con exactitud. Las barras de progreso indeterminado muestran que se está avanzando, pero no proporcionan ninguna otra información No elija una barra de progreso indeterminada basándote 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 una cantidad de tiempo limitada, pero la cantidad de tiempo de cada paso puede variar mucho. En este caso, utilice una barra de progreso determinada y muestre el progreso cuando se complete cada paso de forma proporcional al tiempo que suele tardar cada paso. Utilice una barra de progreso indeterminada solo si una barra de progreso determinada haría que los usuarios concluyeran erróneamente que la operación se ha bloqueado.
Si solo hace una cosa...
Asegúrese de que proporciona información sobre el progreso de las operaciones prolongadas y de que la información anterior se comunica con claridad. Utilice 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 | Valor |
|---|---|
| Barras de progreso determinadas modales Indique el progreso de una operación rellenando de izquierda a derecha y rellenando completamente cuando la operación haya finalizado. |
Debido a que este feedback es modal, los usuarios no pueden realizar otras tareas en la ventana (o en su padre si se muestra en un cuadro de diálogo modal) hasta que la operación haya finalizado.  En este ejemplo, la barra de progreso proporciona información durante la configuración. |
| Barras de progreso modales determinadas con un botón Cancelar o Detener Permitir a los usuarios detener la operación, quizás porque la operación está tardando demasiado o no merece 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 modales determinadas con un botón Cancelar o Detener y animación Permitir a los usuarios detener la operación, e incluir 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 doble progreso determinadas modales Indicar el progreso de una operación de varios pasos mostrando el progreso del paso actual en la primera barra de progreso, y el progreso global en la segunda barra. |
Dado que la primera barra de progreso proporciona poca información adicional y puede distraer bastante, no se recomienda este patrón. En su lugar, haga que todos los pasos de la operación compartan una parte del progreso y que una sola barra de progreso llegue a completarse 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 global. Nota: Este patrón suele ser innecesario y debe evitarse. |
| Barras de progreso determinadas sin modales Indique el progreso de una operación rellenando de izquierda a derecha y rellenando completamente cuando la operación haya finalizado. |
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 pueden mostrarse en contexto o en una barra de estado.  En este ejemplo, Windows Internet ExplorerWindows Internet Explorer muestra su progreso de carga de una página Web en la barra de estado. Los usuarios pueden realizar otras tareas mientras se carga la página. |
Barras de progreso indeterminadas
| Tipo de barra de progreso | Descripción |
|---|---|
| Barras de progreso indeterminadas modales Indica que una operación está en curso mostrando una animación que recorre continuamente la barra de izquierda a derecha. |
Solo se utiliza para operaciones cuyo progreso global no puede determinarse, por lo que no existe la noción de integridad. Las barras de progreso determinadas son preferibles porque indican el porcentaje aproximado de la operación que se ha completado, y ayudan a los usuarios a determinar si merece la pena seguir esperando. También distraen menos la vista.  En este ejemplo, Windows Update utiliza una barra de progreso modal indeterminada para indicar el progreso mientras busca actualizaciones. |
| Barras de progreso indeterminadas sin modales Indica 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 proceso está en curso. estas barras de progreso pueden mostrarse en contexto o en una barra de estado.  En este ejemplo, Microsoft Outlook utiliza una barra de progreso indeterminada sin modelo mientras rellena las propiedades de los contactos. Los usuarios pueden seguir utilizando la ventana de propiedades mientras duren estas obras. |
Metros
| Tipo | Descripción |
|---|---|
| Metros Indique un porcentaje que no esté relacionado con el progreso. |
Este patrón no es una barra de progreso, pero se implementa utilizando el control de barra de progreso. Los contadores tienen un aspecto distinto para diferenciarlos de las verdaderas barras de progreso.  En este ejemplo, el medidor muestra el porcentaje de espacio de disco utilizado. |
Directrices
General
Proporcionar información sobre el progreso al realizar una operación larga. Los usuarios nunca deberían tener que adivinar si se está avanzando.
Indican claramente un progreso real. La barra de progreso debe avanzar si se está progresando. Si el intervalo de tiempos de finalización previstos es amplio, considere la posibilidad de utilizar una escala no lineal para indicar el progreso en los tiempos más largos. No querrá que los usuarios concluyan que su programa se ha bloqueado cuando no es así.
Indican claramente una falta de progreso. La barra de progreso no debe avanzar si no se está progresando. No querrá que los usuarios esperen indefinidamente una operación que nunca se va a completar.
Proporcione detalles útiles sobre el progreso. Proporcione información adicional sobre el progreso, pero solo si los usuarios pueden hacer algo con ella. Asegúrese de que el texto se muestra el tiempo suficiente para que los usuarios puedan leerlo.
En este ejemplo, los usuarios pueden ver la tasa de transferencia. La baja velocidad de transferencia sugiere la necesidad de utilizar una conexión de red de gran ancho de banda.
No proporcione detalles innecesarios. Por lo general, a los usuarios no les importan 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 concreto que se está copiando o que se estén registrando los componentes del sistema porque no tienen expectativas sobre estos detalles. Normalmente, una barra de progreso bien etiquetada proporciona por sí sola información suficiente, así que proporcione información de progreso adicional solo si los usuarios pueden hacer algo con ella. Proporcionar detalles que a los usuarios no les interesan hace que la experiencia de usuario sea excesivamente complicada y técnica. Si necesita información más detallada para la depuración, no la muestre en las versiones de lanzamiento.
Correcto:
En este ejemplo, la barra de progreso etiquetada es todo lo que se necesita.
Correcto:
En este ejemplo, el Windows Explorer está copiando los archivos seleccionados por el usuario, por lo que mostrar los nombres de los archivos que se están copiando tiene sentido.
Incorrecto:
En este ejemplo, un programa de configuración está proporcionando detalles que no tienen sentido para el usuario.
Proporcione detalles útiles sobre animaciones. Si se hacen bien, las animaciones mejoran la experiencia del usuario ayudándole a visualizar la operación. Las buenas animaciones tienen más impacto que el texto solo. Por ejemplo, la barra de progreso del comando Eliminar de Outlook muestra la Papelera de reciclaje del destino si los archivos se pueden recuperar, pero no muestra la Papelera de reciclaje si los archivos no se pueden recuperar.
En este ejemplo, la ausencia de Papelera de Reciclaje refuerza que los archivos se están borrando permanentemente. Esta información adicional no se comunicaría con la misma eficacia utilizando solo texto.
No utilice animaciones innecesarias. Las animaciones pueden ser engañosas porque normalmente se ejecutan en un hilo separado 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 es parte de la razón. En consecuencia, solo utilice animaciones cuando exista una justificación clara; no las utilice para intentar entretener a los usuarios.
Posicionar las animaciones centradas sobre la barra de progreso. Ponga 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.
Reproduzca un efecto de sonido al finalizar una operación solo si es muy larga (más de dos minutos), infrecuente e importante. Si es probable que el usuario se aleje de una operación importante mientras se está procesando, un efecto sonoro restablece la atención del usuario. Utilizar un efecto de sonido al terminar en otras circunstancias sería una molestia que distraería.
No robe el foco de entrada para mostrar una actualización de progreso o finalización. Los usuarios suelen cambiar a otros programas mientras esperan y no quieren que se les interrumpa. Las tareas en segundo plano deben permanecer en segundo plano.
No se preocupe por la asistencia técnica. Dado que la información proporcionada por las barras de progreso no es necesariamente exacta y es efímera, las barras de progreso no son un buen mecanismo para proporcionar información al servicio técnico. Por lo tanto, si la operación puede fallar (como con un programa de instalación), no proporcione información adicional sobre el progreso que solo es útil para el servicio técnico. En su lugar, proporcione un mecanismo alternativo, como un archivo de registro, para registrar la información de asistencia técnica.
Incorrecto:
En este ejemplo, la barra de progreso muestra detalles destinados al soporte técnico.
No ponga el porcentaje completado ni ningún otro texto en una barra de progreso. Ese texto no es accesible y no es compatible con el uso de temas.
Incorrecto:
En este ejemplo, el texto del porcentaje en la barra de progreso no es accesible.
No combine una barra de progreso con un puntero ocupado. Utilice uno u otro, pero no los dos a la vez.
No utilice barras de progreso verticales. Las barras de progreso horizontales tienen un trazado más natural y fluyen mejor.
Barras de progreso determinadas
Utilice barras de progreso determinadas para las operaciones que requieren un tiempo limitado, aunque esa cantidad de tiempo no pueda predecirse con exactitud. Las barras de progreso indeterminado muestran que se está avanzando, pero no proporcionan ninguna otra información No elija una barra de progreso indeterminada basándote solo en la posible falta de precisión.
Indique claramente la fase de progreso. La barra de progreso debe poder indicar si la operación se encuentra al principio, en medio o al final de la misma. Por ejemplo, las barras de progreso que se disparan inmediatamente al 99 por ciento de finalización y luego permanecen ahí durante mucho tiempo son especialmente poco informativas y molestas. En estos casos, la barra de progreso debe fijarse inicialmente como máximo en el 33 por ciento para indicar que la operación se encuentra aún en la fase inicial.
Indican claramente la finalización. No deje que una barra de progreso llegue al 100 por ciento a menos que la operación se haya completado.
Proporcione una estimación del tiempo restante si puede hacerlo con precisión. Las estimaciones de tiempo restante que son precisas son útiles, pero las estimaciones que están muy lejos de la marca o rebotan significativamente no son útiles. Es posible que tenga que realizar algún tratamiento antes de poder ofrecer estimaciones precisas. Si es así, no muestre estimaciones potencialmente inexactas durante este periodo 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 llegue a completarse una vez.
Incorrecto:
En este ejemplo, la operación se movió al paso de copiar archivos y reinició la barra de progreso para ese paso. Ahora los usuarios no tienen ni idea de cuánto se ha avanzado ni de cuánto tiempo queda.
No retroceda el progreso. Al igual que con un reinicio, una barra de progreso pierde su valor si retrocede. Aumente siempre el progreso de forma monótona. Sin embargo, puede tener una estimación de tiempo restante que aumente (y también que disminuya) porque el ritmo de avance puede variar.
Barras de progreso indeterminadas
Use barras de progreso indeterminada solo para operaciones cuyo progreso global no puede determinarse. Utilice barras de progreso indeterminadas para las operaciones que requieren un tiempo ilimitado o que acceden a un número desconocido de objetos. Utilice los tiempos de espera para limitar las operaciones basadas en el tiempo.
Convertir en una barra de progreso determinada una vez que se pueda determinar el progreso global. Por ejemplo, si se tarda bastante más de dos segundos en determinar el número de objetos, puede utilizar una barra de progreso indeterminada mientras se cuentan los objetos y, a continuación, pasar a una barra de progreso determinada.
No combine barras de progreso indeterminadas con estimaciones de porcentaje completado o tiempo restante. Si puede proporcionar esta información, utilice en su lugar una barra de progreso determinada.
No combine barras de progreso indeterminadas con animaciones. Una barra de progreso indeterminada es en realidad una animación genérica, por lo que debe utilizar una u otra, pero nunca ambas.
Correcto:
En este ejemplo, solo se utiliza una animación para mostrar que hay una operación en curso.
Barras de progreso sin modelo
Si los usuarios pueden hacer algo productivo mientras la operación está en curso, proporcione información sin modelos. Es posible que tenga que desactivar un subconjunto de funciones que requieren la operación para completarse.
Si la ventana tiene una barra de direcciones, muestra el progreso de modeless en la barra de direcciones.
En este ejemplo, el progreso de modeless se muestra en la barra de direcciones.
De otra forma, si la ventana tiene una barra de estado, mostrar el progreso sin modelo en la barra de estado. Coloque el texto correspondiente a su izquierda en la barra de estado.
En este ejemplo, el progreso de modeless se muestra en la barra de estado.
Barras de progreso modelo
Colocar barras de progreso modales en las páginas de progreso o cuadros de diálogo de progreso.
Proporcione un botón de comando para detener la operación si tarda más de unos segundos en completarse, o tiene el potencial de no completarse nunca. Etiquete el botón Cancelar si la cancelación devuelve el entorno a su estado anterior (sin dejar efectos secundarios); en caso contrario, etiquete el botón Detener para indicar que deja intacta la operación parcialmente completada. Puede cambiar la etiqueta del botón de Cancelar a Detener en mitad de la operación si en algún momento no es posible devolver el entorno a su estado anterior. Centra el botón de comando verticalmente con la barra de progreso en lugar de alinear sus partes superiores.
Correcto:
En este ejemplo, detener la conexión de red no tiene ningún efecto secundario, por lo que se utiliza Cancelar.
Correcto:
En este ejemplo, al detener la copia se deja cualquier archivo copiado, 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 barras de progreso determinadas:
Utilice los siguientes formatos de hora. Comience con el primero de los siguientes formatos en el que la unidad de tiempo mayor no sea cero y, a continuación, cambie al siguiente formato una vez que la unidad de tiempo mayor sea cero.
Para las barras de progreso:
Si la información relacionada se muestra en formato de dos puntos:
Tiempo restante: h horas, m minutos
Tiempo restante: m minutos, s segundos
Tiempo restante: s segundos
Si el espacio en pantalla es escaso:
h horas, m minutos restantes
m minutos, s segundos restantes
s segundos restantes
De lo contrario:
h horas, m minutos restantes
m minutos, s segundos restantes
s segundos restantes
Para las barras de título:
hh:mm restante
mm:ss restantes
0:ss restantes
Este formato compacto muestra primero la información más importante para que no quede truncada en la barra de tareas.
Haga estimaciones exactas, pero no dé una precisión falsa. Si la unidad mayor son las horas, indique los minutos (si son significativos) pero no los segundos.
Incorrecto:
hh horas, mm minutos, ss segundos
Mantenga actualizado el presupuesto. Actualice las estimaciones de tiempo restante al menos cada 5 segundos.
Céntrese en el tiempo restante porque es la información que más interesa a los usuarios. Indique el tiempo total transcurrido solo cuando haya situaciones en las que el tiempo transcurrido sea útil (como cuando es probable que la tarea se repita). Si la estimación del tiempo restante está asociada a una barra de progreso, no tenga el porcentaje de texto completo porque esa información la transmite la propia barra de progreso.
Sea gramaticalmente correcto. Utilice unidades singulares cuando el número sea uno.
Incorrecto:
1 minutos, 1 segundo
Utilice mayúsculas como en las frases.
Barra de progreso de colores
- Utilice 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 es recuperable, deja la barra de progreso en verde y muestra un mensaje de error.
- Ponga la barra de progreso en rojo cuando haya una condición recuperable por el usuario que impida seguir avanzando. Muestra un mensaje para explicar el problema y recomendar una solución.
- Poner la barra de progreso en amarillo para indicar que el usuario ha pausado la tarea o que hay una condición que está impidiendo el progreso pero se sigue avanzando (como, por ejemplo, con la mala conectividad de la red). Si el usuario ha hecho una pausa, cambie la etiqueta del botón Pausa por Reanudar. Si el progreso se ve obstaculizado, muestra un mensaje para explicar el problema y recomendar una solución.
Metros
- Utilice las barras de progreso solo para el progreso. Utilice contadores para indicar porcentajes que no estén relacionados con el progreso.
Tamaño y espaciado recomendados
Dimensionamiento y espaciado recomendados para las barras de progreso.
- Utilice siempre la altura recomendada para la barra de progreso.
- Excepción: Puede utilizar una altura diferente si la ventana principal no admite la altura recomendada.
- Utilice la anchura mínima si desea que la barra de progreso sea discreta.
- No utilice anchuras superiores a la máxima recomendada. La barra de progreso no tiene por qué ocupar todo el espacio disponible.
- Centre la barra de progreso horizontalmente si la ventana es mucho más ancha que la anchura máxima recomendada.
Etiquetas
Etiquetas de barra de progreso
Utilice una etiqueta concisa con un control de texto estático para indicar lo que está haciendo la operación. Empiece la etiqueta con un verbo (por ejemplo, Copiar) y termine con una elipsis. Esta etiqueta puede cambiar dinámicamente si la operación tiene varios pasos o está procesando varios objetos.
No asigne una única clave de acceso porque el control no es interactivo.
Utilice mayúsculas en las frases.
Si la operación no fue iniciada directamente por el usuario, puede incluir una etiqueta adicional para dar el contexto y disculparse por la interrupción. Comience esta etiqueta adicional con la frase "Espere un momento". Esta etiqueta no debe cambiar durante la operación.
En este ejemplo, se pide al usuario que espere porque no ha iniciado directamente la operación.
Coloque la etiqueta encima de la barra de progreso y alinéela con el borde izquierdo de la barra de progreso.
Datos de barra de progreso
Proporcione detalles en texto estático, precediendo los datos con una etiqueta que termine con dos puntos. Especifique las unidades (segundos, kilobytes, etc.) después del texto de detalles.
Correcto:
En este ejemplo, los datos están propiamente etiquetados.
Incorrecto:
En este ejemplo, los detalles no están etiquetados, lo que obliga a los usuarios a determinar su significado.
Utilice mayúsculas en las frases.
Coloque los datos debajo de la barra de progreso y alinéela con el borde izquierdo de la barra de progreso.
No indique el porcentaje completado o restante porque esa información la transmite 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 dejar efecto secundario); en caso contrario, etiquete el botón Detener para indicar que deja intacta la operación parcialmente completada.
- Puede cambiar la etiqueta del botón de Cancelar a Detener en mitad de la operación si en algún momento no es posible devolver el entorno a su estado anterior.
Títulos de los cuadros de diálogo de 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 utilice lo que debería 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 utiliza 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 reformulación de la etiqueta de la barra de progreso. En su lugar debe utilizarse el nombre del programa.
Si la barra de progreso se muestra en un cuadro de diálogo sin modelo, optimice el título para su visualización en la barra de tareas colocando primero la información distintiva de forma concisa. Ejemplo: "66% completado."