Estudios de esquema de color de resaltado de sintaxis

La mayoría de los programadores tienen sus propias preferencias personales para los esquemas de color de resaltado de sintaxis, pero me he estado preguntando, ¿alguien ha hecho un estudio científico real sobre cuál sería el mejor esquema de color? Me imagino que tal estudio vería cosas como la legibilidad del código, si los ojos del programador se sienten atraídos por las partes más importantes, etc.

Tal vez esto ya se hizo para algo como el tema predeterminado de Visual Studio, pero me gustaría saber si hay estudios disponibles públicamente y qué encontraron.

Los esquemas de color específicos no pueden ser objetivamente mejores que todos los demás esquemas de color, su clasificación sería individualmente subjetiva según el gusto y los factores culturales.

Sin embargo, se aplican ciertas reglas de legibilidad / claridad, uso en entornos de luz ambiental particulares, etc.

El proyecto Solarized de Ethan Schoonover es un trabajo interesante: http://ethanschoonover.com/solarized

Solo un estudio moderadamente reciente que está remotamente relacionado con el tema que conozco es uno de 2004: "El impacto de las combinaciones de colores de texto de fondo de la página web en la legibilidad, retención, estética e intención de comportamiento" de Hall & Hanna . Sin embargo, no es por el código sino por las páginas web y el único esquema de color que consideran es el primer plano y los colores de fondo.

He hecho una pregunta sobre los esquemas de color relacionados con los estudios para programadores en Skepics.SE: "¿Son los esquemas de color claros sobre oscuros para pantallas de computadora mejores para los programadores?" . No se ha respondido en casi 2 años, mientras que normalmente ese tipo de preguntas se responden rápidamente allí. Lo que me lleva a creer que no existen tales estudios científicos.

Recientemente hicimos un estudio de usuario sobre presentaciones de código que son visualmente más ricas que el resaltado de sintaxis. Si bien no es un estudio completo sobre esquemas de resaltado de sintaxis, puede resultarle útil:

D. Asenov y O. Hilliges y P. Müller: el efecto de las visualizaciones más ricas en la comprensión del código y aquí está el video de la charla de 10 minutos en CHI 2016.

Comparamos el resaltado de sintaxis estándar de Eclipse con dos presentaciones más ricas de código con extras visuales como:

• Contornos en lugar de llaves
• Alternar colores de fondo, en lugar de comas, para separar elementos de la lista
• Iconos en lugar de algunas palabras clave
• Colores de fondo adicionales para algunas declaraciones y expresiones

El estudio mostró que aumentar la variedad visual de la presentación tuvo un efecto bastante grande en la velocidad con la que los desarrolladores podían comprender la estructura del código: el tiempo se redujo hasta en un 75%. Es importante tener en cuenta que se trata de preguntas simples sobre la estructura del código (por ejemplo, "¿Hay bucles anidados en el método?"). No probamos las tareas que requieren un pensamiento complejo (por ejemplo, "¿Qué hace este método?"), Ya que estas están dominadas por la habilidad de la persona en lugar de los efectos de la presentación del código.

Un hallazgo interesante de nuestro estudio es que no observamos ninguna sobrecarga visual debido a las visualizaciones más ricas. Aunque muchos participantes dijeron que sentían cierta sobrecarga visual o confusión, los datos que recopilamos (tiempo para proporcionar una respuesta y si era correcta) solo mostraron una mejora con visualizaciones más ricas.

Con respecto al resaltado de sintaxis, nuestros hallazgos sugieren indirectamente que usar más variedad visual (por ejemplo, más colores y colores para más tipos de construcciones de programación) será beneficioso. Por ejemplo, un tema con colores separados para los tipos incorporados, las palabras clave de flujo de control y el resto de las palabras clave, probablemente mejorará la comprensión de la estructura del código en algunos casos, en comparación con un tema simple que utiliza un solo color para todos palabras clave

No creo que existan tales estudios. En la práctica, cuando una empresa crea un nuevo IDE, el esquema de color de resaltado de sintaxis se basa en los esquemas existentes de otros IDE.

