Directrices y lista de comprobación para controles de progreso (aplicaciones de la Tienda Windows)

Aquí describimos los procedimientos recomendados para usar controles de progreso en tus aplicaciones de la Tienda Windows con C++, C# o Visual Basic.

Guía básica: Relación de este tema con los demás. Consulta:

¿Es el control correcto?

Los controles ProgressBar y ProgressRing muestran a los usuarios el progreso de una operación que tarde más de 2 segundos en completarse. Un ProgressBar puede mostrar un porcentaje aproximado de finalización (progreso determinado) y ambos controles de progreso pueden indicar que hay una operación en curso (progreso indeterminado).

No es siempre necesario mostrar un control de progreso. A veces, el progreso de una tarea es lo bastante obvio por sí solo o la tarea se completa tan rápidamente que mostrar un control de progreso sería una distracción. Te ofrecemos algunos puntos que deberías considerar al determinar si quieres mostrar un control de progreso.

  • ¿Se completará la operación en unos dos segundos o menos?

    En ese caso, no muestres un control de progreso. Si una operación tarda más de dos segundos en completarse la mayor parte del tiempo (aunque no siempre), espera 500 ms antes de mostrar el control para evitar el parpadeo.

  • ¿Está la operación esperando 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.

  • ¿Necesita el usuario saber que está ocurriendo algo?

    Por ejemplo, si la aplicación está descargando algo en segundo plano y el usuario no inició la descarga, no tiene por qué controlar su progreso.

  • ¿Es la operación una actividad en segundo plano que no bloquea la actividad del usuario y tiene poco interés (aunque lo tenga en parte) para el usuario?

    Usa texto y puntos suspensivos cuando tu aplicación esté realizando tareas que no tienen que estar visibles constantemente, pero cuando todavía necesitas mostrar el estado.

    Ejemplo de texto como indicador de progreso

    Usa los puntos suspensivos para indicar que la tarea está en curso. Si hay varias tareas o elementos, puedes indicar cuántas tareas quedan pendientes. Cuando se completen todas las tareas, descarta el indicador.

  • ¿Puedes usar el contenido de la operación para visualizar el progreso?

    En ese caso, no muestres un control de progreso. Por ejemplo, cuando muestres imágenes cargadas desde el disco, estas aparecen en pantalla de una en una a medida que se cargan. Mostrar un control de progreso no proporcionaría ninguna ventaja; solo sería un estorbo en la UI.

No uses el "cursor de espera" para indicar actividad, ya que los usuarios que usan la funcionalidad táctil para interacciones con el sistema no lo verán y los que usen el mouse no necesitan dos maneras de visualizar la actividad (el cursor y el control de progreso).

Elegir el tipo correcto de estilo de control de progreso

Existen tres estilos de control de progreso:

  • El estilo de barra de progreso determinado

    Ejemplo de barra de progreso determinado

    Usa el estilo de barra de progreso determinado cuando una tarea sea determinada. es decir, cuando tenga una duración bien definida o un fin predecible. Estos son algunos ejemplos de tareas determinadas:

    • La aplicación está descargando una foto de 500 kB y por ahora ha recibido 100 kB.
    • La aplicación está mostrando un anuncio de 15 segundos y han pasado 2 segundos.
  • El estilo de barra de progreso indeterminado

    Ejemplo de barra de progreso indeterminado

    Usa este estilo para las tareas que sean indeterminadas y no sean modales (no bloqueen la interacción del usuario).

  • El estilo de barra de progreso indeterminado

    Ejemplo de círculo de progreso

    Usa este estilo para las tareas que sean indeterminadas y modales (bloqueen la interacción del usuario).

Trata las tareas parcialmente modales como si no fueran modales. Algunas tareas bloquean la interacción hasta que se realiza algún progreso y después el usuario puede empezar a interaccionar con la aplicación de nuevo. Por ejemplo, cuando el usuario realiza una consulta de búsqueda, se bloquea la interacción hasta que se muestre el primer resultado. Trata las tareas de este tipo como no modales y usa el estilo de barra de progreso indeterminado si el estado modal dura menos de dos segundos. Si el estado modal puede durar más de dos segundos, usa el círculo de progreso indeterminado para la fase modal de la tarea y después la barra de progreso indeterminado para la fase no modal.

Directrices generales

