Ventanas modales y no modales en diseño web

Las ventanas modales se encuentran entre los elementos de diseño más efectivos que un diseñador web puede emplear. Hoy, vamos a definir lo que un cuadro modal es... luego veremos las mejores formas de usarlos y sugeriremos algunos de nuestros scripts favoritos para emplearlos en tus propios proyectos.

¿Qué es una ventana modal?

En pocas palabras, una ventana modal es un efecto escrito que te permite superponer un pequeño elemento sobre un sitio web. El principal beneficio de las ventanas modales es que evitan la necesidad de utilizar ventanas emergentes convencionales o recargas de páginas. En resumen, las ventanas de diálogo modal son un medio para mostrar información rápidamente a los usuarios en la misma página en la que están trabajando, mejorando así la usabilidad de tu sitio y disminuyendo las recargas innecesarias de páginas.

Entonces, es una caja de luz, ¿verdad? Bueno no exactamente. Una caja de luz es un tipo de ventana modal que ha sido diseñada para mostrar imágenes (y a veces otras formas de contenido), pero la palabra caja modal se refiere a un conjunto mucho más amplio de dispositivos de interfaz de usuario, que discutiremos.

Las ventanas modales tienen su origen en aplicaciones de interfaz como Microsoft Windows, Mac OS y UNIX, pero últimamente se han extendido a todo tipo de situaciones, desde sitios web hasta aplicaciones móviles.

Una ventana modal común podría usar Javascript para crear un "diálogo" o "asistente" modal, que equivalen a formularios en los que a los usuarios se les suele pedir información que sea relevante para lo que están navegando. Por ejemplo, si estás en Facebook, puede aparecer un cuadro de diálogo modal para pedir permiso para usar una aplicación. O el sitio web de tu banco podría lanzar un cuadro modal para informarte cuando tu sesión está a punto de terminar.

Hay cinco categorías situacionales en las que se utilizan habitualmente ventanas modales:

• Error: Para alertar a los usuarios de un error.
• Advertencia: Para advertir a los usuarios de situaciones potencialmente dañinas.
• Datos: Para recopilar datos de los usuarios.
• Confirmar o preguntar: Para recordar a los usuarios que hagan algo antes de continuar.
• Auxiliar: Informar a los usuarios sobre información importante.

Ahora que sabemos qué es una ventana modal, analicemos la diferencia entre una ventana modal y su primo, la ventana no modal.

La diferencia entre modal y no modal

Antes de continuar, aclaremos un poco de terminología potencialmente confusa en el mundo del diseño de interfaces de usuario: la diferencia entre elementos de diseño modales y no modales (también conocidos como no modales).

Los cuadros de diálogo modales no permitirán a los usuarios trabajar con la ventana principal una vez que se invocan; mientras que los cuadros de diálogo no modales permitirán a los usuarios acceder a la ventana principal, incluso después de haberlos invocado.

Un ejemplo de un elemento sin modal: iStockPhoto utiliza un elaborado sistema de clasificación en el lado izquierdo de su página de resultados de búsqueda.

Un usuario debe cerrar el diálogo modal dentro de la aplicación para acceder a las opciones del menú u otros cuadros de diálogo; pero el cuadro de diálogo no modal se puede dejar abierto mientras el usuario continúa trabajando. En el diseño de la interfaz gráfica de usuario, la ventana modal se denomina ventana secundaria y está destinada a llamar la atención del usuario sobre situaciones de emergencia.

Los elementos comunes de diseño no modal pueden incluir:

• Barras de herramientas
• Menús de acordeón
• Contenido de redes sociales
• Menús de búsqueda avanzada

Una buena analogía sería comparar una ventana no modal con un buen amigo que siempre está disponible para ayudar en una situación difícil, pero que no requiere mucho mantenimiento ni es exigente... donde una ventana modal es ese amigo molesto que exige tu atención de inmediato; y te obliga a dejarlo todo para escucharlos en el acto.

