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 que sean largas y necesiten 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 en su lugar. La barra de progreso indeterminada es efectivamente 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 en su lugar una notificación . 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 largas operaciones se incluyen la impresión, la copia de seguridad, los exámenes del sistema y las conversiones o transferencias masivas de datos.

• Una vez completada 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. Esto permite a los usuarios reproducir los resultados más adelante.

Conceptos de diseño

Durante una larga operación, los usuarios necesitan una idea general de lo que hace la operación. También necesitan saber lo siguiente:

• Que se ha iniciado una larga operación.
• Ese progreso se está realizando y que la operación finalizará 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 merece 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 una cantidad limitada de tiempo, 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 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 provocaría que los usuarios concluiran 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 determinas modal 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 determinas modal 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 determinas modal 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.
Barra de progreso doble determina 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 de la segunda barra.	Dado que la primera barra de progreso proporciona poca información adicional y puede ser bastante distraída, 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 finalice 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: Este patrón suele ser innecesario y debe evitarse.
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 indeterminadas

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.	Se usa solo 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 merece la pena continuar esperando. También son menos distraídos visualmente. En este ejemplo, Windows Update usa una barra de progreso modal indeterminada para indicar el progreso mientras busca actualizaciones.
Barras de progreso indeterminadas modeless 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 sobre el 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 concluirán que el programa se ha bloqueado cuando no lo ha sido.

• 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 a 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 suficiente 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 ancho de banda alto.

• No proporcione detalles innecesarios. Por lo general, los usuarios no se preocupan por los detalles de la operación que se realiza. 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 están registrando porque no tienen expectativas sobre estos detalles. Normalmente, una barra de progreso bien etiquetada solo proporciona suficiente información, por lo que proporciona información de progreso adicional solo si los usuarios pueden hacer algo con ella. Proporcionar detalles que los usuarios no les 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, el Explorador de Windows copia los archivos seleccionados por el usuario, por lo que mostrar los nombres de archivo que se copian es significativo.

  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 Eliminar de Outlook muestra la Papelera de reciclaje para el destino si se pueden recuperar los archivos, pero sin 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 solo.

• No use 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, solo se usan animaciones cuando hay una justificación clara; no los use para intentar entretener a los usuarios.

• Las animaciones de posición se centran sobre 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.

• Reproducir un efecto de sonido en la finalización de una operación solo si es muy largo (más de dos minutos), poco frecuente y 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. El uso de un efecto de sonido al finalizar 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 interrumpirse. 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 son flotados, las barras de progreso no son un buen mecanismo para proporcionar información para el 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 de porcentaje de la barra de progreso.

• No combine una barra de progreso con un puntero ocupado. Use uno o el otro, pero no ambos al mismo tiempo.

• No use barras de progreso verticales. Las barras de progreso horizontales 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 disparan inmediatamente al 99 por ciento 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 como máximo el 33 por ciento 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 por ciento a menos que se haya completado la operación.

• Proporcione una estimación de tiempo restante si puede hacerlo con precisión. Las estimaciones restantes de tiempo que son precisas son útiles, pero las estimaciones que están fuera de la marca o rebotan 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 requiera 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 del modelo 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 páginas de progreso ocuadros 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 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, la detención de la búsqueda no deja ningún efecto secundario, por lo que el botón de comando debe etiquetarse como Cancelar.

Tiempo restante

Para determinar las barras de progreso:

• Use los siguientes formatos de hora. Comience con el primero de los siguientes formatos donde 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 barras de progreso:

  Si la información relacionada se muestra en un formato de dos puntos:

  Tiempo restante: horas h, 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 secs 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 trunquen en la barra de tareas.

• Realice estimaciones precisas, pero no proporcione precisión falsa. Si la unidad más grande es de horas, dé minutos (si son significativos), pero no segundos.

  Incorrecto:

  hh hours, mm minutes, ss seconds

• Mantenga actualizada la estimación. El tiempo restante de actualización calcula al menos cada 5 segundos.

• Céntrese en el tiempo restante porque es la información que más le interesan a los usuarios. Conceda 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 el tiempo restante se asocia a una barra de progreso, no tenga texto completo por porcentaje porque la propia barra de progreso transmite esa información.

• Sea 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.
• Active la barra de progreso en 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.
• Active la barra de progreso amarilla para indicar que el usuario ha pausado la tarea o que hay una condición que está impediendo el progreso , pero el progreso sigue teniendo lugar (por ejemplo, con 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 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.

• Use mayúsculas de estilo de oración.

• 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, que precede a 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.

• Use mayúsculas de estilo de oración.

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