Combinación de colores para tres botones.


13

Qué combinación de colores funcionaría mejor para estos tres botones:

ingrese la descripción de la imagen aquí

¿Todos deberían permanecer del mismo color?

Estas son mis opciones:

ingrese la descripción de la imagen aquí

Imagen de toda la página.

ingrese la descripción de la imagen aquí


El primario versus el predeterminado y el predeterminado vs. el éxito parecen distraer.
Danny Varod

Mirando la página más grande, preguntaría qué debe hacer el botón 'borrar'. ¿Es realmente una opción necesaria?
DA01

Respuestas:


52

El botón Ir debería ser más grande y tener el mayor contraste de todos, ya que es el principal.

El botón Borrar está bien porque es una acción secundaria y debe ser neutral .

Para mí, el botón Cambiar tiene demasiada presencia tanto en tamaño como en restricción. Lo ubicaría entre los menús desplegables Origen-Destino, donde tiene más sentido "por sí mismo".

Aquí dos soluciones similares que para mí son mucho más limpias y ofrecen una mejor usabilidad para este propósito específico (personalmente elegiría la primera ):

ingrese la descripción de la imagen aquí

Solo para tu información: solía utilicé los iconos de Font-Awesom e, el de la primera imagen es (según su versión) icon-exchange / fa-exchange y las flechas son icon- arrow-left / right y fa-arrow-left / Derecha

EDITAR - Eliminar el desorden ( basado en un comentario de DA01 ):

Si el botón Borrar borrará solo esos dos campos (de / a), no parece ser necesario porque de todos modos los usuarios tendrán que hacer clic en cada menú desplegable y hacer la selección, y esto no cambia si agrega un botón Borrar .
Si este es el caso, recomendaré eliminarlo, para que obtenga una interfaz más limpia y evite que los usuarios realicen una acción que no les agregue ningún valor. (y además, eliminen involuntariamente lo que han seleccionado).

ingrese la descripción de la imagen aquí


Las flechas were fueron mi primer pensamiento también. Vea cómo translate.google.com lo hace: un botón ↔︎ con información sobre herramientas.
200_success

Si claro es realmente secundario, estoy de acuerdo. Si, por otro lado, es destructivo (eliminando el trabajo ingresado), entonces argumentaría que realmente debería manejarse de manera diferente.
DA01

@ DA01 ¿Podría explicar más su último comentario? ¿Qué opción sería mejor si es destructiva y por qué? Estoy realmente interesado en tu POV.
Alejandro Veltri

@rewobs Por lo general, recomiendo no tener opciones destructivas, aunque todavía existen en muchos sistemas. Como es destructivo, no debería verse como un botón, en mi humilde opinión, ya que los botones se pueden hacer clic habitualmente. Las personas a menudo completan un formulario y luego presionan el botón más 'obvio' en la parte inferior asumiendo que es ENVIAR. Entonces, al menos en el diseño de formularios, generalmente recomiendo que el único botón sea enviar. Si hay otras tareas, haga que sean visualmente diferentes y moderadas en comparación con el botón principal.
DA01

1
@ DA01 Comprendí tu punto, gracias por la aclaración. Además, he leído su comentario en la pregunta, preguntándole si el botón de borrar es realmente necesario y creo que no, porque de todos modos el usuario reemplazará el valor al volver a seleccionar de los menús desplegables, por lo que agregar un botón de borrar agregará un innecesario acción "en el medio".
Alejandro Veltri

12

Una solución es separar visualmente su botón por prioridad.

Normalmente, tendrá botones primarios, botones secundarios y, a veces, botones terciarios y / o botones de acción no preferidos.

Para Primaria y Secundaria, generalmente sugiero su color de marca preferido (puramente subjetivo) en dos niveles de contraste. Alto contraste para primaria, un poco menos de contraste para secundaria.

Los botones terciarios que generalmente trato de evitar y en su lugar van con una imagen completamente diferente, como un enlace.

