Month: October 2012

Nos dan esperanzas y nos desesperan. Nos dan tiempo para hacer otras cosas. Nos hipnotizan. Se mueven y se mueven, pero nunca parecen llegar al final. Su mera presencia nos pone sobre el aviso de que algo está pasando…

Hablamos de las barras de progreso, elementos gráficos presentes en casi todas las aplicaciones que efectúan operaciones largas, como cargar grandes archivos, modificar imágenes o convertir clips de vídeo a otro formato.

El tiempo que pasamos contemplando el crecimiento de las barras de progreso suma días enteros, pero rara vez nos hemos preguntado quién creó las barras de progreso y cómo funcionan. Vamos a verlo.

“¿Cómo va esa tarea, computadora?”

¿Cómo sabemos si un ordenador está pensando? No hay rostro que podamos observar en busca de un ceño fruncido. Tampoco podemos hacerle preguntas. Lo único que nos indica que el ordenador está ocupado haciendo cálculos es la demora al contestar. Pero esa demora ni es constante ni tampoco es atribuible siempre al avance de un cálculo.

Hay indicadores sencillos, como luces que parpadean o indicadores de texto, que nos dicen si el ordenador está activo y haciendo cosas. Un ejemplo es la luz de actividad del disco duro. Pero estos signos son muy pobres en contenido: no dicen cuándo la máquina habrá terminado de efectuar una operación.

Cuando aparecieron las primeras interfaces gráficas de usuario (GUI), se abrió todo un mundo de posibilidades en cuanto a la visualización de los procesos internos de un ordenador,  mediante imágenes, colores y animaciones.

Por fin los programadores podían usar metáforas visuales para indicar qué estaba haciendo la máquina en todo momento, y reducir así la aprensión de los usuarios. Pero ¿qué metáfora podían usar para indicar el progreso de una tarea?

Las primeras barras de progreso… y las primeras patentes

Una de las metáforas más comprensibles para indicar el progreso de una acción (su estado en el tiempo) es el llenado de un recipiente o el movimiento de un indicador sobre una escala fija. Los termómetros, las botellas  o los temporizadores son objetos que nos permiten predecir cuándo se alcanza un estado de completud.

En 1896, Karol Adamiecki, un economista polaco, inventó el harmonograma, una representación del progreso de una tarea. Esta idea fue difundida algunos años más tarde por Henry Gantt, inventor del conocido diagrama de Gantt. En ambos casos, se usaba un gráfico sencillo para indicar el completado de una tarea.

Uno de los primeros diagramas de barras / cronogramas. Lo creó Joseph Priestley en 1756 (fuente)

Las primeras referencias sobre el uso de barras de progreso en interfaces gráficas se remontan a finales de los años 80. Por aquella época, la mayoría de ordenadores ejecutaba sistemas operativos en modo texto, y solo Apple (con Mac OS) y Microsoft (con las primeras versiones de Windows) dominaban el escenario de los sistemas gráficos.

Mac OS System 4.2, el primer sistema operativo que popularizó las barras de progreso

En los arcaicos archivos de los grupos de noticias Usenet, hemos descubierto referencias a las barras de progreso que datan de 1988, cuando Mac OS iba por la version 6. Por otras fuentes, sabemos que la barra de progreso apareció en Mac OS 4.2, en 1987: la usaba el Finder para mostrar el progreso de la copia de archivos.

Según Google Books, la expresión “barra de progreso” tuvo una explosión de popularidad a partir de 1988

Las barras de progreso fueron uno de los primeros protagonistas de la Guerra Fría de las Patentes de Software. En 1989 IBM presentó una patente que describía “un icono que cambia para marcar el progreso de una tarea”. Esta patente fue muy criticada por Richard Stallman, pues en su opinión impedía el desarrollo del software.

El gráfico incluido en la patente US5301348, “Icono de identificación de avance dinámico”

Cómo se crea una barra de progreso (¡ojo, hay código!)

La mayoría de lenguajes de programación cuentan con librerías de interfaz gráfica que facilitan enormemente la creación de las barras de progreso: con las funciones disponibles, no hace falta dibujarlas ni tampoco animarlas. A veces, es tan sencillo como arrastrarlas dentro del formulario (ventana) de la aplicación.

Con Visual C#, añadir una barra de progreso es tan fácil como arrastrarla y soltarla en la ventana

Sea cual sea el lenguaje de programación que uses para crear una aplicación, los pasos a seguir para añadir una barra de progreso a una aplicación suelen ser siempre los mismos:

1. Crear la barra de progreso (mediante código o con un editor visual)
2. Configurar los parámetros de la barra (mínimo, máximo, apariencia, etc.)
3. Actualizar la barra de progreso mediante un bucle que lee el dato a seguir

Vamos a ver un ejemplo sencillo en lenguaje C# (o C Sharp), uno de los más populares hoy en día. Tú mismo puedes probar descargando Microsoft Visual C# 2008, un entorno de programación gratuito para Windows.

