it-swarm-es.com

¿Deben los botones Aceptar / Cancelar estar alineados a la derecha o centrados?

¿Dónde debo colocar los botones Aceptar/Cancelar en mis cuadros de diálogo? En la parte inferior centrada o alineada ¿verdad? He visto ambos y personalmente no me importa, pero quiero crear un aspecto coherente en mi aplicación. ¿Hay alguna guía para esto o debería hacer lo que quiera?

46

Creo que esto también se aplica a esta pregunta y la responde:

(Spoiler: No importa .)

En casos como este, a menudo no importa lo que haces. Cualquiera de las opciones tiene buenos argumentos a su favor, y ninguna opción puede causar catástrofes de usabilidad. Podría ahorrar a algunos usuarios 0.1 segundos si elige la opción "correcta" para ciertas circunstancias, pero simplemente no vale la pena realizar una investigación suficientemente elaborada para descubrir cuál es esa opción. Es mejor gastar sus recursos de usabilidad en aquellas cosas que pueden cambiar sus indicadores clave de rendimiento en un 83% o más.

Más información: seit.com/alertbox/ok-cancel.html

45
Nacho

Cuando se habla estrictamente de alineación, no hay una respuesta correcta que no sea ser coherente.

Sin embargo, la alineación de los botones está relacionada con el posicionamiento u orden lógico de los botones .

Hay dos paradigmas generales que se pueden aplicar al posicionamiento de botones **.

  1. Orden de lectura: el primer botón encontrado en el orden de lectura es el primario (Ok) y tiene prioridad sobre las opciones posteriores (Cancelar)
  2. Adelante/Atrás: el progreso o acción hacia adelante (Ok) está asociado con el movimiento hacia la derecha mientras que hacia atrás o deshacer (Cancelar) está asociado con el movimiento hacia la izquierda.

La alineación de los botones puede influir en el paradigma percibido del usuario. Como tal, algunas combinaciones de alineaciones y posiciones pueden ser conflictivas y, por lo tanto, confusas para los usuarios.

alt text

** esto supone una lectura de izquierda a derecha; quizás no sea lo mismo para los idiomas de lectura de derecha a izquierda.

35
g .

Haga lo que encaje con su aplicación y el sistema operativo de destino.

Sin embargo, como señala, probablemente sea más importante ser coherente en su aplicación.

24
ChrisF

Creo que es mejor (y más genérico) alinearlos correctamente.

4
megubyte

Siempre están a la derecha y el usuario espera que estén a la derecha. Asegúrese de espaciarlos lo suficiente y deles diferentes estilos para resaltar la acción principal.

3
giancarlo

Prefiero colocar la acción más probable (OK en este caso) a la derecha y darle algún tipo de color para que sea fácil de detectar y la acción menos probable (Cancelar en este caso) a la izquierda coloreada en gris o un color a lo largo de las líneas del fondo del formulario.

Creo que es un mal diseño colocarlos uno al lado del otro. Siguiendo el enfoque de "no me hagas pensar", cuando necesito cancelar, me detengo y busco el botón, pero en todas las demás ocasiones solo quiero actuar automáticamente.

También vea esta pregunta en ui.stackexchange .

3
idophir

Depende de tu plataforma. Windows coloca los botones en el lado derecho en el orden <Aceptar> <Cancelar> y Mac OSX en el orden <Cancelar> <Aceptar>. Al igual que otras respuestas ... sé coherente. Para la colocación del botón, preferiría el lado inferior derecho.

2
sysscore

creo que "OK" o su botón de acción priorizado debe estar a la izquierda debido a la siguiente razón 1: Buen porcentaje de usuarios que usan el teclado en formularios o cuadros de diálogo y el usuario tardará menos tiempo en alcanzar la acción más favorable mediante pestañas si están en el lado izquierdo . 2: Rotación de los ojos o Ley de Fitt 3: Piense en las personas ciegas (semi ciegas) o en el uso de la aplicación cuando conduce o accede a la aplicación en modo de habla. 4: por último, no menos importante, usa verbos como acción

Hay un montón de hilos disponibles en este foro, por favor revíselos

También tenga en cuenta que mis sugerencias no son para dispositivos pequeños.

2
Hemchandra

Para un proceso lineal (como un instalador), alinear los botones "Siguiente" a la derecha (en un entorno occidental) podría ser más intuitivo.

Yo diría que el orden de tus botones es más importante. En Windows, el "botón Aceptar" siempre está a la izquierda y el "botón Cancelar" a la derecha. Debido a que los usuarios no leen, intercambiar los botones Aceptar y Cancelar (como hacen algunas aplicaciones Mac portadas) confunde al usuario.

2
Petrus Theron

