Estamos trabajando en el rediseño de la landing para un producto complejo, necesitamos incluir cierta cantidad de información para que el producto sea entendido y mencionar los varios features que tiene, además de destacar el beneficio de contratarlo on line y no por teléfono.

Hasta acá, nada que como diseñadores de interacción no hayamos tenido que hacer antes. El problema es el requerimiento adicional del cliente: que la página no tenga scroll. 

El mito del scroll

Por algún motivo quedó instalado el mito de que “la gente no hace scroll”. Como Diseñadores de Interacción tenemos que empezar a instalar una versión más refinada de esta verdad a medias: “la gente no hace scroll… cuando no percibe que haya algo debajo del contenido visible”.

Es decir, el problema no es la cantidad de contenido, sino un diseño que no contiene indicadores visuales que muestren que la página continúa debajo del fold. 

Dos formas (complementarias) de solucionar el problema

Hay dos formas de abordar el tema: por un lado en la organización del contenido y por otro lado con el diseño del contenido.

Organización del contenido: menos es más

Aunque no lo parezca, menos contenido arriba del fold incentiva el scroll.

Y el modelo AIDA (atracción, interés, deseo y acción) es una buena estrategia para organizar el contenido: si usamos el espacio “above the fold” para captar la atención y generar interés, logramos que el lector naturalmente haga scroll para seguir leyendo.

En otras palabras, el objetivo es usar en el espacio arriba del fold sirve para iniciar la conversación.

De hecho, si tratamos de cubrir todo el AIDA above the fold, no sólo los primeros 600 píxeles van a ser incomprensibles sino que para qué está el resto de la página?

Estrategias visuales: affordances

Desde el punto de vista del diseño, hay ciertos elementos que pueden crear un “false bottom” dando la impresión de que la página no continúa. Algunos de ellos son:

  • texto en tipografía más chica al final de la página
  • espacio en blanco
  • barras horizontales de scroll  
Tipografía más chica al final de la página

Espacio en blanco 

Barras horizontales de scroll 

Por eso, es necesario incluir elementos de diseño que permiten ver que el contenido continúa debajo del fold. Técnicamente esto es llamado affordances: la relación entre un objeto y su entorno, de forma tal que el objeto le permite al usuario realizar una acción. Affordance en este caso consistiría en incluir elementos de diseño que le permitan al usuario comprender que hay más contenido debajo del fold y deslizarse hacia abajo.

Algunos ejemplos de affordances para scroll:

  • Mostar contenido por la mitad o una imagen cortada (“cut-off look” como lo llama Jared Spool)
  • Poner flechas, separadores u otros indicadores visuales
  • Contar una historia, visualmente, en cada parte de la pantalla, que contribuya a generar interés y despertar deseo  
Contenido por la mitad o una imagen cortada

Flechas, separadores u otros indicadores visuales 

Contar una historia, visualmente, en cada parte de la pantalla 

Paddy Donnelly ilustra muy bien cómo combinar diseño y contenido para mover a la gente a través de la página.

 

Con esto tenemos algunas herramientas para explicarle al cliente la próxima vez que nos pida una página sin scroll, que lo importante no es el scroll sino el affordance del diseño para comunicar la continuidad del contenido.