Webshark Blog

A jövő sötét, a digitális felületeken mindenképpen. Nyilván érzed Te is, hogy a fehér évtizedek után egyre több esetben tudsz váltani úgynevezett “sötét módra” a különféle operációs rendszereknél és egyéb appoknál. Miért ne tennéd meg a weboldaladnál?

Már 2018-ban látható volt, hogy rohamosan terjednek a sötét hátterű design-változatok a digitális felületeken: egyre több appban lehet váltani fekete vagy sötétszürke háttérre és fehér betűkre, ahogy maguk az operációs rendszerek is ezzel kísérleteznek.

Első pillantásra talán újnak tűnik a sötét felületek térhódítása, de nem kell távolra tekinteni, hogy kiderüljön: nem most találták fel a sötét módot. Csak az elmúlt évek, évtizedek fehér világa után tűnik furcsának. De ha jobban belegondolsz, akkor azt látod, hogy régen a fekete-fehér, illetve fekete-zöld felületek uralkodtak a monitorokon, mégpedig a fekete dominanciájával.

Miért szeretjük a sötétet? És a világost?

Az ember alapvetően egy nappali lény, ugyanakkor az éjszaka sem idegen tőle. Éjszaka más tevékenységeket végez, mint nappal. Megfigyel, reagál, gondolkodik, önelemez. A sötétben másfajta mentális állapotba kerülünk, és mivel nem látunk tisztán éjszaka, ezért beindul a képzeletünk.

Ugyanakkor az első vizuális alkotások világos felületekre kerültek, mert azon jól látszottak a színek. Ez meg is maradt az újságok, a könyvek vagy akár a weboldalak esetében is. Az olvashatósági kutatások mindig azt mondják, hogy az emberek világos felületen sötét betűket tudnak a legkönnyebben befogadni. Ez a kialakítás mára alapvetően elfogadottá vált.

Ennek ellenére a sötét felületeknek megvan a helye a designban. Hiszen, míg az írott szövegek domináns világos színe inkább praktikusságot jelez, addig a sötét épp az ellentétét. A sötétben megjelennek az álmok, a félelmek és a fantáziák.

Az első számítógépek és terminálok, melyeknek kijelzőjük volt, szintén fekete háttéren jelenítettek meg fehér betűket. Az első grafikus felületek megjelenése előtt a fejlesztők még nem foglalkoztak a felhasználói élménnyel. Túl akarták szárnyalni az írógépet, nem pedig utánozni azt.

Ugyanakkor az emberek jobban reagáltak azokra a digitális termékekre, melyek a valósághoz hasonlítottak. Egy digitális felületen megjelenő boríték nézzen ki olyannak, mint egy papírboríték, vagy a lomtár legyen olyan, mint egy szemetes. Ez vezetett a fehér felületek uralmához a digitális termékeknél.

Ma már nem is kérdés, hogy ha a tartalom nagyobb része szöveg, akkor milyen színekkel kell megjelennie. A könyvek és az újságok már megmutatták, hogy mi működik. Ezért van az, hogy a legsikeresebb weboldalak és appok elég egyforma színvilágúak.

Pedig nem csak a fehér, hanem a fekete háttér is engedi érvényesülni a tartalmat. Egyszerűbb persze a fehéret használni, hiszen, ha képek és szöveg is szerepel egy tartalomban, akkor mindkettő egyaránt jól jelenik meg rajta: a szöveg olvasható, a kép pedig kiemelkedik a háttérből. A fehér tulajdonképpen üres, észrevehetetlen. De vannak helyzetek, amikor a fekete jobb választás.

Például, ha egy olyan céged van, mely különböző termékeket gyárt, akkor azokat szeretnéd minél inkább a középpontba helyezni. Ez azt jelenti, hogy minden felesleget és extrát eltávolítasz a közelükből, hogy a termék minél inkább felhívja magára a figyelmet. A fekete vagy sötét felhasználói felület pont ezt a zavar-mentes élményt kínálja. Ez a technika nagyon jól működik. Az Apple például gyakran sötét háttér elé helyezi az újonnan bemutatott eszközeit.

