În lumina reflectoarelor: principiile designului interfeței întunecate

Designurile întunecate ale interfeței de utilizare sunt văzute de departe, de la ecrane mobile la televizoare masive. O temă întunecată poate exprima putere, lux, rafinament și eleganță. Cu toate acestea, proiectarea pentru interfețele de utilizator întunecate prezintă provocări multiple și nu va îndeplini așteptările dacă este implementată prost. Înainte de a se scufunda în „partea întunecată”, designerii ar trebui să se uite înainte să sară.

Fizicienii spun că negrul nu este chiar o culoare; este absența luminii . În experimentele sale de a străluci lumina soarelui prin prisme, Sir Isaac Newton nici măcar nu a inclus-o în spectrul de culori.

În psihologia culorilor, majoritatea culorilor reprezintă lucruri diferite pentru oameni diferiți. În culturile occidentale, negrul este adesea asociat cu moartea, misterul și răul. Verdele este adesea asociat cu creșterea datorită naturii. Albastrul este aproape universal calmant, deoarece este asociat cu cerul și apa. Culoarea este emoțională.

Alte efecte sunt culturale. Mov, de exemplu, este încă asociat cu luxul, deoarece în multe culturi antice, colorantul violet era scump și rar - doar regalitatea își putea permite. A fost o parte semnificativă a spiritului cultural suficient de mult pentru a deveni o parte a psihicului uman .

Produsele digitale cu interfețe de utilizare întunecate – asociate cu putere, eleganță și mister – sunt o tendință formidabilă. Deși se spune adesea că modul întunecat poate reduce oboseala ochilor, nu există dovezi că acest lucru este adevărat. În anumite circumstanțe, ar trebui, de asemenea, să economisească durata de viață a bateriei. Totuși, de cele mai multe ori, temele întunecate sunt o alegere estetică.

Interfața de utilizare întunecată vs. interfața de utilizare ușoară

Nu toate interfețele sunt potrivite pentru o temă întunecată. Designerii ar trebui să se uite la potrivirea mărcii, la adecvarea culturală și la psihologia culorilor și să ia în considerare impactul emoțional înainte de a alege să opteze pentru una. Este un act de echilibrare dificil.

În timp ce o aplicație financiară care vizează milenialii poate atinge factorul cool cu ​​o temă întunecată, poate fi inadecvată pentru site-ul unei bănci mari, destinat populației generale. Prea bogat, prea întunecat și prea elegant poate deveni mai frustrant atunci când tot ce vor oamenii este să-și verifice soldurile și să plătească o factură.

Interfețele de utilizator întunecate ale aplicațiilor B2B SaaS sunt notoriu dificil de proiectat. Componentele standard ale interfeței de utilizare web, cum ar fi tabelele de date, widget-urile, formularele și meniurile derulante pot arăta ciudat pe o interfață de utilizare întunecată. Deoarece multe scheme de culori nu funcționează bine cu interfețele de utilizare întunecate, anumite mărci și produse — în funcție de tip, context și factori de mediu — nu sunt potrivite și se pot dovedi o provocare de netrecut.

Designerii care nu au mai lucrat cu designul UI întunecat și decid să sară cu ambele picioare s-ar putea găsi în ape agitate, neexplorate. În oceanele de interfețe întunecate, normele sunt îndoite, regulile sunt schimbate și capcanele sunt din abundență.

Acestea fiind spuse, există multe motive bune pentru a utiliza interfețele de utilizator întunecate:

• Când designul este rar și minimalist, cu doar câteva tipuri de conținut
• Când este adecvat pentru context și utilizare, cum ar fi aplicațiile de divertisment pe timp de noapte
• Pentru a crea un aspect izbitor, dramatic

Și, există scenarii când nu este recomandat:

• Când există o cantitate mare de text (citirea pe un fundal întunecat este dificilă)
• Când există multe tipuri de conținut mixt
• Când designul necesită o gamă largă de culori

Contrast în Dark UI Design

