Études de combinaisons de couleurs mettant en évidence la syntaxe

La plupart des programmeurs ont leurs propres préférences personnelles en ce qui concerne les combinaisons de couleurs mettant en évidence la syntaxe, mais je me demandais si quelqu'un avait déjà mené une étude scientifique sur les meilleures combinaisons de couleurs possibles. J'imagine qu'une telle étude examinerait des éléments tels que la lisibilité du code, si les yeux du programmeur sont attirés par les parties les plus importantes, etc.

Cela a peut-être déjà été fait pour quelque chose comme le thème par défaut de Visual Studio, mais j'aimerais savoir s'il existe des études accessibles au public et ce qu'elles ont trouvé.

Les combinaisons de couleurs spécifiques ne peuvent pas être objectivement meilleures que toutes les autres combinaisons de couleurs; leur classement serait individuellement subjectif en fonction du goût et de facteurs culturels.

Toutefois, certaines règles de lisibilité / clarté, d'utilisation dans des environnements de lumière ambiante particuliers, etc., etc., sont applicables; elles découleraient de la conception graphique / typographie, de l'interface homme-machine et d'autres études connexes.

Le projet Solarized d'Ethan Schoonover est un travail intéressant: http://ethanschoonover.com/solarized

L’étude de 2004: "L’incidence des combinaisons de couleurs fond / page de pages Web sur la lisibilité, la rétention, l’esthétique et l’intention comportementale" de Hall & Hanna . Cependant, ce n'est pas pour le code mais pour les pages Web et le seul jeu de couleurs qu'ils considèrent est celui des couleurs d'avant-plan et d'arrière-plan.

J'ai posé une question sur les schémas de couleurs liés aux études pour les programmeurs sur Skepics.SE: "Les schémas de couleurs claires / sombres pour les écrans d'ordinateur sont-ils meilleurs pour les programmeurs?" . Cela fait presque deux ans que nous n’avons pas répondu à cette question, alors que normalement ce type de question obtient une réponse assez rapidement. Ce qui me porte à croire qu'il n'y a pas de telles études scientifiques.

Nous avons récemment mené une étude sur les présentations de code visuellement plus riches que la coloration syntaxique. Bien que ce ne soit pas vraiment une étude sur les schémas de coloration syntaxique, vous pourriez le trouver intéressant:

D. Asenov et O. Hilliges et P. Müller - L'effet des visualisations plus riches sur la compréhension du code . Voici la vidéo de la conférence de 10 minutes à la conférence CHI 2016.

Nous avons comparé la mise en évidence de la syntaxe Eclipse standard à deux présentations plus riches de code avec des extras visuels tels que:

• Contours au lieu d'accolades
• Alternance de couleurs d'arrière-plan, au lieu de virgules, pour séparer les éléments de la liste
• Icônes au lieu de quelques mots-clés
• Couleurs de fond supplémentaires pour certaines déclarations et expressions

L'étude a montré que l'augmentation de la variété visuelle de la présentation avait un effet assez important sur la rapidité avec laquelle les développeurs pouvaient comprendre la structure du code - le temps était réduit de jusqu'à 75%. Il est important de noter qu'il s'agit de questions simples concernant la structure du code (par exemple, "Y a-t-il des boucles imbriquées dans la méthode?"). Nous n'avons pas testé les tâches nécessitant une réflexion complexe (par exemple, "Qu'est-ce que cette méthode fait?"), Car elles sont dominées par les compétences de la personne plutôt que par les effets de la présentation du code.

Une conclusion intéressante de notre étude est que nous n'avons pas observé de surcharge visuelle en raison des plus riches visualisations. Même si de nombreux participants ont déclaré avoir ressenti une certaine surcharge visuelle ou une certaine confusion visuelle, les données que nous avons collectées (le temps nécessaire pour donner une réponse et déterminer si elles étaient correctes) ne montrent une amélioration qu'avec des visualisations plus riches.

En ce qui concerne la mise en évidence de la syntaxe, nos résultats suggèrent indirectement qu’il serait bénéfique d’utiliser une plus grande variété visuelle (par exemple plus de couleurs et des couleurs pour davantage de types de constructions de programmation). Par exemple, un thème avec des couleurs séparées pour les types intégrés, les mots-clés de flux de contrôle et le reste des mots-clés est susceptible d'améliorer la compréhension de la structure du code dans certains cas, par rapport à un thème simple qui utilise une seule couleur pour tous. mots clés.

Je ne pense pas que de telles études existent. En pratique, lorsqu'une entreprise crée un nouvel IDE, le jeu de couleurs de mise en évidence de la syntaxe est basé sur les jeux existants d'autres IDE.

