Quelle palette de couleurs choisir pour les applications qui nécessitent de longues heures de travail?
Je travaille sur une application web ERP/Comptabilité (beaucoup de tableaux et de données) et je me demandais quel schéma de couleurs serait approprié pour ce type d'application? Les utilisateurs seront assis devant leur des ordinateurs pendant plus de 8 heures, contenant beaucoup de données quotidiennement et je voudrais rendre cette expérience aussi confortable que possible à leurs yeux.
La plupart de ces applications que j'ai vues utilisent une sorte de schéma blanc/gris/bleu avec le blanc dominant, mais je crains que cette couleur ne fatigue trop les yeux, surtout compte tenu de la luminosité différente des moniteurs et du travail dans l'obscurité.
Toute aide serait appréciée.
Bien qu'un bon jeu de couleurs puisse aider, l'élément clé à noter ici est le besoin de contraste pour une meilleure lisibilité . Pour citer ceci article de eyemagzine
Un texte gris clair sur fond blanc et une petite taille de texte entraînent tous deux une augmentation de l'activité d'orbicularis oculi et une diminution du clignotement. Ces deux conditions sont liées à la qualité du texte, et nous nous attendrions à trouver des indicateurs similaires de fatigue oculaire avec une police de mauvaise qualité ou un espacement des lettres condensé.
Pour des exemples de bonnes combinaisons de couleurs avec un contraste suffisant, je recommande de lire cet article sur les questions UX qui a ceci à dire sur le contraste à choisir pour une fatigue oculaire minimale.
Assurer la lisibilité du texte grâce au contraste
Pour les arrière-plans derrière du texte, utilisez des couleurs unies et contrastées et évitez d'utiliser des textures et des motifs, ce qui peut rendre les lettres difficiles à distinguer, voire illisibles. Choisissez avec soin les combinaisons de couleur de texte et de couleur d'arrière-plan. Le contraste des valeurs entre le corps du texte et sa couleur d'arrière-plan doit être au minimum d'environ quatre-vingt pour cent.
Contraste avec un fond blanc
Le texte noir sur fond blanc offre un contraste de valeur maximal et, par conséquent, une lisibilité optimale pour le corps du texte. Le contraste entre le texte gris anthracite (# 333333) et un fond blanc est d'environ quatre-vingt pour cent, ce qui donne un contraste de valeur minimale. -
Les couleurs sombres suivantes offrent un contraste et une lisibilité bons à excellents pour le texte sur fond blanc:
L'importance du contraste en ce qui concerne la réduction de la fatigue oculaire est expliquée plus en détail dans l'article, comme souligné ci-dessous.
Contraste et lisibilité "Pour fournir la meilleure lisibilité, assurez-vous que le texte contraste adéquatement avec son arrière-plan en teinte et en valeur."
Pour assurer la meilleure lisibilité, assurez-vous que le texte contraste correctement avec son arrière-plan en teinte et en valeur. Lorsqu'il n'y a pas suffisamment de contraste entre la teinte ou la valeur du texte et sa couleur d'arrière-plan, le texte apparaît flou ou a un effet de halo autour de lui, ce qui le rend difficile à lire et entraîne une fatigue oculaire.
Cela dit, le choix du texte et de la taille est également critique. Pour citer le r site de magazine sur les yeux référencé ci-dessus article
Les concepteurs essaient généralement d'utiliser du texte de haute qualité lorsque les lecteurs sont censés lire pendant une période donnée, mais l'utilisation d'une taille de texte confortable n'est pas toujours possible. Dans l'impression, il y a un compromis entre la taille du texte et la quantité de texte pouvant tenir sur une page. Le type à neuf points peut être choisi parce qu'il est rentable, tandis que les onze points seraient plus faciles à identifier visuellement et réduiraient la fatigue oculaire. Un texte en douze points peut être nécessaire pour une bonne définition des caractères sur les écrans d'ordinateur, car les lecteurs sont souvent plus éloignés d'un écran que d'une page imprimée, mais de nombreuses pages Web spécifient de petites tailles de police malgré le fait qu'il ne coûte pas plus cher de créer des caractères supplémentaires ou plus longs. pages. Les concepteurs doivent plaider pour des tailles de texte plus grandes afin de réduire les effets de la fatigue oculaire.
Du point de vue de l'accessibilité, je recommande également de regarder les directives du W3C sur le niveau de contraste recommandé
1.4.3 Contraste (minimum) : La présentation visuelle du texte et des images de texte a un rapport de contraste d'au moins 4,5: 1, à l'exception des éléments suivants : (Niveau AA)
Grand texte: le texte à grande échelle et les images de texte à grande échelle ont un rapport de contraste d'au moins 3: 1;
Incident: le texte ou les images de texte qui font partie d'un composant d'interface utilisateur inactif, qui sont de la décoration pure, qui ne sont visibles par personne, ou qui font partie d'une image qui contient un autre contenu visuel important, n'ont aucune exigence de contraste.
Logotypes: le texte faisant partie d'un logo ou d'une marque n'a pas d'exigence de contraste minimum.
Vous devriez également envisager d'offrir une option à contraste élevé qui permettra aux utilisateurs de travailler confortablement dans des situations de faible luminosité. Ce serait une bonne idée de fournir plusieurs options comme la façon dont Kindle le gère, comme indiqué ci-dessous.
En ce qui concerne les avantages de l'utilisation du mode contraste élevé dans les pièces sombres, je recommande de consulter cet extrait de cet article
Cependant, l'utilisation de texte clair sur un fond sombre présente également des avantages pour attirer moins de lumière dans une pièce sombre.
Cela dit, tout en inversant la couleur assurez-vous que cela a pris soin d'une meilleure lisibilité
Lorsque vous inversez la couleur, par exemple du texte blanc sur du noir, assurez-vous d'augmenter le début, le suivi et de diminuer le poids de votre police. Cela s'applique à toutes les largeurs de mesure. Le texte blanc sur fond noir est un contraste plus élevé que le contraire, les formes de lettres doivent donc être plus espacées, plus légères et avoir plus d'espace entre les lignes.
Enfin, voici quelques articles sur les schémas de couleurs adaptés au codage qui pourraient vous aider à prendre votre décision finale (je sais que votre application ne traite pas des utilisateurs qui codent dessus, mais le cas d'utilisation est similaire ici ..)
Les jeux de couleurs solaires vous aident à coder plus longtemps : Pour citer l'article
Solarized ne prétend pas seulement être facile à lire en fonction des préférences personnelles du concepteur. Ethan Schoonover, le concepteur responsable du projet, explique clairement la justification des décisions qu'il a prises sur le site du projet. Le plus visible est l'utilisation du contraste sélectif:
"Par une journée d'été ensoleillée, j'aime lire un livre à l'extérieur. Pas juste au soleil; c'est trop brillant. Je vais chercher un endroit ombragé sous un arbre. Le papier ombré contraste joliment avec le texte net. Si vous deviez réellement mesurer le contraste entre les deux, vous constateriez qu'il est bien inférieur au texte noir sur fond blanc (ou blanc sur noir) sur le périphérique d'affichage de votre choix. Le texte noir sur blanc d'un écran d'ordinateur s'apparente à la lecture d'un livre en plein soleil et fatigue l'œil. Solarized réduit le contraste de luminosité mais, contrairement à de nombreux modèles de couleurs à faible contraste, conserve des teintes contrastées (basées sur les relations de la roue chromatique) pour une meilleure syntaxe et une meilleure lisibilité. " Les thèmes blanc sur noir, populaires parmi les développeurs qui souhaitent réduire la fatigue oculaire, sont une amélioration par rapport aux thèmes noir sur blanc, mais le contraste est encore beaucoup trop grand.
Voici quelques liens à vérifier
Tout en travaillant récemment sur une application de gestion de projet gourmande en données, j'ai choisi d'utiliser un fond gris clair (# f3f3f3), des "cartes" blanches (#fff) avec une ombre de boîte très subtile et noir clair (# 333 sur # 585858) texte sur les cartes. La zone que l'utilisateur doit lire se distingue, mais elle est toujours blanche. Le contraste entre le texte et l'arrière-plan est agréable aux yeux. Pour les liens et autres couleurs, j'ai utilisé des nuances de type "pastel" donc ce n'est ni trop sombre ni trop clair.
J'ai eu cette idée en consultant des applications Web telles que Google+, LinkedIn, Podio, etc. Découvrez ces captures d'écran du kit d'interface utilisateur - il semble que cette tendance soit assez courante.
La question est: est-ce une tendance ou en fait mieux pour les utilisateurs? D'après mon expérience (prendre une application Web qui avait des éléments plus sombres et un fond tout blanc et ensuite la rendre "plate", en ajoutant le fond gris et les "cartes"), cela semble être un meilleur itinéraire. Ceci est basé sur les commentaires des utilisateurs qui utilisent fortement l'application avant et après la refonte.
J'ai toujours pensé que pour un long texte, le texte inversé est vraiment difficile à lire, mais pendant de longues heures, c'est une aubaine. Considérez comment la plupart des programmeurs regardent leur environnement. Il y a une bonne raison pour cela:
Le thème JetBrains Darcula a été extrêmement populaire car il est à la fois contraste élevé et désaturé. Vous pouvez offrir une option similaire dans le blues de minuit qui est tout aussi agréable pour les yeux. Notez que nous jetons également les 20% supérieurs et inférieurs de l'échelle de luminosité.
Vais-je lire un roman comme celui-ci? Probablement pas. Ce style d'interface est idéal pour digérer des blocs d'informations pendant des heures. C'est affreux pour les paragraphes.
Le gris clair et d'autres nuances claires sur le blanc ou une autre couleur claire sont purement mauvais pour certains d'entre nous. Je ne peux tout simplement pas le lire. Demandez à des personnes âgées de vérifier vos choix sur une variété de moniteurs avant de penser que tout le monde devrait juste aimer crème glacée à la réglisse-exlax juste parce que vous pensez que cela a bon goût.
Ce serait bien si les gens essayaient ces combinaisons sur une variété de moniteurs sans peaufiner pour voir que ce qui est acceptable sur certains, est en fait inexistant sur d'autres. J'ai été vraiment époustouflé quand j'ai vu que l'un des mouvements de contraste de Google Maps avait en fait routes sur certaines configurations de moniteur.
Personnellement, j'échouerais environ 3/4 des images avi publiées ci-dessus comme étant trop tendues pour déranger.