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, 2023.09.21. – Egy új fejezettel bővítettünk: Mikor és hogyan alkalmazd a sötét módot?)

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.

Milyen előnye lehet egy webdesign számára a sötét módnak?

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.

Mit mondanak a felhasználók, miért szeretik a sötét módot? (FRISSÍTÉS, 2023.09.12.)

Egy vizsgálatban 115 embert kérdeztek meg első körben arról, hogy világos vagy sötét módot használnak-e a mobiljukon. Mint kiderült egyharmaduk használt sötét módot, egyharmaduk világos módot, egyharmaduk pedig a kettő kombinációját.

Ezt követően azt is megkérdezték a sötét módot hsználókat, hogy miért használják azt:

• a szemfáradás csökkentése
• akkukímélés
• esztétikai szempontok
• látási problémák

A szemfáradás csökkentése a leggyakoribb oka a sötét mód használatának az átlagos látással bírók körében. Mint az egyik felhasználó fogalmazott: „a szemem mindig nagyon érzékeny volt az erős fényekre”. Ezért ő úgy érzi, hogy sötét módnál kevésbé fárad el a szeme, kevesebbszer fáj a feje. Pedig a sötét mód használata nem garantálja a fejfájás csökkenését, viszont a hiedelem elég széles körben elterjedt, és arra ösztönzi a felhasználókat, hogy állandó jelleggel sötét módot használjanak. Egy vizsgálat szerint ugyan a sötét mód sötét környezetben valóban kevésbé fárasztja a szemet, a különbség azonban nagyon csekély mértékű a világos módhoz képest.

