it-swarm-es.com

Cerrar diálogos modales

Me encuentro con diálogos modales todos los días y veo diferentes implementaciones todo el tiempo.

La mayoría de los cuadros de diálogo modales tienen una [X] en la esquina superior derecha del cuadro de diálogo junto con un botón Cancelar/Cerrar.

Hay tantas opciones, ¿cuál es la mejor práctica para cerrar los diálogos modales? Además, ¿hay algún estudio de referencia que muestre qué se prefiere?

Implementaciones que he visto:

  • Botón Cancelar/Cerrar con [X] en la esquina (arriba a la derecha/izquierda, abajo a la derecha/izquierda?)

  • Haga clic en cualquier lugar del modal para cerrar

  • Solo una [X] en la esquina (arriba a la derecha/izquierda, abajo a la derecha/izquierda)

  • Solo un botón Cancelar/Cerrar

  • Haga clic en cualquier lugar fuera del modal

  • Tecla Esc con o sin [X]/Cancelar/Cerrar

23
rick schott

Creo que la mejor implementación depende del tipo de diálogo y el modo de interacción deseado.

Los cuadros de diálogo que requieren una acción no deberían tener una [X] para cerrarlos, en mi opinión (ni cerrarse haciendo clic en otro lugar que no sea los botones de acción.
La mayoría de ellos tienen un conjunto de botones "Guardar" y "Cancelar", por lo que los usuarios piensan (aunque sea por una fracción de segundo) si "cerrar" significa "cancelar" o no.

Diálogos de información debería tener un botón "cerrar" y una [X], en mi opinión.
Si la información es algo que el usuario podría desear interactuar con (por ejemplo, texto para ser seleccionado y copiado), entonces, por supuesto, no puede permitir un clic dentro para cerrar el diálogo.
Si desea que el usuario preste atención a la información, también rechazaría hacer clic afuera para descartar, ya que aumenta la posibilidad de que el usuario tenga que centrarse en el diálogo para cerrarlo (y espero leer algo allí).

16
Dan Barak

Olvida ESCAPE (tecla Esc) para cerrar algunos ( Cancelar (OK/Cancelar), o [~ # ~] ok [~ # ~] para OK individual ) ventanas modales

6
igor

I nunca haga clic en la cruz en la esquina. Si se omiten los botones, generalmente estoy confundido hasta que recuerdo que todavía es una ventana. Iría con los botones Aceptar/Cancelar (a menos que otras palabras sean más adecuadas, por ejemplo, 'sí/no' 'guardar/no guardar') y una cruz en la esquina que haga lo mismo que el botón cancelar. Ninguna otra acción 'oculta', como cerrar si hace clic en cualquier lugar.

4
Jouke van der Maas

El botón de salida siempre es necesario, ya sea que los usuarios hagan clic en él o no, porque su ausencia es confusa. Los enlaces cercanos ayudan, pero deben ir acompañados de la 'X'. Le sugiero que siempre proporcione todas las opciones de salida ('x', enlace y haga clic en cualquier lugar para cerrar).

Actualmente no conozco un estudio que haga referencia a este tema, pero hay un artículo interesante con Smashing Magazine sobre el uso adecuado de Windows modal que podría interesarle: http://www.smashingmagazine.com/2009/ 27/05/modal-windows-in-modern-web-design /

4
Pam Rdz

Los botones de diálogo explícito también resultan ser una característica importante de accesibilidad. He trabajado en el GNOME Human Interface Guidelines durante muchos años, y cada vez que los actualizamos hay llamadas a 'reducir el desorden' al eliminar 'botones de cierre redundantes' en el diálogo, para esos diálogos que puede cerrarse sin ambigüedades utilizando el control de marco de ventana y su atajo de teclado asociado (Alt-F4, igual que MS Windows).

Sin embargo, cada vez que se lo sugerimos a la comunidad de accesibilidad de GNOME, reafirman su preferencia por retener los botones tangibles dentro de la propia ventana.

2
calum_b

Probablemente iría con ambos controles:

(X) - esquina superior derecha

Justificación: muy común para la web y creo que incluso los usuarios de Mac están acostumbrados. [X] es un símbolo que los usuarios reconocen bien y tener (Cerrar) parece redundante.

[OK/Cerrar] - en el contenido

Racional: si el usuario hojeó el texto, es muy posible que los ojos caigan debajo del texto y que el cursor esté más cerca del botón de cierre, por lo que podría ser más rápido presionar el botón, especialmente, ya que también es más grande. También puede enfocar el botón Cerrar para que el usuario pueda presionar Enter para cerrar el cuadro de diálogo.

0
Anna Rouben