16/03/2016

¿Son convenientes los botones back to top?

¿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.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce