La posición del botón “aceptar”

¿Cuál es la mejor posición para colocar el botón “aceptar” en una página web?

¿No sabes de qué estoy hablando?

¿Nunca te lo habías planteado?

Entonces debes ver el vídeo La posición del botón “aceptar”, un vídeo nuevo que he realizado para el curso iDESWEB:

[kml_flashembed movie=”http://www.youtube.com/v/Nm5VGqFgAb0″ width=”560″ height=”315″ wmode=”transparent” /]

Transcripción del audio:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo vamos a analizar cuál es la mejor posición para el botón “aceptar”.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

El objetivo de este vídeo es mostrar como una simple decisión de diseño, la posición del botón “aceptar”, no tiene una solución trivial.

La pregunta ¿cuál debe ser la posición del botón “aceptar”? es mejor plantearla para este vídeo como ¿cuál debe ser en una página web el orden de los botones “aceptar/cancelar”?

Seguramente más de uno que este viendo este vídeo se preguntará, “¿y esta pregunta?, ¿cuál es el motivo de esta pregunta?”

Esta duda surge porque la posición de los botones aceptar y cancelar no es la misma en los sistemas operativos Microsoft Windows y Apple MacOS X.

Esto mismo ocurre también con otros botones que son equivalentes a “aceptar y cancelar”, como por ejemplo, “guardar y cancelar”.
Vamos a repasar varios cuadros de diálogos de Windows y MacOS X.

Para empezar, aquí tenemos los botones “aceptar y cancelar” que muestran el navegador Google Chrome en Windows y el navegador Safari en MacOS X.

Aquí tenemos a la izquierda el cuadro de diálogo estándar de Windows para abrir un fichero, mientras que a la derecha tenemos el mismo cuadro de diálogo en MacOS X.

Aquí tenemos el cuadro de diálogo que aparece cuando se cierra un programa, en este caso un editor de textos, sin haber guardado antes el documento que se estaba editando.
En este ejemplo aparece un tercer botón, “No guardar”, que se sitúa en una posición diferente en Windows y en MacOS X.

Por último, aquí tenemos el cuadro de diálogo “Guardar como”, a la izquierda en Windows y a la derecha en MacOS X.

¿Cuál debe ser en una página web el orden de los botones “aceptar/cancelar”?

En Windows, “Aceptar/Cancelar” sigue el orden de lectura natural de izquierda a derecha, que coincide con el orden típico “sí o no” cuando se plantea una decisión. Además, este orden favorece a los usuarios que utilizan el teclado para desplazarse por el interfaz de usuario, ya que el primer botón que se encuentran es el botón principal o predeterminado.

Sin embargo, en MacOS X el orden “Cancelar/Aceptar” pone la conclusión, la acción, a la derecha, como si te llevará hacia delante. En este sentido, coincide con el orden “Anterior/Siguiente” típico de las páginas web.

¿Qué hacemos en una página web en la que se conectarán usuarios de Windows, MacOS X y… Linux?
El problema que se puede dar es que muchos usuarios pueden pulsar el botón erróneo simplemente por inercia, porque piensan que el botón “aceptar” está a la izquierda o a la derecha y actúan sin mirar.

La mejor solución a este problema es la que plantea Olga Carreras en su artículo “Aceptar/Cancelar o Cancelar/Aceptar”.

Según Olga, lo importante no es el orden de los botones, sino que se debe realizar una modificación para que un botón destaque sobre el otro.

Además, se debe ser lo más específico posible y evitar la combinación “aceptar/cancelar” si es posible emplear otra combinación más significativa, como “enviar/cancelar”, “confirmar pedido/cancelar” o “comprar/cancelar”.

Según el diseño de la página web, se puede optar por diferentes soluciones para lograr una gran diferenciación entre el botón “aceptar” y “cancelar”.

Según Olga, lo realmente importante es:

• Mantener la consistencia en el orden y la presentación de los botones en todas las páginas del sitio web.
• Cuidar el texto 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.

Fácil, ¿verdad? Sí, fácil de entender, pero a veces no es fácil de cumplir. Vamos a ver un ejemplo real.

En el sitio web de un famoso banco internacional, han optado por situar el botón “aceptar”, o en este caso, el botón “sí” a la derecha.

En esta otra página web podemos ver que se sigue con el mismo criterio, y el botón “cancelar” está situado a la izquierda, mientras que el botón “continuar” está a la derecha. Además, emplean diferentes colores para lograr una mayor diferenciación.

Sin embargo, en otras partes del sitio web se rompe la consistencia y el botón “cancelar” se convierte en un enlace, o incluso, se invierte el orden de los botones y el botón “aceptar”, en este caso “continuar”, se sitúa a la izquierda y el botón “cancelar”, mal escrito además, se sitúa a la derecha. Y como podemos ver, se pierden los colores, los dos botones se pintan en azul.

Recuerda, una de las claves de la usabilidad es la consistencia.

Recuerda que el curso “Introducción al desarrollo web” está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.