18/10/2014

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

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.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce