\u00bfCu\u00e1l es la mejor posici\u00f3n para colocar el bot\u00f3n “aceptar” en una p\u00e1gina web?<\/p>\n
\u00bfNo sabes de qu\u00e9 estoy hablando?<\/p>\n
\u00bfNunca te lo hab\u00edas planteado?<\/p>\n
Entonces debes ver el v\u00eddeo La posici\u00f3n del bot\u00f3n “aceptar”<\/a>, un v\u00eddeo nuevo que he realizado para el curso iDESWEB<\/a>:<\/p>\n [kml_flashembed movie=”http:\/\/www.youtube.com\/v\/Nm5VGqFgAb0″ width=”560″ height=”315″ wmode=”transparent” \/]<\/p>\n Transcripci\u00f3n del audio:<\/p>\n Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de la Universidad de Alicante, y en este v\u00eddeo vamos a analizar cu\u00e1l es la mejor posici\u00f3n para el bot\u00f3n \u201caceptar\u201d.<\/p>\n Antes de empezar, me gustar\u00eda recordarte algunos de los sitios web en los que puedes encontrar m\u00e1s informaci\u00f3n sobre m\u00ed y sobre mi trabajo, y dos formas de contactar conmigo, a trav\u00e9s de mi correo electr\u00f3nico sergio.lujan@ua.es y a trav\u00e9s de mi cuenta en Twitter @sergiolujanmora.<\/p>\n El objetivo de este v\u00eddeo es mostrar como una simple decisi\u00f3n de dise\u00f1o, la posici\u00f3n del bot\u00f3n \u201caceptar\u201d, no tiene una soluci\u00f3n trivial.<\/p>\n La pregunta \u00bfcu\u00e1l debe ser la posici\u00f3n del bot\u00f3n \u201caceptar\u201d? es mejor plantearla para este v\u00eddeo como \u00bfcu\u00e1l debe ser en una p\u00e1gina web el orden de los botones \u201caceptar\/cancelar\u201d?<\/p>\n Seguramente m\u00e1s de uno que este viendo este v\u00eddeo se preguntar\u00e1, \u201c\u00bfy esta pregunta?, \u00bfcu\u00e1l es el motivo de esta pregunta?\u201d<\/p>\n Esta duda surge porque la posici\u00f3n de los botones aceptar y cancelar no es la misma en los sistemas operativos Microsoft Windows y Apple MacOS X.<\/p>\n Esto mismo ocurre tambi\u00e9n con otros botones que son equivalentes a \u201caceptar y cancelar\u201d, como por ejemplo, \u201cguardar y cancelar\u201d. Para empezar, aqu\u00ed tenemos los botones \u201caceptar y cancelar\u201d que muestran el navegador Google Chrome en Windows y el navegador Safari en MacOS X.<\/p>\n Aqu\u00ed tenemos a la izquierda el cuadro de di\u00e1logo est\u00e1ndar de Windows para abrir un fichero, mientras que a la derecha tenemos el mismo cuadro de di\u00e1logo en MacOS X.<\/p>\n Aqu\u00ed tenemos el cuadro de di\u00e1logo que aparece cuando se cierra un programa, en este caso un editor de textos, sin haber guardado antes el documento que se estaba editando. Por \u00faltimo, aqu\u00ed tenemos el cuadro de di\u00e1logo \u201cGuardar como\u201d, a la izquierda en Windows y a la derecha en MacOS X.<\/p>\n \u00bfCu\u00e1l debe ser en una p\u00e1gina web el orden de los botones \u201caceptar\/cancelar\u201d?<\/p>\n En Windows, \u201cAceptar\/Cancelar\u201d sigue el orden de lectura natural de izquierda a derecha, que coincide con el orden t\u00edpico \u201cs\u00ed o no\u201d cuando se plantea una decisi\u00f3n. Adem\u00e1s, este orden favorece a los usuarios que utilizan el teclado para desplazarse por el interfaz de usuario, ya que el primer bot\u00f3n que se encuentran es el bot\u00f3n principal o predeterminado.<\/p>\n Sin embargo, en MacOS X el orden \u201cCancelar\/Aceptar\u201d pone la conclusi\u00f3n, la acci\u00f3n, a la derecha, como si te llevar\u00e1 hacia delante. En este sentido, coincide con el orden \u201cAnterior\/Siguiente\u201d t\u00edpico de las p\u00e1ginas web.<\/p>\n \u00bfQu\u00e9 hacemos en una p\u00e1gina web en la que se conectar\u00e1n usuarios de Windows, MacOS X y\u2026 Linux? La mejor soluci\u00f3n a este problema es la que plantea Olga Carreras en su art\u00edculo \u201cAceptar\/Cancelar o Cancelar\/Aceptar\u201d.<\/p>\n Seg\u00fan Olga, lo importante no es el orden de los botones, sino que se debe realizar una modificaci\u00f3n para que un bot\u00f3n destaque sobre el otro.<\/p>\n Adem\u00e1s, se debe ser lo m\u00e1s espec\u00edfico posible y evitar la combinaci\u00f3n \u201caceptar\/cancelar\u201d si es posible emplear otra combinaci\u00f3n m\u00e1s significativa, como \u201cenviar\/cancelar\u201d, \u201cconfirmar pedido\/cancelar\u201d o \u201ccomprar\/cancelar\u201d.<\/p>\n Seg\u00fan el dise\u00f1o de la p\u00e1gina web, se puede optar por diferentes soluciones para lograr una gran diferenciaci\u00f3n entre el bot\u00f3n \u201caceptar\u201d y \u201ccancelar\u201d.<\/p>\n Seg\u00fan Olga, lo realmente importante es:<\/p>\n F\u00e1cil, \u00bfverdad? S\u00ed, f\u00e1cil de entender, pero a veces no es f\u00e1cil de cumplir. Vamos a ver un ejemplo real.<\/p>\n En el sitio web de un famoso banco internacional, han optado por situar el bot\u00f3n \u201caceptar\u201d, o en este caso, el bot\u00f3n \u201cs\u00ed\u201d a la derecha.<\/p>\n En esta otra p\u00e1gina web podemos ver que se sigue con el mismo criterio, y el bot\u00f3n \u201ccancelar\u201d est\u00e1 situado a la izquierda, mientras que el bot\u00f3n \u201ccontinuar\u201d est\u00e1 a la derecha. Adem\u00e1s, emplean diferentes colores para lograr una mayor diferenciaci\u00f3n.<\/p>\n Sin embargo, en otras partes del sitio web se rompe la consistencia y el bot\u00f3n \u201ccancelar\u201d se convierte en un enlace, o incluso, se invierte el orden de los botones y el bot\u00f3n \u201caceptar\u201d, en este caso \u201ccontinuar\u201d, se sit\u00faa a la izquierda y el bot\u00f3n \u201ccancelar\u201d, mal escrito adem\u00e1s, se sit\u00faa a la derecha. Y como podemos ver, se pierden los colores, los dos botones se pintan en azul.<\/p>\n Recuerda, una de las claves de la usabilidad es la consistencia.<\/p>\n Recuerda que el curso \u201cIntroducci\u00f3n al desarrollo web\u201d est\u00e1 disponible en la direcci\u00f3n idesweb.es.<\/p>\n Muchas gracias por tu atenci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":" \u00bfCu\u00e1l es la mejor posici\u00f3n para colocar el bot\u00f3n “aceptar” en una p\u00e1gina web? \u00bfNo sabes de qu\u00e9 estoy hablando? \u00bfNunca te lo hab\u00edas planteado? Entonces debes ver el v\u00eddeo La posici\u00f3n del bot\u00f3n “aceptar”, un v\u00eddeo nuevo que he …<\/p>\n
\nVamos a repasar varios cuadros de di\u00e1logos de Windows y MacOS X.<\/p>\n
\nEn este ejemplo aparece un tercer bot\u00f3n, \u201cNo guardar\u201d, que se sit\u00faa en una posici\u00f3n diferente en Windows y en MacOS X.<\/p>\n
\nEl problema que se puede dar es que muchos usuarios pueden pulsar el bot\u00f3n err\u00f3neo simplemente por inercia, porque piensan que el bot\u00f3n \u201caceptar\u201d est\u00e1 a la izquierda o a la derecha y act\u00faan sin mirar.<\/p>\n\n