Pasar al contenido principal

Mensajes de estado

Los mensajes de estado son comunicaciones que ayudan a las personas usuarias a tomar decisiones premeditadas. Informan que algo ha ocurrido o va a ocurrir y tal vez requieran de su acción. También, sirven para reducir la incertidumbre y evitar que los usuarios cometan errores.

Tipos de mensajes de estado

Las variantes de los mensajes de estado cuentan con un ícono y color específicos para ayudar a discernir el tono del mensaje a las personas con deficiencia de visión.

Mensaje de Éxito

Son aquellos que informan al usuario sobre el resultado de la acción realizada correctamente.

Este es un mensaje de éxito

Esto es un párrafo que acompaña y sirve para indicar que el usuario realizó una acción correctamente, como cuando realiza una tarea con éxito.

  • Éste es un ítem dentro de una lista que puede contener un enlace.
  • Los ítems pueden contener o no enlaces. Este es un ejemplo para un detalle que no lleva enlace.
  • Éste es un ítem dentro de una lista que puede contener un enlace.

Mensaje de Advertencia

Sirven para llamar la atención de las personas usuarias refiriéndose a determinada información o acción que deben realizar.

Este es un mensaje de advertencia

Esto es un párrafo que acompaña y sirve para indicar que el usuario realizó una acción correctamente, como cuando realiza una tarea con éxito.

  • Éste es un ítem dentro de una lista que puede contener un enlace.
  • Los ítems pueden contener o no enlaces. Este es un ejemplo para un detalle que no lleva enlace.
  • Éste es un ítem dentro de una lista que puede contener un enlace.

Mensaje de Información

Este componente brinda información necesaria para guiar y ayudar a las personas usuarias a finalizar un proceso o iniciar uno nuevo.

Este es un mensaje de información

Esto es un párrafo que acompaña y sirve para indicar que el usuario realizó una acción correctamente, como cuando realiza una tarea con éxito.

  • Éste es un ítem dentro de una lista que puede contener un enlace.
  • Los ítems pueden contener o no enlaces. Este es un ejemplo para un detalle que no lleva enlace.
  • Éste es un ítem dentro de una lista que puede contener un enlace.

Mensaje de Peligro

Sirven para comunicar que algo salió mal y explican cómo puede ser solucionado.

Este es un mensaje de error

Esto es un párrafo que acompaña y sirve para indicar que el usuario realizó una acción correctamente, como cuando realiza una tarea con éxito.

  • Éste es un ítem dentro de una lista que puede contener un enlace.
  • Los ítems pueden contener o no enlaces. Este es un ejemplo para un detalle que no lleva enlace.
  • Éste es un ítem dentro de una lista que puede contener un enlace.

Mensaje Institucional

Este componente tiene como finalidad brindar información institucional, como por ejemplo el redireccionamiento a otros sitios externos del Gobierno de la Ciudad de Buenos Aires.

Este es un mensaje institucional del Gobierno de la Ciudad de Buenos Aires

En el cuerpo de este componente pueden ir enlaces o botones: https://ejemplo.buenosaires.gob.ar

Diseño y estructura (contexto de uso)

Para este tipo de componente , la pantalla está destinada en su totalidad a enfocar la atención del usuario en un solo mensaje.

completar

Usabilidad

Buenas prácticas

Proporcionar información clara. Ayudar a entender los diferentes estados de un proceso.
Utilizar los mensajes de estado como una oportunidad para reponerse de los errores. Ayudar a las personas usuarias a recuperarse de ellos, dándoles posibles soluciones y salidas.
Evaluar el uso de este componente considerando que afecta la navegación. En el caso de querer brindarle al usuario información, también se puede considerar utilizar otros componentes (ej. alertas). Los mensajes de estado tienen una gran carga cognitiva y afectan la navegación.
Brindar la información de forma ordenada. Jerarquizar a través de los estilos tipográficos y el tamaño de la fuente.

Malas prácticas

Evitar excederse en la cantidad de Mensajes de Estados dentro de un mismo proceso o flujo.
No modificar el uso de la paleta cromática en la iconografía. El color semántico debe ser congruente con el contenido del mensaje.
Logo del sistema de diseño Obelisco
Los contenidos de buenosaires.gob.ar están licenciados bajo Creative Commons Reconocimiento 2.5 Argentina License.