Webshark Blog

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? Ugyanakkor arra is figyelj, hogy mi a jobb a felhasználóidnak! (Frissítés, 2021.01.21. – Egy új fejezettel bővítettünk: Jó-e a felhasználóknak a sötét mód? A válasz nem is olyan egyszerű)

Már évek óta 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 miért 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, 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!

De jó-e a felhasználóknak a sötét mód? A válasz nem is olyan egyszerű

Most a Nielsen Norman Group szentelt egy bejegyzést a témának, és habár saját kutatást nem végeztek, összeszedtek néhány releváns vizsgálatot, melyek segítenek eligazodni a hatékonyság kérdésében.

A kiindulási pont az, hogy a szemünket érő fény mennyisége befolyásolja az érzékelésünket. Ennek oka, hogy a pupilla változtatja méretét a beérkező fény mennyiségének hatására. Amikor kint világos van, akkor összehúzódik, amikor pedig sötét, akkor kitágul. A kisebb pupillaméret pedig csökkenti az esélyét a szférikus aberráció megjelenésének, vagyis a kép fókuszáltabb és nagyobb a mélységélesség. Ez pedig azt jelenti, hogy az embereknek szűk pupillánál, azaz nagyobb fényerő mellett könnyebb a szövegre összpontosítaniuk, melynek eredményeként a szemeik kevésbé fáradnak el. 

Egy másik fontos tényező, hogy ahogy öregszünk, a pupillánknak csökken a mérete. A kisebb pupilla pedig kevesebb fényt enged be, mely rontja a szövegolvasási képességünket, különösen gyenge megvilágításnál (ami éjszaka is jellemző). Másrészt viszont, ahogy öregszünk, egyre érzékenyebbek leszünk az erős fényre. 

Az első vizsgálat a sötét móddal kapcsolatban még a ‘80-as évekből származik, és azt állapította meg, hogy a kontrasztos polaritás nem befolyásolja a vizuális teljesítményt. Azóta azonban több új kutatás is megjelent, melyek ellentétes eredményekre jutottak. Az NNG ezek közül kettőt emelt ki: az egyiket még 2013-ban tették közzé az Ergonomics című lapban, míg a másikat 2017-ban az Applied Ergonomicsban. Utóbbi azt vizsgálta, hogy a különböző felületeken milyen gyorsan tudnak elolvasni egy-két szót az emberek, ami jellemző az okostelefonos, okosórás interakciókra. 

Az első kutatásra visszatérve: abban fiatalabbakat (18-33 év) és idősebbeket (60-85 év) is vizsgáltak, és egyik részvevő sem szenvedett semmilyen szembetegségben. Vizsgálták a látásélességet és az olvasási hatékonyságot, azzal, hogy a tesztalanyoknak hibákat kellett kiszűrniük egy rövid bekezdésben. A kutatók azt is mérték, hogy a résztvevők panaszkodnak-e szemfáradtságra, fejfájásra, izomhúzódásra, hátfájdalomra, illetve miként alakul a közérzetük.

A lényeg az, hogy megállapították: minden tekintetben a világos mód volt a nyerő. Függetlenül az életkortól, a világos mód esetén jobb volt a látásélesség és az olvasás is hatékonyabb volt. Ugyanakkor azt is megállapították, hogy időseknél kisebb volt a különbség, mint a fiataloknál. Ez azt jelenti, hogy bár a világos mód az idősebbek számára is előnyösebb, nem nyertek vele annyit, mint a fiatalok.

Ami a fáradtsági mutatókat illeti, nem találtak szignifikáns különbséget. 

Egy másik kutatás, mely a Human Factorsban jelent meg ugyanettől a kutatócsoporttól, azt is vizsgálta, hogy a szövegméret miként viszonyul a kontrasztos polaritáshoz és az olvasási hatékonysághoz. Azt állapították meg, hogy a világos mód előnye lineárisan nőtt, ahogy a betűméretek csökkentek. Ez azt jelenti, hogy a kisebb betűknél még könnyebb volt a felhasználóknak világos módban olvasni. Ami ezen túl érdekes, hogy bár a kutatás egyértelmű teljesítmény-előnyt mutatott a világos módnál, a felhasználók mégis úgy érzékelték, hogy azonos az olvashatósága a világos és a sötét módban megjelenő szövegeknek is. Ennek kapcsán az NNG természetesen a usability első számú szabályára hívja fel a figyelmet, mégpedig arra, hogy ne hallgass a felhasználókra!

