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

Ejemplo de un cuadro de diálogo

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.

Menús desplegables

Ejemplo de menú desplegable

Un panel emergente es un elemento emergente contextual ligero que muestra la interfaz de usuario relacionada con la actividad del 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 panel flotante se puede descartar rápidamente pulsando o haciendo clic fuera del mismo, 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 menús desplegables proporcionan una experiencia menos abrupta, pero mostrar demasiados menús desplegables puede distraer.

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

Dado que los cuadros de diálogo bloquean las interacciones y los controles flotantes no, los cuadros de diálogo deben reservarse para situaciones en las que desea que el usuario deje todo para centrarse en una información específica o responder a una pregunta. Las ventanas emergentes, por otro lado, se pueden usar cuando quiera llamar la atención sobre algo, pero está bien 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 menú emergente 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 menús desplegables

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 una ventana emergente cada vez que un amigo inicia sesión, podrías mostrar una lista de amigos que están en línea en ese momento y resaltar a los 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 del Microsoft Store o obtenga el código fuente en GitHub.

Creación de un cuadro de diálogo

Consulte el artículo Diálogos.

Cómo crear una ventana emergente

Consulte el artículo sobre el Flyout.