it-swarm-es.com

OK / Cancelar a la izquierda / derecha?

Debería OK botón estar a la izquierda de Cancel botón o viceversa?

¿Hay algún estudio que sugiera alguna de las soluciones?

349
Art

Como con todo: prueba de usuario! Afortunadamente, el héroe de usabilidad Jakob Nielsen salta al rescate aquí en su artículo de Alertbox sobre botones OK/Cancelar :

¿Debería aparecer el botón Aceptar antes o después del botón Cancelar? Seguir las convenciones de la plataforma es más importante que suboptimizar un cuadro de diálogo individual.

Kostya estaba en lo cierto al recomendar el cumplimiento de las directrices de la plataforma. ¿Pero qué pasa con las plataformas basadas en la web?

Si está diseñando una aplicación basada en la Web, la decisión es más difícil, pero probablemente debería elegir la plataforma preferida por la mayoría de sus usuarios. Los registros de su servidor le mostrarán el porcentaje de usuarios de Windows frente a Mac para su sitio web o intranet específicos. Por supuesto, Windows generalmente tiene muchos más usuarios, por lo que si no puede molestarse en verificar los registros, entonces la directriz que se aplicará a la mayoría de las situaciones es OK primero, Cancelar por último.

También menciona dos pautas importantes adicionales que puede tener en cuenta al crear botones Aceptar/Cancelar:

  • A menudo es mejor nombrar un botón para explicar lo que hace que usar una etiqueta genérica (como "OK"). Una etiqueta explícita sirve como "ayuda justo a tiempo", dando a los usuarios más confianza para seleccionar la acción correcta.
  • Establezca el botón más comúnmente seleccionado como predeterminado y resáltelo (excepto si su acción es particularmente peligrosa; en esos casos, desea que los usuarios seleccionen explícitamente el botón en lugar de activarlo accidentalmente presionando Enter).
202
Rahul

La respuesta está en las pautas de la interfaz de usuario para el sistema que utiliza.

Para ventanas

Presente los botones de confirmación en el siguiente orden:

  • OK/[Hazlo]/Sí
  • [No lo hagas]/No
  • Cancelar
  • Aplicar (si está presente)
  • Ayuda (si está presente)

Por lo tanto, Cancelar siempre está a la derecha del botón Aceptar.

Para MacOS

Un botón que inicia una acción está más a la derecha. El botón Cancelar está a la izquierda de este botón.

Entonces, para los usuarios de MacOS, Cancelar está a la izquierda del botón Aceptar.

Para Android

La acción desdeñosa de un diálogo siempre está a la izquierda. Las acciones desdeñosas vuelven al usuario al estado anterior.

Las acciones afirmativas están a la derecha. Las acciones afirmativas continúan el progreso hacia el objetivo del usuario que activó el diálogo.

Para Android, Cancelar está a la izquierda del botón Aceptar.

Para otros sistemas, ver las pautas.

142
Kostya

Piensa en la metáfora de "lectura". Los occidentales leen de izquierda a derecha, nuestros cerebros están condicionados para fluir de izquierda a derecha. CANCELAR es básicamente un paso hacia atrás (izquierda) y OK/ENVIAR/SÍ/Etc., son un paso adelante (derecha).

64
GoodShovel

Parece que la convención OK/Cancel de Windows ha hecho mucho acondicionamiento cerebral para los usuarios. Entonces, las pruebas de usabilidad ciertamente saldrían con mucha gente buscando un botón OK a la izquierda, Cancelar a la derecha.

Pero eso no cambia el instinto más básico de alguien que está interactuando con el sistema sin ningún preacondicionamiento. Mi instinto básico dice que el botón Aceptar/Aprobación/Avanzar, sin importar el color o el tamaño que le aplique, debe estar en el borde derecho del cuadro de diálogo.

Considere este cuadro de diálogo, sin etiquetas ni resaltados de color:

enter image description here

