Il Dark Mode serve davvero a qualcosa?

La "modalità scura" dell'interfaccia fa bene agli occhi? Riposa la vista? È solo un'illusione?

Ricordo di aver aggiornato immediatamente il mio telefono appena è stato reso disponibile il Dark Mode.

Non è stato tanto l'entusiasmo da early adopter che mi accompagna da sempre, quanto il desiderio di non provare più fastidio nel passaggio tra app "scure" ad altre con sfondo chiaro. Soprattutto in condizioni di scarsa illuminazione ambientale.

Giusto un esempio: ho sempre odiato passare da una chat nell'app di messaggistica (sfondo scuro) all'elenco delle chat (non personalizzabile, quindi chiaro). Immaginate poi che piacere, da appena svegli.

L'interfaccia Dark Mode sul dispositivo ha risolto il mio problema? Non proprio. Però è molto gradevole da vedere e mi ha... aperto gli occhi su varie cose.

Cos'è il Dark Mode?

Il Dark Mode è la visualizzazione caratterizzata da toni scuri introdotta da iOS 13 (quindi un paio di anni fa) e che ha finalmente dato l'opportunità di abbandonare lo sfondo chiaro sul proprio telefono, cosa che sicuramente potevano fare da anni tutti gli Android ma dato che le cose fighe sono quelle introdotte da Apple, chi se ne frega.

Tale feature è stata resa disponibile in seguito su MacOS, cosa molto gradita perché aprire il Finder dopo mezz'ora a fissare Photoshop era come l'esplosione di una supernova. Tanto per dire.

Sistemi operativi Apple a parte, cosa è cambiato con l'avvento del Dark Mode? Le applicazioni (finalmente) hanno progressivamente adottato il nuovo look, reso disponibile agli utenti come opzione oppure attivato automaticamente in base alle impostazioni di sistema.

Il tema Dark ha cambiato i contenuti e come noi li percepiamo

E così che Instagram, Facebook, YouTube, Twitch hanno subìto un drastico cambiamento estetico che ha influenzato anche i contenuti, oltre alla sola interfaccia. Hai presente i fotografi concettuali che caricano le foto su Instagram con i margini bianchi perché non si possono piegare alla dittatura del formato 1:1?

Il Dark Mode ha cambiato il look-and-feel dei contenuti visivi: se su sfondo chiaro una foto notturna perdeva molto, su sfondo scuro riesce ad essere molto più accattivante. La differenza di contrasto ci permette di acchiappare più dettagli e più tonalità di colore.

Ma non è finita qui: la luminosità non è l'unico fattore utile per stimolare (affaticare) i nostri occhi. Alcune tonalità di colore, se saturate maggiormente, appaiono molto più "evidenti" di altre a parità di luminosità. Ecco perché, nello studio di interfacce grafiche che non consistano nel cambiare nome alla directory del tema Wordpress, bisogna desaturare i colori del Dark Mode. Possibilmente anche delle immagini usate.

Le tonalità di colore che più ci eccitano gli occhietti sono il rosso, violetto, blu. Ecco perché le luci notturne che devono avvertirci di qualcosa sono rosse (oltre alla psicologia del colore), oppure negli spettacoli si usano luci blu/violetto per "illuminare" la scena. Le virgolette non sono messe a caso: la luce non è più luminosa, è che appare così ai nostri occhi!

Quest'effetto, o meglio questa sensazione ha un nome, anzi due: Helmholtz–Kohlrausch. L'occhio umano percepisce i colori in base alla saturazione degli stessi, alla loro lunghezza d'onda e... all'ambiente circostante. Ecco che il Dark Mode non significa riposo degli occhi, ma solo cambio di interfaccia.

Effetto H K L’effetto Helmholtz–Kohlrausch in azione: quali colori ti sembrano più luminosi? Eppure hanno tutti la stessa % di brightness. Quella dello sfondo grigio, tra l’altro.

Per approfondire ecco un veloce thread su Twitter di Janne Aukia, che non è proprio l'ultimo dei fessi. Ok vallo a leggere ma poi torna qui che non ho ancora finito il discorso.

Come far riposare gli occhi davanti a un monitor?

Basandosi sull'effetto Helmholtz–Kohlrausch, c'è chi ha ideato uno schema cromatico perfetto, con un ringraziamento da parte di tutti gli sviluppatori felici di non affaticare più i propri occhi davanti a un monitor. Si chiama Ethan Schoonover e la palette è la famosissima Solarize.

Schoonover un bel giorno si è rotto le scatole di sanguinare dagli occhi e ha deciso di studiare uno schema colori per il proprio software. Primo passo: abbassare il contrasto. Secondo passo: gli elementi sintattici più usati e i commenti devono essere distinguibili senza essere troppo evidenti, quindi verde, azzurro, grigio 50%. Terzo passo: variabili e tutte quelle piccole ma importanti cosette devono vedersi subito, ed ecco che gli accent hanno i colori più evidenti secondo l'effetto H-K.

Ma torniamo alla Apple.

Col Dark Mode si legge meglio?

