modales modal form dialogos con close user-interface modal-dialog

user interface - form - ¿Los diálogos modales son una buena práctica para la web?



jquery ui windows (6)

¿Las ventanas / diálogos modales se consideran una buena práctica para los sitios web? Una de las cosas que me preocupa sobre el uso de una ventana modal es que se parece mucho a una ventana emergente y podría causar la frustración del usuario o hacer que los usuarios simplemente la cierren porque es intrusiva. ¿Conoces algún estudio que hable sobre las preferencias del usuario y las tasas de uso?

¿Hay algún problema de accesibilidad más allá de tener un enlace de ventana modal cargar el contenido en una nueva página cuando JavaScript está desactivado? ¿Te gustan los sitios o las aplicaciones web que usan ventanas modales? ¿Por qué o por qué no? ¿Cuáles son las buenas y malas prácticas para implementar ventanas modales? Sé que los modales son probablemente los más utilizados cuando se muestran imágenes o galerías, pero ¿cuáles son otros casos de uso prácticos? ¿Los usas en tu sitio y qué te lleva a tu decisión?


37Signals tiene una publicación interesante sobre modales aquí . Hablan sobre el uso de modales para indicar la importancia a través del tamaño de la pantalla, donde la superposición modal no es lo suficientemente importante como para necesitar navegar a una nueva página.


Con bastante frecuencia uso ventanas modales en aplicaciones web para pantallas de entrada de datos. Por ejemplo, el usuario tendrá una lista o pantalla de resultados de búsqueda y puede hacer clic en un registro para abrirlo en una ventana modal para editar. No utilizo ventanas modales tanto en sitios web como prefiero una sensación ligeramente menos de "aplicación" para un sitio.


Desde el punto de vista de la práctica, excluyendo la accesibilidad, las ventanas modales proporcionan una alternativa menos llamativa como, por ejemplo, cuadros de diálogo y se sienten menos intrusivas que las ventanas emergentes. Por lo general, tienen una sensación más cohesiva en el sitio que cualquiera de los dos métodos mencionados anteriormente. Aparte de las imágenes o los medios, he usado diálogos modales para cumplir el mismo propósito que los cuadros de diálogo: para que el usuario dé algún tipo de información requerida o para reconocer algo antes de permitir que interactúen nuevamente con el sitio.

Desde un punto de vista puramente accesible, no son tan buenos. Por lo general, requieren JavaScript y, debido a la forma en que se manejan los modales con respecto al DOM, los lectores de pantalla no los interpretarán bien. Para combatir esto, siempre es una buena idea degradar con gracia: una sugerencia es tomar el contenido del diálogo modal y colocarlo en una página. Siempre que aparezca el diálogo modal, haga que la página actual redirija a la ''página modal'', obtenga la entrada del usuario y regrese a la página en la que estaba.

Finalmente, en lo que se refiere a mis opiniones personales, no me molestan las ventanas modales. Creo que, cuando se usan correctamente, proporcionan una experiencia decente: si algo tiene que llamar mi atención, preferiría hacerlo sin tener que redirigirme de la página, mostrando un feo cuadro de diálogo del sistema operativo o una ventana emergente. (que mi navegador probablemente bloqueará, de todos modos). Supongo que, para resumir, si tuviera que elegir cómo me gustaría ser interrumpido, elegiría un diálogo modal.


La mayoría de los problemas de los diálogos en la web se centran en la implementación deficiente. Algunas consideraciones incluyen:

  • tamaño de pantalla
  • cambio de tamaño de la ventana del navegador
  • dónde abrir el diálogo
  • enviar elementos de formulario
  • efecto de luz estroboscópica de superposición dura
  • Graciosa degradación (como se mencionó anteriormente)

Todo esto se puede superar fácilmente con algunas técnicas de previsión y programación, lo que hace que los diálogos en la web sean muy útiles cuando se implementan correctamente.


Parece que muchos confunden la ventana modal con un panel en capas. Un cuadro de diálogo puede ser una ventana modal y una ventana emergente es una ventana modal. Un panel en capas no es una ventana, sino que tiene la apariencia de un cuadro emergente o de diálogo. Es modal en el sentido de que las capas subyacentes no están disponibles. Las ventanas modales son populares en los sitios web porque son inmunes a los bloqueadores de ventanas emergentes.

Las ventanas modales se diseñaron para obtener información o acción del usuario que la aplicación subyacente requiere para continuar. Las ventanas no modales permiten al usuario alternar entre la ventana y la aplicación subyacente. Un buen uso para una ventana no modal podría ser la ayuda en pantalla o un tutorial, donde el usuario necesita una herramienta de referencia y acceso a la aplicación subyacente.

En mi humilde opinión, las ventanas modales se diseñaron para un propósito específico limitado y se usan de manera inadecuada en la actualidad. ¡Solo porque puedas hacer algo no significa que debas! :-)


Solo uso ventanas modales en aplicaciones web para preguntas simples o acciones que requieren concentración total del usuario, para eso es Modal, para "olvidar el fondo" y concentrarse en lo que las aplicaciones están pidiendo ...

ejemplos:

"El préstamo máximo permitido se llegó a un límite, ¿está seguro de que desea enviar este nuevo préstamo al cliente?"

seleccionar un pre-texto para enviar un correo electrónico, por ejemplo (una ventana modal que se puede usar para corregir el asunto y el texto del cuerpo o seleccionar un tema / cuerpo predefinido para enviar a un cliente ...

cosas como esas :)

Hago un montón de aplicaciones web financieras que funcionan desde el sitio web donde el usuario ingresa todos los datos financieros hasta el envío de los contratos por PDF completo rellenado solo con algunos clics, y esas son las acciones donde uso ventanas modales.

Espero eso ayude