Aceptar/Cancelar o Cancelar/Aceptar

Ayer me preguntaban en Twitter mi opinión sobre cuál debe ser en web el orden de los botones:

1. Aceptar/Cancelar, siguiendo el orden de lectura natural como hace Windows.
2. Cancelar/Aceptar, poniendo la conclusión, la acción que te lleva hacia delant,e a la derecha como hace Apple.

Antes de continuar recomiendo el artículo “OK–Cancel or Cancel–OK?” de Jakob Nielsen

En función del tipo de usuarios con los que testeemos, podremos encontrar preferencias para todos los gustos, a veces en función de la plataforma que usan y otras veces no.

Sin embargo, la respuesta según mi opinión a cuál es el orden más recomendable no es ni la “a”, ni la “b”, ni siquiera que los pongas en función del porcentaje de usuarios Windows vs MAC que tengas según las estadísticas de tu sitio. Para mi, la respuesta adecuada es que el orden no es lo realmente importante como explico a continuación.

Supongamos que vamos a testear un formulario con los siguientes botones:

y que comprobamos que los usuarios se equivocan y esperan encontrar el botón “Aceptar” a la izquierda. ¿Lo importante es el orden? ¿es eso lo que debemos cambiar?

Veamos otras modificaciones posibles que no implican cambiar el orden de los botones pero que evitan las equivocaciones de los usuarios:

En este ejemplo, se busca un nombre más específico para el botón “Aceptar”, se muestra seleccionado por defecto, se centra con el formulario y su literal se pone en negrita y un poco más grande.

Da igual como los coloques, derecha o izquierda, la claridad de los mismos es independiente de su orden:

 

En función del formulario podemos buscar un literal también más específico para el botón “Cancelar”, que incluso se puede incluir como un enlace.

 

Y según el tipo de portal, la libertad en el diseño ayudará también a diferenciar los botones:

Por tanto, las claves para mí, no son el orden, sino:

• mantener la consistencia en el orden y la presentación de los botones en todas las páginas del sitio
• cuidar el copy de los botones para que sea lo más específico posible
• pero sobre todo, diferenciar visualmente la acción principal de la opción secundaria como he ejemplificado antes

Desde un punto de vista de accesibilidad

Todo lo dicho anteriormente está enfocado a decidir si el orden de los botones ayuda a evitar errores a los usuarios que visualizan el formulario .

Sin embargo, hay otros factores asociados al tema del orden de los botones que puede ayudarnos a decidir cuál poner primero:

• El primer botón será el que aparezca resaltado y el que responderá a la tecla Enter. Es verdad que esto se puede modificar, aunque con javascript.
• El usuario que se mueve con el tabulador por el formulario llegará en primer lugar al primer botón. También esto se puede modificar, pero entonces incumpliríamos la pauta de mantener la coherencia entre el orden visual y el del foco.

Estos dos factores favorecen a los usuarios que utilizan lectores de pantalla, aunque hay que recodar que tienen atajos de teclado para acceder al listado de elementos del formulario, o para ir a los botones de la página.

Si la pregunta es cuál es el orden que yo prefiero, me viene a la memoria la discusión que duró días con una aplicación del Santander con la que se hizo al final un documento específico sobre el tema, y se puso Aceptar a la derecha. Es la opción que yo prefiero como usuaria (y lo soy de Windows) pues asocio Cancelar con Volver y Aceptar con Siguiente. Pero esto son ya preferencias personales y batallitas.

Artículos relacionados

• Formularios usables: 60 Directrices de Usabilidad
• Formularios accesibles según las WCAG 2.0
• Formulario con varios botones. Implementación usable y accesible
• Enlaces que actúan como botones. Implementación accesible.
• Sirius. Nueva sistema para la evaluación de la usabilidad web
• Arquitectura de información. Fundamentos