Sotto i riflettori: i principi del design dell'interfaccia utente oscura

I design scuri dell'interfaccia utente sono visti in lungo e in largo, dagli schermi dei dispositivi mobili agli enormi televisori. Un tema oscuro può esprimere potenza, lusso, raffinatezza ed eleganza. Tuttavia, la progettazione per interfacce utente scure presenta molteplici sfide e non soddisferà le aspettative se implementata male. Prima di immergersi nel "lato oscuro", i designer dovrebbero guardare prima di saltare.

I fisici dicono che il nero non è davvero un colore; è l'assenza di luce . Nei suoi esperimenti che illuminano la luce del sole attraverso i prismi, Sir Isaac Newton non l'ha nemmeno inclusa nello spettro dei colori.

Nella psicologia del colore, la maggior parte dei colori rappresenta cose diverse per persone diverse. Nelle culture occidentali, il nero è spesso associato alla morte, al mistero e al male. Il verde è spesso associato alla crescita a causa della natura. Il blu è quasi universalmente calmante perché è associato al cielo e all'acqua. Il colore è emotivo.

Altri effetti sono culturali. Il viola, ad esempio, è ancora associato al lusso perché in molte culture antiche la tintura viola era costosa e rara: solo i reali potevano permetterselo. È stata una parte significativa dello zeitgeist culturale abbastanza a lungo da diventare parte della psiche umana .

I prodotti digitali con interfacce utente scure, associati a potenza, eleganza e mistero, sono una tendenza formidabile. Anche se si dice spesso che la modalità oscura può ridurre l'affaticamento degli occhi, non ci sono prove che ciò sia vero. In determinate circostanze, dovrebbe anche risparmiare la durata della batteria. Tuttavia, il più delle volte, i temi oscuri sono una scelta estetica.

Interfaccia utente scura e interfaccia utente chiara

Non tutte le interfacce sono adatte per un tema scuro. I designer dovrebbero considerare l'adattamento del marchio, l'idoneità culturale e la psicologia del colore e considerare l' impatto emotivo prima di scegliere di sceglierne uno. È un difficile atto di equilibrio.

Mentre un'app finanziaria rivolta ai millennial può ottenere il fattore cool con un tema oscuro, potrebbe essere inappropriata per il sito Web di una grande banca rivolto alla popolazione generale. Troppo ricco, troppo oscuro e troppo elegante possono diventare più frustranti quando tutto ciò che le persone vogliono fare è controllare i propri saldi e pagare un conto.

Le interfacce utente scure delle applicazioni SaaS B2B sono notoriamente difficili da progettare. I componenti standard dell'interfaccia utente Web come tabelle di dati, widget, moduli e menu a discesa possono sembrare strani su un'interfaccia utente scura. Poiché molte combinazioni di colori non funzionano bene con le interfacce utente scure, alcuni marchi e prodotti, a seconda del tipo, del contesto e dei fattori ambientali, non si adattano bene e potrebbero rivelarsi una sfida insormontabile.

I designer che non hanno mai lavorato con il design dell'interfaccia utente oscura e decidono di lanciarsi con entrambi i piedi potrebbero trovarsi in acque agitate e inesplorate. Negli oceani delle UI oscure, le norme vengono piegate, le regole vengono modificate e le insidie ​​sono in abbondanza.

Detto questo, ci sono molte buone ragioni per usare le UI scure:

• Quando il design è scarso e minimalista con solo pochi tipi di contenuto
• Quando è appropriato per il contesto e l'uso, come le app di intrattenimento notturno
• Per creare un look sorprendente e drammatico

E ci sono scenari in cui non è raccomandato:

• Quando c'è una grande quantità di testo (leggere su uno sfondo scuro è difficile)
• Quando ci sono molti tipi di contenuti misti
• Quando il design richiede una vasta gamma di colori

Contrasto nel design dell'interfaccia utente scuro