De visszatérve a korábban már említett második kutatásra, az azt vizsgálta, hogy a környezet megvilágítása miként befolyásolja egy lexikális döntési feladat elvégzésének hatékonyságát. (Itt a tesztalanyoknak mutatnak egy betűsort, és azt kell eldöntenie, hogy az egy értelmes szó, vagy sem). A szavakat sötét és világos módban is megmutatták a tesztalanyoknak különböző környezeti megvilágítást (nappali és éjszakai fény), illetve eltérő betűméreteket is variálva. 

A vizsgálat azt állapította meg, hogy mind a megvilágítás, mind a mód, mind a szövegméret befolyással volt a teljesítményre. Mégpedig úgy, ahogy az várható: a szimulált nappal gyorsabb döntéseket eredményezett, a világos mód előnyösebb volt, mint a sötét mód, és a nagyobb betűket gyorsabban olvasták az alanyok, mint a kisebbeket. 

Ami pedig igazán érdekes megállapítás, hogy nappal csekélyebb volt a hatása a kontrasztos polaritásnak, de éjszaka a világos mód jobb teljesítményt eredményezett, mint a sötét mód. Ráadásul éjszaka nehezebb volt a kisebb betűméretű szövegeket is olvasni sötét módban, mint világos módban. 

Ezek azonban csak a rövid távú hatások, érdemes egy pillantást vetni a hosszú távú hatásokra is. Márpedig egy 2018-as kutatás szerint a világos módnak való tartós kitettség rövidlátáshoz vezethet. Ez pedig azt jelenti, hogy bár a teljesítményünk jobb világos módot használva rövid távon, ennek hosszú távon ára lehet.

Egy másik fontos kutatás a témában – mely az egész technológiai iparágat a sötét mód irányába fordította – Gordon Legge és munkatársainak vizsgálata volt a Minnesota Egyetemen, ahol központi látáskárosodással és szürkehályoggal érintett tesztalanyoknál vizsgálták a sötét és világos módot. Ebből az derült ki, hogy a szürkehályogban szenvedő alanyok jobban látnak sötét módban, mivel minél nagyobb a szemükbe érkező fény mennyisége, annál nagyobb a torzítás. A másik csoportot nem érintette a sötét és a világos mód váltása.

Sokan felhívták azonban a figyelmet arra a problémára, hogy Legge kutatásai még akkor születtek, amikor CRT-kijelzőket használtak, nem pedig a most elterjedt LED-kijelzőket. Márpedig ezek a CRT-kijelzők világos módban hajlamosabbak voltak villogni, mint sötét módban, így lehet, hogy mindössze ennek köszönhető az eredmény.

Összességében tehát azt lehet mondani, hogy miközben a sötét módnak ugyan lehet némi előnye a rosszul látó személyek esetében, elsősorban azoknál, akiknek szürkehályogjuk van, a jól látó személyek teljesítménye világos mód esetében jobb. Ennek oka, hogy ilyenkor a pupilla szűkül, ezáltal pedig kisebb a szférikus torzítás, nagyobb a mélységélesség, így jobban tudnak a részletekre fókuszálni mérsékeltebb szemfáradás mellett. És habár nagyobb betűméreteknél, illetve erős környezeti megvilágításnál már nem mutatkozik meg ez az előny, mégsem igazán van értelme emiatt sötét módra váltani. 

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.

Így a legjobb, ha nem mi döntünk a világos vagy a sötét mód mellett, hanem a felhasználókra bízzuk azt, hogy kiválasszák a maguk számára, melyik módot szeretnék használni. Hiszen hosszú távon ronthatja a szemet a világos mód, valamint néhány szemprobléma esetén hatékonyabb a sötét mód, és végül vannak, akik egyszerűen jobban szeretik a sötét módot.