UI scure. Il buono e il cattivo. Cose da fare e da non fare.

Le interfacce utente scure sono drammatiche, eleganti ed eleganti. Tuttavia, i designer dovrebbero procedere con cautela se scelgono di camminare sul "lato oscuro".

Creare l'aspetto grafico di un prodotto è una delle responsabilità primarie di un designer: la decisione di progettazione iniziale deve essere adeguata allo scopo del prodotto, alla situazione particolare e al suo pubblico. La combinazione di colori avrà un impatto duraturo e deve essere scelta con cura, e tutto inizia con la selezione di uno sfondo su cui verranno posizionati gli elementi di design: la "tela". La scelta abituale, quasi per impostazione predefinita, è uno sfondo bianco.

Ci sono buone ragioni per scegliere uno sfondo luminoso. Contrasto, testo e leggibilità e la capacità di lavorare con un'ampia gamma di colori tenui sono alcuni di questi. Secondo molti studi scientifici, una leggibilità ottimale richiede testo nero su sfondo bianco. Il marchio può anche influenzare la decisione perché i loghi e i colori dell'azienda non funzioneranno con una tavolozza di colori scuri.

La maggior parte degli studi ha dimostrato che il testo scuro su sfondo chiaro è superiore al testo chiaro su sfondo scuro, ovvero è più facile da leggere. In un famoso studio, la "stanchezza visiva" era significativamente maggiore quando i soggetti leggevano caratteri chiari su sfondo scuro rispetto a caratteri scuri su sfondo chiaro (Bauer, D., Bonacker, M. e Cavonius, CR 1983).

C'è anche un'aspettativa : le persone sono abituate a vedere una varietà di contenuti resi con inchiostro scuro su uno sfondo bianco presentati insieme alle immagini. Pensa a giornali e riviste, che esistono da oltre 350 anni. Tornando ancora più indietro - trentacinquemila anni fino al Paleolitico (i giorni dell'uomo delle caverne), troviamo disegni rupestri di leoni e mammut generalmente posti su uno sfondo chiaro con carboncino o ossa bruciate utilizzate per disegnare le raffigurazioni.

Tuttavia, quando un progetto lo giustifica, i designer di prodotti digitali di oggi possono scegliere di lavorare con una combinazione di colori scuri per una serie di motivi. Come suggerito sopra, è spesso una scelta estetica intesa a trasmettere dramma e suscitare un'emozione, qualcosa di inaspettato, o forse un designer vuole fondere il design con il marchio o assicurarsi che il contenuto visivo si distingua.

Tuttavia, se un designer sceglie di passare al "lato oscuro", dovrà affrontare una serie di sfide. Entrano in gioco tutti i tipi di problemi di usabilità, principalmente legati a scansionabilità, leggibilità e contrasto. L'aspetto principale da considerare è il contrasto sufficiente tra testo e sfondo. È necessario considerare anche il contesto (caso d'uso) e l'ambiente, nonché il dispositivo su cui è probabile che venga visualizzata l'interfaccia utente.

Alcune interfacce utente scure sono progettate per ridurre al minimo "l'affaticamento della vista digitale". Con l'aumento della tecnologia digitale, fissiamo gli schermi per la maggior parte della giornata. L'affaticamento visivo digitale è una condizione comune che colpisce milioni di persone ogni giorno. Causato da qualsiasi cosa, dall'uso eccessivo del computer all'esposizione regolare a una luce intensa, può causare mal di testa, dolore al collo, visione offuscata e bruciore/bruciore agli occhi.

Esistono anche cose come la sindrome da visione artificiale (CVS) e il "disagio oculare". Secondo uno studio, oltre l'83% degli americani utilizza dispositivi digitali per più di due ore al giorno, con il 60,5% che riferisce di avere sintomi di affaticamento visivo digitale. (Occhi sovraesposti: dilemma del dispositivo digitale.)

