Notificaciones

Las notificaciones se emplean para dar un mensaje de actualización o para destacar alguna información sobre la que queremos llamar la atención.

Anatomía #

Siempre debe contar con una etiqueta de texto que explique de forma clara la información que se quiera transmitir. El color debe utilizarse para apoyar el mensaje, con el mismo criterio se puede emplear un icono a la izquierda alineado a la parte superior. También existe la posibilidad de incluir una "x" accionable en la esquina superior derecha que permita eliminar la notificación.

Variantes #

Por defecto #

Se emplea de manera estándar, especialmente para informar sobre actualizaciones del sistema (el documento se ha cargado correctamente, …) y es de color azul.

Éxito #

Este tipo es de color verde e incluye un icono de check, se utiliza cuando se quiere informar de que una acción ha sido completada correctamente.

Alerta #

Es de color rojo y aparece un icono de alerta, se emplea cuando se quiere llamar especialmente la atención del usuario, por ejemplo, para errores de la aplicación, información muy importante, información que implica una barrera para realizar una acción, etc.

Informativo #

Se emplea el color azul también y se emplea habitualmente para transmitir algún tipo de información relevante y relacionado con alguna acción: “Debido a la situación por Covid-19, pide cita previa para acudir a nuestras oficinas.”, por ejemplo.

Buenas prácticas #

• Se recomienda no abusar de su uso. A la vez no se recomienda mostrar más de 3 notificaciones, en caso de ser necesario podrían agruparse varios mensajes en una única notificación.
• Mensajes escuetos y claros.
• Si están referenciadas a una acción que quede claro a cual se refieren con el uso de las mismas fórmulas.
• Si son de error, que quede claro dónde se ha producido e info de como solucionarlo.