¿Dónde debería ir la acción de cerrar? ¿a la izquierda o a la derecha de la pantalla?

Hace unas semanas, en una reunión salto la pregunta de porque en la pantalla que se había diseñado (en iOS) el icono de cerrar ‘x’ estaba a la izquierda y no a la derecha. Se argumentó con que había espacio a la derecha y por ello debería de estar colocado en ese lugar. ¿Pero es esta afirmación correcta?

A partir de aquí comenzó un debate interno que quise compartir con otros compañeros para buscar la solución correcta.

Comencé buscando ejemplos en iOS para ver que hacían apps como Wallapop, LinkedIn, Souncloud, Instagram, Openbank, Deliveroo, 500px, Pinterest, Twitter, Facebook, Medium o Shazam.

Cada uno hace lo que le da la gana. A la izquierda, a la derecha o con literales.

También busqué que hacía Android en estos casos. Icono ‘x’ a la izquierda en la mayoría de los casos. Pero como pasa en iOS, a veces la colocan a la derecha.

Continuando con el debate, llegué a distintas conclusiones.

¿Qué dicen Apple y Google?

Situamos los elementos navegación (volver, cancelar, cerrar y menú) a la izquierda (con iconos o icono más texto). Y las acciones a la derecha (por lo general texto en iOS e iconos en android).

Es la forma correcta que las guidelines de iOS y android aconsejan.

Ahora, como todo hay excepciones y la ‘x’ puede estar en otro sitio.

Si queremos facilitar al usuario ese cierre, ¿porque no colocarla en la parte inferior y no arriba en un lateral donde es más complicado llegar con el dedo (en pantallas grandes)? Si no nos convence (visualmente hablando), el literal ‘Aceptar’ o ‘Entendido’ cierra mejor la conversación con el usuario. ‘Cerrar’ es más negativo.

Hemos abordado al usuario con un mensaje bloqueante de pantalla que menos que no le cueste cerrarlo.

YouTube, Tumblr y PayPal colocan la acción de cerrar en la parte inferior.

¿Y si está en la derecha? ¿Está mal colocada?

Partiendo de que la navegación va a la izquierda y de que el usuario está acostumbrado a cerrar la pantalla en esa zona, si la cambiamos podemos llegar a confundirlo. Pero hay algunos casos excepcionales (y correctos) como por ejemplo lo que hace Twitter en iOS.

En la mayoría de las pantallas de esta app, en la parte derecha de la barra de navegación está el icono para ‘Nuevo tuit’. En el momento en que pulsamos éste, salta una pantalla modal con el icono de cerrar a la derecha.

¿Y porqué creo que en este caso si está bien? El usuario sabe inconscientemente que para escribir un tuit le bastará con pulsar el icono que siempre está a la derecha y para cerrar esa pantalla ha aprendido que hay que pulsar en la misma zona, justo donde empezó la acción.

Esa manera es muy correcta. Terminar la acción en el mismo sitio que la has empezado.

Caso de Twitter. La acción termina donde la he empezado.

Cuando el diseño es el que manda

Alertas en Google Maps (Tus sitios) y cards en Google Street View.

Si por ejemplo utilizamos un fondo de color con una opacidad inferior al 100% (como Google Maps (Tus sitios) no podremos colocar la ‘x’ en la izquierda ya que solaparía el elemento de navegación que hay detrás y muy probablemente no se vería bien.

Y en otros casos (como el de Google Street View) la maquetación obliga a colocar la ‘x’ a la derecha para mantener la uniformidad en todas las cards.

A partir de ahora si me preguntan contestaré a la izquierda, que cada caso es distinto y que tendría que verlo. Pero sin duda, mejor a la izquierda.