I prodotti SaaS business-to-business e le applicazioni di editing multimediale vengono utilizzati per molte ore di fila. Molti sono stati progettati in un'interfaccia utente a tema scuro per ridurre l'affaticamento degli occhi e allo stesso tempo supportare la chiarezza visiva. Tuttavia, un tale approccio richiede un'attenta valutazione anticipata della direzione del progetto.

La maggior parte degli sviluppatori utilizza uno schermo nero con sintassi codificata a colori per ridurre l'affaticamento degli occhi. Come afferma lo sviluppatore di Toptal Kevin Bloch: "Uno sfondo nero riduce l'affaticamento degli occhi e rende più facile la lettura del codice colore automatico, il che rende il codice molto più veloce da capire a colpo d'occhio".

Lo sviluppatore Toptal Amin Shah Gilani aggiunge: “Io personalmente uso il tema scuro solarizzato per il mio editor di codice. Preferisco un tema scuro perché uno sfondo più scuro è più piacevole per gli occhi, soprattutto perché mi piace mantenere le luci basse o lavorare di notte".

Anche le interfacce utente delle app di gioco tendono a temi più scuri. Il contesto di gioco e l'ambiente in cui i giocatori giocano si adattano meglio a una tavolozza di colori nera. Un design di sfondo nero rafforza la grafica sorprendente, introduce un senso di mistero, ha un contrasto migliore e supporta la gerarchia visiva.

Quando le interfacce utente scure funzionano bene

La maggior parte delle interfacce utente relative all'intrattenimento (Smart TV, console di gioco e app TV e film) tendono ad avere design dell'interfaccia utente a tema scuro, per una buona ragione. La maggior parte delle attività legate all'intrattenimento si svolgono la sera, sono viste da una distanza di 6-10 piedi e sono guardate in stanze scarsamente illuminate, in altre parole, lo schermo si adatta all'ambiente. Inoltre, i contenuti colorati (ad es. copertine e promozioni) risaltano notevolmente sulle interfacce utente a tema scuro.

L'obiettivo è quello di adattarsi al contesto dell'attività: "Si sta facendo buio, mi sto rilassando e voglio guardare un po' di TV". Simile a migliaia di minuscole lampadine, gli schermi digitali emettono luce ovunque sia presente un pixel luminoso; quindi, un'interfaccia utente luminosa illuminerebbe la stanza, un effetto indesiderato considerando l'attività. In questo scenario, la progettazione dell'interfaccia utente sta cercando di adattarsi al contesto: il dispositivo, il contenuto, l'attività e l'ambiente.

Nel giusto contesto, ambiente, applicazione e utilizzo, le interfacce utente con sfondo nero hanno senso. Considera sempre il contesto in cui è probabile che l'interfaccia venga utilizzata. Ma va oltre: la scelta di utilizzarla dovrebbe dipendere dal contenuto e dal contesto : cosa , quando , dove e su quale dispositivo .

• Per ottenere un aspetto forte e drammatico per effetti visivi sorprendenti
• Per proiettare una sensazione di stile ed eleganza, lusso e prestigio
• Per creare un senso di intrigo e mistero
• Per aiutare a focalizzare e guidare l'attenzione dell'utente con distrazioni minime
• Per supportare la gerarchia visiva e l'architettura dell'informazione

Le interfacce utente scure dovrebbero essere utilizzate solo con testo sparso, minimo e informazioni "a pezzetti" con una forte enfasi sugli elementi visivi, leggeri sul testo. Se viene utilizzato del testo, dovrebbe essere in forte contrasto con lo sfondo scuro, preferibilmente bianco puro o un altro colore forte (non grigio scuro) su sfondo nero.

Quando le interfacce utente scure non funzionano bene

Come indicato in precedenza nell'articolo, le interfacce utente a tema scuro sono una cattiva scelta per contenuti ricchi di testo e dati o quando si utilizzano una varietà di tipi di contenuto (testo, immagini, video, tabelle di dati, menu a discesa, campi, ecc. ). Il consenso generale nella comunità del design è che le interfacce utente oscure sono un'enorme sfida per la progettazione a meno che non si abbia a che fare con contenuti semplici e solo una spolverata di testo qua e là.

La sfida è cercare di mantenere un contrasto sufficiente, che ha un impatto sulla sfida generale: la leggibilità, che è collegata all'usabilità, che ha un impatto sull'UX. In genere, tutti i colori funzionano su uno sfondo bianco, mentre su uno sfondo scuro l'utile gamma di colori viene drasticamente ridotta.

Ecco un esempio del mondo reale di quando non utilizzare un'interfaccia utente a tema oscuro: sono stato coinvolto in un progetto SaaS B2B in cui il CEO era irremovibile sul fatto che, per "essere diverso", voleva utilizzare un'interfaccia a tema oscuro UI, che corrispondeva al marchio dell'azienda... per l'intera piattaforma. Per tutto. Dopo diversi incontri e radunando il team di progettazione e i product manager dietro la causa, siamo riusciti a convincerlo a non prendere una decisione così potenzialmente disastrosa.

La piattaforma utilizzava un set standard di componenti dell'interfaccia utente dell'applicazione SaaS e di conseguenza era piena di moduli, widget, menu a discesa, pittogrammi e icone insieme a testo e dati numerici nelle tabelle. Navigazione, layout e funzionalità sarebbero diventati incredibilmente difficili da gestire ottenendo un contrasto sufficiente e una combinazione di colori coerente. In sintesi, sarebbe stato quasi impossibile far funzionare tutto con un'interfaccia utente a tema scuro.

A seconda dell'adeguatezza dell'applicazione, forse la scelta giusta sarebbe stata quella di suggerire un mix di interfacce utente chiare e scure. Ad esempio, le pagine delle impostazioni con widget, moduli e tabelle di dati avrebbero potuto essere progettate su uno sfondo chiaro e le pagine di analisi con grafici avrebbero potuto essere progettate con uno schema di colori più scuro.

Le cose da fare e da non fare nell'utilizzo di interfacce utente scure

In conclusione, la decisione di utilizzare un'interfaccia utente oscura deve essere affrontata con attenzione. I designer non dovrebbero farlo per le ragioni sbagliate: essere alla moda, diversi o copiare il design di qualcun altro. È fondamentale che un designer consideri il contesto, il contenuto (contrasto e leggibilità), il dispositivo e il caso d'uso e abbia una buona ragione per la sua scelta. È un delicato atto di equilibrio in quanto ci sono potenzialmente molti vantaggi ma anche molte insidie.

Quando è possibile utilizzare le UI scure:

• Quando una combinazione di colori del marchio lo giustifica
• 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 ridurre l'affaticamento degli occhi, come le pagine di analisi utilizzate per lunghi periodi di tempo
• Per suscitare un'emozione, ad esempio una sensazione di intrigo e mistero
• Per creare un look sorprendente e drammatico
• Per creare un senso di lusso e prestigio
• Per supportare la gerarchia visiva

Quando è meglio stare lontano dalle UI scure:

• Quando c'è molto testo (leggere su uno sfondo scuro è difficile)
• Quando sullo schermo sono presenti molti contenuti misti
• Nel caso di applicazioni B2B con molti moduli, componenti e widget
• Quando il design richiede una vasta gamma di colori

Il passaggio al "lato oscuro" dovrebbe essere affrontato con cura. Si raccomandano ricerche e analisi più approfondite e approfondite prima di prendere una decisione così potenzialmente precaria che è irta di insidie. Una volta che un designer ha intrapreso quella strada, è molto difficile tornare indietro. I designer farebbero bene a considerare tutti gli aspetti, il bene e il male, il cosa da fare e quello da non fare, prima di saltare con entrambi i piedi.

• • •

Ulteriori letture sul blog di Toptal Design:

• eCommerce UX: una panoramica delle migliori pratiche (con infografica)
• L'importanza del design incentrato sull'uomo nel design del prodotto
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
• Principi euristici per interfacce mobili
• Design anticipatorio: come creare esperienze utente magiche