Si, lo sé, este tema es ya antiguo y se ha escrito sobre él, sin embargo, la realidad es que durante los últimos años he estado en muchas situaciones de trabajo en las que ha surgido la discusión con lo que el tema sigue estando candente aunque sea un aspecto mínimo y básico, además de que en las interfaces web de hoy en día no hay un criterio común. Así que quería aportar algún argumento de mi propia cosecha para completar esta discusión y por supuesto decantarme por una de las opciones, la que creo que es mejor en cuanto a usabilidad.
Veamos las dos opciones del planteamiento:
Opción 1: Aceptar-Izquierda / Cancelar-Derecha
Opción 2: Cancelar-Izquierda / Aceptar-Derecha
Muy bien, ante las dos opciones, ¿cuál es la correcta?, o planteando mejor la pregunta, ¿cuál va a generar el menor número de errores posibles o ninguno? En mi opinión la opción 2, con el botón cancelar a la izquierda y el botón aceptar a la derecha, ¿por qué?:
- Lo que hacemos los usuarios cuando entramos a una página es “ojear” y casi nunca leer palabra por palabra. Esto unido a que en la cultura occidental leemos de izquierda a derecha y que tendemos a hacerlo en diagonal, provoca que el orden natural de una acción probable en pantalla va a estar situada a la derecha y no a la izquierda. Veamos este caso:
- Si voy a guardar un documento, lo probable es que lo vaya a guardar ¿verdad?, ¿y lo posible? que cancele la acción. Así, si voy a guardar el documento, lo que haré será seleccionar la carpeta de ubicación y después con el movimiento de ratón, ¿dónde crees que irás como usuario? (hay que situarse como usuario que “no piensa” sino que “interactúa” de forma rápida), ¿hacia dónde se va el movimiento de ratón?, hacia donde está “Cancelar”, cuando ahí debería estar el botón de la acción más probable, “Guardar”…
- Observemos el orden de los botones y opciones en la línea visual de la parte inferior:
- Ocultar carpetas (acción muy poco probable aunque quizá posible, y que sitúan más a la izquierda)
- Herramientas (acción poco probable, aunque posible)
- Guardar (acción más probable de todas)
- Cancelar (acción posible, aunque poco probable)
Ahora fijémonos en el orden que se está siguiendo aquí [“Muy poco probable” – “Poco probable” – “Muy probable” – “Poco probable”]. ¿Tiene sentido este orden? No lo parece ¿verdad? Si el único criterio fuera sólo el de ordenación, incluso así no parece una buena solución, ya que no se ordenan de forma homogénea, y el orden natural sería de menos probable (por eso se sitúa el Ocultar carpetas a la izquierda del todo) a más probable, sin embargo aquí la ventana de Windows no sigue su propio criterio.
- Aunque en las páginas web hace décadas que se utilizan los menús de navegación en las páginas, y se incluyen para mejorarla de cara a los usuarios, estos muchas veces lo que utilizan son las flechas del propio navegador, y han relacionado por el uso que “<–” significa volver a la acción anterior (similar a querer cancelar una acción tomada), y que “–>” es ir hacia delante. Por eso, este criterio totalmente interiorizado ya por los usuarios, hará que para ellos el orden natural de un Cancelar-Guardar sea izquierda-derecha.
- ¿Qué sucede cuando rellenamos en Internet un formulario de pasos? ¿verdad que el botón “anterior” está a la izquierda y el botón “siguiente” está a la derecha? Una vez más, los usuarios estamos acostumbrados a que lo que está en la derecha es seguir hacia delante, con la opción más probable, y lo que está a la izquierda es hacia detrás, con la opción menos probable (aunque posible).
Pues bien, el uso cotidiano de estas acciones por los usuarios en Internet hace que nos vayamos acostumbrando a unos patrones de interacción y que por tanto una opción sea más adecuada que otra y por tanto mejor.
Pero, aparte del orden de las acciones, ¿existe alguna otra forma de mejorarlo? Si, y la siguiente imagen lo muestra:
Esta es la que creo mejor opción de todas visualmente, ya que aquí queda totalmente claro cuál es la acción más probable para el usuario y se lo ponemos fácil. Incluso aunque el orden de los botones fuera al revés (puede llegar a tener sentido dependiendo del diseño del formulario o página) seguiría siendo usable, aunque en mi humilde opinión menos que con el “Aceptar” a la derecha.
En cualquier caso, el debate está ahí y totalmente abierto, lo importante es encontrar argumentos válidos de usabilidad en uno u otro caso de forma que se enriquezca la discusión y sigamos aprendiendo, en lugar de decir que es uno u otro porque así lo hace una compañía u otra o lo dice alguien sin más.
Os dejo la recopilación de enlaces relacionados sobre la discusión de la ubicación de los botones:
http://measuringuserexperience.com/SubmitCancel/index.htm
http://www.lukew.com/ff/entry.asp?571
http://www.nngroup.com/articles/ok-cancel-or-cancel-ok/
Dejo también las guías de diseño de Microsoft y de Apple sobre el uso de botones:
Luis dice
Excelente articulo y muy buenas definiciones, es algo que pondre en practica cuando haga formularios, ahora bien, pienso que el boton de aceptar deberia ir primero, ya que al leer leemos de izquierda a derecha, siendo la opcion de la izquierda la primera en ver, y como aceptar es la mas probable en ser seleccionada, seria mas convienente ponerla de ese lado.
Saludos.
admin dice
Muchas gracias por tus comentarios Luis. En este caso, en el post doy argumentos de porqué a priori veo mejor en cuanto a usabilidad situar el botón de Aceptar a la derecha, aunque dependiendo del diseño puede tener sentido situarlo en la izquierda; normalmente no hay verdades absolutas. Lo importante es que la acción principal destaque respecto a la menos probable.
Por otra parte, este es un debate antiguo y existen defensores en ambos lados. Lo importante es que uno tenga criterios y argumentos y que los justifique, y de la discusión se obtendrán buenas reflexiones sin duda.
Saludos
luis dice
Pues yo estoy mas de acuerdo con el argumento del botón aceptar a la derecha, es más, es el equivalente a leer una revista, ¿si quieres pasar a la siguiente página que página pliegas?, es algo instintivo el hecho de situarlo a la derecha, pero a la hora de por ejemplo guardar algo, si lo veo lógico a la izquierda, ¡es algo asi como un doble check! ami me ha salvado de sobreescribir sobre un diseño alguna cagada, quizá esa sea la razón detrás de esa manera de resolverlo xD
admin dice
Muy buena apreciación Luis. Estoy de acuerdo contigo en que para determinadas situaciones puede tener sentido que el botón de acción no esté en el lugar más rápido e intuitivo posible para, precisamente como bien comentas, tener que pensarlo 1 seg. En el diseño de interacción no todo es blanco o negro.
De cualquier forma, para el uso habitual yo sí situaría el botón Aceptar a la derecha, porque es el sitio donde vas a ir a buscar casi sin pensar, y por tanto facilitamos su acción al usuario. Para el caso de guardar un archivo yo si lo situaría a la derecha, porque lo más probable es que si alguien quiere guardar un archivo, sea eso lo que vaya a hacer la mayor parte de las veces; aunque es posible que en algún caso te arrepientas de ella, como comentas, pero siempre será una minoría, ya que no te pasa siempre que quieras evitar sobreescribir. Para estos casos se podrían plantear hasta otras soluciones, como hizo Google con Gmail cuando habilitó el mensaje «Cancelar el envío» durante unos segundos para correos que por alguna razón no querías terminar enviando.
Saludos y gracias por tu comentario.
lestcape dice
Hola, mucho rato a pasado desde que publicaste, ya hasta piensas otra cosa, pero bueno, voy a dar mi punto en cuestión. Yo opino igual que el autor, respecto a que la posición a la derecha es la posición que casi todos ven como más sencilla, entre un 8 y un 13 % de la población mundial es zurda solamente, por lo que el mouse está a la derecha para la mayoría de los usuarios y tiendes a reflejar tus propios instintos. Sin embargo (gran sin embargo), ahora viene el punto en que desacuerdo con el autor. La primera pregunta que se debe de hacer y sin ella todo lo demás carece de sentido es cual es el objetivo de la aplicación que estas haciendo. Si estas haciendo una aplicación de compras en linea, el botón de aceptar la compra, debería de ir a la derecha, por lo ya explicado, pero si estas haciendo una aplicación bancaria, el botón de aceptar la transacción debería de ir a la izquierda. Esto se debe a que como es más probable que el usuario de la aplicación de click en el botón de la derecha, para el primer caso podría ser equivalente esto a una compra más, para el segundo caso podría ser equivalente a una transacción cancelada (lo cual no implica perdida para el dueño del banco). Si invertimos los botones en ambas, para el primer caso podría ser una compra perdida y para el segundo caso una transacción errónea aceptada, lo cual implicaría probablemente una cancelación luego y la generación de más movimientos que analizar para el dueño del banco.
David Gil Ripoll dice
Hola Lestcape, gracias por tu comentario.
Respecto al mismo, no acabo de entender la razón a la que aludes de que específicamente en una aplicación bancaria no tiene razón de ser la ubicación del botón de Aceptar a la derecha, ¿podrías especificar un poco más o ampliar tu aclaración? gracias! 😉