Cuadros de diálogo y controles flotantes

Los cuadros de diálogo y los controles flotantes son elementos transitorios de la interfaz de usuario que aparecen cuando ocurre algo que requiere notificación, aprobación o información adicional del usuario.

Dialogs

Los cuadros de diálogo son superposiciones de interfaz de usuario modales que proporcionan información contextual de la aplicación. Los diálogos bloquean las interacciones con la ventana de la aplicación hasta que se descartan explícitamente. A menudo solicitan algún tipo de acción por parte del usuario.

Controles flotantes

Un control flotante es un elemento emergente contextual ligero que muestra la interfaz de usuario relacionada con lo que hace el usuario. Incluye lógica de colocación y ajuste de tamaño, y se puede usar para mostrar un control secundario o mostrar más detalles sobre un elemento.

A diferencia de un cuadro de diálogo, un control flotante se puede descartar rápidamente pulsando o haciendo clic en algún lugar fuera del control flotante, presionando la tecla Escape o el botón Atrás, cambiando el tamaño de la ventana de la aplicación o cambiando la orientación del dispositivo.

¿Es este el control adecuado?

Los cuadros de diálogo y los controles flotantes se aseguran de que los usuarios conocen información importante, pero también interrumpen la experiencia del usuario. Dado que los diálogos son modales (bloqueo), interrumpen a los usuarios, lo que les impide hacer nada más hasta que interactúan con el diálogo. Los controles flotantes proporcionan una experiencia menos jarra, pero mostrar demasiados controles flotantes pueden distraerse.

Una vez que haya determinado que desea usar un cuadro de diálogo o control flotante, debe elegir cuál usar.

Dado que los diálogos bloquean las interacciones y los controles flotantes no, los diálogos deben reservarse para situaciones en las que desea que el usuario quite todo para centrarse en un bit específico de información o responder a una pregunta. Los controles flotantes, por otro lado, se pueden usar cuando quiera llamar la atención a algo, pero es correcto si el usuario quiere omitirlo.

Usar un cuadro de diálogo para...

• Expresar información importante que el usuario debe leer y confirmar antes de continuar. Algunos ejemplos son:
  • Cuando la seguridad del usuario podría verse comprometida
  • Cuando el usuario está a punto de modificar permanentemente un recurso valioso
  • Cuando el usuario está a punto de eliminar un recurso valioso
  • Para confirmar una compra desde la aplicación
• Mensajes de error que se aplican al contexto general de la aplicación, como un error de conectividad.
• Preguntas, cuando la aplicación necesita hacer al usuario una pregunta de bloqueo, como cuando la aplicación no puede elegir en nombre del usuario. No se puede omitir ni posponer una pregunta de bloqueo y debe ofrecer a los usuarios opciones bien definidas.

Usar un control flotante para...

• Recopilar información adicional necesaria antes de que se pueda completar una acción.
• Mostrar información que solo es relevante alguna de las veces. Por ejemplo, en una aplicación de galería de fotos, cuando el usuario hace clic en una miniatura de imagen, puede usar un control flotante para mostrar una versión grande de la imagen.
• Mostrar más información, como detalles o descripciones más largas de un elemento en la página.

Formas de evitar el uso de cuadros de diálogo y controles flotantes

Considere la importancia de la información que desea compartir: ¿es lo suficientemente importante interrumpir al usuario? Considere también la frecuencia con la que se debe mostrar la información; Si muestra un cuadro de diálogo o una notificación cada pocos minutos, es posible que quiera asignar espacio para esta información en la interfaz de usuario principal en su lugar. Por ejemplo, en un cliente de chat, en lugar de mostrar un control flotante cada vez que un amigo inicia sesión, podría mostrar una lista de amigos que están en línea en el momento y resaltar a los amigos a medida que inician sesión.

Los diálogos se usan con frecuencia para confirmar una acción (por ejemplo, eliminar un archivo) antes de ejecutarlo. Si espera que el usuario realice una acción determinada con frecuencia, considere la posibilidad de proporcionar una manera de deshacer la acción si se trata de un error, en lugar de forzar a los usuarios a confirmar la acción cada vez.

Examples

• Si tienes instalada la aplicación Galería de WinUI 3 , haz clic aquí para abrir la aplicación y ver ContentDialog o Flyout en acción. Obtenga la aplicación en Microsoft Store u obtenga el código fuente en GitHub.

Creación de un cuadro de diálogo

Consulte el artículo Diálogos.

Creación de un control flotante

Consulte el artículo Control flotante.