Todo el mundo hace scroll, eso ya lo sabemos. Pero un diseño web puede llevar a los visitantes a creer que han llegado al final de una página, creando lo que se conoce como "la ilusión de completitud". En este artículo, exploramos las mejores prácticas para guiar a los visitantes a través de tu sitio y evitar esa falsa sensación de final.
Seguimos haciendo scroll
Hubo un tiempo en que los diseñadores se obsesionaban con mantener todo "por encima del pliegue". Pero el scroll se ha vuelto tan intuitivo que esa práctica de diseño ya no es necesaria.
Un informe de abril de 2018 del Nielsen Norman Group respalda la idea de que sí hacemos scroll, aunque no demasiado, dependiendo de nuestro nivel de interés. Sus datos mostraron que “los usuarios pasaron cerca del 57% de su tiempo de visualización por encima del pliegue. El 74% del tiempo se dedicó a las dos primeras pantallas”.
Nos encanta hacer scroll, pero a veces necesitamos un poco de guía.
Guía a los visitantes a través del diseño
El minimalismo se basa en el espacio negativo, pero un exceso de vacío puede crear un falso final donde parece que no hay nada más en la página. La gente puede irse antes de darse cuenta de que hay más contenido. Aunque el minimalismo ofrece un espacio libre de distracciones para resaltar el contenido, los visitantes necesitan pistas de que hay más información debajo del pliegue.
Una forma de hacerlo es mostrando fragmentos parciales de lo que viene a continuación. Mostrar partes de texto o imágenes animará a seguir haciendo scroll.
Mathieu Levesque utiliza este enfoque en su sitio de portafolio fotográfico. La vista de escritorio de su página de inicio muestra una imagen cortada de un vaso con leche girando. Instintivamente sabemos que hay más por ver, lo que nos anima a bajar. También hay transiciones animadas con el título deslizándose en su lugar, señalando el paso de un bloque de contenido al siguiente.
Cortar el contenido también funciona en diseños que no son minimalistas. En este diseño para la revista de skate Thrasher, el contenido está ligeramente desplazado hacia abajo e interrumpido por el pliegue, señalando claramente que hay más por ver.
Usa gráficos y texto para dar dirección
Claro, una flecha puede marcar el camino, pero no todas las pistas tienen que ser tan directas. Algo tan sutil como una línea puede enviar a la gente en la dirección correcta.
Este diseño para Land Life Company muestra cómo las pistas pueden integrarse en el diseño y seguir cumpliendo su propósito de navegación. Una línea en la parte inferior central de la pantalla nos indica que debemos hacer scroll.
El diseñador André Givenchy utiliza un pequeño icono animado en su portafolio para fomentar el scroll. Este es otro ejemplo de una pista gráfica sutil y efectiva.
Las sugerencias de texto y las llamadas a la acción también pueden guiar a los usuarios más adentro del sitio. La agencia creativa NOHAU utiliza la frase "Mira lo que podemos hacer por ti" como una invitación a seguir bajando.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Fomenta el scroll mediante transiciones animadas
Las transiciones animadas añaden interés, rompen la monotonía de una página y dan una sensación de energía. También promueven el scroll al activar el centro de recompensa de nuestro cerebro. Las transiciones animadas distinguen un bloque de contenido del siguiente, impulsándonos a avanzar en el diseño.
Este sitio web para el festival francés de música electrónica Lattexplus utiliza texto guía para incitar al scroll, pero son las transiciones animadas las que realmente nos llevan a través de la página. Cada transición activada por el scroll muestra una foto con efecto glitch de un artista actuando en el festival.
La imagen se desplaza y oscila hasta colocarse en su posición antes de enfocarse. Con el sonido activado, el EDM late de fondo. Las transiciones de un artista a otro imitan la anticipación creciente de la sesión de un DJ.
Y ya que hablamos de animaciones activadas por scroll que rompen la ilusión de completitud, no podemos olvidarnos del paralaje. El paralaje aporta una sensación artificial de profundidad a diseños que, de otro modo, serían planos.
Al diseñar el primer plano para que se mueva más rápido que el fondo, conseguimos una sensación de espacio. Además, el movimiento en los gráficos, imágenes y textos superpuestos anima a los visitantes a hacer scroll, revelando más contenido a medida que los elementos se deslizan en su lugar.
ESPN utiliza una flecha para invitar a recorrer las secciones de los atletas y sus mejores jugadas en la historia de la NBA. El scroll activa un efecto de paralaje que nos lleva de un jugador de baloncesto profesional a otro, junto con la década que los define. Sabemos que hemos llegado al final cuando aparece la palabra FINALE en la última pantalla y el scroll hacia abajo ya no nos permite avanzar más.
Cuidado con los diseños horizontales
El scroll horizontal es cada vez más frecuente, pero al romper con la navegación estándar, puede resultar menos intuitivo. Al igual que en los diseños verticales convencionales, las transiciones animadas, las pistas gráficas y el contenido cortado son indicadores clave para que la gente sepa que debe desplazarse lateralmente.
Este diseño de Proud and Torn, centrado en la historia de Hungría, utiliza un par de técnicas para fomentar el scroll. Las imágenes cortadas y un inusual paralaje horizontal sugieren que hay más contenido por descubrir. También incluye una amable invitación: "Desplázate normalmente mientras continuamos horizontalmente".
Vale la pena recordar que, por muy obvia que nos parezca una interacción a los diseñadores, no tiene por qué serlo para nuestra audiencia. Un poco de ayuda extra no arruinará la experiencia de quienes ya lo han pillado, pero puede ser de gran utilidad para quienes no.
Los usuarios de la web están acostumbrados a los callejones sin salida horizontales, donde elementos como los carruseles marcan un tope. Proud and Torn nos guía a través de un diseño poco convencional que deja claro al instante que hay mucho más contenido por ver.
Evita usar líneas horizontales sólidas; estamos condicionados a verlas como un punto final. Una señal de stop.
Hazles saber que hay una visión más amplia
La ilusión de completitud te da la falsa sensación de que ya no queda nada por ver. Es como ir al Gran Cañón, caminar quince metros desde el borde y pensar: "¡Guau! Mira qué rocas tan bonitas". Y luego volver al coche.
Tu diseño necesita señales que guíen a la gente a través de la maravillosa extensión que es tu creatividad.