El código, que hemos sacado de aquí, muestra el progreso de una copia de archivos (los comentarios van después de cada “//”). Empieza con la creación de la barra y la definición de sus parámetros (excepto los puramente visuales):

private void CopyWithProgress(string[] filenames)

{

// Muestra la barra de progreso.

pBar1.Visible = true;

// Pone el mínimo en 1 para representar el primer archivo copiado

pBar1.Minimum = 1;

// Define el máximo como el total de archivos a copiar

pBar1.Maximum = filenames.Length;

// Define el valor inicial de la barra

pBar1.Value = 1;

// Define la longitud de cada paso de la barra de progreso

pBar1.Step = 1;

El código anterior ha definido los valores mínimo, máximo e inicial de la barra, así como la longitud de cada incremento y su visibilidad. A continuación, el código para “nutrir” la barra de progreso con la información relativa al copiado de archivos:

// Bucle que recorre todos los archivos a copiar

for (int x = 1; x <= filenames.Length; x++)

{

// Copia un archivo y, si tiene éxito, incrementa la barra

if(CopyFile(filenames[x-1]) == true)

{

// El incremento de la barra de progreso

pBar1.PerformStep();

}

}

}

Por cada archivo copiado con éxito, la función PerformStep() incrementa en una unidad el contador, así hasta que todos los archivos se hayan copiado. Por si sola, la barra de progreso es totalmente ignorante acerca de lo que ocurre a su alrededor, y es por ello que debe “rellenarse” a partir de la información que le proporcionemos.

Usos y abusos de las barras de progreso

Hoy en día las barras de progreso son omnipresentes. Las encontramos en aplicaciones para Windows, aplicaciones web y apps para teléfonos móviles de última generación. Aparecen en las películas para añadir suspense, aunque casi siempre de una manera inexacta y banal.

Las barras de progreso, en suma, forman parte de nuestra cultura.

La famosa barra de progreso de Independence Day. Hasta que no se complete, la Tierra está en peligro…

Las barras de progreso conviven con otros indicadores, como los porcentajes (en aplicaciones en modo consola), los relojes de arena y punteros animados del ratón, así como con las pantallas de carga.

Las barras de progreso siguen siendo, con todo, el recurso gráfico más utilizado cuando hay que describir el progreso de una tarea en un entorno informático.

El nuevo cuadro de diálogo de copia de archivos de Windows 8, detalladísimo

Pero las malas prácticas a la hora de usar barras de progreso no faltan:

• Barras de progreso que llegan al 100% o que se reinician antes de que acabe un proceso
• Falta de precisión al indicar progreso o falta de progreso de una tarea
• Barras de progreso para operaciones que duran muchísimo tiempo (mejor usar notificaciones)
• Uso de barras para operaciones que duran pocos segundos
• Robo de foco: pasa a primer plano para mostrar el progreso

Dependiendo de la tarea cuyo progreso se quiere indicar, hay que usar una estrategia u otra. Por ejemplo, si hablamos de una transferencia de archivos, resulta mucho más informativo indicar qué archivos se están moviendo en lugar de poner únicamente el porcentaje. En otros casos, es mejor mostrar pocos detalles.

Un caso de animación inútil mezclada a información útil, pero sin porcentaje

Otros aspectos de las barras de progreso son más psicólogicos. Un estudio de 2007, por ejemplo, descubrió que percibimos como más rápidas las barras de progreso que aceleran hacia el final de la tarea en lugar de al principio. Según otro estudio, la presencia de pulsaciones también aumenta la sensación de velocidad.

La barra de descargas de Chrome es informativa, pero no molesta al usuario con una ventana aparte

Por todo esto, el futuro de las barras de progreso es incierto. Mientras haya tareas cuyo progreso necesite ser mostrado, las barras de progreso seguirán estando presentes en nuestros dispositivos, pero de una manera mucho más discreta, sin abrir ventanas e integrándose más en la interfaz principal del programa, sin molestar al usuario.

Personalización de las barras de progreso… y humor “progresivo”

Las barras de progreso, como elemento básico de la interfaz gráfica, se pueden personalizar fácilmente usando estilos visuales, paquetes de transformación o aplicaciones como WindowBlinds. Los sistemas operativos basados en Linux que usan entornos gráficos como Gnome o KDE facilitan bastante más la personalización.

Con el entorno gráfico KDE es posible personalizar al máximo el aspecto de la interfaz gráfica

Cuando algo se vuelve tan popular como las barras de progreso, las parodias son inevitables. Y así tenemos aplicaciones que crean falsas barras de progreso (Fake Progress Bar), que añaden música suave al progreso de la barra (Instant Elevator Music) o que la convierten en un gatito pixelado (Nyan Cat Progress Bar)…

Enlaces relacionados

• 35 magníficos diseños de barras de progreso
• Cómo crear una barra de progreso web con CSS3 y JavaScript
• Manual de estilo de Microsoft
• Manual de estilo de Mac OS X
• Manual de estilo de Gnome

Sígueme en Twitter: @remoquete