web-dev-qa-db-fra.com

Est-ce difficile à lire?

Ceci est un extrait d'un site que je viens de créer. J'ai considéré la lisibilité, etc., et les couleurs de l'entreprise, et j'ai essayé de travailler avec eux.

Site screen print

En fait, je trouve cela très relaxant à lire et à visualiser, et je n'ai pas eu de commentaires de la part des personnes ou des utilisateurs de test à propos d'un problème. Dans l'ensemble, le vert est une couleur assez facile pour les yeux.

Mais quelqu'un a dit qu'il ne l'aimait pas et qu'il avait du mal à lire. Bien que je veuille accepter leur point de vue, je suis perplexe. Je me suis donc demandé si j'avais raté quelque chose ici. Ce schéma de couleurs est-il que les autres UXers jugeraient raisonnable ou non?

edit Le rouge que j'utilise est plus sombre que le rouge d'erreur normal, que j'utilise pour mettre en évidence les problèmes.

edit Comme je le souligne dans les commentaires, je ne suis pas développeur d'interface utilisateur. La perplexité n'est pas que les gens n'aiment pas mes créations (diable, je ne suis pas si sensible), c'est que personne d'autre n'a commenté auparavant. Et, comme je l'ai dit, il y a toute une série d'autres exigences. Certains d'entre eux excluraient un fond complètement blanc ... (c'est ce avec quoi j'ai commencé).

J'accepte les commentaires de tout le monde. Je pense, malheureusement, que je n'aurai pas le temps de modifier cela, mais les commentaires sont utiles.

Je vais juste aller dans un coin et pleurer un instant ...

modifier C'est intéressant. Je viens de déplacer mon navigateur de son moniteur habituel vers mon autre, et soudain, il a l'air terrible. Je pense donc que j'ai été trompé par un moniteur qui ternit les couleurs et ne les affiche pas bien. Donc ce que j'ai vu est, en fait, différent de ce que les autres voient.

20
Schroedingers Cat

Tout d'abord, voici à quoi cela ressemble pour les utilisateurs daltoniens (deutéranopie; par la forme la plus courante de daltonisme): enter image description here (aussi les zébrastripes sont presque impossibles à voir, daltoniens ou non)

Rouge sur vert est un combo de couleurs classiquement mauvais, bien que votre texte magenta ne soit pas entièrement illisible. La couleur de fond est cependant très forte, ce qui peut être dur pour les yeux.

