La data di rilascio ufficiale di iOS 13, il nuovo sistema operativo per iPhone ancora non è nota, ma dovrebbe essere tra settembre e ottobre 2019. Quel che è certo è che in iOS 13 gli utenti potranno finalmente utilizzare una delle feature più richieste dei sistemi operativi mobile (è infatti la più richiesta anche per Android): il Dark Mode.

Ma che cos'è esattamente il dark mode? Quali cambiamenti accorgimenti dovranno seguire i designer e gli sviluppatori di app per iOS?

Cos'è il Dark Mode

A partire da iOS 13.0, gli utenti potranno attivare un'interfaccia scura per l'intero sistema operativo del proprio iPhone, denominata per l'appunto "Dark Mode". Quando è attiva questa opzione, il sistema operativo adotta una palette di colori scuri per le schermate, le viste, i menu e i controlli, e usa una palette di colori più vibranti per fare risaltare meglio il foreground rispetto il background. Il dark mode potrà essere utilizzato sia come interfaccia predefinita, che a seguito di switch automatico quando il dispositivo rileva che la luce ambientale è bassa.

Il dark mode trova impiego ideale per chi utilizza i dispositivi di notte o in ambienti scuri. Da molti è anche preferita come interfaccia di default, in quanto più riposante per gli occhi.

I temi scuri sono già presenti in alcune app, per scelta dei rispettivi sviluppatori (es. Reddit oppure Chrome), mentre livello di sistema operativo è invece già presente in Mac Os 10.14 Mojave.

Apple ha lavorato a lungo sull'implementazione di questa modalità: sappiamo che sarà presente anche nell'imminente iPadOS, e che il dark mode supporterà tutte le feature di accessibilità disponibili in iOS. In altre parole, non si tratta semplicemente di un cambio di colori bensì di un nuovo terreno di scontro su cui Apple e Google vorranno contendersi fette di mercato e preferenze degli utenti. La corretta adozione (e promozione) della UI/UX scura ha addirittura spinto Apple a diramare diverse linee guida che le app devono rispettare, a pena di esclusione dall'App Store.

Cosa devono fare gli sviluppatori e designer?

Focus sui contenuti

L'adozione di un'interfaccia scura nasce dall'esigenza del lettore di fruire meglio i contenuti dell'app soprattutto in situazioni di scarsa illuminazione. Per questo motivo, il dark mode mostra testi, immagini e videoclip con grande risalto e rende irrilevanti i restanti gli elementi secondari (es. ornamenti, immagini di background), ad esempio rendendoli trasparenti o scuri come il resto dell UI/UX.

Designer e sviluppatori sono tenuti quindi a testare l'app sia in modalità chiara (light) che in modalità scura (dark) in quanto alcuni elementi (in particolare ombreggiature, giochi di sfumature, elementi di branding, ...) potrebbero essere accattivanti ed efficaci in una modalità ma distruttivi e confusionari nell'altra.

Bisogna quindi adottare un design e una palette di colori che vada bene in entrambe le modalità, oppure adottare due stili e palette differenti, con l'unico obiettivo di mantenere l'app completamente fruibile sia in dark mode che in light mode, senza dimenticare che l'utente può scegliere diverse impostazioni per contrasto e trasparenza (oltre alle già note opzioni di accessibilità. Ad esempio, testando l'app in alto contrasto e trasparenza ridotta, si possono scoprire eventuali elementi della UI/UX il cui sia testo e background non sono in corretto contrasto tra loro (perché entrambi scuri).

Colori e contrasti

La palette di colori per il dark mode di iOS è composta da colori scuri per il background e chiari per il foreground, scelti con attenzione da Apple per assicurare il corretto contrasto tra le varie viste e controlli previsti dal sistema operativo.

Anche le app devono quindi adattarsi a questa nuova modalità di presentazione offerta da iOS, usando per quanto possibile gli elementi e i controlli di sistema. In caso di colori personalizzati, le app devono inserire tra i propri asset le varianti di colore per light mode e dark mode, in modo che iOS utilizzi il colore corretto a seconda della modalità di presentazione. In altre parole: gli sviluppatori hanno un motivo in più per non utilizzare colori hard-coded.

La scelta delle combinazioni tra colori di foreground e background deve essere guidata dal contrasto, per meglio distinguere i contenuti dagli sfondi. Apple consiglia di adottare un contrasto di 7 a 1, soprattutto per testi piccoli.

Per quando riguarda i colori di background, meglio evitare i colori accesi e preferire i colori morbidi. E se proprio i designer desiderano usare uno sfondo bianco nella modalità dark mode, non utilizzino un bianco puro, in quanto risulterebbe troppo fastidioso per gli occhi, in un contesto di UI/UX scura.

Immagini, Icone e Simboli

Apple assicura che tutti i simboli usati da iOS (gli SF Symbols, come ad esempio l'icona di condivisione, o la freccia del torna indietro) e tutte le immagini usate dal sistema operativo (in particolare, i background per l'home e il lock screen) sono ottimizzate per una perfetta visualizzazione in entrambe le modalità

Per questo motivo, Apple invita a usare gli SF Symbols ove appropriato, senza il bisogno di sovraccaricare l'app con nuovi asset da declinare in tutte le varianti. Grazie all'uso delle tinte e della translucenza, gli SF Symbols erediteranno da iOS in modo dinamico il colore richiesto dalla modalità attiva. In alternativa, i designer sono inviati a produrre glifi differenti per le due modalità: sottili e vuoti per il light mode, spessi e riempiti per il dark mode.

Per quanto riguarda le immagini, di background ma anche di foreground, se si vedono bene in entrambe le modalità non sarà necessario differenziarle. In alternativa, dovranno essere usate nello stesso catalogo di asset due immagini alternative sotto lo stesso nome.

Leggibilità dei Testi

La luminosità e il contrasto del testo in foreground sono fondamentali per una lettura ottimale su background scuri.

Anche in questo caso, Apple fornisce un set di colori etichettati (primario, secondario, terziario e quaternario) per semplificare il processo di design e sviluppo dell'app, in quanto si ereditano automaticamente le impostazioni di tipografia adatte per la modalità attiva (oltre alle preferenze sulla dimensione e sull'accessibilità eventualmente espresse dall'utente).

L'utilizzo di font di sistema, assieme alle viste di sistema (alert, popoup, popover, ...) e i controlli di sistema (switch, slider, picker, ...) non solo garantiranno la corretta leggibilità dei contenuti, ma anche un look & feel consistente tra app e iOS.

La tua app è pronta per il Dark Mode?

L'interfaccia della tua app fa corretto uso degli elementi forniti dal sistema operativo? Gli asset della tua app sono ottimizzati sia per il light mode che per il dark mode? Se non sei sicuro e vuoi saperne di più, contattaci e ti aiuteremo a scoprirlo.