¿Dónde harías clic? Si estoy buscando enviar el formulario, haría clic en el botón del borde derecho. La razón es que antes de Windows, he sido condicionado a mi instinto de las siguientes maneras:

  • El idioma inglés fluye de izquierda a derecha.
  • La navegación del navegador funciona Atrás (izquierda) y Adelante (Derecha). enter image description here
  • Los viejos juegos 2D como Dangerous Dave mueven al personaje hacia la derecha, cuando avanzan más.

enter image description here

  • Los números en la recta numérica aumentan a la derecha, disminuyen a la izquierda.

  • Los pesos atómicos en la tabla periódica aumentan a la derecha.

  • El reloj marca a la derecha.

  • El calendario aumenta las fechas a la derecha.

Creo que la plataforma de Windows ha creado un antipatrón con OK/Cancel, que ahora está tan extendido que valida los estudios de usabilidad. Pero si considera los factores anteriores, creo que mantener el botón primario a la derecha está justificado y es una posición defendible.

EDITAR: Un factor adicional a considerar es la consistencia. Si espera botones adicionales en sus cuadros de diálogo, el botón primario en el borde derecho ayudaría a mantener la coherencia con la ubicación. Un ejemplo visual aclararía esto:

enter image description here

39
Adnan Khan

Para los usuarios cuyo idioma se lee de izquierda a derecha, sugeriría poner el botón Aceptar a la izquierda, ya que esos usuarios atribuirían una mayor importancia a lo primero que ven.

Esto permitiría a este subconjunto de usuarios completar su tarea lo más rápido posible.

17
Ryan Shripat

En mi humilde opinión, no importa demasiado dónde colocará el botón "Aceptar": a izquierda o derecha. No importa qué tipo de usuarios visiten su sitio (en hebreo o árabe). No importa qué tipo de software utilicen. Las estadísticas nos dicen que el 55% de los usuarios quieren ver el botón "Aceptar" desde la derecha, pero si lo ponemos a la derecha, entonces el otro 45% de los usuarios no estará satisfecho.

La mejor solución es enfatizar el botón "Aceptar" (hacer que sea más prominente que "Cancelar") y todos los usuarios indicarán el botón "Aceptar" fácilmente como botón más importante y primario.

Google y otras compañías utilizan este enfoque en su software.

enter image description here

16
webvitaly

