botones-ui
Tips

La posición ideal para un botón en la UI (Interfaz de Usuario)

Desde hace ya algunos meses doy asesoría a algunos startups y una pregunta que me hacen frecuentemente, es si el botón de “Cancelar” “debe de estar posicionado a la izquierda o a la derecha del botón que llama a la acción, mejor conocido como “Call to action”.

La respuesta es DEPENDE.

Este tema ya ha sido debatido desde hace muchos años, pero sigue sin tener una regla definida, por lo cual quiero tocar algunos puntos antes de dar una opinión al respecto. Comenzaré por definir diferentes escenarios de uso de estas dos acciones y procederé por dar una recomendación al respecto sobre cada uno.

Abordaré el tema con base a aplicaciones web en general, pues sobre sistemas operativos y móviles es un tema totalmente diferente.

1. Acciones primarias vs. secundarias

Un botón puede tener determinadas funciones, tales pueden dividirse como primarias y secundarias. Una acción primaria es por ejemplo, aquella que busca ser la protagonista de una formulario.

En pocas palabras la acción primaria, es aquella que queremos que nuestro usuario haga y por lo general también le llamamos “Call to action”.

Normalmente las acciones primarias son también denotadas como “positivas”, entre las cuales se encuentran “Enviar”, “Guardar” o “Continuar”.

a) Ejemplos de acciones primarias (positivas):

Objetivo: Queremos que el usuario se registre al boletín mensual para recibir promociones.
Se resalta el botón “Regístrate” (Estoy “Enviando” mi e-mail).

walmart-registrate

 

Objetivo: Queremos que el usuario agregue artículos al carrito de compras.
Reebok resalta el botón “Añadir al carrito” (Estoy “Guardando” mis artículos para comprar).

reebok-carrito

 

Objetivo: Queremos que el usuario proceda y realice la compra.
Se resalta el botón “Comprar” (Estoy “Continuando” con el proceso de pago).nike-comprar

Por otra parte, una acción secundaria es aquella que le da al usuario flexibilidad ante una decisión. Es decir, que le otorga el poder de retractarse o repensar su acción, por lo tanto son conocidas como “negativas”, por ejemplo “Cancelar”, “Cerrar” o “Atrás”.

b) Ejemplos de acciones secundarias (negativas):

Escenario: Estoy llenando un formulario y prefiero cancelar mi registro por cualquier motivo. Se agrega la opción “Cancelar” (Estoy “Cancelando” la creación del tablero).pinterest-cancelar

 

Escenario: No quiero suscribirme al boletín mensual, sólo deseo continuar con mi navegación. Se agrega el enlace “No quiero el descuento, gracias” (Osea “Cerrar”).famsa-cerrar

 

Escenario: Antes de realizar el pedido y pagar, ofrecer la opción de volver al carrito de compras y guardar los artículos para “después”. Se agrega el botón “Wishlist” (Quiero ir “Atrás” y no seguir con el proceso de compra).wishlist

TEST DE COMPRENSIÓN: En una aplicación para entrar con mi usuario necesito la contraseña, pero la he olvidado. Necesitamos agregar la opción de “Recuperar contraseña”. Este botón ¿sería una acción primaria o secundaria?

La respuesta es secundaria, pues el botón primario es el de “Entrar”.

Ya comprendiendo la diferencia entre las acciones primarias y secundarias, es importante conocer algunas recomendaciones sobre cada caso.


2. Cuando el “Call to action” es la acción primaria

Recordemos que el “Call to action” positivo es la acción que queremos incentivar. Enlisto entonces algunas recomendaciones a la hora de diseñarlo:

Resaltar el botón, hay que hacerlo parecer “clickeable”. Agregar un borde que se asemeje a un botón físico, o que al pasar el mouse (hover) cambie de tono.

samsung-clickeable

La etiqueta del botón debe ser un verbo o una frase imperativa, lo cual le dice al usuario que pasará si le da click “Al grano” como diríamos muchos… ¡DAME ACCESO BETA!.

robinhood-imperativo

Desaturar el botón secundario para que no llame mucho la atención GANDHI resalta el Call to action “Agregar a bolsa de compras” con amarillo, mientras le da menos color a los botones secundarios como “Lista de deseos”.gandhi-enfasis