Sokak számára a sötét mód melletti elsődleges indok az akkumulátor kímélése, azaz ha nem világít a kijelző, akkor feltételezésük szerint kevesebbet fogyaszt a mobiltelefon. Ez persze valid érv, de csak OLED kijelzők esetében. 2023-ban nagyjából az okostelefonok fele használt ilyen kijelzőt. Az OLED-nél ugyanis, ha teljesen fekete (#000000) egy pixel, akkor az a pixel teljesen ki van kapcsolva, illetve minél világosabb, annál többet fogyaszt.

A Purdue Egyetem vizsgálata szerint, ha 100 százalékra van állítva a kijelző fényereje, akkor sötét móddal 67 százalékos megtakarítást lehet elérni. Ugyanakkor, ha 30 százalékos a kijelző fényereje, akkor már csak 14 százalék a megtakarítás. Azt is érdemes figyelembe venni, hogy hiába használunk sötét módot energiamegtakarítás céljából, ha sok videót, képet, grafikát nézünk, ugyanis ezek pont úgy jelennek meg, mint világos módban.

Vannak, akik esztétikai szempontokra hivatkoznak: vagyis szerintük jobban néz ki a sötét módban a felület. Sokan ugyanakkor azt gondolják, hogy ha jobban néz ki a felület, akkor könnyebb is használni. Ez azonban nem törvényszerű. Egy esztétikusnak tekintett design nem fogja megoldani a használhatósági problémákat, illetve nincs is hatással rá.

Végül, vannak olyan szemproblémák, például a szürkehályog, amikor előnyösebb a sötét mód. Ilyenkor, ha sok fény éri a szemet, a felhasználó nehezebben fókuszál. Ez lehet talán a leginkább érvényes indok a sötét mód használata mellett, illetve persze az egyéni ízlés: ha valaki úgy érzi, hogy jobban szereti a fekete színt, akkor jobban is érzi magát, ha ilyen felületet lát.

Mit mutatnak a kutatások a sötét móddal kapcsolatban?

Az előbbiekben már hivatkoztunk vizsgálatokra, nézzük meg azonban részletesebben néhány kutatást!

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. 

Mikor és hogyan alkalmazd a sötét módot? (FRISSÍTVE, 2023.0921.)

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.

Mikor érdemes használni a sötét módot, és mikor nem?

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 designod, amivel nem fér össze a sötét mód. Mit kell megfontolnod?

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

• sok rajta a videó vagy a fotó, mivel ezek sötét és világos háttéren is azonosan jelennek meg, így nincs nagy jelentősége a háttérnek,
• amikor egyszerű, de klasszikus megjelenést szeretnél elérni.

Ugyanakkor használhatod a sötét hátteret, ha

• a felhasználók jellemzően hosszú ideig használják az oldalad vagy appod, mivel ilyenkor jelentkezhet a szemfáradás és az akkumerülés,
• általában sötétben használják az appod vagy weboldalad,
• stílust és luxust akarsz bemutatni (ha jól csinálod kapsz egy modern, de egyben egyszerű megjelentést).

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. Ezt tesztelni kell.

Célszerű persze arra is figyelni, hogy a felhasználóid 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élcsoportoknak 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.

Milyen problémákat szokott okozni a sötét mód a designban?

Ha a sötét mód jól meg van tervezve és le lett tesztelve, akkor a legtöbb esetben jó a felhasználói élménye. Gyakran lehet azonban látni azt, hogy egy pluginnel oldják meg a váltást a világos és sötét mód között, ami ugyan leegyszerűsíti a munkát, viszont az eredménye nem mindig kielégítő. Sok olyan apróság merül fel, mely jelentősen rontja egy weboldal vagy applikáció használhatóságát. Csak hogy néhány példát említsünk:

• Gondok lehetnek a képek, grafikák megjelenésével, például, amikor sötét módban egyszer csak láthatóvá válik, hogy egy kép háttere nem átlátszó. De ha az, akkor sem feltétlenül jelenik meg jól a világos módban tetszetős grafika a sötét háttér előtt.
• Nem működnek az árnyékok: ha világos háttéren egy elem sötét árnyékot kap, az rendben van, de amikor átváltunk sötét módra, akkor fekete háttéren az árnyék világosabb lesz a háttérnél. Ez ugyanis nem mélységet mutat, hanem azt, mintha az elem világítana.
• Máshogy jelenik meg az overlay: ha egy felületre ráhúzunk egy overlayt, akkor az arra rákerülő modal világosabb azért, hogy kiemelkedjen. Ez világos módban működik, sötét módban azonban az overlay alatti rész annyira sötétté válik, hogy szinte alig látható.
• Romlik az olvashatóság: azok a túl vékony vagy túl vastag betűk, melyek jól mutatnak világos háttéren, sötéten nem. Előbbi elveszik benne, utóbbi zavaróan dominál, világít, ha nagy a kontraszt. Ráadásul a színkontraszton is változtatni kell általában lennie az olvashatóság érdekében.
• Gondok vannak a logókkal: ha a logóban sötét elemek vannak, és nem igényel különösebb átgondolást a használata világos felületen, sötét háttéren nem biztos, hogy működni fog. Ilyenkor valamilyen plusz designmegoldásra lesz szükség sötét módban.
• Kártyák, keretek, elválasztók: mindegyik tud működni mindkét módban, a kontrasztokra viszont figyelni kell, mert a kártyák vagy az elválasztók gyakorlatilag láthatatlanná válhatnak.
• Lebegő elemek: ezeknek jól láthatóan el kell különülniük az alattuk lévő felülettől, ami világos módban nem okoz gondot, ha erre van tervezve az oldal, de sötét módba váltásnál ez nem minden esetben történik meg. Erre külön figyelni kell.
• QR-kódok: ezeket nem kellene invertálni, mert nem biztos, hogy az olvasó app megbirkózik fele, ha fekete háttéren fehér a szkennelhető kód.

Hogyan használd a sötét módot?

Mint az előbbiekben látható, nem olyan egyszerű a váltás sötét módra, ugyanakkor mivel sok felhasználó – gyakran indokolatlanul, de – szereti, ezért érdemes lehet kiszolgálni az igényüket.

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
• vizsgálj meg minden egyes elemet, ha pluginnel váltasz sötét módra, mert biztosan lesz olyan, ami rosszul jelenik meg.