Del mismo modo, las ventanas modales, cuando se inician, solo deben usarse en situaciones en las que sean realmente necesarias.

Por ejemplo: Es importante informar a los usuarios que deben cambiar su contraseña de inmediato por razones de seguridad; utiliza una ventana modal en este escenario. Informar a los usuarios que acabas de lanzar un nuevo libro electrónico probablemente no sea lo suficientemente importante como para justificar una ventana modal, por lo que probablemente podrías anunciarlo de otra manera creativa en la página.

Cuándo usar modales versus no modales y sus potenciales problemas

Un ejemplo de un elemento no modal: Facebook te permite abrir mini menús.

Las ventanas no modales se utilizan si la información solicitada no es obligatoria para continuar, por lo que la ventana se puede dejar abierta mientras se continúa el trabajo. Por ejemplo, una barra de herramientas es un cuadro de diálogo no modal, y sus elementos se pueden utilizar para elegir características particulares de la aplicación. Normalmente, un diseño de software ideal invocaría este tipo de cuadros de diálogo tanto como sea posible. No obligan al usuario a realizar ningún  modo específico de funcionamiento... lo que significa que pueden trabajar a su propio ritmo, en el orden que más les convenga.

Sin embargo, un cuadro de diálogo modal detiene temporalmente la interacción con el software que la inició. El programa puede exigir información adicional o puede intentar confirmar que el usuario ha decidido continuar con alguna acción que puede ser peligrosa.

Los expertos en usabilidad opinan que los diálogos modales no son buenas soluciones de diseño, ya que los errores son más probables. Los usuarios pueden haber desarrollado el hábito de descartarlos cuando aparezcan cuadros de diálogo modales inesperados. Por tanto, no se evitan las acciones peligrosas.

Aquí hay otro problema potencial a tener en cuenta: las ventajas modales interfieren con el flujo de trabajo normal. Un cuadro de diálogo modal interrumpe el flujo de trabajo principal cuando la ventana principal subyacente se congela. La mayoría de las veces se puede mover o cambiar de tamaño, pero no se puede minimizar. Además, el usuario no puede consultar otras ventanas mientras responde al cuadro de diálogo.

Pueden surgir problemas adicionales: Un cuadro de diálogo de error modal puede aparecer inesperadamente mientras escribes, descartando la entrada; cuando se usa en aplicaciones que usan comandos de teclado, las ventanas modales pueden malinterpretar las pulsaciones de teclas. Esto se conoce como robo de enfoque... las ventanas modales están diseñadas para robar el enfoque de los usuarios... pero usarlas en exceso puede volverse frustrante porque arroja demasiados obstáculos al usuario.

El resultado final: Siempre comienza un diseño tratando de usar ventanas no modales siempre que puedas... no son intrusivas y permiten al usuario trabajar a su manera. Reserva las ventanas modales para los momentos en que sea absolutamente necesario recopilar información o alertar a un usuario sobre algo urgente (¡y habrá muchos de estos momentos!) Piensa en la ventana modal como tu arma secreta... no querrás usarla hasta que hayas agotado tus otras opciones de diseño, pero cuando la uses, te sacará de un apuro rápidamente.

Usos prácticos de las ventanas modales

Las ventanas modales ayudan a llamar la atención del usuario sobre información crucial. Déjame darte algunos ejemplos de casos en los que es necesario una ventana modal:

Cajas de luz para imágenes / videos

Formularios de inicio de sesión / registro

Formularios de contacto / comentarios

Alertas

9 scripts de ventanas modales (que puedes utilizar en tus propios proyectos)

Hablar sobre los aspectos de diseño de las cajas modales es genial... pero ponerte manos a la obra y usarlas es otra cuestión. Suponiendo que no eres un gurú de Javascript que puedes sacar líneas de código personalizado desde cero, tendrás que comenzar con un paquete de script preconstruido y personalizarlo desde allí. La buena noticia es que hay un montón de productos gratuitos disponibles; solo tienes que investigar un poco más para determinar cuál se adapta mejor a tus necesidades. Estos son algunos de nuestros favoritos:

