Como indicar en una página scrolleable, que hay más contenido.

Posted on Viernes, diciembre 4, 2015 in NEWS

Este es un problema recurrente. Tenemos una página con más contenido que el que cabe en la pantalla y por lo tanto se puede scrollear.
¿Cómo le indicamos a nuestro usuario que HAY más contenido?

En la WEB esto se resuelve con la barra de scroll, pero ¿cómo lo resolvemos de manera elegante en un dispositivo móvil?

La solución a este problema de usabilidad ha ido cambiando en el tiempo, es así como a principios de los 90 el experto de usabilidad Jakob Nielsen recomendaba no ocupar scroll, pero ya el 97 recomendaba sí hacerlo. Muchos recomiendan hoy en día poner en el primer pantallazo (o “above the fold”) la invitación para seguir leyendo más abajo.

Bueno, pero lo que nos convoca es cómo indicar que hay más contenido en una página.

La gente de Microsoft introdujo un concepto muy interesante con su interfaz Metro y es que se muestre parte del contenido siguiente al finalizar la página. De ese modo el usuario sabe que hay más contenido en esa dirección (podría ser horizontal o vertical). Me gusta mucho esa opción, en mi opinión de hecho Windows Phone 7 tenía la interfaz más elegante y simple comparada con iOS 6 y Android 4.

En esta imagen se puede ver que cuando hay contenido parcial se entiende que se puede scrollear.

El problema es cuando justo, por mala suerte, no se ve contenido parcial.

¿Cómo resolver este problema?

Cabe notar que el comportamiento habitual de la barra de scroll en móviles es que aparezca cuando el usuario comienza a hacer scroll. Pero si el usuario no sabe que se puede hacer scroll, no lo hará con su dedo y nunca le aparecerá la barra de scroll.

Luego de escanear diversos foros (como este y este) y probar distintas Apps, llegué al siguiente listado de soluciones al problema:

  1. Scroll permanente: es decir dejamos el scroll visible siempre.
  2. Scroll que se muestra una vez cuando carga la pagina: está opción me agrada, muestras un flash del scroll bar por un segundo. Es consistente con el comportamiento habitual del scroll bar, que aparece y desaparece.
  3. Sombra abajo: poner un fading edge por donde se podrá scrollear. También es consistente con la sombre de “rebote” cuando llegas al final del scroll.
  4. Flechita que indica que hay mas: poner una flecha o algún tipo de texto que indica que hay algo más abajo, luego cuando haces scroll le haces un fade para que desaparezca.
  5. Boton hay mas: poner un botón en duro que al apretarlo te muestra más.
  6. Elipses: poner varios puntitos uno al lado del otro y que el primero esté agrandado. Se ocupa mucho para los destacados. Creo que funciona sólo en scrolls horizontales.
  7. Auto -scroll: Que el contenido empiece a scrollear sólo. Si el usuario toca la pantalla, se detiene.
  8. Partir un poco mas abajo y scrollear hasta el tope: Si el scroll es vertical partes un poco más abajo y luego scrolleas hacia arriba. Me gusta porque muestra la acción que se puede realizar con el objeto.

Para nuestra aplicación FollowMe estamos justo ahora discutiendo cuál opción implementar. Puedes descargar FollowMe y ver por cuál nos decidimos. FollowMe es una App de AudioTours, que te permite recorrer la ciudad con Tours y mapas offline, y conocerla mientras te guía por lugares interesantes. Al llegar a cada lugar se activa una narración de un experto del lugar. ¡Puedes crear tus propios tours!

Comments are closed.

WordPress Theme designed by Amnesia Games