Uso de la flecha hacia arriba y flecha hacia abajo en la web

Este post viene a aclarar el uso de la flecha hacia arriba y flecha hacia abajo que se muestran en la web. ¿Algo básico a priori verdad? bueno, lo puede parecer, pero la realidad es que en las web se siguen mostrando de forma poco uniforme para indicar interacciones o comportamientos que son idénticos.

Vamos al lío.¿A qué me refiero cuando hablo de flecha hacia arriba y flecha hacia abajo?. A esto:

¿Dónde nos encontramos estos elementos en una web?

1. En las zonas inferiores de la primera página de una web: Últimamente se han puesto de moda las páginas donde todo el contenido de la web se muestra en una única página, la principal home. En los menús superiores se muestran las distintas opciones de navegación, pero estas no llevan a páginas interiores del sitio, sino que lo que hacen es enlazar en la misma página a la sección que se ha clicado. Veamos un ejemploAquí la flecha hacia abajo está indicando que existe contenido dentro de la propia página, más abajo. Es un recurso de navegación que se incluyó más adelante, cuando se vió que los usuarios no bajaban. Aunque los usuarios están acostumbrados a hacer scroll, máxime después del uso de los smartphones y tablets, siguen existiendo usuarios que no lo hacen. Existen distintos recursos para hacer entender al usuario que hay más contenido debajo, y el uso de la flecha hacia abajo es uno de ellos. Su uso es adecuado a la finalidad que se persigue y pretende mejorar la usabilidad de la página, mediante una mejor navegación de la misma.

1. En los menús de navegación:
   • En el principal (de primer nivel): Veamos un ejemplo en la página de www.movistar.esAquí se utiliza la flecha hacia abajo para indicar que existe un desplegable de menú y mostrar las opciones de contenido que incluye.Su utilización es muy adecuada. Cuando el usuario ve el icono de flecha hacia abajo entiende perfectamente que antes de clicar en ella se va a desplegar información. En este caso, lo que se muestra es un superdesplegable, que permite mostrar información de subniveles de información del elemento principal “Tienda” de una forma muy visual y usable para los usuarios.
   • En un menú secundario de navegación (si así se ha establecido en la página, no tiene porqué): Cuando la página dispone de un menú secundario de navegación, y dicho menú secundario incluye elementos de tercer nivel de navegación, entonces algunas veces se muestra este tercer nivel dentro del segundo y se indica mediante una flecha. Bien, pues aquí es donde entramos en algunos usos incorrectos de las mismas, que podemos ver en algunas páginas web.
     Veamos las cosas paso a paso. ¿A qué me refiero con un menú secundario de navegación? a esto:
     Bien, ¿y si a ese menú secundario de navegación le quisiéramos incluir un tercer nivel navegable desde este menú, cómo lo haríamos? Así:
     Perfecto, la inclusión de la flecha hacia abajo indica, al igual que hemos visto en los ejemplos anteriores, que su interacción va a provocar que se muestre algo hacia abajo. La forma de mostrar este tercer nivel podría ser algo como esto:
     El primer nivel de navegación es “Item 2”, el segundo nivel de navegación es “Elemento menú 2” y el tercer nivel de navegación lo componen “Item 1 3er nivel, Item 2 3er nivel, Item 3 3er nivel”. Fijaros en un detalle ahora, la dirección de la flecha ha cambiado, ahora indica hacia arriba, ¿por qué? porque su interacción provocará que las opciones de tercer nivel vuelvan a plegarse, y con ello se anticipa lo que sucederá.
     Comentar que hoy en día existen formas más modernas de mostrar los niveles de navegación, más allá de hacerlo mediante menús izquierdos o derechos de navegación.
     ¿Se entiende?, bien, pues mostremos ahora lo que sucede en algunas páginas:Como habréis comprobado, se están utilizando flechas hacia la derecha para una interacción que lo que hace es mostrar contenido hacia abajo. Obviamente, esto es incorrecto y un mal uso de las flechas. Algo que debería estar tan estandarizado en la web se está utilizando de forma incorrecta. ¿Que sucede en este caso? que cada elemento de menú izquierdo tiene dos interacciones incorporadas que se ejecutan a la vez cuando se clica en la opción, una es desplegar y la otra es mostrar la subhome correspondiente (por ejemplo “Ahorro”) ¿problema? que al volver a cargar la página al usuario le pueden pasar completamente desapercibidas las opciones que se han desplegado en el menú izquierdo tras clicar, ya que el foco visual de dicho usuario se centra en la página central de contenido. ¿Solución? mantener el enlace del texto de la opción de menú a la subhome y hacer que el clic en la flecha (por supuesto hacia abajo y no hacia la derecha) despliegue el menú. Alguien pensará, ufff, que enrevesado ¿no?, bueno, básicamente no, ya que se está utilizando esta forma de navegar de forma estándar en los menús principales de primer nivel de las web modernas (algo que ya he mostrado con la web de Movistar) y se utiliza en la vista de las carpetas de Windows desde que existe, que son ya unas cuantas decenas de años.

¿En qué casos se utilizan flechas hacia la derecha?
Por ejemplo en un carrusel:

En el carrusel, las flechas de izquierda-derecha indican al usuario que el clic va a mostrar información que está a ese lado.Perfecto

También en procesos de compra o en formularios, donde la flecha indica que la interacción sobre ella va a provocar que se muestre otra página que está a la derecha. Perfecto. Por ejemplo

Bien, si el uso de la flecha está estandarizado en la web para que se muestre información hacia ese lado, ¿por qué se sigue utilizando en algunos casos la flecha hacia la derecha para mostrar contenido hacia abajo? evidentemente ese uso es incorrecto y un problema de usabilidad.

De hecho, tenemos un ejemplo clarificador de la vida cotidiana para terminar de afinar la explicación.

Algo tan simple como los botones de un ascensor. ¿Qué pensaríamos si viéramos un botón de ascensor con dirección derecha? ummm…. ¿sería acaso el ascensor de Charlie y la fábrica de chocolate y nos llevaría a plantas que están a la derecha?!

El uso cotidiano del ascensor por los usuarios (y de otros muchos elementos en la vida diaria) y de la web con los recursos que hemos visto, provoca que poco a poco exista un estándar mental que se debe respetar, ya que es lo que esperan las personas que haga.

Soy partidario del uso de los estándares en la web, aunque por supuesto hay que tener la mente abierta y si se plantea algo que mejora un estándar entonces a por ello, claro que sí, sino no evolucionaríamos!, pero por otra parte, si no vas a mejorar el estándar entonces no lo rompas, porque lo único que conseguirás son usuarios frustrados.