Estas directrices generales se deberían usar, sea cual sea el estilo de control de progreso que elijas.

  • Muestra un solo control de progreso para varias tareas activas relacionadas. Si hay varios elementos relacionados en la pantalla que estén realizando simultáneamente algún tipo de actividad, no muestres varios controles de progreso. En su lugar, muestra uno que finalice cuando se complete la última tarea. Por ejemplo, si la aplicación descarga varias fotos, muestra un solo control de progreso, en lugar de uno por cada foto.
  • No cambies la ubicación ni el tamaño del control de progreso mientras se esté ejecutando la tarea.

Directrices para tareas determinadas

Si puedes estimar la cantidad de trabajo que queda pendiente en tiempo, bytes, archivos o cualquier otra unidad de medida cuantificable, usa una barra de progreso determinado. Estas son algunas directrices para usar la barra de progreso determinado.

Cambiar de indeterminado a determinado

Si se necesita algo de tiempo (o una acción) para empezar a proporcionar un progreso determinado, usa primero la barra de progreso indeterminado y después cambia a la de progreso determinado.

Por ejemplo, si el primer paso de una tarea de descarga es conectarse a un servidor, no puedes estimar cuándo tiempo tardará. Una vez establecida la conexión, cambia a la barra de progreso determinado para mostrar el progreso de la descarga. Mantén la barra de progreso exactamente en el mismo lugar y con el mismo tamaño después del cambio de una a otra.

Cambiar de una barra de progreso indeterminado a otra de progreso determinado

Cambiar el progreso y el estado en línea

Supongamos que tienes una lista de elementos, como una lista de impresoras, y que ciertas acciones pueden iniciar una operación con elementos de esa lista (como instalar un controlador para una de las impresoras). Cuando sucede esto y la operación es determinada, muestra una barra de progreso determinado junto al elemento.

Muestra el tema (la etiqueta) de la tarea sobre la barra de progreso y el estado, debajo de ella. No proporciones texto de estado si lo que está pasando es evidente. Cuando se complete la tarea, oculta la barra de progreso. Usa el texto de estado para comunicar el nuevo estado de un elemento.

Mostrar el progreso en línea con el estado

Mostrar varias operaciones

Cuando quieras mostrar una lista de tareas, alinea el contenido en una cuadrícula para que los usuarios puedan ver el estado de un vistazo. Muestra barras de progreso para todos los elementos, también para los pendientes.

Como el objetivo de esta lista es mostrar las operaciones en curso, quítalas de la lista cuando se completen.

Mostrar varias barras de progreso

Mostrar progreso determinado modal de la aplicación en la barra de la aplicación

Si un usuario inició desde la barra de la aplicación una tarea que bloquea la interacción del usuario, muestra el control de progreso en la barra de la aplicación.

Si es obvio para qué está mostrando el progreso la barra de progreso, puedes alinearla con la parte superior de la barra de la aplicación y omitir la etiqueta y el estado. Si no, incluye texto de etiqueta y estado.

Deshabilita la interacción durante la tarea; para hacerlo, deshabilita los controles en la barra de la aplicación y pasa por alto la entrada en el área de contenido.

 

Qué hacer y qué no hacer para las tareas determinadas

Qué hacerSi la operación es modal (bloquea la interacción del usuario) y tarda más de 10 segundos, proporciona una forma de cancelarla.
Espacia las actualizaciones del progreso con uniformidad. Evita situaciones en las que el progreso aumenta a más del 80 % y después se detiene durante mucho tiempo. Deberías acelerar el progreso hacia el final, no hacerlo más lento. Evita cambios drásticos, como pasar de 0 % a 90 %.
Después de definir el progreso como 100 %, espera a que la barra de progreso determinado termine la animación antes de ocultarla.
Si la tarea se detiene (por un usuario o una condición externa) pero el usuario puede reanudarla, indica visualmente que el progreso se ha pausado estableciendo la propiedad ShowPaused en verdadero. Proporciona el texto de estado debajo de la barra de progreso que indica al usuario lo que está pasando.
Si se detiene la tarea y no se puede reanudar o si tiene que reiniciarse desde el principio, indica visualmente que hay un error estableciendo la propiedad ShowError en verdadero. Reemplaza el texto de estado (debajo de la barra) con un mensaje que indique al usuario qué ha pasado y cómo corregir el problema (si es posible).

 

Qué no hacerNo reduzcas el progreso. Incrementa siempre el valor de progreso. Si tienes que invertir una acción, muestra el progreso de la inversión como si fuera el progreso de cualquier otra acción.
No reinicies el progreso (de 100 % a 0 %), a menos que sea obvio para el usuario que el paso o la tarea actuales no son los últimos. Por ejemplo, supongamos que una tarea tiene dos partes: descargar algunos datos y después procesar y mostrar los datos. Cuando se complete la descarga, restablece la barra de progreso a 0 % y empieza a mostrar el progreso del procesamiento de los datos. Si los usuarios no ven claro que hay varios pasos en una tarea, contrae las tareas bajo una sola escala de 0 a 100 % y actualiza el texto de estado a medida que pases de una tarea a la siguiente.

 