Par exemple, le thème Visual Studio par défaut n'a rien de nouveau ni d'original . La couleur bleue a été utilisée pendant des années pour les mots-clés, y compris par les anciens IDE Ada. Même chose pour les commentaires verts. Certaines couleurs étaient plus ou moins "nouvelles", comme sarcelle pour les noms de classes, mais vous pouvez facilement comprendre la raison du choix de ces couleurs: il serait raisonnable de définir une couleur qui ne soit pas très éloignée du bleu un peu comme des mots réservés: Int32pour .NET, intpour C #, etc.), mais il doit rester une couleur de base, distincte du bleu déjà utilisé.

Maintenant, qu'en est-il des schémas alternatifs, comme le texte clair populaire sur fond sombre? Ils ne sont pas créés par un scientifique qui a étudié le sujet pendant des années et qui a fait des calculs compliqués pour obtenir la correspondance parfaite. Au lieu de cela, un développeur crée un schéma lisible par lui. Il le partage sur un site Web et il devient populaire . C'est toute la magie.

Dernière chose: existe-t-il des règles de lisibilité? Pas trop.

• Pour la plupart, c'est quelque chose de subjectif : vous ne pouvez pas prétendre qu'un mot clé bleu est plus lisible qu'un mot clé violet, car quelqu'un serait en mesure de répondre que pour lui, sur son moniteur, le mot clé violet est beaucoup plus lisible que le mot bleu. .

• Pour une autre partie, c'est juste logique . Un schéma en noir et blanc ne serait pas aussi lisible que celui par défaut. De la même manière, vous ne pouvez pas définir les mots clés en jaune clair et les commentaires en gris clair (par exemple #eee) sur un fond blanc, car ils sont illisibles et vous n'avez même pas à expliquer pourquoi. Ce sont les mêmes règles lors de la création d'un site Web ou de l'impression d'un livre ou quoi que ce soit.

Comme une sorte d'étude approximative, les captures d'écran ci-dessous montrent 3 thèmes de couleurs utilisés pour mettre en surbrillance la syntaxe XSLT. J'ai choisi XSLT car cela pose un défi particulier en raison du grand nombre d'éléments de langage, mais aussi parce que de nombreux développeurs le décrivent comme étant laid.

Solarisé

Nuit de demain

Github

Observations

Le nombre de couleurs utilisées dans l'échantillon permet de distinguer les différents éléments de langage, mais peut distraire le développeur.

Si possible, il est préférable de passer des couleurs froides aux couleurs chaudes, en utilisant des couleurs froides pour les parties les plus neutres de la langue. Une alternative consiste à passer des tons pastel à des tons plus vifs (saturation de la teinte).

La couleur de fond fait une énorme différence dans la perception des couleurs de premier plan.

Certaines couleurs d'avant-plan adjacentes peuvent provoquer des collisions gênantes, notamment le rouge et le vert, qui ne semblent pas aller bien ensemble.

Avec un fond sombre, il est plus facile de fournir une large gamme de couleurs de premier plan avec un contraste suffisant entre elles et le fond.

Enfin, des facteurs externes tels que la lumière ambiante, la qualité et l'étalonnage du moniteur font toute la différence.

Conclusion

Il est préférable d'utiliser des outils offrant un moyen extensible de définir des thèmes de couleur, car il est peu probable qu'un seul thème de couleur réponde aux besoins de tous les développeurs. Même un même développeur peut fréquemment changer de préférence en fonction de divers facteurs.

Eh bien, je suppose que la première question sera de savoir si le fond blanc est une si bonne idée. Ce n'est pas parce que le papier est proche du papier réel et que l'on en trouve partout sur Internet que le choix est bon (ou peut-être parfait).

Je me souviens qu’il ya (bien des années), nous n’avions que le «schéma de couleurs» jaune sur noir. Et je me souviens aussi que ce n'était pas si grave. Il n'y avait pas ce contraste en noir et blanc. Il n'y a pas si longtemps, j'ai appris que c'était également meilleur pour l'œil humain.

Parfois, je me demande vraiment qui conçoit les combinaisons de couleurs qui sont, par exemple, livrées avec les systèmes d’exploitation. Je les ignore généralement, mais je me souviens avoir vu des mélanges vraiment impressionnants de rose et de vert, etc. Eh bien, je ne me drogue pas ...

Il existe certaines études sur les effets des couleurs sur votre subconscient (calmez-vous, provoquez des agressions, ...). Je pense que les jeux de couleurs couramment utilisés sont en quelque sorte basés sur cela. Peut-être qu'ils viennent d'ajouter de la lisibilité. Le codage ne devrait pas être une mission suicide.

Mais en ce qui concerne la palette de couleurs des IDE actuels, tout va bien. Regardons les choses en face: l’idée simple est de faciliter la recherche d’un élément différent du "bruit de code" général. Et pour être honnête, je ne me soucie pas vraiment des couleurs qu'ils utilisent pour permettre cela. Cela ne devrait tout simplement pas me faire mal aux yeux ni brûler des parties du code à l'arrière de la tête, comme un rouge éclatant sur un ton de vert.

Le codage devrait être relaxant. Et c'est ce que c'est pour moi.