22/10/2014

Modal windows y lightboxes: sus efectos sobre la usabilidad

Modal windows y lightboxes: sus efectos sobre la usabilidad

Recientemente nos referimos al crecimiento de las modal windows y las lightboxes como opción alternativa a los pop-ups. Las tradicionales «ventanas emergentes» son desaconsejables por varias razones:

  • Están asociadas a la publicidad indeseada, por lo cual los usuarios tienden a cerrarlas inmediatamente (a veces, antes de que terminen de cargarse) incluso aunque tengan contenido valioso.
  • A la mayoría de los usuarios les resultan intrusivas y poco profesionales.
  • Pueden ser bloqueadas por el navegador, a veces mediante una extensión.

Las modals y lightboxes parecen ser la solución indicada cuando se quiere imitar el comportamiento de los pop-ups ahorrándose algunos de sus problemas. Pero ¿son recomendables? Conozcamos sus ventajas y sus desventajas.

Ventajas

  • Como se posicionan en una capa diferente y superpuesta con respecto a la página, su tamaño, su ubicación y su aspecto visual no están limitados por las características de la plantilla. Pueden considerarse como dos páginas independientes, una encima de otra.
  • Capturan fácilmente la atención del usuario.
  • Son ideales para mostrar contenido relacionado con la página actual manteniendo al usuario dentro de ella. Por ejemplo, un artículo de un blog puede contener una galería de imágenes en miniatura. Al cliquear en una de las imágenes, podemos ver su versión ampliada en una lightbox que además contiene controles (atrás y adelante) para recorrer el resto de la galería. Abrir cada imagen en una página individual, abrirla en un pop-up e incluir todas las imágenes en tamaño grande dentro del post son alternativas que atentan contra la velocidad de carga y contra la fluidez de la navegación. Con el mismo criterio podríamos utilizar lightboxes para videos, formularios y alertas.

Desventajas

  • Muchos usuarios no están acostumbrados a este tipo de ventanas y no descubren la forma correcta de interactuar con ellas. Una tendencia natural es cliquear fuera de la ventana para hacerla desaparecer, pero esto es imposible si hay modalidad. Otra posibilidad es que el usuario piense que «cayó» en una página nueva y erróneamente intente volver hacia atrás con el botón de retroceso del navegador.
  • Su implementación correcta es dificultosa. El uso de capas superpuestas es problemático para algunos dispositivos móviles. Con frecuencia, al intentar navegar por una lightbox o modal con el teclado el foco se transfiere a la página que está detrás, confundiendo al usuario sobre su contexto de interacción actual.
  • Por más que parezcan páginas nuevas superpuestas a la actual, en realidad son parte de ella, por lo que no pueden enlazarse directamente (a menos que se utilice un frame y el usuario tenga el conocimiento suficiente como para obtener la URL de origen).

En conclusión, las modal windows y las lightboxes solo son indicadas en la medida en que no incomoden al usuario y alojen contenido que no valga la pena colocar en una página propia.

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