Directrices para tareas indeterminadas

Si la tarea es modal (bloquea la interacción hasta que se completa), usa el estilo de círculo de progreso indeterminado. Si la tarea no es modal, usa el estilo de barra de progreso indeterminado.

Anillo de progreso indeterminado

Sigue estas directrices para mostrar el círculo de progreso:

  • Muestra el círculo de progreso en el contexto de la acción: muéstralo cerca de la ubicación donde el usuario inició la acción o donde se vayan a mostrar los datos resultantes.
  • Proporciona el texto de estado a la derecha del círculo de progreso.
  • Usa el mismo color para el círculo de progreso que para su texto de estado.
  • Deshabilita los controles con los que el usuario no debería interaccionar mientras se esté ejecutando la tarea.
  • Si la tarea tiene como resultado un error, oculta el indicador de progreso y el texto de estado, y muestra en su lugar un mensaje de error.

Estas son algunas directrices para situaciones específicas donde se usa el círculo de progreso.

En un cuadro de diálogo, se produce una acción antes de pasar a la siguiente pantalla

Coloca el círculo de progreso justo encima el área del botón, alineado a la izquierda con el contenido del cuadro de diálogo.

Progreso en un cuadro de diálogo
Mostrar el progreso en una ventana de la aplicación con controles alineados a la derecha

Coloca el círculo de progreso a la izquierda o justo encima del control que causó la acción. Alinea el círculo de progreso a la izquierda con el contenido relacionado.

Progreso en una ventana de la aplicación
Mostrar el progreso en una ventana de la aplicación con controles alineados a la izquierda

Si un control que inicia la acción modal está alineado a la izquierda, coloca el círculo de progreso a la derecha de ese control. O también lo puedes colocar debajo del control.

Anillo de progreso con controles alineados a la izquierda

- o bien -

Anillo de progreso debajo de controles alineados a la izquierda

Mostrar el progreso en un control flotante

Usa un control flotante si la actividad puede continuar en segundo plano cuando el usuario pulsa fuera del control flotante para descartarlo.

Control de progreso en un control flotante
Mostrar varios elementos

Coloca el círculo de progreso y el estado de estado debajo del título del elemento. Si se produce un error, reemplaza el círculo de progreso y el estado con texto de error.

Un círculo de progreso en una lista de varios elementos

 

Barra de progreso indeterminado

Usa una barra de progreso indeterminado para las tareas que no bloquean la interacción del usuario (no modales).

Estas son algunas directrices para las situaciones en que uses una barra de progreso indeterminado.

Mostrar el progreso en un control flotante

Coloca la barra de progreso indeterminado en la parte superior del control flotante y define un ancho que abarque todo el control flotante. Esta posición reduce la distracción al mínimo sin dejar de comunicar la actividad en curso. No asignes título al control flotante, porque esto te impedirá colocar la barra de progreso en la parte superior del control flotante.

Barra de progreso indeterminado en un control flotante
En una ventana de la aplicación

Coloca la barra de progreso indeterminado en la parte superior de la ventana de la aplicación abarcando todo su ancho.

Barra de progreso indeterminado en una ventana de la aplicación

 

Directrices para el texto de estado

  • Cuando uses la barra de progreso determinado, no muestres el porcentaje de progreso en el texto de estado. El control ya proporciona esa información.
  • Si usas texto para indicar actividad sin un control de progreso, usa los puntos suspensivos para expresar que la actividad está en curso.
  • Si usas un control de progreso, no uses puntos suspensivos en el texto de estado, pues el control de progreso ya indica que la operación está en curso.

Patrones de diseño

Estas son las directrices de diseño para varios patrones habituales de uso de los controles de progreso.

  • Barra de progreso determinado con etiqueta y estado

    Barra de progreso determinado con etiqueta e información de estado

  • Varias barras de progreso

    Diseño recomendado para varias barras de progreso

  • Anillo de progreso indeterminado con texto de estado

    Diseño para el círculo de progreso indeterminado con texto de estado

  • Barra de progreso indeterminado

    Barra de progreso indeterminado

Temas relacionados

Guía básica para crear aplicaciones con C#, C++ o VB

 

 

Mostrar:
© 2015 Microsoft