Modalità scura

Che cos'è la modalità scura?

Prendi il telefono a letto prima di dormire, con la luce spenta, e lo schermo bianco ti illumina il viso come una lampada. La modalità scura esiste proprio per questo momento.

La modalità scura (Dark Mode) è un modo di mostrare le schermate di un sito o di un'app con sfondo scuro e testi e icone chiari, al posto del solito testo nero su fondo bianco. Il contenuto resta lo stesso: gli stessi pulsanti, gli stessi menu, le stesse parole. Cambiano solo i colori, perché lo schermo sia delicato con gli occhi quando intorno c'è poca luce.

Si chiama anche modalità notte o tema scuro. Oggi è presente nei sistemi di telefoni e computer e nella maggior parte delle app che usiamo ogni giorno, quindi le persone se la aspettano da qualsiasi sito o app nuovi.

Come funziona la modalità scura?

Il telefono e il computer hanno un'impostazione generale in cui l'utente sceglie tra aspetto chiaro e aspetto scuro, e alcuni dispositivi passano dall'uno all'altro da soli al tramonto. Un sito o un'app fatti bene leggono questa impostazione e si aprono con i colori giusti fin dal primo istante.

C'è anche un secondo modo. Un piccolo pulsante dentro il sito o l'app, spesso a forma di sole e luna, permette all'utente di cambiare modalità da solo. Poi il sistema ricorda la scelta e non torna alla modalità chiara a ogni visita.

Dietro le quinte, il designer prepara due gruppi di colori per tutto quello che c'è sullo schermo: lo sfondo, il testo, i pulsanti, i bordi e le tabelle. Il sistema poi usa il gruppo giusto in base alla modalità. È come una stanza con due luci, una per il giorno e una per la sera, mentre i mobili restano al loro posto.

Perché la modalità scura conta per te

Se hai un sito o un'app, i tuoi visitatori lo aprono in momenti diversi della giornata. Molti navigano di sera. La modalità scura cambia in modo netto la loro esperienza in quelle ore:

• Occhi più riposati con poca luce: uno schermo scuro non abbaglia in una stanza buia, e chi legge può finire l'articolo o guardare i prodotti più a lungo senza fastidio.
• Risparmio di batteria: sui telefoni con schermo OLED, ogni punto nero è quasi spento e non consuma energia. Per questo la modalità scura usa meno batteria su questi schermi.
• Meno stanchezza per chi lavora molte ore: il dipendente che passa la giornata davanti a una dashboard o a un gestionale sente la differenza a fine giornata, soprattutto nei turni di notte.
• Rispetto della scelta dell'utente: chi ha scelto l'aspetto scuro sul telefono e poi apre il tuo sito tutto bianco avrà l'impressione che il sito non faccia caso a lui.

Vuol dire che la modalità scura è sempre migliore? No. Al sole o in un ufficio ben illuminato, molte persone leggono più facilmente il testo nero su bianco. L'obiettivo è lasciare la scelta all'utente.

Le differenze tra modalità chiara e modalità scura

Come progettare una modalità scura che riposa gli occhi

Invertire i colori e basta dà di solito un cattivo risultato. Una modalità scura in cui le persone si trovano bene richiede tante piccole scelte:

1. Grigio scuro invece del nero assoluto: il nero totale accanto al bianco brillante crea un contrasto duro che stanca gli occhi. Uno sfondo grigio scuro o blu notte è più morbido.
2. Testo chiaro ma non abbagliante: un bianco leggermente grigio si legge meglio del bianco puro.
3. Contrasto sufficiente: il contrasto è la differenza tra il colore del testo e quello dello sfondo. Se è troppo basso, leggere diventa faticoso, soprattutto per gli anziani e per chi vede poco. Lo standard di accessibilità WCAG fissa un minimo per questa differenza.
4. Colori del marchio più tenui: un blu o un rosso molto forte sembra urlato su uno sfondo scuro e ha bisogno di una tonalità un po' più calma.
5. Logo e immagini adatti a entrambi gli sfondi: un logo nero sparisce su uno sfondo scuro, quindi serve una versione chiara. Le foto molto luminose possono richiedere una leggera attenuazione.
6. Tabelle e grafici: nelle dashboard bisogna controllare i colori delle barre e delle linee, perché restino chiari in entrambe le modalità.

Errori comuni quando si aggiunge la modalità scura

• Attivare la modalità scura nella home page e dimenticare altre pagine, come quella di pagamento o la finestra di accesso, che all'improvviso appaiono bianche.
• Testi grigio chiaro su sfondo scuro che quasi nessuno riesce a leggere.
• Non salvare la scelta dell'utente, così il sito torna alla modalità chiara ogni volta.
• Ignorare l'impostazione del dispositivo e imporre a tutti una sola modalità.
• Non provare la modalità scura su telefoni veri prima del lancio, anche se i colori cambiano da uno schermo all'altro.
• Aggiungerla alla fine del progetto, a design finito, e farla diventare una toppa invece che una parte dell'interfaccia.

La modalità scura nei siti e nelle app che realizziamo

In Linkysoft pensiamo alla modalità scura dal primo giorno del design, non dopo averlo finito. Ogni sito che realizziamo con il nostro servizio di progettazione e sviluppo di siti web ha la modalità scura integrata, il supporto all'arabo e alla scrittura da destra a sinistra (RTL) e lo standard di accessibilità WCAG 2.2, e lo proviamo su telefoni veri prima del lancio.

Nello sviluppo di app mobili progettiamo ogni app da zero con modalità chiara, modalità scura e schermate accessibili, per iPhone e Android. Poi la pubblichiamo su App Store e Google Play e ne seguiamo gli aggiornamenti.

Il tuo progetto è un gestionale che il team usa tutto il giorno, per le vendite, il magazzino o il personale? Allora lo costruiamo con il nostro servizio di applicazioni web e sistemi gestionali, sul modo in cui lavora la tua azienda, e funziona su tutti i dispositivi. Qui il benessere degli occhi merita un posto nel progetto, perché lo stesso schermo resta aperto davanti al dipendente per otto ore o più.

Stai pensando a un nuovo sito o a una nuova app? Inizia con una consulenza gratuita con noi e insieme capiremo di cosa hanno bisogno i tuoi utenti di giorno e di notte.