Un tema scuro non è un tema nero. Sarebbe meglio pensarlo come un tema di "luce scarsa". Una delle preoccupazioni principali con le interfacce utente scure è ottenere un contrasto sufficiente in modo che gli elementi visivi siano separati e il testo sia leggibile. La maggior parte dei designer penserebbe che l'uso del nero sarebbe ottimale per ottenere un forte contrasto. Tuttavia, è meglio non utilizzare il nero vero (#000000) per gli sfondi o i colori delle superfici . Il nero è meglio riservato ad altri elementi dell'interfaccia utente e usato con parsimonia. Ad esempio, il nero vero può essere utilizzato per piccoli elementi dell'interfaccia utente o per una cornice circostante.

Il tema scuro di Google Material Design consiglia di utilizzare il grigio scuro (#121212) come colore della superficie del tema scuro "per esprimere elevazione e spazio in un ambiente con una gamma più ampia di profondità". Inoltre, molti designer consigliano di aggiungere una leggera sfumatura blu scuro ai grigi scuri durante la definizione della combinazione di colori. Tende a creare un tono scuro migliore per gli schermi digitali e una tavolozza di colori dell'interfaccia utente scura più gradevole.

Un vantaggio dell'utilizzo di una gamma di grigi è che offre libertà ai designer perché è possibile esprimere una gamma più ampia di colori. Una tavolozza grigia aiuta anche a creare profondità perché le ombre discendenti possono essere viste più facilmente rispetto al grigio rispetto al nero.

È necessario prestare particolare attenzione al contrasto del testo nelle UI scure.

Le linee guida per l'accessibilità dei contenuti Web (WCAG) richiedono che "la presentazione visiva del testo abbia un rapporto di contrasto di almeno 4,5:1 ", ad eccezione del testo su larga scala, che dovrebbe avere un rapporto di contrasto di almeno 3:1 . Pertanto, i designer devono assicurarsi che il contenuto rimanga comodamente leggibile in modalità oscura.

È anche una buona idea verificare il corretto contrasto tra altri elementi dell'interfaccia utente, come schede, pulsanti, campi e icone su vari display e dispositivi. Se c'è una separazione impercettibile tra gli elementi dell'interfaccia utente, il design si fonde troppo e rischia di diventare noioso.

Messa a fuoco dell'attenzione: colore

Il colore spicca nelle UI scure. È meglio utilizzare schemi con colori accentati più chiari e insaturi. Evita di usare colori saturi nelle interfacce utente scure, poiché possono vibrare visivamente contro le superfici scure. Inoltre, come best practice, i colori devono superare lo standard AA delle WCAG di almeno 4,5:1 se utilizzati con il testo.

Quando si definisce una combinazione di colori per un'interfaccia utente scura, Google consiglia un numero limitato di accenti di colore per mantenere la maggior parte dello spazio disponibile per le superfici scure. L'uso di colori complementari divisi può aiutare. Lo schema ha un colore dominante e due colori adiacenti al complemento del colore dominante. In questo modo si ottiene il contrasto necessario senza la tensione della combinazione di colori complementari.

La giusta combinazione di colori può aiutare a creare un buon contrasto. Colorable è uno strumento utile per selezionare combinazioni di colori di testo e colori di sfondo conformi all'accessibilità.

Il testo e gli elementi essenziali, come pulsanti e icone, devono soddisfare gli standard di leggibilità quando vengono visualizzati su sfondi scuri. Come mostrato nell'app Jabra Sound+ sopra, è possibile utilizzare colori diversi dal bianco per testo e icone.

Il sito Material Design di Google ha un utile generatore di tavolozze di colori (sotto "Strumenti per la scelta dei colori") con il quale i designer possono creare e applicare tavolozze di colori a un'interfaccia utente. Il livello di accessibilità delle combinazioni di colori può anche essere misurato con uno strumento colore complementare.

“Usa colori fortemente contrastanti per migliorare la leggibilità. Molti fattori influenzano la percezione del colore, tra cui la dimensione e il peso del carattere, la luminosità del colore, la risoluzione dello schermo e le condizioni di illuminazione". Linee guida per l'interfaccia umana di Apple

Less is More: sfruttare lo spazio negativo

Uno degli elementi fondamentali del design dell'interfaccia utente oscura di successo è l'uso abile dello spazio negativo. Se progettate male, le interfacce utente scure possono far apparire i prodotti digitali pesanti e prepotenti. Per controbilanciare, i designer possono rendere più leggere le interfacce utente scure sfruttando lo spazio negativo all'interno di design scarsi e minimalisti. Il design minimalista riguarda tanto ciò che non c'è quanto ciò che c'è. Se usato abilmente, lo spazio negativo renderà più scansionabile un'interfaccia utente scura e consentirà alle persone di assorbire le informazioni più facilmente.

Il compositore francese Claude Debussy una volta disse: " La musica è lo spazio tra le note ". Lo stesso sentimento vale per la scansione: lo spazio negativo tra gli elementi è ciò che fa funzionare un layout. Una quantità generosa di spazio negativo attorno agli elementi dell'interfaccia utente è ciò che dà loro una definizione. Sottolinea i contenuti importanti e fornisce lo spazio necessario per respirare per garantire che il design non sembri denso e disordinato. Senza spazio per respirare, il cervello umano ha meno probabilità di scansionare i punti di interesse e ha maggiori probabilità di vagare.

Le interfacce piene di troppi elementi e testo sono la rovina del design dell'interfaccia utente scura di alta qualità. Considerando attentamente la gerarchia visiva nelle UI scure, i designer possono rendere le loro creazioni più facilmente scansionabili, migliorando così l'esperienza dell'utente.

Parole di stile: tipografia

Ogni pezzo di testo nelle UI scure richiede un controllo. La preoccupazione è duplice: leggibilità e contrasto. Innanzitutto, riguarda le dimensioni. Il testo deve essere sufficientemente grande per una buona leggibilità (il testo piccolo su sfondi scuri è più difficile da leggere). In secondo luogo, deve esserci un contrasto sufficiente tra il testo e lo sfondo.

La disponibilità di migliaia di caratteri digitali semplifica la visualizzazione di messaggi con impatto per intestazioni e messaggi eroi. I progettisti possono attenuare i problemi di leggibilità aumentando il contrasto e regolando la dimensione del carattere, la spaziatura dei caratteri e l'altezza della riga per il testo più piccolo.

La raccomandazione W3C AAA per il testo di dimensioni normali (meno di 18 punti se non in grassetto) è di avere un rapporto di contrasto di almeno 7:1 . Questo vale anche per altri elementi dell'interfaccia utente: icone, immagini di testo ed etichette di testo, come le etichette dei pulsanti. Spetta ai designer garantire che tutti i prodotti digitali siano accessibili a tutti. Non solo migliora l'usabilità, e quindi l'UX, è la legge nella maggior parte dei paesi.

Ci sono innumerevoli opzioni disponibili per i designer per ottenere caratteri tipografici eccellenti che funzionano bene nelle interfacce utente scure. Google Fonts, Font Library e Adobe Typekit sono alcuni che offrono una facile integrazione di app o siti e un'ampia gamma di scelte.

Profondità di comunicazione: Elevazione

Un tema scuro non significa piatto. Con i temi luce, l'illuminazione, l'ombreggiatura e le ombre creano un senso di profondità. Con le interfacce utente scure, è più difficile perché contengono superfici prevalentemente scure con accenti di colore sparsi. Tuttavia, i designer possono utilizzare tre o quattro livelli di elevazione con schemi di colori corrispondenti per il testo per trasmettere profondità.

Perché la profondità? La maggior parte dei moderni sistemi di progettazione utilizza un sistema di livelli di elevazione per comunicare la profondità. Un senso di profondità corrisponde al mondo naturale. La nostra visione ha una percezione della profondità e viviamo in un mondo 3D. La profondità aiuta a enfatizzare la gerarchia visiva di un'interfaccia. Gli elementi in primo piano, ad esempio, attirano l'attenzione su se stessi, come una finestra di avviso.

Le superfici sono illuminate in modo diverso per indicare diversi livelli di elevazione. Più alta è la posizione di una superficie nella pila di elevazione (più vicino a una sorgente di luce implicita), più chiara è la superficie. Una superficie più luminosa rende più facile distinguere l'elevazione tra i componenti e aiuta a vedere le ombre, rendendo più evidenti i bordi di ciascuna superficie.

L'elaborazione del colore della superficie di ogni livello richiede attenzione. È meglio non avere più di quattro o cinque livelli. I progettisti devono tenere conto del contrasto del testo poiché le superfici vanno più in alto nella pila e diventano più chiare. Se il colore di sfondo non è sufficientemente scuro per soddisfare un livello di contrasto di almeno 15,8:1 tra il testo bianco e la superficie, il testo sulla superficie più elevata (e più chiara) non supererà lo standard 4,5:1. In alcuni casi, potrebbe essere meglio specificare il colore del testo di un elemento come nero vero (#000000) nel sistema di progettazione per ottenere un buon contrasto su uno sfondo grigio chiaro.

Ispirazione per il design dell'interfaccia utente scura

Riflettendo sui principi sopra delineati, ecco alcuni esempi eccellenti di progettazione dell'interfaccia utente oscura:

Atom Finance sfrutta un tema scuro per un look sofisticato e limita i suoi colori di accento a tre. Il layout utilizza uno spazio negativo e un design sparso e minimalista per un sito Web finanziario complesso. Il sito utilizza un'ombreggiatura sottile per indicare le diverse elevazioni dei componenti nell'interfaccia utente.

Entrambi questi siti Web a tema scuro minimalista utilizzano una tipografia in grassetto. L'ombreggiatura attenta con un unico colore di accento viene utilizzata in allineamento con le best practice di progettazione dell'interfaccia utente scura.

Nonostante le sfide legate all'utilizzo di temi oscuri per le applicazioni SaaS, questo dashboard di visualizzazione dei dati per IBM è esemplare. Il numero di colori di accento è ridotto al minimo e il sito utilizza un'ombreggiatura sottile per mostrare diverse elevazioni dell'interfaccia utente.

Queste app mobili osservano le migliori pratiche di progettazione dell'interfaccia utente scura utilizzando il nero vero solo per le cornici, l'ombreggiatura corretta degli elementi per diversi livelli di elevazione e un numero limitato di colori di accento.

Sommario

La decisione di utilizzare un design dell'interfaccia utente scuro rispetto a uno tradizionale deve essere affrontata con discrezione. Non dovrebbe essere scelto per le ragioni sbagliate: essere alla moda, diverso o imitare il design di qualcun altro. I designer dovrebbero avere una forte motivazione per la loro scelta e considerare il contenuto, il contesto di utilizzo e il dispositivo su cui apparirà il design.

I temi scuri sono adatti per alcuni prodotti digitali ma una vera lotta da implementare per altri. La semplicità è la chiave. Sono ideali per presentare contenuti minimalisti, visualizzazioni di dati, siti multimediali e piattaforme di intrattenimento. Si adattano male a piattaforme B2B complesse e ricche di dati, pagine di testo e molti contenuti vari.

Per i designer coraggiosi pronti ad attraversare nuove frontiere stilistiche ed esplorare UI oscure attraverso una lente emotiva ed estetica, offrono un entusiasmante parco giochi di infinite possibilità, sul "lato oscuro".

Fateci sapere cosa ne pensate! Si prega di lasciare i vostri pensieri, commenti e feedback qui sotto.

• • •

Ulteriori letture sul blog di Toptal Design:

• UI scure. Il buono e il cattivo. Cose da fare e da non fare.
• I principi del design e la loro importanza
• Esplorare i principi della Gestalt del design
• Avvincente e in movimento: una guida ai principi di Motion Design
• Potenzia la tua UX con questi principi di progettazione dell'interazione di successo