Entonces, dado su ejemplo, e interpretando el contexto como una apuesta que puedo, sugeriría algo como esto:

ingrese la descripción de la imagen aquí

Ese es solo un ejemplo realmente rápido y tendrías que confirmar que el contraste cumple con las pautas de accesibilidad y no parece deshabilitado (lo cual es un poco el mío, por lo que necesita ajustes), pero espero que se entienda.

ACTUALIZACIÓN: Acabo de darme cuenta cuando estaba publicando esto que este es el patrón que StackExchange usa al crear una nueva publicación. El botón SAVE es primario, CANCEL es terciario y se muestra como un enlace en lugar de un botón.


1

Los colores de alto contraste (por ejemplo, blanco y negro) siempre son los mejores, lo que elimina la opción naranja. Y luego, agregando un poco de marketing a la mezcla, ¿cuál es el esquema de color utilizado para el resto de su página en términos de botones, aplicación? Pero si tuviera que elegir: Ir: verde; Interruptor ...: azul marino; Claro: blanco y negro. Tenga en cuenta que el color también está relacionado con la preferencia.

(Fuera de tema: puede eliminar la etiqueta larga para cambiar por un botón con etiqueta de icono entre los dos campos)


1
Bienvenido a UX.stackexchange. ¿Qué evidencia tienes de que el alto contraste es siempre el mejor?
Mayo

1
Bueno, puede que no sea la mejor solución para ningún contexto, pero el alto contraste mejora la lectura, ya que distingue el texto del fondo. De lo contrario, se vuelve borroso. Considere el daltonismo (el más común: verde-rojo): el texto rojo sobre un fondo verde o viceversa es cómo detecta esta forma de daltonismo.

1
Aquí hay un artículo que enumera diferentes argumentos para los colores: usertesting.com/blog/2014/12/02/color-ux-conversion-rates

Hay un punto donde el contraste no es lo suficientemente grande y la legibilidad disminuye. Supongo que me estaba centrando excesivamente en el ejemplo en blanco y negro en la primera oración. Llega un punto en el que se alcanza la legibilidad y luego "más" no aumenta el rendimiento del usuario. De nuevo. Bienvenido a UX
Mayo

1

Yo diría que cambie el contraste de un tono de color similar para mostrar énfasis . ¿Por qué? ( 1 de cada 12 hombres es daltónico y 1 de cada 200 mujeres también es daltónico

También desea guiar a los usuarios hacia la ruta prevista a través del sistema para que oscurezca el botón Ir. Podrían escanear todos los botones y procesarlos, o podrían tener algo como un color más oscuro o un tamaño más grande para atraerlos a la opción deseada o al 80% más común de esa manera que miran allí primero y decir sí, eso les está ahorrando tiempo.

Este artículo dice que uno debería hacer que el botón más importante se vea así

Vea su ejemplo a continuación

ingrese la descripción de la imagen aquí

No se ve tan bien como la imagen de abajo (en mi opinión)

ingrese la descripción de la imagen aquí

Ese artículo también menciona poner los botones en un orden razonable . Entonces, en mi opinión, pondría el botón Ir a la derecha porque los usuarios de habla inglesa de izquierda a derecha (por lo que, naturalmente, miran a la derecha para signos de finalización). Lo pondría a la izquierda para usuarios árabes. Así es como lo organizaría para un mercado inglés.

ingrese la descripción de la imagen aquí

Un último tema en ese artículo es Hacer que sea más difícil encontrar botones destructivos. En su situación, cambiaría su orden de esa manera si hace clic en ir y accidentalmente falla a la izquierda, posiblemente cambiaría la ubicación de envío en lugar de destruir la acción. También podría confirmar la tarea destructiva si lo considera necesario (es decir, ¿está seguro?).


"porque los usuarios de habla inglesa leen de derecha a izquierda" - ¿eh? ¿Estamos hablando del mismo inglés?
BlueRaja - Danny Pflughoeft

editado ... whoops
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.