Interfaces Gráficas de Usuario/Progress Bars

De Wikilibros, la colección de libros de texto de contenido libre.

Definición[editar]

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 (determinada), o indicar que una operación está en curso (indeterminado).

Cuando y como implementar una barra de progreso[editar]

La acción toma menos de 5 segundos:[editar]

Si es así, utilice un indicador de actividad de cambio, debido a que mostrar una barra de progreso para una duración tan corta no resulta practico. Si la operación dura normalmente entre cinco segundos o menos, comience con un puntero ocupado y conviertalo en una barra de progreso si la operación dura mas de 5 segundos de cinco segundos.

Usar una barra de progreso para esperar que el usuario complete una tarea:[editar]

Para este caso no utilice una barra de progreso. Las barras de progreso son para el progreso del ordenador, no del progreso del usuario.

Es la operación de un muy largo tiempo(más de dos minutos) :[editar]

Si es así, utilice una notificación en su lugar. En este caso, los usuarios hacen otras tareas mientras tanto, no están monitoreando el progreso. Uso de una notificación permite a los usuarios realizar otras tareas sin interrupción. Ejemplos de tales operaciones largas incluyen la impresión, copia de seguridad, los análisis del sistema, y las transferencias o conversiones masivas de datos.

Cuando la operación se haya completado, los usuarios podrán reproducir los resultados[editar]

Si es así, utilice un control deslizante en su lugar. Ejemplos de este tipo de operaciones incluyen la grabación y reproducción de audio y vídeo.


Conceptos de diseño[editar]

Durante una operación de larga duración, los usuarios tienen una idea general de lo que está haciendo la operación.Pero también necesitan saber:

  • Que una operación de larga duración se ha iniciado.
  • Ese progreso se está realizando y que la operación se esta completando (y por lo tanto no se ha bloqueado).
  • El porcentaje aproximado de la operación que se esta completado (y por lo tanto el porcentaje restante).
  • Si se debe cancelar la operación y no vale la pena seguir esperando.
  • Si deben seguir esperando o debe hacer otra cosa mientras que la operación se completa.

Barras de progreso determinadas[editar]

Barras de progreso determinadas sencilla[editar]

indican el progreso de una operación mediante la completacion de izquierda a derecha y de llenado por completo cuando la operación se haya completado.

Barras de progreso determinadas con un botón Cancelar o Detener[editar]

Permite al usuario detener la operación, tal vez porque la operación se está llevando demasiado tiempo o no vale la pena la espera.

Barras de progreso dobles determinados[editar]

indican el progreso de una operación de múltiples pasos, mostrando el progreso de la etapa actual de la primera barra de progreso y el progreso general en la segunda barra


Barras de progreso indeterminada[editar]

Barras de progreso indeterminadas sencilla[editar]

indican una operación en curso, mostrando una animación que cíclicamente a través de la barra de izquierda a derecha.

Medidores[editar]

Este patrón es una barra de progreso indeterminada que mide la relación de porcentaje de algún factor del sistema,un claro ejemplo esta barra seria el medidor que muestra el porcentaje de espacio utilizado en el disco.

Recomendaciones a la hora de implementar[editar]

  • Proporcionar retroalimentación progreso cuando se realiza una operación larga
  • Indique claramente el progreso real.
  • Indique claramente la falta de progreso.
  • Proporcionar útiles detalles del progreso
  • No proporcione detalles innecesarios
  • Proporcionar animaciones útiles.
  • No utilice animaciones innecesarias.
  • No ponga el porcentaje completado o cualquier otro texto en una barra de progreso
  • No combine una barra de progreso con un puntero ocupado
  • No utilice barras de progreso verticales.
  • Tamaño recomendado para las barras: 5 px de distancia entre un lablel y ella 15 px de expesor 160px-355px de largo