¿Son convenientes los botones back to top?

Los botones back to top son aquellos que le permiten al usuario regresar rápidamente a la parte superior de la página luego de haberse desplazado hacia abajo. Su objetivo es que el usuario pueda volver al tope de la página sin tener que realizar el esfuerzo de hacer scroll o swipe hacia arriba varias veces. Esto puede ser muy útil cuando la página tiene mucho contenido (lo que ocurre, por ejemplo, en los sitios web one page o cuando se usa scroll infinito). Este botón puede estar al pie de la página o bien aparecer y quedar en un lugar fijo una vez que ya nos desplazamos cierta cantidad de píxeles hacia abajo. También pueden aparecer en páginas de preguntas frecuentes, debajo de cada respuesta y apuntando de vuelta a la lista de preguntas, para un escaneo más rápido por parte del usuario. Tras presionar el botón, se realiza un desplazamiento automático hacia la parte superior, que puede ser instantáneo o (mejor) tener una rápida transición animada.

Sapiens usa botón back to top pero solo en resoluciones mobile, donde la página se hace más larga verticalmente.

Activiti usa botones back to top en su sección de preguntas frecuentes: al pie de cada respuesta encontramos un enlace para volver a la lista de preguntas. Así, si solo queremos acceder a algunas preguntas y respuestas en particular, no es necesario realizar scroll hacia arriba a cada rato.