Luke Wroblewski escribió un libro sobre formularios web (Diseño de formularios web: Rellenar los espacios en blanco) y también cubrió algunos principios como: "Acciones primarias y secundarias" (http: // www.lukew.com/resources/articles/psactions.asp ), "Etiquetas de formulario alineadas superior, derecha o izquierda" (http: // www.lukew.com/ff/entry.asp?504) o "ruta de finalización", etc. (puede leer también http : //www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php )

Entonces, IMO dependiendo de la ubicación de la etiqueta que tenga (preferiblemente verticalmente) y de izquierda a derecha + reglas de arriba hacia abajo, para tener un buen camino hacia la finalización, debe colocar la acción primaria primero (OK) y luego las secundarias (+ + Cancelar)

EDITAR: colocación de etiquetas en formularios, por Caroline Jarrett, 2010 http://www.formsthatwork.com/files/Articles/labels-on-forms-for-uxlx-2010.pdf

15
Ecaterina Moraru

Creo que todos habían dado buenos puntos, pero hay un punto clave más que mencionar aquí.

Los botones como Ok/Submit/Save, etc. se denominan botones de acción positiva. Del mismo modo, los botones como Cancelar/Restablecer, etc., se denominan botones de acción negativa.

Ahora, para responder a la consulta, la mayoría de ellos han tenido algunos puntos positivos, pero aquí hay otra percepción de que las Pruebas de usuario de una aplicación generalmente deciden la mayoría de los problemas. Después de todo, cualquier aplicación creada es solo para usuarios.

Hubo algunas pruebas de momento ocular y se realizaron pruebas de calor en los usuarios y aún se realizan según la disponibilidad de los laboratorios. El mejor escenario es que la mayoría de los usuarios comienzan a mirar la aplicación web o cualquier otra aplicación de izquierda a derecha y desde la esquina superior y comienzan a desplazarse hacia la parte inferior, recogiendo puntos de acceso clave y generalmente terminan hacia la parte inferior izquierda, por lo que es siempre es bueno mantener el botón de acción positiva a la izquierda y los botones de acción negativa a la derecha.

Además, sin negar el hecho de que se trata de investigaciones basadas en pocos usuarios, no es necesario que esto siempre se mantenga bien, pero la mayoría de las veces lo hará.

Hay un punto clave más aquí es que debe haber más espacio entre los botones de acción positiva y negativa para que los usuarios tomen un poco más de tiempo para alcanzar los botones negativos y, por lo tanto, les dará suficiente tiempo para pensar y reaccionar.

He tratado de explicar un par de puntos basados ​​en mi experiencia y en trabajos de investigación.

Comenta, para que yo también pueda aprender más.

Saludos Deepak Bajaj

9
Deepak Bajaj

Muchas aplicaciones han cambiado para usar diferentes estilos para los botones Aceptar vs Cancelar. Una interfaz de usuario común es tener el botón Aceptar pero un botón tradicional, mientras que Cancelar es un botón de enlace. Esto proporciona una distinción visual muy clara entre los dos y, aunque lleva al usuario a hacer clic en Aceptar, la distinción visual termina resaltando la diferencia y ayuda al usuario a elegir la que realmente desea.

He visto esto tanto en aplicaciones web como de escritorio.

7
Sam

Solo para aclarar el razonamiento:

Se considera "más correcto" colocar el botón principal (OK) en la esquina exacta del cuadro de diálogo, ya que es más fácil de presionar (ha habido varias preguntas/discusiones anteriores sobre esto).

Sin embargo, también depende de a qué estén acostumbrados los usuarios: si está creando un sitio o una aplicación para usuarios de Windows, es mejor que siga los estándares de Windows.

Asegúrese de que "Intro" en el teclado esté asociado correctamente con el OK; mucha gente también lo usará.

5
Dan Barak

¡Guauu! Tantas respuestas discutiendo izquierda o derecha.

Realicé pruebas sobre esto yo mismo y descubrí que no eran estadísticamente concluyentes.

La mejor respuesta que encontré fue que en realidad no importa en qué orden lo hagan, siempre que la acción principal esté claramente marcada: siempre uso un botón colorido para [Hacerlo]/ir/enviar/etc. y solo un texto más pequeño botón para [No hacerlo]/cancelar/borrar/etc.

Muy parecido a los botones 'Publicar su respuesta' y 'descartar' en la parte inferior de un formulario de respuesta aquí mismo en UX StackExchange.

4
Andrew Martin

Puedes encontrar una opinión interesante aquí ; Anthony T. sugiere que es mejor colocar el botón "Aceptar" a la derecha de "Cancelar":

Con el botón "Aceptar" a la derecha, las fijaciones visuales son menores y fluyen en una dirección [...]

Compare eso con la acción principal colocada a la derecha del cuadro de diálogo y la acción secundaria colocada a la izquierda. Los usuarios comienzan con sus ojos en la acción secundaria y mueven sus ojos a la acción principal para hacer clic en el botón. Esto crea un total de dos fijaciones visuales en una dirección, dando a los usuarios un flujo visual más rápido. Los usuarios se fijan en cada botón solo una vez y terminan en el botón de acción principal. Poner la acción principal a la izquierda podría facilitar el acceso de los usuarios, pero cuando se observa la velocidad en términos de los procesos mentales y las fijaciones visuales del usuario, colocar la acción principal a la derecha de un cuadro de diálogo es realmente más rápido.

4
Claudiu Constantin

Para las aplicaciones web ASP.NET, después de tomar mucha aspirina para tratar los problemas de los botones predeterminados (lo que sea que se active cuando se presiona la tecla Intro), simplemente coloco mi botón predeterminado a la izquierda para que quede primero en el marcado.

Los diferentes navegadores manejarán varios botones de envío de manera diferente cuando se presiona la tecla Intro (especialmente cuando el cursor está dentro de un cuadro de texto al momento de presionar Intro). Algunos navegadores solo usarán el primer botón en el marcado para enviar el formulario, que puede no ser lo que desea (especialmente si después necesita hacer algo en el lado del servidor).

Si no está utilizando javascript personalizado para manejar escenarios de botones predeterminados, y está confiando en el comportamiento predeterminado del navegador web, entonces probablemente debería colocar el botón predeterminado a la izquierda.

4
Adam Toth

Si es posible, sugeriría omitir el botón cancelar por completo, resolviendo así su dilema. - A veces es innecesario, y a menudo se activa por error.

De http://www.nngroup.com/articles/reset-and-cancel-buttons/ :

La mayoría de los formularios web habrían mejorado la usabilidad si se hubiera eliminado el botón Restablecer. Los botones de cancelación también suelen tener poco valor en la Web.

Ofrezca un botón Cancelar cuando los usuarios puedan temer haberse comprometido con algo que desean evitar. Tener una forma explícita de cancelar proporciona una sensación adicional de seguridad que no se obtiene simplemente al irse.

Cancelar es principalmente útil para diálogos de varios pasos en los que el usuario ha progresado más allá de una o más páginas con acciones. En este momento, presionar el botón Atrás no deshacerá estas acciones y sería mejor que el usuario haga clic en Cancelar.

4
Adam George

En última instancia (especialmente después de leer todas las respuestas anteriores) veo que esta discusión se reduce a la convención de plataforma versus usabilidad 'objetiva'. Lo que quiero decir con 'objetivo' es cuán útil sería algo para los usuarios que no están familiarizados con ninguna convención de sistema operativo. Más específicamente:

OK a la derecha
Este patrón gana sin dudas en el argumento objetivo de usabilidad SI los usuarios no están condicionados a la convención de Windows menos utilizable (ver artículo ). Como se discute en el artículo, tener el OK a la derecha se alinea con nuestra convención de lectura de izquierda a derecha, un flujo de tareas más eficiente, es un mejor objetivo de esquina, también el hecho de que pensamos que las líneas de tiempo se ejecutan de izquierda a derecha (por lo tanto un 'atrás'/'cancelar' a la derecha tiene sentido ya que es un patrón de retroceso en el tiempo).

OK a la izquierda
Convención de Windows

Es una realidad desafortunada, pero los patrones mal diseñados (como OK a la izquierda) pueden convertirse en una convención y los usuarios llegarán a esperarlos. Intentar hacer otra cosa, incluso si objetivamente es un patrón más utilizable, dará como resultado una usabilidad deficiente. Un ejemplo clásico es el sistema de medición métrico vs. imperial: el sistema métrico tiene todo lo que necesita en términos de usabilidad, fácil conversión de unidades, etc. pero si obligas a los estadounidenses de las ciudades pequeñas a pensar en metros y centímetros cuando están acostumbrados a pulgadas/pies, obtendrás poca usabilidad y usuarios muy frustrados. ¡Supongo que la lección es trabajar muy duro para asegurarnos de que nunca introduzcamos convenciones pobres en primer lugar!

Personalmente, cuando diseño para la web, elijo poner el botón Aceptar a la izquierda, también insisto en indicar mi estatura en centímetros y mi peso en kilogramos, incluso cuando hablo con personas de mentalidad imperial. Realmente es una guerra de desgaste, pero lentamente el sistema imperial se extinguirá, y con suerte la convención de Windows 'OK a la izquierda' también lo hará :)

