Estudos de esquema de cores com destaque de sintaxe

A maioria dos programadores tem suas próprias preferências pessoais para esquemas de cores com destaque de sintaxe, mas eu tenho me perguntado: alguém já fez um estudo científico real sobre qual seria o melhor esquema de cores? Eu imagino que esse estudo analise coisas como a legibilidade do código, se os olhos do programador são atraídos para as partes mais importantes etc.

Talvez isso já tenha sido feito para algo como o tema padrão do Visual Studio, mas eu gostaria de saber se existem estudos publicamente disponíveis e o que eles encontraram.

Esquemas de cores específicos não podem ser objetivamente melhores que todos os outros esquemas de cores; sua classificação seria individualmente subjetiva com base no sabor e em fatores culturais.

No entanto, são aplicáveis ​​certas regras de legibilidade / clareza, uso em ambientes com luz ambiente especial etc etc ..., que seriam herdadas do design gráfico / tipografia, da interface humano-computador e de outros estudos relacionados.

O projeto Solarized de Ethan Schoonover é um trabalho interessante: http://ethanschoonover.com/solarized

Eles apenas um estudo moderadamente recente, remotamente relacionado ao assunto que conheço, é de 2004: "O impacto das combinações de cores de texto e fundo da página da Web na legibilidade, retenção, estética e intenção comportamental" de Hall & Hanna . No entanto, não é para o código, mas para as páginas da web e o único esquema de cores que eles consideram são as cores de primeiro e segundo plano.

Eu fiz perguntas sobre estudos relacionados a esquemas de cores para programadores no Skepics.SE: "Os esquemas de cores claras e escuras para telas de computador são melhores para programadores?" . Não há resposta há quase dois anos, enquanto normalmente esse tipo de pergunta é respondido rapidamente. O que me leva a acreditar que não existem estudos científicos.

Recentemente, fizemos um estudo com usuários sobre apresentações de código visualmente mais ricas do que o destaque da sintaxe. Embora não seja um estudo completo sobre esquemas de destaque de sintaxe, você pode achar interessante:

D. Asenov e O. Hilliges e P. Müller - O Efeito de Visualizações Mais Ricas na Compreensão do Código e aqui está o vídeo da palestra de 10 minutos no CHI 2016.

Comparamos a sintaxe padrão do Eclipse, destacando-se com duas apresentações mais ricas de código com extras visuais, como:

• Contornos em vez de chaves
• Alternando cores de plano de fundo, em vez de vírgulas, para separar elementos da lista
• Ícones em vez de algumas palavras-chave
• Cores de fundo adicionais para algumas instruções e expressões

O estudo mostrou que o aumento da variedade visual da apresentação teve um efeito bastante grande na velocidade com que os desenvolvedores puderam entender a estrutura do código - o tempo foi reduzido em até 75%. É importante observar que se trata de perguntas simples relacionadas à estrutura do código (por exemplo, "Existem loops aninhados no método?"). Não testamos tarefas que requerem pensamento complexo (por exemplo, "O que esse método faz?"), Pois elas são dominadas pela habilidade da pessoa e não pelos efeitos da apresentação do código.

Uma descoberta interessante do nosso estudo é que não observamos nenhuma sobrecarga visual devido às visualizações mais ricas. Embora muitos participantes tenham dito que sentiram alguma sobrecarga ou confusão visual, os dados que coletamos (tempo para fornecer uma resposta e se estava correto) mostraram apenas melhorias com visualizações mais ricas.

Com relação ao realce da sintaxe, nossas descobertas sugerem indiretamente que o uso de mais variedade visual (por exemplo, mais cores e cores para mais tipos de construções de programação) será benéfico. Por exemplo, um tema com cores separadas para tipos internos, palavras-chave de fluxo de controle e o restante das palavras-chave provavelmente melhora o entendimento da estrutura do código em alguns casos, em comparação com um tema simples que usa uma única cor para todos palavras-chave.

Eu não acho que esses estudos existam. Na prática, quando uma empresa cria um novo IDE, o esquema de cores que destaca a sintaxe é baseado nos esquemas existentes de outros IDEs.

