risposta-alla-domanda-sullo-sviluppo-web-bd.com

Di che colore dovrebbero essere i pulsanti Registrati e Accedi?

La mia pagina di accesso attuale è simile al seguente: Login page

Ho scelto il verde e il grigio praticamente a caso, e mi chiedo come rappresentarli correttamente. Il pulsante di accesso è l'azione principale, poiché questa schermata verrà visualizzata solo dagli utenti che digitano direttamente un URL, che penso dovrebbero essere principalmente utenti esistenti.

Come posso mostrarlo?

13
penalosa

Il colore del pulsante di accesso deve corrispondere al colore principale del tema del tuo stile.

Apparentemente, stai usando il design dei materiali. Se il tuo tema, ad esempio, usa il blu (# 2196F3) come colore principale, anche i pulsanti di azione principale dovrebbero essere blu, in modo che siano in contrasto con il resto della pagina e siano facilmente distinguibili.

login page with blue colored log in button and colorless and borderless registration button

Il pulsante "Registra" che è l'azione secondaria nella pagina dovrebbe essere meno prominente dell'azione principale , quindi non colorato. Puoi visualizzare stile colore e linee guida per i pulsanti dal design del materiale di Google.

Google material design style guidelines for the buttons and their color

25

Il tuo "invito all'azione" non deve essere verde, deve solo essere coerente. Inizia con la tua guida alla progettazione se ne hai una o creane una in caso contrario e fornisci un aspetto coerente attraverso la tua applicazione/sito.

7
DarrylGodden

Solo pochissime azioni sono comunemente associate a un colore specifico. Questi quattro "colori" (contando il grigio come colore per semplicità nella formulazione) sono esempi per coloro che possono indurre a capire cosa fa un elemento dell'interfaccia utente solo dal colore:

  1. Rosso per terminare: annulla (termina l'azione), elimina (termina l'esistenza), chiudi (termina l'applicazione/popup), riaggancia (termina la chiamata) per nominare quelli più comuni.
  2. Verde per approvazione: accetta chiamata, conferma azione.
  3. Carattere blu per i collegamenti ipertestuali
  4. Grigio per uno stato disabilitato

Per il login o la registrazione, non ci sono colori comuni (almeno per quanto ne so). Quindi, piuttosto che provare a usare il colore per descrivere l'azione, basta usare la differenza tra colorato e non colorato, dove il colore dovrebbe essere il colore che definisce il tema.

In generale, colora solo un pulsante "predefinito" per vista. Il pulsante predefinito è quello che le persone di solito useranno (in modo psicologico, potresti anche sostenere che è quello che vuoi le persone da usare).

Per il modulo di login, sarebbe "Login", poiché ti registri una volta ma accedi ogni volta. Quindi, il colore del pulsante di registrazione dovrebbe essere "nessuno" (solo un link o un pulsante bianco, se si desidera attaccare con un pulsante), mentre il colore del pulsante di accesso dipende dal "design aziendale".

A parte tutto ciò, vorrei evidenziare un aspetto generale della colorazione, soprattutto perché il design "casuale" che hai fornito è il miglior esempio:

Tieni sempre presente che circa il 5% di qualsiasi gruppo di utenti è daltonico. Per il tuo esempio, quelle persone vedrebbero due pulsanti grigi.

6
LWChris

La cosa confusa che un nuovo utente che desidera registrare non riceve una richiesta di password inesistente? O gli viene chiesta una password con cui verrà registrato quando preme quel pulsante, nel qual caso come fa a sapere di averlo digitato correttamente?

Quindi avrei pensato che la prima cosa che l'utente vede dovrebbe semplicemente avere due pulsanti ACCEDI (all'account esistente) e REGISTRA (come nuovo utente). Avere anche i testi tra parentesi sullo schermo vicino ai pulsanti potrebbe essere utile. LOGIN ti chiederà semplicemente ID utente e password, REGISTRATI per qualsiasi altra cosa prima di creare un nuovo utente.

Se si tratta di non voler più di un viaggio di andata e ritorno sul server per motivi di efficienza, tenere nascosti i campi e-mail e password fino a quando non si fa clic sul pulsante LOGIN. Forse anche per REGISTER e i suoi campi associati, se non è un processo di registrazione multi-schermo.

In alternativa, presenta una schermata di solo LOGIN con un "Non ancora registrato? Fai clic qui per creare il tuo account gratuito" (o qualsiasi altra cosa) in stile ovvio, non un pulsante.

Manca un'altra cosa: "Ho dimenticato la mia password" (collegamento ipertestuale)

Dopotutto non sono propenso a pensare che il colore dei pulsanti sia importante, a condizione che non siano nell'errore - avviso - avvisano lo spettro di aspettative (di solito rosso attraverso il giallo). Personalmente mi piace il blu. Il tema generale del colore del sito è rilevante qui.

2
nigel222

Oltre alla risposta @KristiyanLukanov, quando i pulsanti sono disabilitati non utilizzare il colore.

  • Disabilitato: i pulsanti non dovrebbero avere colore se non sono abilitati.

disabled buttons

  • Abilitato: entrambi i pulsanti possono utilizzare accent color o solo uno, se si desidera enfatizzarlo.

enabled buttons

1
Alvaro