Compartir a través de


Conceptos básicos de diseño de notificaciones

Impulsar la interacción del usuario con la aplicación proporcionando notificaciones del sistema personalizadas, procesables y útiles. Las notificaciones del sistema son las notificaciones de Windows que aparecen en la parte inferior derecha de la pantalla del usuario y el Centro de notificaciones (denominado Centro de actividades en Windows 10). En este artículo se proporcionan instrucciones de diseño que se deben tener en cuenta a medida que planee e implemente la experiencia de notificación del sistema para la aplicación.

Captura de pantalla que muestra una notificación del sistema encima de la barra de tareas. La notificación es un recordatorio de un evento. Se muestran el nombre de la aplicación, el nombre del evento, la hora del evento y la ubicación del evento. Una entrada de selección muestra el valor seleccionado actualmente,

Las notificaciones deben ser informativas y valiosas

Diseñe las notificaciones para tener una intención clara para que el usuario pueda comprender rápidamente el propósito de la notificación y permanecer en su flujo. Tenga en cuenta los escenarios de usuario que habilitan las notificaciones del sistema y agregan elementos a la notificación que son adecuados para cada escenario. Las notificaciones deben permitir al usuario ahorrar tiempo, pero no debe distraer ni crear más trabajo.

Elegir los elementos de la interfaz de usuario de notificación adecuados

Tenga en cuenta qué elementos de la interfaz de usuario ofrecen el máximo valor a su escenario de usuario. ¿El propósito de la notificación es permitir al usuario realizar una tarea o simplemente obtener información nueva? En la sección siguiente se muestran algunos elementos de ejemplo que puede usar en las notificaciones del sistema.

Captura de pantalla de escritorio recortada que muestra una notificación con elementos de botón.

Botones

Los botones desencadenan una acción inmediata. Al agregar botones, el usuario puede completar una tarea dentro de la notificación.

Captura de pantalla de escritorio recortada que muestra una notificación con una imagen insertada.

Imágenes

Las imágenes pueden ser invalidaciones del logotipo de la aplicación, insertadas o prominentes. Al agregar imágenes, el usuario puede analizar el contenido más rápidamente. Algunos ejemplos incluyen agregar una imagen de invalidación del logotipo de la aplicación que muestra la imagen de perfil del remitente a una notificación de chat o correo electrónico.

Captura de pantalla de escritorio recortada que muestra una notificación con un cuadro de respuesta rápida.

Respuestas rápidas

Los cuadros de respuesta rápida permiten a los usuarios responder a mensajes sin abrir la aplicación. Algunos ejemplos incluyen agregar cuadros de respuesta rápidos a una notificación de chat.

Captura de pantalla de escritorio recortada que muestra una notificación con un menú contextual.

Botones de menú contextual

Los botones de menú contextual proporcionan a los usuarios más opciones al hacer clic con el botón derecho en la notificación o al seleccionar el icono del menú contextual. Un escenario de ejemplo consiste en agregar una opción para silenciar un chat grupal durante una hora.

Captura de pantalla de escritorio recortada que muestra una notificación con una barra de progreso.

Barras de progreso

Las barras de progreso comunican el estado de las operaciones de ejecución prolongada. Al agregar una barra de progreso, el usuario no tiene que volver a proteger la aplicación para obtener actualizaciones. Algunos ejemplos incluyen la comunicación de una descarga de archivos o una actualización del juego con una notificación de barra de progreso.

Para ver todos los elementos de la interfaz de usuario que se pueden usar en una notificación, consulte Contenido del sistema.

Las notificaciones no deben ser ruidosas

Los usuarios pueden sobrecargarse fácilmente con demasiada información y frustrarse si se interrumpen mientras intentan centrarse. Demasiadas interrupciones provocan que los usuarios desactiven este canal de comunicación crítico para la aplicación.

  • Un método de no interrumpir al usuario, pero seguir comunicando información valiosa es suprimiendo la notificación, lo que significa que la notificación se coloca automáticamente en el Centro de notificaciones sin una alerta.
  • En Windows 11, las sesiones de foco permiten a los usuarios suprimir notificaciones extrañas. Puedes usar focusSessionManager API para detectar si el usuario está en una sesión de enfoque y ajustar el comportamiento de notificación de la aplicación en consecuencia.

Responder a la intención del usuario

Al igual que el diseño de la interfaz de usuario de notificación, el comportamiento cuando el usuario hace clic en la notificación o en los elementos de la interfaz de usuario dentro de la notificación debe ser deliberado y coherente, y debe involucrar al usuario en una tarea o escenario claros.

  • Si el usuario hace clic en la notificación para iniciarla, la aplicación debe iniciarse en el contexto de la notificación.
  • Si el usuario hace clic en un botón de la notificación, la aplicación debe iniciarse en el contexto adecuado para la acción del botón.
    • Sin embargo, si la acción está pensada para ser una tarea en segundo plano, como la respuesta rápida, la aplicación no debe iniciarse.

Proporcionar una experiencia coherente del Centro de notificaciones

Captura de pantalla de escritorio recortada que muestra el Centro de notificaciones con varias notificaciones.

El Centro de notificaciones permite al usuario ver y responder a las notificaciones después de que se hayan mostrado, o en el caso de las notificaciones silenciosas, una vez recibidas pero no mostradas. Es importante mantener ordenado el Centro de notificaciones borrando las notificaciones antiguas. También debe asegurarse de proporcionar una experiencia coherente al quitar notificaciones para que el usuario se sienta seguro de que no falta información. Las siguientes convenciones estándar para la eliminación de notificaciones hacen que la experiencia de notificación sea predecible e intuitiva para los usuarios.

A continuación se muestran algunos escenarios de ejemplo que muestran estrategias para borrar las notificaciones antiguas del Centro de notificaciones:

  • El usuario recibe 10 correos electrónicos nuevos y, por tanto, 10 nuevas notificaciones. El usuario va a la aplicación de correo electrónico y ve 10 correos electrónicos, sin interactuar con las 10 notificaciones. Después de que el usuario vea los 10 correos electrónicos, la aplicación de correo electrónico quita las 10 notificaciones del Centro de notificaciones. Esto también se aplica si el usuario ha visto los 10 correos electrónicos en otro lugar, como su teléfono o sitio web.
  • El usuario recibe 10 mensajes de chat nuevos de un usuario y, por tanto, 10 nuevas notificaciones. El usuario selecciona una de estas notificaciones de chat, que inicia el chat. Después de que el usuario vea el chat, la aplicación quita las 9 notificaciones restantes del Centro de notificaciones.

Instrucciones para desarrolladores para notificaciones