Ez megjelenik a weboldalukon is, habár ott a hosszabb szövegek miatt gyakori a fehér hátteres megjelenés is.

Akkor is jól használható azonban a sötét háttér, amikor egy tartalmat elsősorban csak annak átfutására terveztek. Ilyenkor nincs szó valódi olvasásról, csak a tekintet végigsiklik a felületen, és kicsipeget bizonyos részleteket az ott található információk közül. Ez lehetőséget ad a designereknek, hogy bizonyos részeit kiemeljék a felhasználói felületnek. A megoldás jól működik analitikai eszközöknél, ahol segíti a felhasználókat abban, hogy gyorsabban reagáljanak.

És természetesen szórakoztató tartalmaknál is van helye a sötét felületeknek, hiszen ezeket általában az esti órákban fogyasztjuk. Ilyenkor a sötét felülettel két legyet üthetünk egy csapásra: egyrészt illeszkedik a környezethez (a sötéthez), ugyanakkor remekül kiemelhetők a kiválasztott tartalmak. A sötét felületek használatával maximális kötődés alakítható ki a felhasználóval.

A lényeg tehát az, hogy míg a tartalommal teli weboldalak olyanok, mint egy piac nappali fényben: minden ott van az orrod előtt, addig a sötét felületek olyanok, mint egy színpad, ahol a reflektorok irányítják a figyelmet valamire, amit ki akarsz emelni. A sötétség nagyon jól kihangsúlyoz mindent, amit körbevesz.

Miért praktikus a sötét mód?

Mára elképesztő mennyiségben vesznek minket körül a kijelzők, melyeknek fehér színű sugárzása elég zavaró tud lenni, különösen az esti órákban. Márpedig ezek a kijelzők nagyrészt nem napfényes helyeken és időszakokban működnek, hanem beltérben és sötétben.

Eközben a kijelzők evolúciója mára eljutott egy olyan pontra az OLED-nek köszönhetően, amikor a fekete valódi fekete: azaz a fény ellentéte jelenik meg ezeken a típusú kijelzőkön (ellentétben az LCD-kkel), mivel nem igényelnek háttérvilágítást. Ráadásul ez az akkumulátorokat is kíméli, hiszen míg LCD-nél folyamatosan megvilágítja a teljes kijelzőt a háttérfény, addig az OLED-nél a fekete pixelek kikapcsolt állapotot jelentenek.

Mindez pedig lehetővé teszi azt, hogy újult erővel kezdjük használni a sötét módot, illetve a weboldalunkkal, appunkkal is alkalmazkodjunk ahhoz, hogy egyre elterjedtebbek a sötét hátterű megoldások.

Azt viszont tudni kell, hogy a sötét háttereknél a design is jelentős mértékben változik, oda kell figyelni pár új dologra, különben használhatatlanná válik a weboldal. Nem elég tehát az, hogy az eddigi világos hátteret lecseréled egy feketére. Ezzel korábban már foglalkoztunk a színekről szóló bejegyzésünkben, de nézzük meg újra részletesen!

Hogyan alkalmazd a sötét módot?

Az egyik legfontosabb dolog, hogy ha sötét módra váltanál az appod vagy weboldalad designjában, akkor nem egyszerűen annyit teszel, hogy lecseréled a fehéret feketére és fordítva. A dolog egy kicsit bonyolultabb. Többek között azért, mert fekete háttéren például nem lesz lehetőséged árnyékolásokat használni, vagyis a design elég flatté válik, és nem a jó értelemben.

Tehát, ha sötét designt használnál, akkor azon belül sötétebb és világosabb felületekre lesz szükséged: a kiemelkedő részek világosabbak, a háttérben lévők sötétebbek lesznek. Ez a valóságot próbálja leképezni, és mindjárt megjelenik egy eszköz a hierarchia kialakítására.

A sötét háttér nem feltétlenül jelenti azt, hogy a korábbi elsődleges vagy kiemelkedő színeidet ne használhatnád, hiszen akár passzolhatnak is hozzá, különösen egy ikon esetében. Mindig figyelni kell azonban kontrasztra, vagyis annak mértékére. Ha nem elegendő a kontraszt, akkor bajosan fogja magára felhívni a figyelmet az adott elem, ami már gondot jelent a designban.