Es preferible darle el estilo de link a la acción secundaria o negativa para que no tenga mucho peso visual.

ADIDAS lo hace bien cuando agrega links a la opción de “Volver a la tienda”.

adidas-link


3. Cuando el Cancelar es la acción primaria

Ahora bien, algunas veces la acción que queremos provocar es una negativa, se preguntarán ¿cómo voy a querer que el usuario no realice algo positivo? y entonces volvemos a tocar el tema sobre, darle flexibilidad a la hora de tomar decisiones (tratémonos como humanos 😉 !)

Supongamos que el mensaje que se nos muestra es sobre REFORMATEAR LA COMPUTADORA. Es una acción irreversible, incluso ¡peligrosa! Queremos que el usuario realmente entienda lo que significa esto y que al aceptar dicha acción, se borrará ABSOLUTAMENTE TODO de su computadora. Por lo tanto, en este caso el botón de acción CANCELAR es la opción que preferimos que haga click (tratando de avisarle al usuario ¿estás seguro? ¡piénsalo bien!).

Para esto hay dos cosas muy importantes que debemos tomar en cuenta:

La primera es que las instrucciones deben ser TOTALMENTE claras, en el ejemplo a continuación notamos que el texto no es claro con las acciones del botón El texto me confunde pues me pregunto, si doy click en Cancelar ¿qué pasará? o si doy click en Aceptar ¿Ocurre algo diferente? Realmente no lo sabemos. Estimado Telcel: ¡dejen de ser mañosos!.

telcel-texto

Desaturar el botón primario, nos permite darle menos énfasis a una acción “peligrosa”.

iTunes dice “Piénsalo bien” dándole énfasis a la acción segura.

itunes-borrar

 

UNA BUENA PRÁCTICA: InvisionApp utiliza un rojo de “alerta” y además agrega 3 checkboxes que hay que “conscientemente” aprobar para que algo sea eliminado. Por lo que aunque a veces pueda parecer un proceso más largo, nos permite evitar “errores de dedo”.

invision-checkbox


4. Sobre la posición

Retomando el tema por el que empecé a escribir este post. Algunos expertos como Luke Wrobleski argumentan que poner el botón de la acción primaria del lado izquierdo es mejor para el usuario pues está más cerca de los campos de un formulario y por lo tanto ahorra tiempo en volver a agarrar el mouse y desplazarse.

Aunque esto hace sentido para muchos, los usuarios normalmente en un caso como éste leen ambas opciones y después eligen una, generando entonces tres fijaciones visuales como lo muestra la imagen a continuación.

Otros, como yo, recomendamos que el botón primario se encuentre a la derecha, haciendo más corto el proceso de selección mental.

Un ejemplo que uso para llegar a la conclusión sobre dónde posicionar éste botón es:

Pensemos en una interfaz de avance: pudiera ser un formulario, “wizard” o un proceso que incluya un paso para “adelante” (el cual asociamos con cambiar / avanzar de página en un libro físico), ¿hacia dónde es nuestro movimiento?, culturalmente entendemos la progresión hacia la derecha.

Además, cuando un usuario hace click en un botón secundario, espera que la aplicación no haga algo, o bien, que regrese a la pantalla/estado anterior. Por lo tanto, hace sentido que el botón primario “de avance”, esté posicionado a la derecha.

Apegándonos al “Atrás (negativo) = Cancelar”, “Siguiente (positivo) = Continuar”.


Conclusiones

Como vimos, depende mucho de la situación y de lo que queremos incentivar que haga el usuario. En la cultura occidental vemos el progreso a la derecha, sin embargo, esto podría no ser lo mismo en todo el mundo.

En pocas palabras, debemos de estar atentos a saber que tipo de acción estamos haciendo, y diferenciar si es primaria o secundaria, positiva o negativa, ya que como vimos “Cancelar” tiene connotaciones primarias positivas cuando queremos evitar una acción irreversible, o bien, secundaria negativa cuando se está llenando un formulario y se desea cancelar.

Con este post, espero que esté más claro porque decimos DEPENDE 🙂

¿Has tenido situaciones donde la posición de algún botón te ha causado algún problema?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *