¿Cómo indicarías a tus usuarios que tienen que hacer scroll en tu app para ver el contenido no visible?

Recuerdo que hace no más de dos años nos llegó una petición bastante curiosa de un cliente de Perú. Su producto era una aplicación de banca.

El problema era que los usuarios de la aplicación no sabían que se podía hacer scroll en la pantalla y por consecuencia no veían el resto de contenido de ésta.

El asunto parecía de broma. Pensar que un usuario que utiliza una aplicación de banca en un dispositivo (smartphone o tablet), que es un perfil acostumbrado a usar apps a diario, no sea capaz de saber que hay más contenido debajo de la zona visible de la pantalla.

Pero, ¿porqué pasaba esto?

El principal motivo por el cual se daba (y se sigue dando) este caso es la casualidad.

El contenido de la pantalla que estamos visualizando termina justo al final de la pantalla, no aparece más contenido* cortado y como consecuencia no hay sensación de continuidad por lo que el usuario (también hay que decirlo, es muy poco observador) cree que no hay más contenido por ver.

*Por contenido entendemos que puede ser un título, un párrafo, un listado, una card, una imagen… cualquier elemento visual de nuestra aplicación.

La solución que dimos en su momento

Tal vez fue por la experiencia, por petición expresa del cliente o por falta de búsqueda de otras soluciones, pero la solución que dimos en su momento no la aplicaría a día de hoy.

Coach mark, un recurso muy común utilizado en movilidad.

Nos fuimos por la vía fácil. Una ayuda contextual a pantalla completa (o coach mark) que aparecía al pulsar en el icono de ayuda (‘?’).

Es una solución correcta sí, pero no deja de ser la opción más fácil de diseñar.

Pero, ¿podemos dar un paso hacia adelante? ¿podemos ser capaces de ayudar e informar al usuario de que puede hacer scroll en la pantalla sin la necesidad de tener que pulsar en ningún elemento?

Esta fueron las preguntas que nos hicimos hace pocos meses con uno caso similar al pasado. De nuevo la misma problemática; la casualidad de que en algunas pantallas el contenido terminaba justo al final de la zona visible de la pantalla.

La solución que hemos dado ahora

Tras un proceso de búsqueda por un gran número de aplicaciones dimos con un denominador común.

Facebook, LinkedIn y Twitter nos dieron la idea para solucionar nuestro problema.

Estas tres aplicaciones tienen un timeline donde se va publicando en tiempo real el contenido de los perfiles que seguimos.
Pero se dan casos en los que el contenido que vemos al abrir la aplicación no es el más reciente. Por ejemplo, cuando tenemos la aplicación abierta en segundo plano o una vez ya estamos navegando por nuestra aplicación que puede que se haya publicado nuevo contenido.

¿Y cómo sabemos que hay nuevas historias, publicaciones o tweets en nuestra timeline sin la necesidad de hacer ‘Pull to refresh’ en la pantalla?

‘Nueva historia’ (Facebook), ‘Nuevas publicaciones’ (LinkedIn) y ‘Ver Tweets nuevos’ (Twitter). He ahí el ‘quid’ de la cuestión.

Los mensajes informativos de Facebook, LinkedIn y Twitter, nuestros aliados en dar con la solución.

Animación + mensaje informativo = acierto

Estoy en contra de utilizar animaciones en exceso con el argumento de que “quedan bonitas”, “es lo que se lleva” o “dan personalidad a nuestro producto”. Me niego. Lo único que hacen es aumentar el tamaño de nuestra app y por consecuencia un motivo de peso para no instalarla en tu dispositivo o eliminar cuando andes escaso de memoria.

Las animaciones en las apps están muy bien sí, pero siempre que tengan sentido. Y en estos casos, utilizar una animación tan sencilla como una pastilla flotante con un mensaje informativo si que lo tiene.

¿Por qué en estos casos si tienen sentido las animaciones? Porque un pequeño movimiento en una pantalla estática consigue captar toda la atención del usuario.

Ya sabemos que hay nuevas publicaciones, nuevos tweets o nuevas historias y además nos hemos ahorrado hacer Pull to refresh. Objetivo cumplido.

¿Cómo nos llevamos esta solución a nuestro caso?

Muy fácil. En los casos de Facebook, LinkedIn y Twitter la pastilla flotante aparece en la parte superior de la pantalla, debajo de la barra de navegación y en el inicio del timeline. La zona donde queremos captar la atención del usuario para que deslice hacia abajo el contenido (o pulse en la misma pastilla) y pueda ver las nuevas publicaciones.

Como nosotros queríamos que la atención fuera al final de la pantalla del dispositivo, la pastilla flotante iría en ese lugar.

Ejemplo de como iría la pastilla flotante en la app Música

Además para reforzar el mensaje añadimos en la pastilla una flecha mirando hacia abajo para indicar hacia donde hay que hacer el scroll. Recurso utilizado también por Facebook y Twitter.

El recurso de la flecha refuerza el mensaje que queremos dar.

¿Y cuando el usuario aprenda a hacer scroll?

Las ayudas contextuales igual que aparecen en la pantalla, desaparecen.

Nuestra idea fue la siguiente: La pastilla flotante solamente se mostraría en las pantallas que tuvieran el problema del scroll y, en principio, las tres primeras veces que se le mostrase dicha pantalla al usuario.

Quiero aplicar esta solución a otros casos, ¿puedo?

No solo Facebook, LinkedIn y Twitter utilizan este recurso para indicar que hay algo que no vemos en la pantalla.

Por ejemplo, WhatsApp lo aplica para indicar que hay mensajes sin leer utilizando un componente más común en web; una flecha hacía abajo en la parte inferior derecha de la pantalla.

Recurso muy común en web para indicar que hay más contenido en la pantalla.

Conclusión: Muchas veces pensamos que los usuarios que van a utilizar nuestra app son expertos en movilidad y luego nos llegan casos tan curiosos como estos.

Como consejo, siempre, siempre y siempre que diseñemos una pantalla y sepamos que habrá que hacer scroll (esto es da en el 99% de los casos) debemos de forzar el diseño para que el contenido aparezca cortado. De esta forma nos aseguraremos que el usuario, seguro, al 100%, hará scroll.