Por exemplo, o tema padrão do Visual Studio não tem nada de novo nem original . A cor azul foi usada para palavras-chave por anos, inclusive pelos antigos IDEs da Ada. A mesma coisa para comentários verdes. Algumas cores eram mais ou menos "novas", como verde-azulado para os nomes das classes, mas você pode entender facilmente o motivo por trás da escolha dessas cores: seria razoável definir uma cor que não esteja longe do azul (já que são praticamente como palavras reservadas: Int32para .NET, intC # etc.), mas deve permanecer com uma cor básica, diferente do azul já usado.

Agora, e os esquemas alternativos, como o texto claro popular em fundo escuro? Eles não são criados por um cientista que estudou o assunto por anos e fez alguns cálculos complicados para obter a combinação perfeita exata. Em vez disso, um desenvolvedor cria um esquema que é legível para ele. Ele o compartilha em um site, e ele se torna popular . Isso é toda a mágica.

Última coisa: existem regras de legibilidade? Não muito.

• Na maioria das vezes, é algo subjetivo : você não pode argumentar que uma palavra-chave azul é mais legível que uma palavra-chave roxa, porque alguém seria capaz de responder do que para ele; em seu monitor, a palavra-chave roxa é muito mais legível que a azul .

• Por outra parte, é apenas lógico . Um esquema em preto e branco não seria tão legível quanto o padrão. Da mesma maneira, não é possível definir palavras-chave como amarelo claro e comentários como cinza claro (digamos #eee) sobre um fundo branco, porque é ilegível e você nem precisa explicar o porquê. Essas são as mesmas regras ao criar um site ou imprimir um livro ou qualquer outra coisa.

Como uma espécie de estudo aproximado, as capturas de tela abaixo mostram três temas de cores usados ​​para destacar a sintaxe do XSLT. Eu escolhi o XSLT porque ele apresenta um desafio particular por causa do grande número de elementos da linguagem - e também porque muitos desenvolvedores o descrevem como feio.

Solarizado

Noite de amanhã

Github

Observações

O número de cores usadas na amostra ajuda a distinguir os diferentes elementos do idioma, mas pode ser uma distração para o desenvolvedor.

Ajuda a progredir das cores frias para as quentes, se possível, usando cores frias para as partes mais neutras do idioma. Uma alternativa é mudar de tons pastel para tons mais vívidos (saturação de matiz).

A cor do plano de fundo faz uma enorme diferença na percepção das cores do primeiro plano.

Algumas cores adjacentes do primeiro plano podem causar confrontos ruins que perturbam os olhos, em particular o vermelho e o verde não parecem estar bem juntos.

Com um fundo escuro, é mais fácil fornecer uma ampla variedade de cores de primeiro plano com contraste suficiente entre si e com o fundo.

Por fim, fatores externos como a luz ambiente e a qualidade e calibração do monitor fazem uma enorme diferença.

Conclusão

É melhor usar ferramentas que forneçam uma maneira extensível de definir temas de cores, pois é improvável que um único tema de cor atenda às necessidades de todos os desenvolvedores, e mesmo o mesmo desenvolvedor pode mudar com frequência sua preferência, dependendo de vários fatores.

Bem, acho que a primeira pergunta será se o fundo branco é ou não uma ótima idéia. Só porque se aproxima do papel real e podemos encontrar em toda parte na Internet hoje em dia, não necessariamente a torna uma boa (ou melhor, perfeita) escolha.

Lembro-me que (muitos) anos atrás, tínhamos apenas o "esquema de cores" amarelo-preto. E eu também lembro que não foi tão ruim assim. Não tinha esse contraste em preto e branco. Não faz muito tempo, aprendi que também é melhor para o olho humano.

Às vezes, eu realmente me pergunto quem cria os esquemas de cores que, por exemplo, são enviados com sistemas operacionais. Eu geralmente os ignoro, mas lembro de ter visto misturas realmente incríveis de rosa e verde e outros enfeites. Bem, eu não uso drogas ...

Existem alguns estudos sobre o que as cores fazem no seu subconsciente (acalme-se, cause agressões, ...). Eu estou pensando que os esquemas de cores comumente usados ​​são um pouco baseados nisso. Talvez eles tenham acrescentado legibilidade. A codificação não deve ser uma missão suicida.

Mas, no que diz respeito ao esquema de cores dos atuais IDEs, estou bem com isso. Vamos ser sinceros: a idéia simples por trás disso é facilitar a localização de algo diferente do "ruído de código" geral. E para ser sincero, eu realmente não me importo com as cores que eles usam para permitir isso. Isso simplesmente não deveria machucar meus olhos ou queimar partes do código na parte de trás da minha cabeça, como um vermelho brilhante em algum tom de verde.

A codificação deve ser relaxante. E é isso que é para mim.