O temă întunecată nu este o temă neagră. Cel mai bine ar fi considerată o temă „cu lumină scăzută”. Una dintre principalele preocupări cu interfețele întunecate este obținerea unui contrast suficient, astfel încât elementele vizuale să aibă separare și textul să fie lizibil. Majoritatea designerilor ar crede că folosirea negrului ar fi optimă pentru a obține un contrast puternic. Cu toate acestea, este mai bine să nu utilizați negru adevărat (#000000) pentru fundal sau culori de suprafață . Negrul este cel mai bine rezervat pentru alte elemente de UI și folosit cu moderație. De exemplu, negrul adevărat poate fi folosit pentru elemente mici ale interfeței de utilizare sau pentru o ramă înconjurătoare.

Tema întunecată Google Material Design recomandă utilizarea gri închis (#121212) ca culoare de suprafață a temei întunecate „pentru a exprima înălțimea și spațiul într-un mediu cu o gamă mai largă de adâncime”. În plus, mulți designeri recomandă adăugarea unei nuanțe subtile de albastru închis la gri închis atunci când definesc schema de culori. Tinde să creeze un ton mai întunecat pentru ecranele digitale și o paletă de culori mai întunecată a interfeței de utilizare.

Un avantaj al utilizării unei game de gri este că oferă designerilor latitudine, deoarece poate fi exprimată o gamă mai largă de culori. O paletă de gri ajută, de asemenea, la crearea adâncimii, deoarece umbrele pot fi văzute mai ușor împotriva gri față de negru.

O atenție deosebită trebuie acordată contrastului textului în interfețele de utilizare întunecate.

Ghidurile de accesibilitate a conținutului web (WCAG) cer ca „prezentarea vizuală a textului să aibă un raport de contrast de cel puțin 4,5:1 ”, cu excepția textului la scară mare, care ar trebui să aibă un raport de contrast de cel puțin 3:1 . Prin urmare, designerii trebuie să se asigure că conținutul rămâne confortabil lizibil în modul întunecat.

De asemenea, este o idee bună să testați contrastul adecvat între alte elemente ale interfeței de utilizare, cum ar fi carduri, butoane, câmpuri și pictograme de pe diferite afișaje și dispozitive. Dacă există o separare imperceptibilă între elementele UI, designul se amestecă prea mult și riscă să devină plictisitor.

Atenție la focalizare: Culoare

Culoarea iese în evidență în interfețele întunecate. Cel mai bine este să folosiți scheme cu culori de accent mai deschise, nesaturate. Evitați utilizarea culorilor saturate în interfețele de utilizare întunecate, deoarece acestea pot vibra vizual împotriva suprafețelor întunecate. În plus, ca cea mai bună practică, culorile trebuie să treacă de standardul AA al WCAG de cel puțin 4,5:1 atunci când sunt utilizate cu text.

Când definiți o schemă de culori pentru o interfață de utilizare întunecată, Google recomandă un număr limitat de accente de culoare pentru a păstra cea mai mare parte a spațiului disponibil pentru suprafețele întunecate. Folosirea culorilor complementare împărțite poate ajuta. Schema are o culoare dominantă și două culori adiacente complementului culorii dominante. Acest lucru asigură contrastul necesar fără tensiunea schemei de culori complementare.

Schema corectă de culori poate ajuta la crearea unui contrast bun. Colorable este un instrument util pentru selectarea combinațiilor de culori compatibile cu accesibilitatea de text și culori de fundal.

Textul și elementele esențiale, cum ar fi butoanele și pictogramele, ar trebui să respecte standardele de lizibilitate atunci când apar pe fundal întunecat. După cum se vede în aplicația Jabra Sound+ de mai sus, alte culori decât albul pot fi folosite pentru text și pictograme.

Site-ul Google Material Design are un generator de palete de culori util (sub „Instrumente pentru alegerea culorilor”) cu care designerii pot crea și aplica palete de culori într-o interfață de utilizare. Nivelul de accesibilitate al combinațiilor de culori poate fi măsurat și cu un instrument de culoare însoțitor.

„Folosiți culori puternic contrastante pentru a îmbunătăți lizibilitatea. Mulți factori afectează percepția culorii, inclusiv dimensiunea și greutatea fontului, luminozitatea culorii, rezoluția ecranului și condițiile de iluminare.” Ghid Apple pentru interfața umană

Mai puțin este mai mult: valorificarea spațiului negativ

Unul dintre elementele fundamentale ale designului de succes al interfeței de utilizator întunecate este utilizarea abil a spațiului negativ. Dacă sunt proiectate prost, interfețele de utilizator întunecate pot face ca produsele digitale să pară grele și obținute. Pentru a contrabalansa, designerii pot face interfețele de utilizator întunecate mai ușoare, profitând de spațiul negativ din designurile rare și minimaliste. Designul minimalist este la fel de mult despre ceea ce nu există, cât și despre ceea ce este. Când este folosit cu pricepere, spațiul negativ va face o interfață de utilizator întunecată mai ușor de scanat și va permite oamenilor să absoarbă mai ușor informațiile.

Compozitorul francez Claude Debussy a spus odată: „ Muzica este spațiul dintre note ”. Același sentiment este valabil și pentru scanabilitate - spațiul negativ dintre elemente este ceea ce face ca un aspect să funcționeze. O cantitate liberală de spațiu negativ în jurul elementelor UI este ceea ce le oferă definiție. Subliniază conținutul important și oferă spațiul de respirație necesar pentru a se asigura că designul nu se simte dens și aglomerat. Fără spațiu de respirație, creierul uman este mai puțin probabil să scaneze punctele de interes și mai probabil să rătăcească.

Interfețele înghesuite cu prea multe elemente și text sunt nenorocirea designului UI întunecat de înaltă calitate. Luând în considerare cu atenție ierarhia vizuală în interfețele de utilizator întunecate, designerii își pot scana mai ușor creațiile, sporind astfel experiența utilizatorului.

Cuvinte de stil: tipografie

Fiecare fragment de text din interfețele de utilizator întunecate necesită o examinare atentă. Preocuparea este dublă: lizibilitate și contrast. În primul rând, este vorba despre dimensiune. Textul trebuie să fie suficient de mare pentru o bună lizibilitate (textul mic pe fundal întunecat este mai greu de citit). În al doilea rând, trebuie să existe suficient contrast între text și fundal.

Disponibilitatea a mii de fonturi digitale facilitează afișarea mesajelor cu impact pentru anteturi și mesaje eroi. Designerii pot atenua problemele de lizibilitate prin creșterea contrastului și ajustând dimensiunea fontului, spațierea caracterelor și înălțimea liniilor pentru text mai mic.

Recomandarea W3C AAA pentru text de dimensiune normală (mai puțin de 18 puncte dacă nu este aldine) este să aibă un raport de contrast de cel puțin 7:1 . Acest lucru se aplică și altor elemente ale UI: pictograme, imagini de text și etichete de text, cum ar fi etichetele butoanelor. Este de sarcina designerilor să se asigure că toate produsele digitale sunt accesibile tuturor. Nu numai că îmbunătățește capacitatea de utilizare și, prin urmare, UX, este legea în majoritatea țărilor.

Există nenumărate opțiuni disponibile pentru designeri pentru a procura fonturi excelente care funcționează bine în interfețele de utilizator întunecate. Fonturile Google, Biblioteca de fonturi și Adobe Typekit sunt câteva care oferă o integrare ușoară a aplicației sau a site-ului și o gamă largă de opțiuni.

Adâncimea comunicării: altitudinea

O temă întunecată nu înseamnă plată. Cu teme luminoase, iluminarea, umbrirea și umbrele creează un sentiment de profunzime. Cu interfețele de utilizare întunecate, este mai dificil, deoarece conțin suprafețe predominant întunecate, cu accente rare de culoare. Cu toate acestea, designerii pot folosi trei sau patru niveluri de elevație cu scheme de culori corespunzătoare pentru ca textul să transmită adâncimea.

De ce adâncime? Cele mai multe sisteme de design moderne folosesc un sistem de niveluri de cotă pentru a comunica adâncimea. Un sentiment de profunzime corespunde lumii naturale. Viziunea noastră are percepție în profunzime și trăim într-o lume 3D. Adâncimea ajută la evidențierea ierarhiei vizuale a unei interfețe. Elementele din prim plan, de exemplu, atrag atenția asupra lor, cum ar fi un dialog de avertizare.

Suprafețele sunt iluminate diferit pentru a semnifica diferite niveluri de cotă. Cu cât este mai mare poziția unei suprafețe în stiva de cote (mai aproape de o sursă de lumină implicită), cu atât suprafața este mai ușoară. O suprafață mai luminoasă face mai ușor să distingeți cota între componente și ajută la vizualizarea umbrelor, făcând marginile fiecărei suprafețe mai vizibile.

Conceperea culorii suprafeței fiecărui nivel necesită grijă. Cel mai bine este să nu ai mai mult de patru sau cinci niveluri. Designerii trebuie să țină cont de contrastul textului, pe măsură ce suprafețele cresc mai sus în stivă și devin mai ușoare. Dacă culoarea de fundal nu este suficient de întunecată pentru a atinge un nivel de contrast de cel puțin 15,8:1 între textul alb și suprafață, textul de la cea mai înaltă (și mai deschisă) suprafață ridicată nu va trece standardul de 4,5:1. În unele cazuri, cel mai bine ar fi să specificați culoarea textului unui element ca negru adevărat (#000000) în sistemul de design pentru a obține un contrast bun pe un fundal gri deschis.

Inspirație întunecată pentru design UI

Reflectând la principiile subliniate mai sus, iată câteva exemple excelente de design întunecat al interfeței de utilizare:

Atom Finance folosește o temă întunecată pentru un aspect sofisticat și își limitează culorile de accent la trei. Aspectul folosește spațiu negativ și un design rar, minimalist pentru un site web financiar complex. Site-ul folosește bine umbrirea subtilă pentru a indica cotele diferite ale componentelor în interfața de utilizare.

Ambele site-uri web cu tematică întunecată minimalistă folosesc o tipografie îndrăzneață. Umbrirea atentă cu o singură culoare de accent este utilizată în conformitate cu cele mai bune practici de proiectare a interfeței de utilizare întunecate.

În ciuda provocărilor legate de lucrul cu teme întunecate pentru aplicațiile SaaS, acest tablou de bord de vizualizare a datelor pentru IBM este exemplar. Numărul de culori de accent este menținut la un nivel minim, iar site-ul folosește umbrire subtilă pentru a afișa diferite cote de interfață.

Aceste aplicații mobile respectă cele mai bune practici de proiectare a interfeței de utilizare întunecate prin utilizarea negru adevărat numai pentru rame, umbrirea adecvată a elementelor pentru diferite niveluri de înălțime și un număr limitat de culori de accent.

rezumat

Decizia de a utiliza un design întunecat al interfeței de utilizare în locul unuia tradițional trebuie abordată cu discreție. Nu ar trebui să fie aleasă din motive greșite - pentru a fi la modă, diferită sau pentru a imita designul altcuiva. Designerii ar trebui să aibă o rațiune solidă pentru alegerea lor și să ia în considerare conținutul, contextul de utilizare și dispozitivul pe care va apărea designul.

Temele întunecate sunt potrivite pentru unele produse digitale, dar o adevărată luptă de implementat pentru altele. Simplitatea este cheia. Sunt excelente pentru a prezenta conținut minimalist, vizualizări de date, site-uri media și platforme de divertisment. Se potrivesc slab pentru platformele B2B complexe, cu volum mare de date, pagini cu volum de text și o mulțime de conținut variat.

Pentru designerii curajoși gata să treacă peste noi frontiere stilistice și să exploreze interfețele întunecate printr-o lentilă emoțională și estetică, aceștia oferă un teren de joacă captivant de posibilități infinite — pe „partea întunecată”.

Spune-ne ce crezi! Vă rugăm să lăsați mai jos gândurile, comentariile și feedback-ul dvs.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Interfețe de utilizare întunecate. Cei buni şi cei răi. Ce să faci și ce să nu faci.
• Principiile designului și importanța lor
• Explorarea principiilor Gestalt ale designului
• Convingător și în mișcare – Un ghid pentru principiile de proiectare a mișcării
• Îmbunătățiți-vă UX cu aceste principii de design de interacțiune de succes