Tipos de barras de progreso
La barra de progreso es una representación visual que permite a las personas conocer en qué parte del proceso se encuentran.
La sección gris de la barra muestra la duración total del proceso y la barra de color representa el avance del usuario dentro del mismo.
Simple
El componente sirve para comunicar cuánto se ha avanzado en el proceso.
Con descripción
Las barras de progreso pueden tener una descripción que brinde contexto sobre el proceso que se está llevando adelante.
Descripción
Diseño y estructura (contexto de uso)
Ubicación
La barra de progreso se debe ubicar alineada a la izquierda y sobre el contenido en el cual interactuará el usuario.
El color predeterminado es azul. En el caso que haga referencia directa a un proceso en curso, utilice la barra verde para connotar éxito en el avance.
Usabilidad
Buenas prácticas
Utilice textos explícitos que transmitan la naturaleza o el significado de la barra de progreso.
Las descripciones deben ser breves y claras. Mantenga el texto entre 1 y 4 palabras.
Utilice una progresión lógica. Muestre el avance del proceso de izquierda a derecha.
Malas prácticas
No utilizar este componente para formularios. La persona usuaria debe conocer en qué parte del proceso se encuentra.