3
M.A.X

Yo iría con "Ok" a la derecha. Debido a la dirección de lectura occidental que va de izquierda a derecha. Y "Cancelar" no lo adelantaría, pero "Ok" lo hará.

Pero un enfoque totalmente diferente. No use "Ok" y escriba en los botones lo que hacen. Por ejemplo, "Guardar" o "No guardar" no requiere que el usuario lea el texto descriptivo. Ahorra tiempo y evita errores de entrada.

2
erikrojo

Lol no puedo evitar reírme por muchas de estas respuestas. Parece un caso de no ver el bosque por los árboles. Como todos los problemas de UX, fundamentalmente depende de cómo se diseñe el formulario. Por ejemplo, las etiquetas arriba, los campos abajo o las etiquetas dejan los campos al lado. Mire la página completa y cómo los ojos de un usuario fluyen por el formulario. ¿Existe una línea de visión clara para el botón final 'Enviar'?

Como se indicó en una publicación anterior, el libro de Luke Wroblewski sobre formularios web Diseño de formularios web: Filling in the Blanks contiene algunos de los mejores consejos en la creación de formularios web, así como un gran paradigma de formularios desde la perspectiva del usuario: los formularios son un medio para un fin y son tolerados debido al resultado final previsto (es decir, comprar algo, crear una cuenta para acceder a algún lugar, etc.). Prueba de usuario, prueba AB sí, por supuesto, si puedes. El objetivo final es que cuanto más fácil sea tu formulario, mejor completarlo.

