Combinación de colores para tres botones.

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

¿Todos deberían permanecer del mismo color?

Estas son mis opciones:

Imagen de toda la página.

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 ):

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).

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:

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.

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)

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

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

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.

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?).