Problema

Cuando se incluye un iframe en una página web o aplicación, surge el desafío de manejar dos o más barras de desplazamiento. Esto puede provocar que, sin querer, se arrastre el iframe incrustado mientras se desplaza por la página, o viceversa. Este problema es común en páginas que contienen mapas, datos bancarios, listas, modales con desplazamiento, o desplazamientos horizontales, que son muy frecuentes en dispositivos móviles.

Es necesario explorar recomendaciones para evitar conflictos entre desplazamientos verticales y horizontales, así como posibles alternativas de diseño que puedan prevenir estos problemas por completo.

Áreas de desplazamiento incrustadas

El uso de un área de desplazamiento incrustada genera una mayor carga mental para el usuario. El usuario debe considerar, incluso antes de interactuar, cómo se relaciona esa zona con el desplazamiento en relación con el total de la página (que ya puede ser desplazable). Tener un único desplazamiento en toda la página evita complicaciones, ya que funciona de la manera en que el usuario espera.

El uso de un área de desplazamiento puede ser justificado por el ahorro de espacio, lo que podría permitir resaltar elementos que, de otro modo, podrían quedar ocultos en la parte inferior de una lista larga. Sin embargo, este método también puede ocultar opciones importantes en favor de otras que aparecen con un único desplazamiento.

Además, no podemos predecir el tamaño de pantalla del usuario, por lo que podemos estar ajustando el tamaño de estas áreas innecesariamente. Un usuario con una pantalla grande podría ver todos los elementos perfectamente.

Una mejor solución que permite ahorrar espacio sin recurrir al desplazamiento es truncar los elementos, es decir, proporcionar un botón visible de "ver más", como se muestra en el siguiente ejemplo:

Un área de desplazamiento puede atrapar al usuario mientras hace scroll, ya sea con un ratón o una pantalla táctil. Si el cursor del ratón entra en una de estas áreas mientras se desplaza por toda la página, el scroll se aplicará al área y la página no se moverá. Lo mismo puede ocurrir en un móvil, y es aún más crítico si la altura del área definida supera el tamaño de la pantalla del teléfono, lo que impediría salir completamente del área de desplazamiento.

Los dispositivos suelen utilizar gestos para la navegación, incluyendo las páginas web. Por ejemplo, un ordenador Mac permite al usuario regresar a la página anterior realizando un gesto con el Magic Mouse hacia un lateral. En un iPhone, un gesto desde el borde izquierdo de la pantalla permite al usuario retroceder a la pantalla anterior. Un usuario puede intentar hacer scroll horizontal y, sin querer, activar un retroceso de página. O a la inversa, intenta retroceder y no puede porque el scroll ha capturado su gesto. Sin duda, el primer caso es más frustrante para el usuario y puede causar la pérdida de su trabajo.

Ocultar contenido detrás de un área de desplazamiento puede hacer que el usuario piense que el contenido que busca no existe. Esto puede no ser muy evidente en un formato de lista, donde el usuario sabe que tiene que revisar el contenido, pero puede ser crucial si se usa este área de desplazamiento para ocultar enlaces de navegación.

Por ejemplo, en un ecommerce que lista categorías en un desplazamiento horizontal, el usuario puede pensar que la categoría que busca no está disponible porque no la ve entre las primeras 3-4 categorías que aparecen. O en una página donde se utilizan pestañas para navegar, en móvil es posible que no se vean todas y el usuario intente buscar la sección que está oculta.

El usuario puede no darse cuenta de que ese contenido se puede desplazar.

Si el usuario se desplaza usando la barra de desplazamiento, es decir, haciendo clic en ella y arrastrándola tanto vertical como horizontalmente, puede saltarse elementos si la barra no tiene ajustada correctamente la sensibilidad. En otras palabras, puede pasar demasiado rápido por los elementos.

Reflow

Existe un criterio de accesibilidad que demanda que las páginas deben permitir zoom sin problemas ni pérdida de funcionalidad. Por lo general, al hacer zoom, la página se transforma según el diseño responsive definido, de modo que al alcanzar un zoom del 400%, lo que se ve es esencialmente la versión móvil a gran escala.

Este criterio especifica que con este nivel de zoom, los contenidos con desplazamiento deben verse correctamente. Por lo tanto, debe haber una definición para estas pantallas en los puntos de corte responsive, para que se muestren correctamente cuando se hace zoom.

Las medidas que proporciona el criterio se basan en un tamaño de pantalla estándar, con un ancho de 1280 y una altura de 1024. Con un zoom del 400%, el ancho se reduce a 320 y la altura a 256.

El criterio especifica que para contenidos con desplazamiento horizontal, debe haber una definición responsive con una altura de 256. Y para aquellos con desplazamiento vertical, debe haber una definición responsive con un ancho de 320.

La imagen muestra un iPhone 5 con un ancho original de 320, junto con un rectángulo de 256 de altura para indicar el área que representa.

Todo esto se hace para evitar el desplazamiento en ambas direcciones. Se establece un criterio de excepción para contenidos que necesariamente deben tener desplazamiento en dos dimensiones, como mapas, imágenes, juegos y tablas. En estos casos, se indica que las barras de navegación deben estar visibles.

Criterio Instagram

Instagram presenta un desplazamiento horizontal en los carruseles de fotos en móviles de todos los tamaños, y su experiencia no es caótica. El tamaño de las fotos definido por Instagram para publicaciones, en el caso de fotos verticales (las que ocupan más altura), es de 1080 x 1350 píxeles (Instagram las muestra con la medida de 600 x 749 píxeles). Si adaptamos este tamaño de foto al iPhone 5, observamos que la foto cabe en la pantalla y además deja espacio para mostrar contenido por debajo. En el caso del iPhone con un ancho de 320, la imagen se ajusta a una altura de 410.

Si calculamos la altura mínima que puede tener una foto de Instagram a partir del tamaño horizontal de la foto, que es de 1080 x 566 píxeles (también se puede usar el tamaño de 600 x 400 píxeles), obtenemos una altura de 213 con un ancho de 320. Esta es inferior a la recomendada en el criterio de accesibilidad.

Al calcular la altura mínima que puede tener un video de Instagram, que es de 600 x 315 píxeles como mínimo, y con un ancho de 320, obtenemos una altura de 168. Esto es más pequeño que el anterior y está por debajo del criterio de accesibilidad. Se puede argumentar que este criterio es para la web responsive y no para las aplicaciones en las que el contenido tiene un tamaño fijo, a excepción de los textos, por lo que no se verá afectado por un zoom.

Conclusiones

• Un elemento con desplazamiento en la web debe tener una altura mínima de 256 y un máximo de 410 en su versión móvil, pendiente de pruebas.

• Un elemento con desplazamiento en la aplicación puede tener una altura mínima de 168 y un máximo de 410 en su versión móvil, pendiente de pruebas.

Enlaces de interés

• Áreas de desplazamiento incrustadas

  • Avoid Inline Scroll Areas (26% Get it Wrong)

• Diseñar truncamientos:

  • 6 Guidelines for Truncation Design

  • Pestañas desplazables https://material.io/components/tabs#scrollable-tabs.