Por ejemplo, el tema predeterminado de Visual Studio no tiene nada nuevo ni original . El color azul se usó para palabras clave durante años, incluidos los IDE Ada antiguos. Lo mismo para los comentarios verdes. Algunos colores eran más o menos "nuevos", como el verde azulado para los nombres de las clases, pero puede comprender fácilmente la razón detrás de la elección de esos colores: sería razonable establecer un color que no esté lejos del azul (ya que esos son más o menos como palabras reservadas: Int32para .NET, intpara C #, etc.), pero debe mantener un color básico, distinto del azul ya utilizado.

Ahora, ¿qué pasa con esquemas alternativos, como el popular texto claro sobre fondo oscuro? No fueron creados por un científico que estudió el tema durante años e hizo un cálculo complicado para obtener la combinación perfecta exacta. En cambio, un desarrollador crea un esquema que es legible para él. Lo comparte en un sitio web y se vuelve popular . Esa es toda la magia.

Lo último: ¿hay reglas de legibilidad? No demasiado.

• En su mayor parte, es algo subjetivo : no se puede argumentar que una palabra clave azul es más legible que una palabra clave púrpura, porque alguien podría responder que para él, en su monitor, la palabra clave púrpura es mucho más legible que la azul. .

• Por otra parte, es lógico . Un esquema en blanco y negro no sería tan legible como el predeterminado. De la misma manera, no puede configurar las palabras clave para que sean de color amarillo claro y los comentarios para que sean de color gris claro (digamos #eee) sobre un fondo blanco, porque es ilegible y ni siquiera tiene que explicar por qué. Esas son las mismas reglas al hacer un sitio web o imprimir un libro o lo que sea.

Como una especie de estudio preliminar, las capturas de pantalla a continuación muestran 3 temas de color utilizados para resaltar la sintaxis XSLT. Elegí XSLT porque representa un desafío particular debido a la gran cantidad de elementos del lenguaje, y también porque muchos desarrolladores lo describen como feo.

Solarizado

Noche de mañana

Github

Observaciones

La cantidad de colores utilizados en la muestra ayuda a distinguir los diferentes elementos del lenguaje, pero puede ser una distracción para un desarrollador.

Ayuda a progresar de colores fríos a cálidos si es posible, usando colores fríos para las partes más neutrales del idioma. Una alternativa es cambiar de tonos pastel a tonos más vivos (saturación de tono).

El color de fondo hace una gran diferencia en la percepción de los colores de primer plano.

Algunos colores de primer plano adyacentes pueden causar malos choques que perturban el ojo, en particular el rojo y el verde no parecen ir bien juntos.

Con un fondo oscuro es más fácil proporcionar una amplia gama de colores de primer plano con suficiente contraste entre sí y con el fondo.

Por último, los factores externos como la luz ambiental y la calidad y calibración del monitor hacen una gran diferencia.

Conclusión

Es mejor utilizar herramientas que proporcionen una forma extensible de configurar temas de color, ya que es poco probable que un solo tema de color satisfaga las necesidades de todos los desarrolladores, e incluso el mismo desarrollador puede cambiar sus preferencias con frecuencia dependiendo de una variedad de factores.

Bueno, supongo que la primera pregunta será si el fondo blanco es una gran idea. El hecho de que se acerque al papel real y que podemos encontrar en todas partes en Internet en estos días no necesariamente lo convierte en una buena opción (o podría decir que perfecta).

Recuerdo que (muchos, muchos) años atrás solo teníamos el "esquema de color" amarillo sobre negro. Y también recuerdo que no fue tan malo. No tenía ese contraste como blanco y negro. No hace mucho tiempo aprendí que también es mejor para el ojo humano.

A veces me pregunto quién diseña los esquemas de color que, por ejemplo, se envían con los sistemas operativos. Usualmente los ignoro, pero recuerdo haber visto mezclas realmente asombrosas de rosa y verde y otras cosas. Bueno, yo no consumo drogas ...

Hay algunos estudios sobre lo que los colores le hacen a tu subconsciencia (cálmate, causa agresiones, ...). Estoy pensando que los esquemas de color comúnmente utilizados se basan en algo en eso. Tal vez simplemente agregaron legibilidad. La codificación no debería ser una misión suicida.

Pero en lo que respecta al esquema de color de los IDE actuales, estoy de acuerdo. Seamos realistas: la idea simple detrás de esto es hacer que sea más fácil encontrar algo que sea diferente del "ruido de código" general. Y para ser honesto, realmente no me importa qué colores usan para permitir eso. Simplemente no debería lastimar mis ojos ni quemar partes del código en la parte posterior de mi cabeza, como un rojo brillante en algún tono de verde.

La codificación debe ser relajante. Y eso es lo que es para mí.