Dicevo, ecco che Apple ancora una volta fa un peto, ribalta mezzo mondo e tutti corrono a sviluppare interfacce scure. Perché il Dark Mode rilassa gli occhi, perché ci rende più produttivi, ci rende più fighi. Sarà vero? È un vezzo estetico oppure una moda di cui tutti parleranno male tra qualche anno, come Tailwind?

Il dark mode non rilassa gli occhi e tantomeno rende più facile la lettura. Anzi, si direbbe il contrario. Un articolo del 2019 Adam Engst approfondisce il tema riprendendo conclusioni già confermate 15 anni prima:

Per riassumere, lo schermo di un Mac con testo scuro su sfondo chiaro (Light Mode) fornisce migliori prestazioni in messa a fuoco dell'occhio, identificazione delle lettere, trascrizione, comprensione del testo, velocità di lettura e infine alcuni studi meno recenti suggeriscono che una polarità positiva causi una minoire fatica visiva e un incremento nel comfort visivo.

La visualizzazione dark è più adatta se lo schermo del dispositivo è in un ambiente poco illuminato. Rende meno fastidiosi i corpi mobili vitreali dell'occhio. Ecco, adesso devo cercare di non ricordarmeli e non fissarli. Non farlo neanche tu.

Ho scoperto, inoltre, che proprio come un obiettivo fotografico (o forse sarebbe meglio dire il viceversa), l'occhio se è "aperto" in condizioni di scarsa luminosità mette a fuoco con più fatica. Ecco perché sarebbe meglio regolare la grandezza del testo quando si crea uno switch sulla propria applicazione o sito web.

Ok, applichiamo il Dark Mode al nostro sito

Un sito web adesso dovrebbe avere un proprio dark mode. Se un utente ha già deciso di volerlo sul proprio dispositivo, spetta al web designer rispettare tale preferenza.

Vi sono mille modi per ottenere un dark mode. Il più semplice è usare una media query, dato che si tratta di una user preference. L'approccio CSS only non è il migliore, perché magari un utente vuole effettuare uno switch. Ecco che sarebbe meglio fornirne uno in js. Anzi, meglio ancora usare un cookie (tecnico!) per ricordare la preferenza.

Se ti va di trasformare dinamicamente l'icona dello switch, puoi usare la guida di Dev Ed oppure il "classico" slider, che però occupa più spazio.

E non dimenticarti di cambiare anche la favicon! Ogni volta che guardo quella di Unsplash, mi viene da piangere.

Siamo nel 2021, applica anche una bella animazione alla tua pagina, quando c'è lo switch.

Trovi i link ai tutorial in fondo al post, don't worry.

Siamo sicuri che il Dark Mode sia la strada giusta per l'usabilità di un sito e, cosa ancora più importante, l'accessibilità?

Tornando alla mia storia, nonostante abbia il dark mode sempre attivo mi sono reso conto che la lettura di testi lunghi sia diventata piuttosto faticosa. Aumentando manualmente della grandezza dei testi la situazione è migliorata ma non risolta del tutto. E qui arriva la vera chiave che rende i nostri occhietti meno secchi e più felici. Lo schermo giallo.

f.lux e il Night Shift

L'aveva già capito mister Solarize a cui ho accennato prima, l'hanno capito gli sviluppatori di f.lux nello scorso decennio con una semplice applicazione che rendeva giallo, simulando una lampada che emette luce calda, lo schermo del computer.

Si sa che la luce blu del monitor "sveglia" il cervello e rende difficile prendere sonno. f.lux ha saputo risolvere questo problema a me e penso a milioni di utenti nel mondo. Ecco perché poi è arrivato il Night Shift sui dispositivi Apple per illuderci di riuscire a mettere a posto i nostri ritmi circadiani. Ma si può applicare su un sito web allo stesso modo del Dark Mode? Magari.

Nulla di complicato. Si tratta di una palette di colori da applicare su scelta dell'utente (ricordate sempre di applciare un filtro anche alle immagini altrimenti sembrerà sviluppato da un pazzo). Ma c'è chi ha fatto di meglio: creare un f.lux che si attiva al tramonto in base all'orario locale dell'utente. Si trova su Github. Attenzione, è in jQuery! Che ormai è quasi vietato come la N-word su Twitch.

Il Dark Mode è utile o no?

Sì, il Dark Mode è utile, al pari del Night Shift. Come ho letto in una delle numerose discussioni in merito, avere a disposizione numerose opzioni non può che renderci felici di adottarle a nostro piacimento. In modo da migliorare la nostra vita. Sì, certo. Stavamo meglio quando stavamo peggio. Di mamma ce n'è una sola. Le vacanze migliori: giugno e settembre.

Questa uscita di FA è stata un po' in ritardo rispetto ai programmi perché sto cercando di organizzarmi mettendo in ordine un bel po' di cose. Ho già in revisione altri temi che spero siano interessanti e no, non scriverò mai sulla produttività, habit tracker e di come svegliarsi presto renda migliori.

Link e approfondimenti

Qualche link riguardanti f.lux, monitor ingiallito e perché:

Ecco i tutorial che avevo elencato prima:

Questo articolo è stato pubblicato sulla mia discontinua newsletter chiamata Frontend Allegro. Ti piace? Fammi sapere cosa ne pensi!

Data pubblicazione: 05/17/2021