Studi di combinazioni di colori che evidenziano la sintassi

Gli schemi di colori specifici non possono essere oggettivamente migliori di tutti gli altri schemi di colori, la loro classifica sarebbe soggettiva in base ai gusti e ai fattori culturali.

Tuttavia, sono applicabili alcune regole di leggibilità / chiarezza, uso in particolari ambienti luminosi, ecc. ecc., che potrebbero essere trasferite dalla progettazione grafica / tipografia, all'interfaccia uomo-macchina e ad altri studi correlati.

Il progetto Solarized di Ethan Schoonover è un lavoro interessante: link

Sono solo uno studio moderatamente recente che è in remoto correlato all'argomento che conosco, uno del 2004: " L'impatto del colore dello sfondo del testo della pagina web combinazioni su leggibilità, conservazione, estetica e l'intenzione comportamentale " di Hall & Hanna . Tuttavia, non è per il codice ma per le pagine Web e l'unica combinazione di colori che considerano i colori di primo piano e di sfondo.

Ho fatto una domanda sugli schemi cromatici relativi agli studi per i programmatori su Skepics.SE: " I colori chiari per schermi di computer sono migliori per i programmatori? " . Non è stata data risposta in quasi 2 anni, mentre normalmente quel tipo di domanda ha una risposta abbastanza veloce lì. Il che mi porta a credere che non ci siano studi scientifici del genere.

Recentemente abbiamo fatto uno studio dell'utente su presentazioni di codice visivamente più ricche rispetto all'evidenziazione della sintassi. Sebbene non si tratti di uno studio sugli schemi di evidenziazione della sintassi, potresti trovarlo intuitivo:

D. Asenov e O. Hilliges e P. Müller - L'effetto di visualizzazioni più complete sulla comprensione del codice ed ecco il video del talk di 10 minuti a CHI 2016.

Abbiamo confrontato l'evidenziazione della sintassi Eclipse standard con due presentazioni più ricche di codice con elementi visivi quali:

• Profili invece di parentesi graffe
• Alternando i colori di sfondo, anziché le virgole, per separare gli elementi della lista
• Icone anziché alcune parole chiave
• Altri colori di sfondo per alcune istruzioni ed espressioni

Lo studio ha dimostrato che l'aumento della varietà visiva della presentazione ha avuto un effetto piuttosto grande sulla velocità con cui gli sviluppatori potevano comprendere la struttura del codice: il tempo è stato ridotto fino al 75%. È importante notare che si tratta di semplici domande riguardanti la struttura del codice (ad es. "Ci sono cicli annidati nel metodo?"). Non abbiamo testato compiti che richiedono un pensiero complesso (ad es. "Che cosa fa questo metodo?"), Poiché questi sono dominati dall'abilità della persona piuttosto che dagli effetti della presentazione del codice.

Un risultato interessante del nostro studio è che abbiamo non osservato qualsiasi sovraccarico visivo a causa delle visualizzazioni più ricche. Anche se molti partecipanti hanno affermato di aver avvertito un sovraccarico o una confusione visiva, i dati raccolti (tempo per fornire una risposta e se era corretto) hanno mostrato solo miglioramenti con visualizzazioni più ricche.

Per quanto riguarda l'evidenziazione della sintassi, i nostri risultati suggeriscono indirettamente che l'utilizzo di una maggiore varietà visiva (ad esempio più colori e colori per più tipi di costrutti di programmazione) sarà vantaggioso. Per esempio. un tema con colori separati per tipi predefiniti, parole chiave del flusso di controllo e il resto delle parole chiave, in alcuni casi è in grado di migliorare la comprensione della struttura del codice rispetto a un tema semplice che utilizza un unico colore per tutte le parole chiave .

Non penso che esistano studi simili. In pratica, quando un'azienda crea un nuovo IDE, la combinazione di colori di evidenziazione della sintassi si basa sugli schemi esistenti di altri IDE.

Ad esempio, il tema predefinito di Visual Studio non ha nulla di nuovo né originale . Il colore blu è stato utilizzato per le parole chiave per anni, inclusi i vecchi IDE Ada. Stessa cosa per i commenti verdi. Alcuni colori erano più o meno "nuovi", come l'acqua verde per i nomi delle classi, ma puoi facilmente capire il motivo della scelta di quei colori: sarebbe ragionevole impostare un colore che non sia lontano dal blu (poiché quelli sono praticamente come le parole riservate: Int32 per .NET, int per C #, ecc.), ma deve rimanere un colore di base, distinto dal blu già utilizzato.

