Patrones de diseño: botón de “Volver arriba”

Hoy os vamos a hablar de un patrón de diseño que está tomando cierta importancia con el crecimiento de los diseños responsive. Al popularizarse los diseños a una columna donde se van cargando contenidos o elementos como el scroll infinito o las listas de elementos largas en dispositivos móviles es necesario un elemento que permita al usuario volver al menú de navegación de una forma rápida y cómoda.

Imagen de Norman Nielsen

Habitualmente, la forma elegida suele ser poner un botón con una flecha hacia arriba, que a veces viene con una etiqueta de “Volver arriba” o “Ir arriba”.

Norman Nielsen ha escrito un artículo con nueve pautas a la hora de elaborar este patrón para integrarlo en nuestras soluciones de diseño.

Nueve pautas para diseñar un botón de “Volver arriba”

Norman Nielsen nos recomienda estas nueve pautas a la hora de diseñar un botón de “Volver arriba”:

1. Usa un botón “Volver arriba” para páginas de más de 4 pantallas: un botón de “Volver arriba” sólo es necesario en el caso de que la página donde se encuentre tenga más de 4 pantallas de largo, en otro caso no es necesario.
2. Colócalo en la parte inferior derecha: Norman Nielsen recomienda situar el botón de “Volver arriba” en la parte inferior derecha de la página.
3. Etiqueta el botón: a veces, el botón de “Volver arriba” es una flecha hacia arriba sin ninguna etiqueta, pero Norman Nielsen recomienda que lleve alguna. Nosotros os recomendamos usar las expresiones “Volver arriba”, “Ir arriba” o “Arriba”, por ese orden de preferencia de mayor a menor.
4. Coloca un botón sticky de “Volver arriba”: lo mejor en una interfaz para dispositivos móviles es colocar un único botón sticky que permanezca abajo a la derecha y no interfiera con otros elementos de la interfaz.
5. Mantén el botón pequeño para no cubrir elementos importantes pero lo suficientemente grande para que sea fácil de pulsar en dispositivos móviles: intenta no cubrir con el botón elementos importantes de la interfaz como contenido u otros botones, pero comprueba que lo diseñas con un tamaño adecuado para ser pulsado desde un dispositivo móvil.
6. Destaca el botón visualmente: intenta que el botón no se mimetice con el resto de elementos de la interfaz.
7. Considera no destacar el botón hasta que sea necesario: el botón de “Volver arriba” habitualmente dificulta las tareas hasta que no se necesita, por lo que una buena idea suele ser no destacar el botón hasta que no sea necesario.
8. Mantén el botón fijo: los usuarios se muestran desconcertados si los botones cambian de sitio, por lo que intenta colocar el botón de “Volver arriba” en el mismo sitio en todas las páginas.
9. Permite a los usuarios controlar el scroll: a los usuarios les gusta mantener el control de hacia qué dirección sube y baja la navegación, por lo que intenta que si el usuario cambia de opinión en un momento, no suba automáticamente hacia arriba.

En Torresburriel Estudio realizamos proyectos de consultoría en diseño de experiencia de usuario para tu producto digital aplicando metodologías de diseño centradas en el usuario. Contacta con nosotros y cuéntanos tu proyecto.