De quelle couleur les boutons d'enregistrement et de connexion doivent-ils être?
Ma page de connexion actuelle ressemble à ceci: 
J'ai choisi le vert et le gris au hasard et je me demande comment les représenter correctement. Le bouton de connexion est l'action principale, car cet écran ne s'affichera que pour les utilisateurs tapant directement une URL, qui, je pense, devrait principalement être des utilisateurs existants.
Comment puis-je le montrer?
La couleur du bouton de connexion doit correspondre à la couleur principale de votre thème de style.
Apparemment, vous utilisez la conception matérielle. Si votre thème, par exemple, utilise le bleu (# 2196F3) comme couleur principale, vos boutons d'action principaux doivent également être bleus afin qu'ils contrastent avec le reste de la page et soient facilement reconnaissables.
Le bouton "Enregistrer" qui est l'action secondaire dans la page doit être moins visible que l'action principale , donc non coloré. Vous pouvez afficher style de couleur et directives relatives aux boutons à partir de Google Material Design.
Votre "appel à l'action" ne doit pas nécessairement être vert, il doit simplement être cohérent. Commencez avec votre guide de conception si vous en avez un ou créez-en un si vous n'en avez pas et fournissez une apparence cohérente à travers votre application/site.
Seuls très peu actions sont généralement associés à une couleur spécifique. Ces quatre "couleurs" (en comptant le gris comme couleur pour simplifier la formulation) sont des exemples pour ceux qui peuvent induire une compréhension de ce que fait un élément d'interface utilisateur juste par la couleur:
- Rouge pour terminer: annuler (mettre fin à l'action), supprimer (mettre fin à l'existence), fermer (mettre fin à l'application/popup), raccrocher (mettre fin à l'appel) pour nommer les plus courants.
- Vert pour approbation: accepter l'appel, confirmer l'action.
- Police bleue pour les hyperliens
- Gris pour un état désactivé
Pour vous connecter ou vous inscrire, il n'y a pas de couleurs communes (du moins pour autant que je sache). Donc, plutôt que d'essayer d'utiliser la couleur pour décrire l'action, utilisez simplement la différence entre coloré et non coloré, où la couleur doit être la couleur qui définit votre thème.
En général, ne coloriez qu'un seul bouton "par défaut" par vue. Le bouton par défaut est celui que les gens vont généralement utiliser (d'une manière psychologique, vous pouvez également affirmer que c'est celui que vous voulez les gens à utiliser).
Pour le formulaire de connexion, ce serait "Connexion", car vous vous inscrivez une fois mais vous connectez à chaque fois. Par conséquent, la couleur du bouton d'enregistrement doit être "aucune" (juste un lien ou un bouton blanc, si vous voulez coller avec un bouton), tandis que la couleur de votre bouton de connexion dépend de votre "design d'entreprise".
Mis à part tout cela, je voudrais souligner un aspect général de la coloration, d'autant plus que la conception "aléatoire" que vous avez fournie en est le meilleur exemple:
À tout moment, gardez à l'esprit qu'environ 5% de tous les groupes d'utilisateurs sont daltoniens. Pour votre exemple, ces personnes verraient deux boutons gris.
N'est-il pas déroutant qu'un nouvel utilisateur souhaitant s'inscrire se voit présenter une demande de mot de passe inexistant? Ou est-ce qu'on lui demande un mot de passe avec lequel il sera enregistré lorsqu'il appuiera sur ce bouton, auquel cas comment sait-il qu'il l'a tapé correctement?
J'aurais donc pensé que la première chose que l'utilisateur verrait devrait simplement avoir deux boutons CONNEXION (au compte existant) et ENREGISTREMENT (en tant que nouvel utilisateur). Il pourrait également être utile d'avoir les textes entre crochets à l'écran près des boutons. LOGIN demandera alors simplement l'ID utilisateur et le mot de passe, INSCRIVEZ-VOUS pour tout ce que vous voulez avant de créer un nouvel utilisateur.
S'il s'agit de ne pas vouloir plus d'un aller-retour vers le serveur pour des raisons d'efficacité, il suffit de masquer les champs e-mail et mot de passe jusqu'à ce que le bouton LOGIN soit cliqué. Peut-être de même pour Register et ses champs associés, s'il ne s'agit pas d'un processus d'enregistrement multi-écrans.
Vous pouvez également présenter un écran de connexion uniquement avec un "évidemment pas encore enregistré? Cliquez ici pour créer votre compte gratuit" (ou autre) sous la forme d'un hyperlien évident, pas d'un bouton.
Il manque une autre chose: "J'ai oublié mon mot de passe" (hyperlien)
Après tout, je ne suis pas enclin à penser que la couleur des boutons est importante à condition qu'ils ne soient pas dans l'erreur - avertissement - alerte spectre d'attentes (généralement du rouge au jaune). Personnellement, j'aime le bleu. Le thème général des couleurs du site est pertinent ici.
En plus de la réponse @KristiyanLukanov, lorsque les boutons sont désactivés, n'utilisez pas de couleur.
- Désactivé: les boutons ne doivent pas avoir de couleur s'ils ne sont pas activés.
- Activé: les deux boutons peuvent utiliser couleur d'accentuation ou un seul, si vous souhaitez le mettre en valeur.
