viernes, 21 de octubre de 2011

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:

Formulario con dos botones debajo, primero Cancelar y después Aceptar

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:

Bóton Cancelar primero, botón enviar despues, resaltado, en negrita, más centrado

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:

Botón Enviar primero, resaltado, en negrita, más centrado; Bóton Cancelar segundo

 

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.

Cancelar con enlace a la izquierda; botón Enviar a la derecha

Botón << Volver a la izquierda; botón Confirmar pedido a la derecha

 

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

Botón Enviar primero, más grande con fondo azul;botón Cancelar segundo más pequeño con fondo blanco


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

13 comentarios :
dagosalas dijo...

Excelente artículo! me quedo muy claro todo.
saludos!

Anónimo dijo...

creo que tu respuesta a esta duda es mas que clara...aunque yo también prefiero la disposición de los botones como avanzar y retroceder frente a la de usuarios de un sistema y del orden de lectura, también aplico el criterio de diferenciación visual...aunque al tratarse de formularios siempre opto por la utilización de botones más que de links por asociar a estos últimos para desplazarse y no para acciones de procesos funcionales ;)

Joaquin dijo...

Me gusta, destacar la acción principal sobre la secundaria de forma visual más que por el orden.

Olga Carreras dijo...

Sí, estoy de acuerdo con Anónimo, es una decisión a tomar en función, de la aplicación, el formulario, el tipo de botón,...

David dijo...

Santander es Banco Santander? El pago de impuestos?

Héctor dijo...

Es la primera vez que llego a tu blog gracias a un RT. Me he quedado asombrado con la calidad del artículo y con el grado de detalle. Sublime!! Estoy totalmente de acuerdo con lo del orden, y con separar uno en un botón y el otro en un enlace

Olga Carreras dijo...

Si, el Banco Santander ... :-)

David Carrero dijo...

Realmente interesantes comentarios sobre Aceptar y Cancelar o Cancelar y Aceptar ;-))

serverperformance dijo...

Madre mía, qué tiempos los del Santander E-Business. Desde aquí mis recuerdos y respetos a Constanza (si no me equivoco), quien nos "presentó" a casi todos nosotros a un tal Jakob y nos mareaba con algo llamado "usabilidad" allá por 2001-2002.

Cuánto ha llovido...

Verónica Traynor dijo...

Excelente ;)

Martín dijo...

Hay un artículo de Luke Wroblewski que elabora en este tema con estudios de eye-tracking, y llega a la conclusión de que es más lento poner el botón de enviar a la derecha, ya que en su caso, la página era un formulario completamente alineado a la izquierda y el ojo quería seguir en esa línea.
También recomienda diferenciarlos visualmente.

Aquí el artículo completo en inglés:
http://www.lukew.com/resources/articles/PSactions.asp

Andy dijo...

Martín: en muchas ocasiones viene bien "romper" la linea, para que el usuario tenga que hacer el esfuerzo de localizar el botón que quiere pulsar.
¡Excelente artículo!

contenido web dijo...

Y si coloreamos con un color llamativo el voton aceptar es mejor?

Publicar un comentario en la entrada