Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 11 Next »

Las notificaciones son mensajes que comunican información al usuario. Los dos tipos principales de notificaciones son notificaciones toast y notificaciones en línea. Las notificaciones proporcionan un espacio limitado para el contenido y, por lo tanto, el contenido debe ser breve y conciso. Un usuario debe poder escanear rápidamente la notificación, estar informado de la situación y saber qué hacer a continuación.

Utilizamos notificaciones para informar a los usuarios de actualizaciones o cambios en el estado del sistema. La comunicación con los usuarios y la retroalimentación inmediata son importantes para generar confianza. Si bien las notificaciones son un método eficaz para comunicarse con los usuarios, son disruptivas y deben usarse con moderación.

Para obtener más contexto sobre cuándo usar cada tipo de notificación, incluidos los modales, consulte el patrón de notificaciones.

Anatomía

  • Icono: informa a los usuarios del tipo de notificación de un vistazo.

  • Título: ofrece a los usuarios una descripción general rápida de la notificación.

  • Mensaje (opcional): proporciona detalles adicionales y pasos procesables para que los tome el usuario.

  • Botón Cerrar (opcional): cierra la notificación.

Título

  • El título debe ser breve y descriptivo, explicando la información más importante.

  • Cuando sea posible, comunique el mensaje principal usando solo el título.

  • Use un punto solo si el título es una oración completa.

Contenido

  • Sea conciso y evite repetir o parafrasear el título.

  • Limite el contenido a una o dos oraciones cortas.

  • Explique cómo resolver el problema incluyendo las acciones de solución de problemas o los pasos siguientes. Puede incluir enlaces dentro del cuerpo de la notificación que redirijan al usuario a los siguientes pasos.

Cuándo usar

Utilice notificaciones para informar a los usuarios sobre actualizaciones y cambios de estado importantes. La transparencia es un elemento fundamental para generar confianza en los usuarios. Deben ser relevantes para el usuario y lo menos disruptivos posible. Hay dos casos de uso principales para las notificaciones: generadas por tareas y generadas por el sistema.

Notificaciones generadas por tareas

Las notificaciones generadas por tareas se inician en respuesta a la acción del usuario durante una tarea específica. Proporcionan a los usuarios comentarios directos e inmediatos. Deben ubicarse en la región de la página en la que está trabajando el usuario y estar relacionados con la acción del usuario.

Puede enviar una notificación generada por la tarea cuando:

  • Un formulario se envió correctamente

  • Hay un problema al cargar un archivo.

  • No se pueden encontrar las credenciales

Notificaciones generadas por el sistema

Estas notificaciones son iniciadas por la aplicación o el sistema, independientemente de la acción del usuario. Proporcionan actualizaciones sobre el estado del sistema en segundo plano o eventos fuera de contexto que han finalizado.

Puede enviar una notificación generada por el sistema cuando:

  • Un usuario pierde la conexión a la red

  • El mantenimiento planificado del sistema llegará pronto

  • Un nuevo informe está listo

  • La sesión de inicio de sesión del usuario está a punto de caducar

Cuando no usar

Envíe notificaciones solo cuando sea necesario. Limite cada notificación a la parte de la interfaz y el flujo de trabajo para los que es relevante. Ser interrumpido crea una experiencia frustrante y desalentadora para los usuarios, por lo que esto debe limitarse tanto como sea posible. Además, las distracciones frecuentes reducen la productividad y pueden provocar fatiga por alerta.

En línea

Las notificaciones en línea aparecen en los flujos de tareas para notificar a los usuarios el estado de una acción. Suelen aparecer en la parte superior del área de contenido principal.

Toast

Los toast son elementos basados ​​en el tiempo, se utilizan para mostrar mensajes cortos; generalmente aparecen en la parte superior de la pantalla y desaparecen después de unos segundos.


Dialog

El componente Dialog es utilizado para dar información o solicitar una acción al usuario. Los botones deben ajustarse por separado.

Banner

El componente Banner es utilizado para desplegar información importante y permite tomar decisiones relacionadas a dicha información.

Event

El componente Event es utilizado para visualizar un evento o trabajo, dispone información realcionada y contiene un componente Alert.

Todos los componentes han sido diseñados para trabajar armoniosamente juntos, como partes de un todo mayor. Es por esto que cada componente deber ser integrado y construido siguiendo nuestros lineamientos de usabilidad y guías de construcción. Toda esta información se encuentra en la página Lineamientos de construcción de nuestro sistema de diseño. Además se debe tener en consideración la accesibilidad en el uso de la tipografía y la accesibilidad del color.

  • No labels