Creo que depende del diseño. Si está utilizando un diseño estándar para su formulario, colocaría los botones Aceptar/Cancelar en el lado derecho (http://bit.ly/9IzQo0), pero si está utilizando CSS para cambiar sus formularios, los colocaría en el centro (http://www.tumblr.com/register).

1
rgaspary

Si sus campos de formulario están alineados a la izquierda, parece tener sentido alinear sus botones también a la izquierda. Aquí hay algunas investigaciones sobre dónde van realmente los ojos de los usuarios y qué tan rápido reaccionan: http://www.lukew.com/ff/entry.asp?571

Esto sugiere que la alineación a la izquierda de estas dos opciones es la mejor opción de diseño, especialmente cuando los controles de formulario anteriores también se alinean a la izquierda. Colocar los botones "Enviar" y "Cancelar" a la izquierda significaba que los ojos de las personas tenían menos distancia para viajar.

En términos de sus movimientos oculares, las personas eran menos eficientes cuando usaban [una opción con botones alineados a la derecha].

1
Luke

Creo que es fácil criticar temas como estos caso por caso, pero creo que todos deberían considerar un sistema de diseño completo y/o una biblioteca de patrones al expresar su opinión y/o resultados de las pruebas. El hecho es que, dependiendo del contenido y las pruebas, algunos pueden mostrar una mayor conversión con OK a la izquierda y OK a la derecha.

Sin embargo, al considerar un sistema de diseño completo, ¿considera que la consistencia es mejor que cuando funciona mejor en pruebas individuales izquierda/derecha? Estoy de acuerdo en que desea invertir intencionalmente la acción "reenviar" cuando hay externalidades negativas consideradas, como "Eliminar perfil de pago", algo que no es reversible, etc., colocando el CTA, en esos casos, a la izquierda y cancelar a la derecha.

Pero, incluso con esto en mente, imaginemos que la mayoría de los usuarios son usuarios de Windows (en este momento), y usted está siguiendo un flujo de pago progresivo progresivo. Es de esperar que "pagar" o "Continuar" esté a la derecha, con el reverso o cancelar a la izquierda. Ese también es el caso para la mayoría de los usos modales de cancelar/Ok diseño (excepto para Foundation), pero eso no funciona bien para aquellas personas que discuten pruebas A/B individuales, o usan pruebas que han producido una mayor conversión de estar en la izquierda, vs la derecha.

Personalmente, en la experiencia de prueba, los CTA funcionan mejor en la derecha, pero siempre tengo curiosidad sobre qué métricas tienen las personas que tienen una guía de estilo o un patrón de diseño que muestre los CTA en la posición más a la izquierda.

1
Arondale
  1. El orden no importa siempre y cuando estén muy juntos, lo que implica que son hermanos. Es decir, los botones Aceptar y Cancelar hacen cosas diferentes pero afectan el mismo elemento.
  2. Para un lenguaje de izquierda a derecha, pondría los botones en el centro o al ras a la derecha.
  3. Destacaría el botón Aceptar con un color que coincida con la marca.
0
Tim Huynh

Generalmente uso OK a la izquierda, Cancelar a la derecha.

El único caso en el que podría ver alterar este patrón (y esto es dividir los pelos), sería por acciones irrevocables por parte del usuario (es decir, eliminar mi cuenta, matar a todos los humanos, etc.) y luego podría desea desviarse para obligarlos a pensar en la acción o forzar que la acción predeterminada sea la opción más segura.

0
drivingmenuts

De acuerdo con Diagrama de Gutenberg , el área del terminal (donde el sitio presenta su última llamada después de que el usuario haya escaneado el contenido de la página) está en la parte inferior derecha de la pantalla. Debido al patrón de lectura natural de los lectores occidentales, tener los botones en esta ubicación en realidad reduce la fatiga del usuario, ya que terminan de navegar en esta ubicación. Si los botones se encuentran en la parte inferior izquierda, los usuarios generalmente terminarán en el área del terminal y tendrán que regresar a la izquierda en función de la recuperación para realizar su acción. Este patrón se aplica tanto a las ventanas emergentes como a las pantallas de edición/adición.

Este patrón general también se aplica al orden en que se colocan los botones. Si enumera Aceptar antes de Cancelar, el usuario casi siempre verá todas sus opciones antes de seleccionar la que desee. En la mayoría de los casos, el usuario querrá hacer clic en Aceptar sobre Cancelar. Esto significa que ven OK, luego Cancelar y luego regresan a OK. Muy menor, pero aún trabajo añadido.

0
Brad Hutchison

Grandes respuestas aquí. Lo que nadie ha mencionado es la Ley de Fitt que gobierna la velocidad (y facilidad) de hacer clic en los objetivos en una GUI. Da algo de ciencia difícil sobre dónde colocar los botones principales.

Básicamente, la Ley de Fitts ( https://en.wikipedia.org/wiki/Fitts%27s_law ) establece que el tamaño del objetivo y la distancia actúan de manera predecible en el tiempo que lleva alcanzar el objetivo. Cuando un botón está en la esquina de una "caja", el tamaño del objetivo es posiblemente infinito (los únicos tamaños de objetivo realmente infinitos son las esquinas de la pantalla de la computadora donde el cursor se detiene por sí solo). Si bien la velocidad no siempre es una consideración principal, la comodidad (facilidad de uso) debería serlo.

Demostración interactiva (¡sin esquinas!): http://simonwallner.at/ext/fitts/

0
Rashcom