Studi di combinazioni di colori che evidenziano la sintassi

La maggior parte dei programmatori ha le proprie preferenze personali per le combinazioni di colori che evidenziano la sintassi, ma mi chiedevo, qualcuno ha mai fatto un vero studio scientifico su quale sarebbe la migliore combinazione di colori? Immagino che uno studio del genere guarderebbe a cose come la leggibilità del codice, se gli occhi del programmatore siano attratti dalle parti più importanti, ecc.

Forse questo è già stato fatto per qualcosa come il tema predefinito di Visual Studio, ma mi piacerebbe sapere se ci sono studi disponibili pubblicamente là fuori e cosa hanno trovato.

Le combinazioni di colori specifici non possono essere oggettivamente migliori di tutte le altre combinazioni di colori, la loro classifica sarebbe individualmente soggettiva in base al gusto e ai fattori culturali.

Tuttavia, sono applicabili alcune regole per la leggibilità / chiarezza, l'uso in particolari ambienti di luce ambientale ecc. Ecc., Che verrebbero trasferiti dalla progettazione grafica / tipografia, dall'interfaccia del computer umano e da altri studi correlati.

Il progetto Solarized di Ethan Schoonover è un lavoro interessante: http://ethanschoonover.com/solarized

Hanno solo uno studio moderatamente recente che è in remoto correlato all'argomento che conosco è uno del 2004: "L'impatto delle combinazioni di colori di sfondo del testo della pagina Web sulla leggibilità, la conservazione, l'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 sono i colori di primo piano e di sfondo.

Ho fatto domande sugli studi relativi alle combinazioni di colori per i programmatori su Skepics.SE: "Le combinazioni di colori chiaro-scuro per gli schermi dei computer sono migliori per i programmatori?" . Non gli è stata data risposta da quasi 2 anni, mentre normalmente quel tipo di domanda riceve una risposta abbastanza rapidamente lì. Il che mi porta a credere che non ci siano tali studi scientifici.

Recentemente abbiamo condotto uno studio utente su presentazioni di codice visivamente più ricche dell'evidenziazione della sintassi. Sebbene non sia proprio uno studio sugli schemi di evidenziazione della sintassi, potresti trovarlo perspicace:

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

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

• Contorni invece di parentesi graffe
• Colori di sfondo alternati, anziché virgole, per separare gli elementi dell'elenco
• Icone anziché alcune parole chiave
• Colori di sfondo aggiuntivi per alcune dichiarazioni 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 relative alla struttura del codice (ad es. "Ci sono loop nidificati nel metodo?"). Non abbiamo testato compiti che richiedono un pensiero complesso (ad esempio "Cosa fa questo metodo?"), Poiché questi sono dominati dall'abilità della persona piuttosto che dagli effetti della presentazione del codice.

Una scoperta interessante del nostro studio è che non abbiamo osservato alcun sovraccarico visivo a causa delle visualizzazioni più ricche. Anche se molti partecipanti hanno affermato di avvertire un certo sovraccarico o confusione visiva, i dati che abbiamo raccolto (tempo per fornire una risposta e se era corretta) hanno mostrato miglioramenti solo con visualizzazioni più ricche.

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

Non credo che esistano tali studi. In pratica, quando un'azienda crea un nuovo IDE, la combinazione 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 usato per parole chiave per anni, anche dai vecchi IDE Ada. Stessa cosa per i commenti ecologici. Alcuni colori erano più o meno "nuovi", come l'alzavola per i nomi delle classi, ma puoi facilmente capire il motivo dietro la scelta di quei colori: sarebbe ragionevole impostare un colore non lontano dal blu (dal momento che quelli sono praticamente come parole riservate: Int32per .NET, intper C #, ecc.), ma deve rimanere un colore di base, distinto dal blu già utilizzato.

Ora, che dire di schemi alternativi, come il popolare testo chiaro su sfondo scuro? Non sono creati da uno scienziato che ha studiato l'argomento per anni e ha fatto alcuni complicati calcoli per ottenere l'esatto abbinamento perfetto. 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 regole di leggibilità? Non troppo.

• Per la maggior parte, è qualcosa di soggettivo : non si può sostenere che una parola chiave blu sia più leggibile di una parola chiave viola, perché qualcuno sarebbe in grado di rispondere che per lui, sul 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 parole chiave su giallo chiaro e commenti su grigio chiaro (diciamo #eee) su uno sfondo bianco, perché è illeggibile e non è nemmeno necessario spiegare il perché. Queste sono le stesse regole quando si crea un sito Web o si stampa un libro o altro.

Come una sorta di studio approssimativo, le schermate seguenti mostrano 3 temi di colore utilizzati per evidenziare la sintassi XSLT. Ho scelto XSLT in quanto rappresenta una sfida particolare a causa del gran numero di elementi del linguaggio - e anche perché molti sviluppatori lo descrivono come brutto.

Solarized

Tommorow Night

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 passare dai colori freddi a quelli caldi, se possibile, usando i colori freddi per le parti più neutre della lingua. Un'alternativa è quella di passare da tonalità pastello a tonalità più vivide (saturazione della tonalità).

Il colore di sfondo fa un'enorme differenza nella percezione dei colori di primo piano.

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

Con uno sfondo scuro è più semplice fornire una vasta gamma di colori di primo piano con un contrasto sufficiente tra loro e lo sfondo.

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

Conclusione

È preferibile utilizzare strumenti che forniscano un modo estensibile di impostare i temi di colore poiché è improbabile che qualsiasi tema a singolo colore soddisfi le esigenze di tutti gli sviluppatori e anche lo stesso sviluppatore può cambiare frequentemente le proprie preferenze a seconda di una varietà di fattori.

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

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

A volte mi chiedo davvero chi progetta le combinazioni di colori che, ad esempio, vengono spedite con i sistemi operativi. Di solito li ignoro, ma ricordo di aver visto miscele davvero fantastiche di rosa e verde e quant'altro. Beh, non faccio droghe ...

Ci sono alcuni studi su quali colori fanno per il tuo subconscio (calmati, provoca aggressioni, ...). Sto pensando che le combinazioni di colori comunemente usate siano in qualche modo basate su questo. Forse hanno appena aggiunto la leggibilità. La codifica non dovrebbe essere una missione suicida.

Ma per quanto riguarda la combinazione di colori degli IDE attuali, sto bene. Ammettiamolo: l'idea alla base è quella di rendere più facile trovare qualcosa di diverso dal "rumore del codice" generale. E ad essere sincero, non mi interessa davvero quali colori usano per permetterlo. Semplicemente non dovrebbe ferire i miei occhi o bruciare parti del codice nella parte posteriore della mia testa, come un rosso abbagliante su una tonalità di verde.

La codifica dovrebbe essere rilassante. Ed è quello che è per me.