Vous avez raison le vert est relaxant mais il est souvent évité dans la conception web, j'ai trouvé beaucoup d'utilisateurs effrayés par le vert (c'est plutôt dommage car c'est ma couleur préférée, mais je l'évite généralement à cause de cette).

Pour l'inspiration, voici un bonne liste de sites Web verts bien conçus . Notez que le texte est généralement clair noir ou blanc , et notez à quel point les quelques exemples de rouge dans ces pages sont vraiment dessinez vos yeux.

Voici quelques bons outils de contraste des couleurs que vous pouvez utiliser pour vérifier automatiquement l'accessibilité et la lisibilité. Notez que ceux-ci ne remplacent pas les tests utilisateurs réels, mais il peut être bon de vérifier d'abord comment ils correspondent et de voir si un combo de couleurs est au moins techniquement accessible avant de le montrer aux utilisateurs.

37
Ben Brocka

Les couleurs d'entreprise sont destinées à l'image de marque visuelle ET NON Développement de l'interface utilisateur.

L'interface utilisateur est censée aider et écarter l'utilisateur. C'est pourquoi la plupart ont tendance à être neutres dans leurs couleurs (gris, bleu gris, etc.)

22
DA01

Oui, les couleurs peuvent ne pas être bonnes pour certains. L'écran est très organisé, mais je suggérerais un meilleur thème de couleur. Pas drastique, mais je rendrais la couleur d'arrière-plan beaucoup plus claire qu'elle ne l'est, car elle est trop forte. Il semble attirer mon attention sur le contenu.

Le rouge n'est pas non plus le meilleur choix par défaut pour la police, car la plupart des sites Web l'utilisent pour les erreurs et les événements de survol.

Je voudrais éclaircir le fond dégradé vert à utiliser: rgb (231, 255, 183) ou la valeur hexadécimale de: # E7FFB7 et passer au blanc comme vous l'avez fait.

Ensuite, je changerais le texte rouge en une autre couleur qui fonctionnait bien avec l'arrière-plan.

10
b01

Le texte rouge sur fond vert ne fonctionne jamais très bien, ce qui est contre-intuitif car le rouge et le vert sont opposés sur la roue chromatique, donc on pourrait penser que le contraste serait excellent. Malheureusement, cela ne fonctionne pas vraiment de cette façon, et cela crée une sorte d'effet de micro-halo lorsque votre esprit essaie de trier la différence. Le fond vert semble correct en soi, mais je persiste à utiliser du texte noir.

8
Jim Fell

Contraste des couleurs est une excellente ressource pour tester si vos couleurs sont ou non conformes à diverses normes. Après avoir vérifié vos couleurs ici, il semble que votre conception ne soit conforme qu'à mi-chemin .

Cela mis à part, le vert est plutôt gras et agressif pour un fond. Selon votre marché cible, cela peut fonctionner s'il s'agit en quelque sorte d'un marché de niche. Sinon, c'est un peu trop impétueux. Je comprends que ce sont des couleurs d'entreprise et tout, mais il devrait y avoir une manière plus subtile de les incorporer.

Vous devez également éviter le rouge comme couleur "normale" pour le texte. le rouge doit être utilisé pour signifier les erreurs, les alertes, etc.

6
Matt Rockwell

C'est à la fois difficile à lire et à rebuter esthétiquement.

Pour me qualifier, je suis le propriétaire de emeraldcode.com et kitgui.com et vous pouvez y voir des choix de conception d'interface utilisateur. Notez que mes choix de conception ne sont que cela. Je les ai choisis, je ne les ai pas construits. Je sais que j'aspire personnellement à la mise en œuvre du design, tout comme je sais que je ne devrais pas aller à American Idol et auditionner en chantant "des chats dans le sèche-linge". La seule grâce salvatrice que j'ai est de savoir quand quelque chose semble bon ou sonne bien.

Vous feriez mieux de prendre des cadres existants comme jQuery UI, puis de modifier le thème pour l'adapter aux couleurs de votre entreprise. Pour être franc, cela semble être un effort des premiers jours du Web. Si vous regardez un site de profil supérieur comme Apple, Google, Microsoft, etc., vous serez péniblement à court dans le département UI. Veuillez utiliser des cadres pour vous aider. J'ai utilisé jQuery UI et ThemeForest car les deux sont à la hauteur.

Vous feriez bien d'apprendre par vous-même les techniques HTML 5 pour les scripts et le balisage. Rappelez-vous, vous avez demandé un avis et parfois ceux que vous n'aimez pas sont ceux dont vous apprenez le plus.

6
Jason Sebring

J'ai moi-même un problème de vue et je trouve cette page très difficile à lire. Les rayures zébrées vertes sur vertes surtout. J'accepte également que la coloration rouge soit réservée aux erreurs.

5
Ewa Ev

J'utilise toujours le blanc comme couleur de fond principale, tout comme Google, Facebook, Microsoft, Apple, Twitter, etc. C'est un problème d'utilisation pour utiliser n'importe quelle autre couleur. Je refuse personnellement de lire un texte écrit sur une autre couleur.

3
Jader Dias

Ce n'est pas la couleur, c'est le classement. Je peux sentir mes pupilles se dilater et se contracter alors qu'elles se déplacent automatiquement dans la ligne, souffrant de zones de contraste différent.

2
Alejandro Rivero

Je développe tous les nouveaux sites en noir et blanc et en nuances de gris. J'abandonne totalement la couleur pour que les gens DOIVENT se concentrer sur le contenu, les formes et la mise en page.

En fait, j'ai eu beaucoup de succès à déplacer l'attention des gens de la couleur à autre chose quand il n'y a pas de couleur.

1
Evik James

Je pense que la surutilisation du vert dilue la hiérarchie visuelle.

Si la page était le blanc traditionnel avec du texte noir et que le vert était utilisé pour attirer l'attention sur quelque chose, ce serait une meilleure utilisation de la marque pour renforcer l'achèvement des tâches.

1
Mike Hill

Mis à part le schéma de coloration dans la conception ci-dessus, il y a d'autres choses qui doivent être prises en compte telles que la police, la lisibilité.

Voici un article intéressant sur les modèles de conception

http://uxdesign.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/

0
Jay D