Feedback

Dentro de feedback se incluyen los mensajes que comunican información al usuario. Recomendamos que el cuerpo de la notificación sea descriptivo y claro e incluya cualquier acción de solución de problemas o próximos pasos.

Variaciones y tipos

Diferencamos tres tipos: Snackbar, Persistent Toast y Decision Toast.

Snackbar

Es recomendable que el cuerpo abarque como mucho dos líneas de texto. Dentro de las snackbar tenemos tres variantes: Label only, Icon trailing y Action Button.

Se contemplan para los siguientes casos: notification, success, warning y error.

Persistent Toast

Son persistentes y no modales, lo que permite al usuario ignorarlos o interactuar con ellos en cualquier momento. Pueden utilizarse con o sin title.

Se contemplan para los siguientes casos: notification, success y error.

Decision Toast

Los Decision Toast bloquean el uso de la aplicación hasta que el usuario realiza una acción.

Comportamiento

Snackbar

  • Las notificaciones se descartan automáticamente a los 5 segundos de su entrada y se posicionan de forma fija en la parte inferior de la pantalla.

  • Si hay más de una notificación se agruparán verticalmente con un espaciado de 8 px y hasta un máximo de 4 notificaciones simultáneamente. Las notificaciones nuevas aparecerán en la parte superior.

Persistent Toast

  • No son descartables automáticamente. El usuario debe realizar la acción para descartar la alerta.
  • Se posicionan como primer elemento de la página para que el usuario pueda verlo fácilmente.
  • El título tendrá como máximo dos líneas y el cuerpo cuatro.
  • Se puede añadir de forma opcional un detalle que acompañe al contenido.

Decision Toast

El contenido del decision toast dependerá de la acción que se quiera realizar. A partir de los siguientes elementos podremos construir el mensaje:

  • Alert
  • Detail
  • Primary Button

Principios

Estas notificaciones deben cumplir unos principios básicos en su comportamiento:

  • Adecudamente intrusivo
    Es intrusivo, pero su nivel de interrupción debe corresponderse con la información que contienen y el contexto en el que aparecen.
  • Claro
    Deben comunicar un mensaje conciso y qué sucederá si los usuarios interactúan con ellos.
  • Focalizado
    Contienen un solo mensaje y acciones específicas que puede realizar un usuario.