Combinazione di colori per tre pulsanti

Quale combinazione di colori funzionerebbe meglio per questi tre pulsanti:

Dovrebbero rimanere tutti dello stesso colore?

Queste sono le mie opzioni:

Immagine di tutta la pagina

Il pulsante Vai dovrebbe essere più grande e avere il contrasto più elevato di tutti poiché è quello principale.

Il pulsante Cancella va bene perché è un'azione secondaria e dovrebbe essere neutro .

Per me il pulsante Switch ha troppa presenza sia in dimensioni che in costruzione. Lo posizionerei tra i menu a discesa Origine-Destinazione, dove ha più senso "da solo".

Ecco due soluzioni simili che per me sono molto più pulite e offrono una migliore usabilità per questo scopo specifico ( sceglierei personalmente la prima ):

Cordiali saluti: ho usato le icone Font-Awesom e, quella nella prima immagine è (a seconda della versione) scambio-icona / scambio-fa e le frecce sono icona- freccia-sinistra / destra e fa-freccia-sinistra / giusto

EDIT - Rimozione del disordine ( basato sul commento di un DA01 ):

Se il pulsante Cancella cancellerà solo quei due campi (da / a), non sembra necessario perché gli utenti dovranno comunque fare clic su ciascun menu a discesa ed effettuare la selezione e questo non cambierà se aggiungi un pulsante Cancella .
In questo caso, ti consiglio di rimuoverlo, in modo da ottenere un'interfaccia più pulita e impedire agli utenti di eseguire un'azione che non aggiunge alcun valore per loro (e inoltre rimuovere involontariamente ciò che hanno selezionato).

Una soluzione è separare visivamente il pulsante in base alla priorità.

In genere si dispone di pulsanti primari, pulsanti secondari e talvolta terziari e / o pulsanti di azione non preferiti.

Per Primario e Secondario, di solito suggerisco il tuo colore preferito (puramente soggettivo) in due livelli di contrasto. Contrasto elevato per primario, contrasto leggermente inferiore per secondario.

Pulsanti terziari Di solito cerco di evitare e invece vado con una visione completamente diversa, come un collegamento.

Quindi, dato il tuo esempio e interpretando il contesto come scommetto che posso, suggerirei qualcosa del genere:

Questo è solo un esempio molto rapido e dovresti confermare che il contrasto rispetta le linee guida sull'accessibilità e non sembra disabilitato (cosa che la mia fa un po ', quindi ha bisogno di modifiche), ma si spera che capisca.

AGGIORNAMENTO: Ho appena notato mentre stavo postando questo che questo è il modello che StackExchange usa quando crea un nuovo post. Il pulsante SALVA è primario, CANCEL è terziario e mostrato come un link anziché come un pulsante.

I colori a contrasto elevato (ad es. Nero-bianco) sono sempre i migliori, il che elimina l'opzione arancione. E poi, aggiungendo un po 'di marketing al mix, qual è la combinazione di colori utilizzata per il resto della tua pagina in termini di pulsanti, applicazione? Ma se dovessi scegliere: Vai: verde; Interruttore ...: blu marino; Trasparente: bianco-nero. Ricorda che il colore è anche legato alle preferenze.

(Fuori tema: è possibile eliminare l'etichetta lunga per passare da un pulsante contrassegnato da un'icona tra i due campi)

Direi di cambiare il contrasto di una tonalità di colore simile per mostrare enfasi . Perché? ( 1 su 12 uomini sono daltonici e 1 su 200 donne sono anche daltonici

Volete anche guidare gli utenti verso il percorso previsto attraverso il sistema in modo da rendere più scuro il pulsante Vai. Potrebbero scansionare tutti i pulsanti ed elaborarli o potrebbero avere qualcosa di simile a un colore più scuro o di dimensioni maggiori che li attraggono alla scelta prevista o all'80% più comune nel modo in cui guardano prima lì e dicono di sì che li sta facendo risparmiare tempo.

Questo articolo dice che quello dovrebbe rendere il pulsante più importante simile a quello

Vedi il loro esempio di seguito

Non sembra buono come l'immagine qui sotto (secondo me)

Quell'articolo menziona anche di mettere i pulsanti in un ordine ragionevole . Quindi, a mio avviso, metterei il pulsante Vai a destra perché gli utenti di lingua inglese da sinistra a destra (quindi guardano naturalmente a destra per i segni finali). Lo metterei a sinistra per gli utenti arabi. Ecco come lo sistemerei per un mercato inglese.

Un ultimo argomento in quell'articolo è Rendere più difficile trovare pulsanti distruttivi Nel tuo scenario cambierei il tuo ordine in questo modo se fai clic su vai e manchi accidentalmente a sinistra, potresti cambiare la posizione di spedizione piuttosto che distruggere l'azione. Inoltre potresti confermare il compito distruttivo se lo ritieni necessario (cioè ne sei sicuro?).