Ventanas integradas a la página: una alternativa a los pop-ups

En diseño de interfaces web, cada vez es más frecuente evitar los tradicionales pop-ups y elegir, en su lugar, formatos de ventanas parcialmente integrados al contenido de la página. Esto significa que permiten mostrar cuadros de diálogo superpuestos a la página actual pero sin abrir una ventana o pestaña nueva en el navegador. Los pop-ups tradicionales son en muchos casos inevitables, pero resultan molestos para el usuario y suelen ser bloqueados por los propios navegadores. Por cualquiera de esas dos razones, muy probablemente terminen siendo ignorados.

Por suerte, son varias las alternativas a considerar:

  • Modal window. Es un bloque de contenido que se superpone a la página, a menudo oscureciendo el fondo, en una capa diferente. No se cierra ni desaparece hasta que el usuario interactúa con ella, ya sea ingresando datos, cliqueando en algún link o (si, como corresponde, se brinda esta opción) haciendo clic en un botón de cierre. Recién una vez que se realizó alguna de estas acciones, nos conduce hacia otra página o nos permite volver a la página padre. Cuando el comportamiento es opuesto (el usuario puede seguir moviéndose libremente por la página), se llama modeless.
  • Lightbox. Similar al modal, esta ventana se cierra cuando hacemos clic en el botón apropiado o bien cuando hacemos clic fuera de ella, permitiéndonos regresar al contexto original. Se suele utilizar para mostrar galerías de imágenes o videos que por su alta resolución pudieran no entrar bien en las dimensiones de la página. También es común que nos aparezca una lightbox apenas entramos en la página para sugerirnos comprar un producto o suscribirnos al newsletter; o bien que aparezca cuando regresamos a esa pestaña luego de varios minutos de inactividad, para pedirnos que sigamos recorriendo la página.
  • Popover/tooltip/hovercard. Estas ventanas de tamaño reducido, similares a los menús contextuales de los sistemas operativos, aparecen cuando pasamos el cursor del mouse sobre un enlace, un campo de formulario u otro elemento, para brindarnos información adicional sobre él. Su uso más habitual es brindar ayuda en procesos de registración o compra, pero también se usan para enriquecer gráficos e infografías.
  • Alerta. Son cuadros de diálogo separados del contenido de la página actual, pero que se muestran en la misma pestaña. Generalmente implementados a través del método alert() de JavaScript, son los más simples de todos: consisten en un texto de advertencia y uno o dos botones («Aceptar» y «Cancelar»). Se los puede considerar como modals porque impiden continuar el recorrido normal de la página hasta que se elige una opción. No se recomienda utilizarlos en ningún caso, pero son de uso común para avisar de errores en formularios y frenar al usuario cuando intenta abandonar la página.

Si bien estas opciones evitan los inconvenientes de los pop-ups, también traen algunos problemas de usabilidad que comentaremos en detalle próximamente.