jQuery UI

'JQuery UI Dialog' es parte de la biblioteca principal de jQuery UI, que esencialmente es una biblioteca de efectos y complementos construida en jQuery. Es personalizable a través de CSS y se puede implementar en cualquier proyecto sin restricciones. Probablemente sea el más directo de todos los scripts de ventanas modales en el sentido de que está trabajando directamente con la biblioteca de scripts jQuery, no a través de un tercero. Puedes utilizar este cuadro de diálogo en cinco formas diferentes: diálogo básico, diálogo modal, mensaje modal, confirmación modal o formulario modal.

prettyPhoto

"prettyPhoto es un clon de jQuery lightbox. No solo admite imágenes, también es compatible con videos, flash, YouTube, iframes. Es una caja de luz multimedia completa.

Es muy fácil de configurar, pero muy flexible si deseas personalizarlo un poco. Además, el script es compatible con todos los principales navegadores, incluso IE6".

ModalBox

ModalBox es una técnica de JavaScript para crear cuadros de diálogo modales modernos (estilo Web 2.0) o incluso asistentes (secuencias de cuadros de diálogo) sin utilizar ventanas emergentes y recargas de página convencionales. Está inspirado en los diálogos modales de Mac OS X. Y sí, también puede ser útil para mostrar versiones más grandes de imágenes.

NyroModal 2

Uno de los más completos del grupo, Nyro se centra en la facilidad de personalización y permite una amplia variedad de tipos de contenido.

SimpleModal

ModalBox es una técnica de JavaScript para crear cuadros de diálogo modales modernos (estilo Web 2.0) o incluso asistentes (secuencias de cuadros de diálogo) sin utilizar ventanas emergentes y recargas de página convencionales. Está inspirado en los diálogos modales de Mac OS X. Y sí, también puede ser útil para mostrar versiones más grandes de imágenes.

FancyBox

Este es otro modal impulsado por lightbox. FancyBox es una herramienta para mostrar imágenes, contenido html y multimedia en una "caja de luz" al estilo Mac que flota sobre la página web.

Facebook Modal

Facebox es una caja de luz liviana al estilo de Facebook que puede mostrar imágenes, divs o páginas remotas completas (a través de Ajax) en línea en la página y bajo demanda. Utiliza la biblioteca jQuery compacta como motor, a diferencia de Lightbox v2.0, que utiliza Prototype.

jQuery Tools

En realidad, este es un conjunto completo de herramientas de unidad jQuery... de un script que te permite exponer elementos HTML específicos a un generador de formularios completo.

Lightbox2

Lightbox es una secuencia de comandos simple y discreta que se utiliza para superponer imágenes en la página actual. Es muy fácil de configurar y funciona en todos los navegadores modernos .

Una nota sobre la compatibilidad con navegadores

Varios navegadores no permiten que las ventanas emergentes sean modales, aunque otros permiten la creación de ventanas modales a través de diferentes métodos. Internet Explorer usa window-showModalDialog() para abrir una  ventana modal. Esta ventana se abrirá cuando Internet Explorer se esté ejecutando, mientras que otros navegadores mostrarán un error de JavaScript. Los navegadores basados en Mozilla, como Firefox y Netscape 6, utilizan un método diferente  para indicar que el cuadro de diálogo debe permanecer al frente. Usan window.open con un atributo adicional para modal, aunque en realidad no es modal, pero permite que la ventana permanezca al frente.

La realidad es que la mayoría de los diseñadores realmente no necesitan preocuparse demasiado por las complejidades de la adopción del navegador hasta que es el momento de hacer la codificación... aunque la mayoría de los navegadores modernos sí admiten cajas modales. En caso de duda, consulta la documentación del script que deseas usar para verificar que funcionará en la lista particular de navegadores para los que necesitas que funcione.

Muy bien, eso es todo por ahora, ¡no dudes en publicar tus propias soluciones modales favoritas en los comentarios!