Så påverkar dark mode läsbarhet, batteri och användarupplevelse
Dark mode har blivit en självklar funktion i många appar, operativsystem och webbplatser. För vissa användare känns ett mörkt gränssnitt behagligare, särskilt på kvällen. För andra blir texten svårare att läsa och kontrasten mer ansträngande.
Det gör dark mode till ett bra exempel på en designfunktion som ofta uppfattas som modern och attraktiv, men som inte automatiskt ger en bättre användarupplevelse.
För designers handlar frågan därför inte om mörkt eller ljust läge är bäst. Det handlar om när respektive alternativ fungerar bäst och hur gränssnittet utformas för att undvika vanliga problem.
Dark mode är mer än att byta svart mot vitt
En vanlig missuppfattning är att dark mode kan skapas genom att helt enkelt göra bakgrunden svart och texten vit.
I praktiken kräver ett bra mörkt gränssnitt betydligt mer arbete.
Om bakgrunden är helt svart och texten helt vit kan kontrasten bli mycket stark. Det kan göra att texten känns nästan lysande mot bakgrunden, särskilt på ljusstarka skärmar.
Därför använder många välutformade mörka gränssnitt i stället:
- Mörkgrå bakgrund i stället för helt svart
- Ljusgrå text i stället för helt vit
- Flera nyanser för att skapa djup
- Dämpade accentfärger
- Tydlig men kontrollerad kontrast
Det är alltså ett eget designsystem, inte bara en inverterad version av det ljusa temat.
Läsbarheten kan bli sämre för vissa användare
Många upplever dark mode som behagligare i mörka miljöer, men mörk bakgrund är inte alltid bäst för längre texter.
Svart text på ljus bakgrund påminner mer om hur vi traditionellt läser böcker, tidningar och dokument. Ögat är också väl anpassat för att läsa mörka tecken mot en ljus yta.
Vid längre läsning kan därför ett ljust gränssnitt fortfarande vara lättare för vissa användare.
Problemet blir särskilt tydligt när:
- Textstorleken är liten
- Teckensnittet är tunt
- Radavståndet är för litet
- Kontrasten mellan text och bakgrund är dåligt justerad
- Stora mängder text visas samtidigt
Ett mörkt tema som fungerar bra i en musikapp behöver därför inte fungera lika bra på en nyhetssajt eller i ett dokumentverktyg.
OLED-skärmar kan faktiskt spara batteri
En av de tekniska fördelarna med dark mode gäller vissa typer av skärmar.
På OLED-skärmar skapar varje pixel sitt eget ljus. När en pixel visar svart kan den i princip stängas av helt.
Det innebär att ett gränssnitt med stora mörka områden kan använda mindre energi än ett ljust gränssnitt, framför allt när skärmens ljusstyrka är hög.
På traditionella LCD-skärmar fungerar tekniken annorlunda. Där används en bakgrundsbelysning bakom hela skärmen, vilket innebär att skillnaden i energiförbrukning mellan mörka och ljusa gränssnitt ofta är betydligt mindre.
Dark mode kan alltså ge batterifördelar, men effekten beror på vilken typ av skärm enheten använder.
Miljön spelar stor roll
Ett gränssnitt används inte alltid under samma förhållanden.
På kvällen i ett mörkt rum kan en ljus webbplats kännas bländande. Då kan dark mode göra användningen betydligt behagligare.
I starkt dagsljus kan situationen vara den motsatta. Ett ljust gränssnitt kan ge bättre upplevd tydlighet eftersom skärmen behöver konkurrera med mycket omgivande ljus.
Det är en av anledningarna till att många operativsystem och appar erbjuder automatiskt byte mellan ljust och mörkt läge beroende på tid på dygnet eller systeminställning.
Färger fungerar annorlunda på mörk bakgrund
Färger som fungerar bra på vit bakgrund behöver inte fungera lika bra i ett mörkt gränssnitt.
Mycket mättade färger kan kännas starkare när de omges av mörka ytor. En klar blå eller grön knapp som känns balanserad i ett ljust tema kan bli visuellt dominerande i dark mode.
Designers behöver därför ofta skapa separata färgskalor för de två lägena.
Det gäller särskilt:
- Knappar
- Länkar
- Varningar
- Statusindikatorer
- Grafer
- Ikoner
Att använda exakt samma färgkoder i båda teman leder sällan till det bästa resultatet.
Skuggor blir svårare att använda
I ljusa gränssnitt används skuggor ofta för att visa att ett kort, en dialogruta eller en meny ligger ovanpå ett annat element.
I ett mörkt gränssnitt syns traditionella svarta skuggor betydligt sämre.
Därför behöver djup ofta kommuniceras på andra sätt, exempelvis genom:
- Ljusare bakgrund på element som ligger högre
- Diskreta kantlinjer
- Skillnader i gråtoner
- Lätta ljuseffekter
Det här är en detalj som lätt missas när ett ljust designsystem snabbt konverteras till dark mode.
Bilder kan bli för ljusa
En annan utmaning är fotografier och illustrationer.
Ett gränssnitt kan vara mycket mörkt, men om det innehåller en stor bild med ljus himmel eller vit bakgrund kan användaren ändå mötas av ett kraftigt ljusskifte.
Det kan vara särskilt märkbart i appar som används på kvällen.
Vissa designers använder därför diskreta överlägg eller anpassade bildversioner i mörkt läge. Det måste dock göras försiktigt så att fotografier inte förändras för mycket.
I appar där korrekt färgåtergivning är viktig, exempelvis bildredigeringsprogram, är det ofta bättre att låta själva innehållet visas oförändrat.
Formulär kräver extra omsorg
Textfält, dropdown-menyer och formulärkomponenter kan bli svåra att förstå i ett dåligt utformat mörkt tema.
Om bakgrunden på ett textfält nästan har samma färg som resten av sidan kan användaren få svårt att se var det går att skriva.
Även placeholder-text kan bli problematisk om kontrasten är för låg.
Ett tydligt dark mode behöver därför skilja mellan:
- Sidans bakgrund
- Aktiva textfält
- Inaktiva fält
- Felmeddelanden
- Fokuserade element
Det är särskilt viktigt för tangentbordsanvändare, som behöver kunna se vilket element som just nu har fokus.
Tillgänglighet måste testas separat
Ett ljust tema som uppfyller tillgänglighetskrav innebär inte automatiskt att det mörka temat gör det.
Kontrastvärden behöver kontrolleras separat eftersom bakgrunds- och textfärgerna förändras.
Även ikoner, grafer och informationsmarkeringar behöver granskas.
Ett vanligt misstag är att använda färg som enda sätt att visa information. Om två statusar bara skiljs åt med rött och grönt kan de bli svåra att tolka för vissa användare, oavsett om gränssnittet är ljust eller mörkt.
Dark mode bör därför testas som ett eget gränssnitt, inte som en sekundär variant.
Alla produkter behöver inte dark mode
Eftersom dark mode blivit populärt finns det ibland en förväntan på att varje digital tjänst ska erbjuda funktionen.
Men det finns sammanhang där ett mörkt tema ger relativt liten nytta.
En webbplats som huvudsakligen används under korta stunder på dagen kanske inte behöver två kompletta designsystem. Att underhålla både ljust och mörkt tema innebär dessutom mer utveckling, fler tester och större risk för visuella fel.
För en app som används flera timmar varje dag, eller ofta används på kvällen, kan värdet däremot vara betydligt större.
Låt användaren välja
Eftersom människor upplever mörka och ljusa gränssnitt olika är den bästa lösningen ofta att inte välja åt dem.
En välutformad tjänst kan erbjuda tre alternativ:
- Ljust läge
- Mörkt läge
- Följ systemets inställning
Det sista alternativet gör att webbplatsen eller appen automatiskt följer användarens inställningar i operativsystemet.
På webben kan detta bland annat hanteras med CSS-funktionen prefers-color-scheme, som gör det möjligt att identifiera om användaren har valt ett ljust eller mörkt systemtema.
Ett bra dark mode ska nästan inte märkas
Det mest lyckade mörka gränssnittet är sällan det som ser mest dramatiskt ut. Det är det som känns naturligt att använda.
Texten ska vara lätt att läsa, viktiga element ska vara tydliga och färger ska kännas balanserade. Användaren ska inte behöva fundera över att gränssnittet är mörkt.
Dark mode är därför inte bara en visuell trend. När det utformas rätt kan det förbättra användarupplevelsen i vissa miljöer, minska ljusstyrkan och på vissa skärmar även spara energi.
Men precis som med all annan design behöver funktionen lösa ett verkligt problem. Ett mörkt tema är inte automatiskt bättre bara för att det ser modernt ut.