Compartir a través de

Conceptos básicos de diseño de notificaciones

Impulsar la interacción del usuario con su app proporcionando notificaciones personalizadas, accionables y útiles app (también conocidas como notificaciones toast). App las notificaciones 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 app experiencia de notificación para app.

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

Note

El término "toast notificación" se va a reemplazar por "app notification". Estos términos hacen referencia a la misma característica de Windows, pero con el tiempo se eliminará el uso de "toast notificación" en la documentación.

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 app de usuario que habilitan sus notificaciones y agregue elementos a la notificación que sean 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 app notificaciones.

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

Buttons

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.

Images

Las imágenes pueden ser app sustituciones de logotipo, insertadas o imágenes principales. Al agregar imágenes, el usuario puede analizar el contenido más rápidamente. Algunos ejemplos incluyen agregar una app imagen de reemplazo de logotipo que muestra la imagen de perfil del remitente en 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.

Quick replies

Los cuadros de respuesta rápida permiten a los usuarios responder a los mensajes sin abrirapp. 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.

Progress bars

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 consultar en app para ver 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 App contenido de notificación.

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 apaguen este canal de comunicación crítico para app.

  • 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. Puede usar la API FocusSessionManager para detectar si el usuario está en una sesión de enfoque y ajustar appel comportamiento de notificación según corresponda.

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, app debería iniciarse en el contexto de la notificación.
  • Si el usuario hace clic en un botón de la notificación, app debe iniciarse en el contexto apropiado 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, app 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 al correo electrónico app y ve 10 correos electrónicos, sin interactuar con las 10 notificaciones. Después de que el usuario vea los 10 correos electrónicos, el correo electrónico app 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, app quita las 9 notificaciones restantes del Centro de notificaciones.

guía para desarrolladores de para notificaciones

  • Last updated on