Meilleure couleur d'erreur sur la couleur bleue?
J'ai la couleur: #4285f4 et je recherche un code couleur d'erreur facile à lire. J'utilise la couleur d'erreur par défaut de Google: #dd2c00. Mais cela ne se lit pas très bien sur la page ...
Affichez votre message d'erreur sur une boîte de couleur neutre.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Les directives MD ne sont pas des règles
L'équipe de Google Design voulait fournir une bonne sélection de couleurs aux développeurs d'applications qui ne peuvent pas penser en couleur. C'est une palette solide (l'ensemble du cadre de l'interface utilisateur est génial), mais il n'a pas tout pour chaque scénario. N'ayez pas peur de vous en séparer.
En travaillant sur votre fond bleu, j'ai rapidement atterri sur une couleur "alerte" qui se détache sans contraste douloureux. Changer le texte d'alerte en gras l'aidera également à lire. Et, comme mentionné ailleurs, des icônes bien connues sont également un bon moyen d'attirer l'œil de l'utilisateur.
Vous remarquerez également quelques autres suggestions. Juste matière à réflexion.
- Différenciez l'action
AcceptsurCancel. L'utilisateur a vraisemblablement initié ce formulaire, donc l'acceptation est l'intention la plus probable. - Envisagez des étiquettes plus naturelles pour votre domaine pour encourager l'entrée.
- Augmentez la taille du texte d'erreur. Cela aidera aussi à lire.
- J'ai seulement changé la couleur du soulignement du champ. Cela est généralement suffisant pour mettre en évidence le problème et permet de souligner le texte de l'erreur.
Le jaune clair aurait un meilleur contraste sur le fond bleu. Bien que j'ai également vu certaines interfaces utilisateur utiliser un Fuchsia/rose plus clair pour contraster avec des bleus plus foncés. J'ai trouvé deux échantillons dans les Lignes directrices sur les couleurs de conception des matériaux qui peuvent fonctionner:
Jaune: # FFFF00
Rose: # FF80AB
J'ai tendance à mélanger la couleur par défaut avec le rouge jusqu'à ce que la couleur soit chaude, mais le texte est toujours lisible. Vous pouvez mélanger avec orange ou jaune pour les avertissements, mélanger avec bleu (ou blanc) pour neutre et mélanger avec vert pour les messages positifs.
Cela fonctionne parce que les gens associent une plus large gamme de couleurs à certains niveaux de gravité.
Une alternative serait de changer l'arrière-plan au lieu de la couleur du texte, pour faire ressortir le message. Encore une fois, mélangez la couleur d'arrière-plan avec du rouge, orange/jaune, bleu/blanc ou vert selon le message que vous souhaitez transmettre.
Si aucune des teintes standard ne fonctionne, optez pour une autre couleur, mais utilisez une icône ou un texte descriptif tel que "Erreur", pour le faire ressortir et transmettre le sens du texte de cette manière. L'utilisation d'une icône est probablement quelque chose que vous voulez faire, car ils sont plus reconnaissables que les couleurs, surtout si toute personne utilisant votre application est daltonienne/carence en couleurs.
Les erreurs ne sont pas seulement transmises par la couleur
Les erreurs peuvent être affichées de différentes manières pour montrer qu'elles sont une erreur:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Ce ne sont que deux des multiples variations. Gardez également à l'esprit que l'animation d'un message apparaissant après qu'une action a été effectuée créera également une préférence pour le type de message.
Ma recommandation s'en tient à l'ajout d'une icône préfixée à votre message.
Si cela ne fait pas l'affaire, vous devrez peut-être reconsidérer l'utilisation d'un fond bleu.
L'astuce consiste à utiliser la couleur alpha au lieu d'une couleur unie.
Google décrit cela dans leurs Spécifications de conception matérielle sous la puce "Lisibilité".
D'après les spécifications:
Le texte "Le bûcheron se met au travail à la fois" a la même couleur dans les deux images. Dans le premier, c'est solide.
Dans cette image, le noir est utilisé comme couleur initiale. L'opacité a été diminuée pour laisser transparaître la couleur d'arrière-plan et offrir un meilleur contraste.
Alors, essayez de définir votre couleur d'erreur un peu transparente. Expérimentez avec des variations rouges plus claires ou plus foncées.
Exemple avec la couleur d'erreur par défaut de Google:
rgba(221, 44, 0, 0.87)
Jouez avec l'arrière-plan lorsqu'il s'agit de couleurs qui ne se complètent pas.
- Vous pouvez supprimer le Texte de l'espace réservé tout en affichant l'erreur car l'erreur indique clairement ce que l'utilisateur doit faire.
- Réduisez l'opacité de [~ # ~] acceptez [~ # ~] bouton pour représenter l'importance du message d'erreur. (Ce qui, dans ce cas, est très élevé car l'ajout d'un titre ne permettrait pas à l'utilisateur d'enregistrer la note.)
[~ # ~] note [~ # ~] : Peut-être [~ # ~] enregistrer [~ # ~ ] serait un meilleur texte pour le bouton okay-state. Juste une pensée mais je peux me tromper car je ne suis pas complètement conscient du contexte.