2
mike

Realmente me gustan algunos de los sitios donde NO hay un botón (visualmente) para acciones negativas, solo un enlace. De esta manera, no tengo que perder el tiempo mirando botones, sé que el botón sí. Y si sé que no quiero hacer lo que las páginas me piden, me tomo un tiempo para ver cómo sería mejor continuar (busque el botón de cerrar, el botón de cancelar)

entonces en lugar de:

[NOOOOO!] [¡HAGA CLIC EN MÍ!]

habría:

¡No gracias! [¡Sí, por favor!]

De esta manera, no es realmente importante dónde coloca el botón, solo hay uno visualmente y, por lo tanto, es fácil de ubicar.

1
fallenboy

En mis aplicaciones estoy usando color visual para resaltar el propósito del botón de acción. Entonces, no importa si es izquierda o derecha. Personalmente prefiero tener el botón "ok" a la derecha (porque soy diestro y/o usuario de osx, y en realidad este es el enlace ...)

  • gran botón verde para validación
  • gran botón rojo para borrar
  • (grande o no) botón gris para cancelar
1
Marc D

Para mí este sería el orden lógico:

<LeftRight>

<PreviousNext>

<BackForward>

<BackDone

Do nothingDo it

CancelOK

Excepto que OK debe reemplazarse con la acción real, como SaveDeleteAcceptExit o Send.

Cuando me encuentro con gente discutiendo por poner OK a la izquierda, siempre les pido que coloquen Left vs RightPrevious vs NextBack vs Forwardy dejar que discutan por qué los pusieron en ese orden, antes de dejar que discutan por qué OK Debería estar a la izquierda.

1
Ole Tange

En orden de prioridad, use la primera solución disponible:

  • pautas de la plataforma
  • inicio a fin (donde el inicio para los idiomas occidentales generalmente se deja, sin embargo, puede ser diferente, por ejemplo, el árabe comienza a la derecha y termina a la izquierda)
  • la forma en que más espera su usuario

Sin embargo, en el caso de los lectores de pantalla y herramientas de accesibilidad similares, tener la acción principal al principio (que queda en las culturas occidentales) puede ahorrarles mucho tiempo a usuarios con necesidades especiales.

1
straya

Por supuesto, hay muchos argumentos a favor y en contra de ambas partes.

Sin embargo, lo diría de esta manera. "¿Crees que la colocación negativa-positiva es la mejor? ¿No o sí?"

El punto es que "Sí o No" fluye mejor cuando se habla, lo que probablemente explica por qué Microsoft eligió el orden de botones positivo-negativo.

Por otro lado, el flujo positivo negativo a menudo se usa en retórica y debate para agregar peso al argumento positivo y mantenerlo fresco en la mente de una persona. "¿Quieres ver a tus hijos sufrir a manos del partido contrario? ¿O quieres votar por nuestro partido y asegurar tu futuro?" Y así.

0
Seth Jeffery

Asumiendo que la decisión debe tomarse si la acción positiva debe estar disponible a la izquierda o a la derecha y sin tener en cuenta el sesgo de usar ciertos sistemas operativos o aparatos físicos (libros), construcciones abstractas (flujo de forma de asistente), etc., la ciencia del comportamiento parece sugerir que la opción estadísticamente más a la izquierda se elige con más frecuencia como primera opción.

Esto implica que debe preferirse colocar una acción positiva (OK o etiqueta de acción explícita) a la izquierda si no se consideran otros factores.

Fuente: ¿Son solo los humanos los que cuentan de izquierda a derecha?

0
too