Ora, che dire degli schemi alternativi, come il popolare testo chiaro su sfondo scuro? Non sono stati creati da uno scienziato che ha studiato l'argomento per anni e fatto alcuni calcoli complicati per ottenere l'esatta corrispondenza perfetta. Invece, uno sviluppatore crea uno schema che è leggibile per lui. Lo condivide su un sito web e diventa popolare . Questa è tutta la magia.

Ultima cosa: ci sono delle regole di leggibilità? Non troppo.

• Per la maggior parte, è qualcosa di soggettivo : non puoi sostenere che una parola chiave blu sia più leggibile di una parola chiave viola, perché qualcuno sarebbe in grado di rispondere che per lui, in il suo monitor, la parola chiave viola è molto più leggibile di quella blu.

• Per un'altra parte, è solo logico . Uno schema in bianco e nero non sarebbe leggibile come quello predefinito. Allo stesso modo, non è possibile impostare le parole chiave in giallo chiaro e i commenti in grigio chiaro (diciamo #eee ) su uno sfondo bianco, perché illeggibile e non è nemmeno necessario spiegare perché. Queste sono le stesse regole quando realizzi un sito web o stampi un libro o qualsiasi cosa.

Come una sorta di studio approssimativo, le schermate seguenti mostrano 3 temi di colore usati per la sintassi evidenziare XSLT. Ho scelto XSLT perché pone una sfida particolare a causa dell'elevato numero di elementi del linguaggio e anche perché molti sviluppatori lo descrivono come brutto.

solarizzata

TommorowNight

Github

Osservazioni

Il numero di colori utilizzati nell'esempio aiuta a distinguere i diversi elementi del linguaggio, ma potrebbe rivelarsi fonte di distrazione per uno sviluppatore.

Aiuta a progredire da colori freddi a caldi, se possibile, usando colori freddi per le parti più neutre della lingua. Un'alternativa è quella di passare dalle tonalità pastello a quelle più vivaci (saturazione della tonalità).

Il colore di sfondo fa una grande differenza per la percezione dei colori di primo piano.

Alcuni colori in primo piano adiacenti possono causare cattivi scontri che disturbano l'occhio, in particolare il rosso e il verde non sembrano andare bene insieme.

Con uno sfondo scuro è più facile fornire una vasta gamma di colori in primo piano con sufficiente contrasto l'uno con l'altro e lo sfondo.

Infine, fattori esterni come la luce ambientale e la qualità e la calibrazione del monitor fanno una grande differenza.

Conclusione

È preferibile utilizzare strumenti che forniscano un modo estensibile per l'impostazione di temi cromatici poiché è improbabile che un singolo tema cromatico soddisfi le esigenze di tutti gli sviluppatori, e anche lo stesso sviluppatore può cambiare spesso le proprie preferenze a seconda di una varietà di fattori.

Bene, immagino che la prima domanda sarà se lo sfondo bianco è o meno una grande idea. Solo perché si avvicina alla carta vera e possiamo trovare ovunque su Internet in questi giorni non è necessariamente una buona scelta (o posso dire perfetta).

Ricordo che (molti molti) anni fa avevamo solo la "combinazione di colori" giallo-nero. E ricordo anche che non era poi così male. Non aveva quel contrasto come nero e bianco. Non molto tempo fa ho imparato che è anche meglio all'occhio umano.

A volte mi chiedo davvero chi progetta gli schemi di colori che, ad es. essere spedito con i sistemi operativi. Di solito li ignoro, ma ricordo di aver visto mix davvero meravigliosi di rosa e verde e quant'altro. Beh, io non faccio droghe ...

Ci sono alcuni studi su quali colori fanno al tuo subconscio (calmati, provocano aggressioni, ...). Penso che gli schemi cromatici comunemente usati siano in qualche modo basati su questo. Forse hanno appena aggiunto la leggibilità. La codifica non dovrebbe essere una missione suicida.

Ma per quanto riguarda lo schema dei colori degli IDE attuali, ci sto bene. Ammettiamolo: l'idea alla base è semplificare la ricerca di qualcosa di diverso dal "codice rumore" generale. E ad essere onesti non mi interessa davvero quali colori usano per permetterlo. Non dovrebbe ferire i miei occhi o bruciare parti del codice nella parte posteriore della mia testa, come un rosso abbagliante su qualche tono di verde.

La codifica dovrebbe essere rilassante. E questo è quello che è per me.