A probléma tipikusan a telített színeknél jelentkezik, melyeket nagy előszeretettel használunk gomboknál vagy egyéb figyelemfelhívő elemeknél világos háttereken. Ez azonban nem működik ugyanúgy sötét módban. A Google ilyenkor egy plusz 40 százalékos fehér layert tesz rá a színre a Material Guidelines szerint, vagyis egyszerűen egy új színt kezd használni, amikor sötét módra vált. Ez az érték egy jó kiindulópont lehet mindenki számára. Ragaszkodni persze nem muszáj hozzá, de a kontrasztot mindig figyelni kell.

A következő probléma a betűknél jelentkezik, az olvashatóságot tekintve. A megszokott színeid a megszokott betűméretben nem valószínű, hogy olvashatóak maradnak. Ebben az esetben vagy a színen kell módosítani, vagy a méreteken.

Ugyanakkor nem csak a színes betűkkel lesz gond sötét felületeken, hanem a fehérrel is. Az nem működik, hogy egy teljesen fekete háttérre ráhelyezel maximálisan fehér betűket. Ebben az esetben ugyanis elkezdenek egybefolyni a szemlélő számára a világító betűk, és olvashatatlanná válik a szöveg. Tehát ahogy egy teljesen fehér háttér sem nyerő megoldás, úgy a teljesen fehér szöveg sem fekete háttéren.

Amire még figyelj sötét módnál:

• alapvetően érdemes nagyobb betűméretet használni, mint világos témáknál,
• vedd a megszokottnál nagyobbra a white space-t, azaz a negatív teret
• tarts nagyobb távolságot az egyes betűk és a sorok között is
• a bekezdések is lehetnek rövidebbek és jobban elválasztottak, mint világos témáknál
• használj kevesebb szöveges tartalmat, mert egyébként zsúfoltnak hat majd a weboldal.

Van, amikor el kell felejteni a sötét módot!

Habár sok esetben kompenzálható a sötét háttér a megváltoztatott méretű és színű elemekkel, vannak olyan dolgok, amik nem működnek sötét háttéren. Ilyen lehet például egy szövegszerkesztő vagy akár egy fotószerkesztő felület. De lehet olyan a megjelenésed, hogy nem fér össze vele a sötét mód. Mit kell megfontolnod?

Akkor használj inkább világos témát, amikor

• sok tartalom van a felületeden
• amikor professzionális megjelenésre törekszel
• amikor egyszerű, de klasszikus megjelenést szeretnél elérni

Ugyanakkor használd bátran a feketét, ha

• ha nem a szöveggel akarsz hatni, hanem a képeid erősek
• stílust és luxust akarsz bemutatni (ha jól csinálod kapsz egy modern, de egyben egyszerű megjelentést)
• ha a felhasználóid sokáig nézik a felületeidet (ellenőrizd használhatósági teszttel!)

Azt is fontos azonban figyelembe venni, hogy ma még a legtöbb szöveges anyag világos háttéren jelenik meg, nyilván nem véletlenül. A kutatások ugyan ellentmondóak, azonban, ha sok szöveget használsz a weboldaladon, akkor nem biztos, hogy egy fekete háttér esetén ugyanannyit fognak elolvasni belőle a látogatók, mint világos háttérnél.

Célszerű persze arra is figyelni, hogy a felhasználód mit várnak el, készen állnak-e a sötét mód használatára, mely egyelőre még szokatlan a weben, a gyors terjedés ellenére. A különböző célcsoportnak eltérő preferenciáik vannak, ezt nem szabad elfelejteni. Érdemes a vizsgálatokra is áldozni, hogy kiderüljön: kísérletezhetsz-e a modernebb megjelenéssel.

Mint az előbbiekből is látható, a sötét téma sok tekintetben rontja a felhasználói élményt, miközben más szempontból előnyös, hiszen csökkenti a szem terhelését, fáradását azzal, hogy nem világít, valamint az akkumulátorra nézve is kedvező hatású. A jövő várhatóan egyre sötétebbé válik a digitális világban, úgyhogy jó, ha Te is felkészülsz!