Naturalmente, el botón back to top debe implementarse como un enlace interno, es decir, un link que no conduce a otra página, sino a un elemento con identificador dentro de la misma página (<a href=”#identificador”>…).

En los últimos años, este botón se popularizó por una razón sencilla: ahora los sitios web se consumen desde pantallas chicas (teléfonos, tablets), donde el espacio dedicado al contenido se reduce horizontalmente y se expande verticalmente. Por lo tanto, se genera más desplazamiento vertical (la página es más «alta») y parece necesario contar con un botón que nos ahorre el esfuerzo de volver arriba. Sin embargo, muchos señalan motivos para evitar su uso:

  • El botón distrae al usuario del contenido [Jukka Korpela, 2012].
  • Los usuarios con discapacidad visual, que utilizan lectores de pantalla, escucharán el texto asociado al botón como si fuera parte del contenido, lo cual puede ser molesto o bien confuso [Jukka Korpela, 2012].
  • Cada marcador implica un registro nuevo en el historial de navegación. Por lo tanto, al accionar un botón back to top, como todo link interno, se generará una entrada (innecesaria) en el historial[Jukka Korpela, 2012].
  • El experto Jakob Nielsen desaconseja cualquier tipo de links internos, porque su funcionamiento es diferente al que esperan los usuarios (acostumbrados a los links externos). Nielsen solo admite links internos para tres casos: listas en orden alfabético, secciones de preguntas frecuentes y tablas de contenidos.
  • Si el botón back to top es necesario porque la página tiene mucho contenido, entonces el problema es que la página tiene demasiado contenido. Habría que dividirlo en varias páginas.
  • Los teclados y algunos browsers ya traen opciones para subir al tope de la página, además de existir la barra de scroll. ¿Por qué deberíamos agregar otro botón?

Comentarios finales

Si el contenido de la página es necesariamente largo, o está dividido en secciones (por ejemplo, preguntas y respuestas), el botón back to top puede ser una buena opción. En otros casos, su uso no es recomendable. Es importante que el link contenga un texto descriptivo (por ejemplo, «volver arriba» o «volver al principio» en vez de «volver» o «subir») y el ícono de una flecha apuntando hacia arriba.

Anti-patterns: un riesgo latente para la experiencia de usuario

Ya conocimos los dark patterns: trampas que los diseñadores de UX colocan voluntariamente en sus interfaces, con el fin de engañar al usuario. Un error similar, pero involuntario, son los anti-patterns: patrones de diseño que no funcionan bien o resultan contraproducentes. Para el diseñador Michael Boeke, un anti-pattern es un patrón de diseño que a simple vista parece beneficioso, pero trae consecuencias indeseadas; y debe ser marcadamente inferior a un patrón de diseño alternativo usado en otro lado.

Es habitual que, cuando vemos una misma práctica de diseño repetida alrededor de muchos sitios web, pensemos que es correcta y la apliquemos en nuestros proyectos. Pero este patrón, por más común que sea, puede ser perjudicial. Solo realizando pruebas y conociendo a nuestro público objetivo podemos darnos cuenta de si esa elección de diseño realmente ayuda al usuario a cumplir sus objetivos o, por el contrario, es una costumbre nociva demasiado extendida.

Conozcamos algunos anti-patterns:

  • «Haga clic aquí». El anchor text debe describir lo que hace el enlace. Por ejemplo, no tiene sentido usar la frase «Haga clic aquí para obtener más información»: lo correcto sería «Más información».
  • Elementos cliqueables que no parecen cliqueables. Los elementos «cliqueables» —mayormente, enlaces y botones— deben distinguirse de aquellos que no lo son. Por ejemplo, la tendencia al flat design hace que muchos botones, al no tener relieve, parezcan estar al mismo nivel que la pantalla, resultando indistinguibles del resto del contenido.
  • Mystery meat (carne misteriosa). Se refiere a los casos donde el usuario tiene que hacer clic sobre un enlace, o pasar el mouse por encima, para saber adónde conduce. Esto es habitual en muchos menús que usan íconos o imágenes en vez de texto: si el gráfico no es descriptivo, el usuario se ve obligado a pasar el mouse por encima para que el browser le informe a qué dirección conduce, o, en el mejor de los casos, para que aparezca un tooltip informando el destino. La frase mystery meat suele usarse para los productos de carne muy procesada (como salchichas o nuggets) cuyo origen es difícil de determinar.
  • Repetición robótica. Ocurre cuando el usuario debe ingresar más de una vez la misma información. Por ejemplo, cuando al llenar un formulario se le pide su edad y su fecha de nacimiento. Esto es innecesario, ya que el primer dato puede calcularse a partir del segundo.
  • Mala superficie para el touch. Los enlaces y botones deben estar suficientemente separados entre sí y contar con una superficie de al menos 48dp. Si esto no ocurre, el usuario de dispositivo táctil tendrá problemas para tocar el link correcto: el dedo podría exceder la superficie cliqueable o accionar un enlace adyacente.

Para evitar la aplicación de estos patrones, es importante realizar pruebas de usabilidad y no creer que lo que vemos en otros sitios es necesariamente correcto. Nosotros somos los únicos capaces de brindar la mejor experiencia de usuario posible para nuestro público particular.

Diseño web centrado en el usuario: un enfoque exitoso

Son varios los actores que pueden estar involucrados en la realización de un proyecto de desarrollo web. Y todos pueden tener distintas opiniones o intereses sobre un mismo tema.

Por ejemplo, el diseñador puede tener la intención de desarrollar un sitio visualmente inusual, que le resulte divertido construir y le permita destacar su trabajo, sin importarle que esto afecte la usabilidad.

El programador, en cambio, puede querer que todo funcione de acuerdo con sus parámetros de eficiencia y rendimiento, para lo cual quizás prefiera despojar al diseño de elementos atractivos pero «pesados».

Y el cliente probablemente busque que su sitio web se parezca a otro, o que tenga la mayor cantidad de funciones posible, o que cuente con alguna característica novedosa independientemente de su utilidad.

En todos los ejemplos mencionados, los impulsores del proyecto se olvidan del agente más importante: el usuario final.

El diseño web centrado en el usuario es una metodología que, a lo largo de todo el proceso de desarrollo del sitio web, prioriza los intereses, las necesidades, las características y los objetivos del usuario. El resultado será un sitio web usable y accesible, que cumplirá adecuadamente con las expectativas de quien navega por él. El diseño web centrado en el usuario se preocupa por cuatro aspectos principales:

  1. Visibilidad. El comportamiento de la página debe ser transparente. Con un simple vistazo, el usuario debe poder determinar qué puede y qué no puede hacer con la página.
  2. Accesibilidad. Los usuarios deben poder encontrar información rápida y fácilmente a través de la página, más allá de su tamaño.
  3. Legibilidad. El texto debe ser fácil de leer. Se recomiendan fuentes sencillas y buen contraste.
  4. Lenguaje. El texto siempre debe ser comprensible, sin importar el tema a tratar.

Teniendo en cuenta estos criterios es posible diseñar sitios web de utilidad para nuestro público más importante: el de los usuarios.