Usabilidad: La posición del botón “aceptar”
Articles,  Blog

Usabilidad: La posición del botón “aceptar”


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 [email protected]
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.

2 Comments

  • María José González Cordero

    Muy interesante este vídeo, estoy segura que muchos de los que estamos haciendo el curso no habíamos tenido en cuenta este detalle. Aunque a muchos les parezca algo simple y con poca importancia, la verdad es que hará que nuestra web sea mucho mas ordenada y clara para el usuario final.

  • iDESWEB UA

    Tienes razón, y esto tampoco está "mal escrito": уд тфсшщтфдшыьщ уы гтф утаукьувфв штафтешдю Уы уд ыфкфьзшщт ву дф ргьфтшвфв.

Leave a Reply

Your email address will not be published. Required fields are marked *