Dark Mode UX: Ikke kun en tendens. Men hvad påvirker det brugeren?

Det virkelige problem i livet

Har du nogensinde været om natten og pløjet sociale medier? Eller læse vigtige artikler, men det skarpe lys fra telefonskærmen eller computeren stak i stedet øjnene, indtil det skal indsnævres eller føle al min hovedpine? Eller nogle gange skal skynde dig at lukke skærmen, fordi det føles, at batteriet er ved at løbe for hurtigt?

Dette er overhovedet ikke små ting, især i den alder, vi lever med skærmen næsten hele tiden. Fra morgen, uanset om det er arbejde, læring, online shopping eller endda rekreation, hvis webstedet eller applikationen, som vi bruger, ikke har muligheder, der er egnede til brug i hver situation, kan det let forværre vores oplevelse.

Spørg om illustrationer: Et billede af en kvinde eller en mand, der sidder foran computeren eller telefon i et mørkt rum. Med et udtryk for ubehag eller brug hænder til at gnide øjnene

Hvorfor skete dette problem?

Disse problemer forekommer fra mange faktorer. Især med hensyn til design, brugergrænseflade (UI) og brugeroplevelse (UX), der ikke overvejer de forskellige brugermiljø.

Forestil dig: De fleste af webstederne er designet med en lys farve baggrund (hvid tilstand), som er velegnet til brug i et miljø med nok lys i løbet af dagen. Men da det var om natten eller i et rum med svagt lys, kom farven på det hvide lys meget ud. Blev et stort problem med det samme. Den vigtigste årsag til disse problemer inkluderer:

• Overdreven lysforskel: Når den hvide baggrund står i kontrast til de mørke bogstaver i mørket, skal vores øjne arbejde hårdere for at justere fokus. Forårsager let øjenvipper
• Emission af blåt lys: Skærmen fra elektroniske enheder frigiver det blå lys. Hvilket kan påvirke søvn og øjenesundhed på lang sigt, især når det bruges i lang tid i mørket
• Skærmenes kraft: til OLED- eller AMOLED -skærmen (findes i nye smarttelefoner). Sorte pixels bruger meget mindre energi end hvide pixels. Dette betyder, at brug af Dark Mode faktisk kan spare batterier.
• Umulig designtilgængelighed: Nogle gange betragter designerne ikke brugere med øjenproblemer. Eller dem, der skal bruge skærmen i lang tid, hvilket ikke resulterer i noget valg, der hjælper med at reducere byrden på øjnene

Spørgsmål om illustrationer: Infografiske billeder viser forskellene mellem den hvide tilstand og mørke tilstand med en cirkel, der viser brugen af batterikraft på OLED/AMOLED -skærmen i hver tilstand.

Hvis det er tilbage, hvordan vil det påvirke?

Hvis vi stadig lader brugen af websteder eller applikationer, der ikke har mørk tilstand eller ikke har et fleksibelt UX/UI -design til brugere. Det kan påvirke mange aspekter, både med brugerne selv og med din virksomhed.

• Indflydelse på brugerne:
  • Eye Sundhedsproblemer: Tan, tørre øjne, hovedpine og kan have negativ indflydelse på øjnene i det lange løb.
  • Ubegrænset søvn: Blåt lys modtaget før sengetid kan hæmme melatoninproduktionen. Gør det vanskeligere at sove eller ikke kan sove godt
  • Oplevelse af dårlig brug: Brugere føler sig upraktiske, frustrerede og kan stoppe med at bruge dette websted eller program.
• Påvirker din virksomhed:
  • Konverteringsfrekvensen faldt: Når brugeren føler
  • Bookce -sats er højere: Indgangssatsen øges øjeblikkeligt. Fordi brugeren ikke ønsker at være på webstedet, der får det til at føle sig dårligt
  • Nedsat brand loyalitet: Brugere vil se, at dit brand ikke er opmærksom på kundeoplevelsen. Forårsager ikke at vende tilbage til at bruge gentagne gange
  • Usemaet race: Mens konkurrenter muligvis begynder at bruge den mørke tilstand eller det design, der fokuserer på brugerne til at anvende. Du mister konkurrencefordelen.

Se på en artikel om UX/UI på WebFlow, hvilket får kunderne til at klikke og købe mere for at forstå, hvor god oplevelse påvirker konverteringen. [Cit: 106]

Spørg om illustrationer: Graf, der viser den reducerede konverteringsfrekvens og den øgede afvisningshastighed parallelt med billedet af brugere med øjesmerter. Eller viser et utilfredsstillende udtryk

Er der nogen løsning? Og hvor skal det starte?

Disse problemer kan løses ved hjælp af Dark Mode UX. Dark Mode er ikke kun en modetrend med design. Men er en løsning, der imødekommer problemet med lav belysning og også giver mange andre fordele. Start skal betragtes som følger:

1. Hvad er den mørke tilstand, ux forstår?

• Dark Mode (Dark Mode): Er visningen af brugergrænsefladen, der bruger mørke toner som hoved, såsom sort eller mørkegrå baggrund. Og brug bogstaverne eller andre elementer til at være lyse, overfor lystilstand (lys tilstand), der bruger hvide eller lyse farver

2. Fordele ved at bruge mørk tilstand

• Mere behagelig i svagt lys: hjælper med at reducere skærmen. Får øjnene til at slappe af og reducere øjet ideelt til brug om natten eller i et mørkt rum.
• Batteri Energibesparelse: For enheder med OLED eller AMOLED -skærme bruger helt sort display mindre energi end hvid. Resulterer i længere forlængelse af batteriets levetid
• Reducer det blå lys: Naturligvis vil mørk tilstand reducere det blå beløb, der er frigivet fra skærmen. Hvilket kan hjælpe med at sove bedre, hvis det bruges, før de går i seng
• Tilføj skønhed og moderne: Dark Mode giver ofte premium -følelser, moderne og forskellige fra generelle websteder.
• At hjælpe nogle grupper af brugere: Brugere med bestemt farveblindhed eller dem, der er allergiske over for skarpt lys, kan være meget nyttige fra mørk tilstand

3. Overvej før brug

• Lys læsning: Dark Mode er muligvis ikke egnet til læsning i et meget lyst miljø. Fordi det kan lysne bogstaverne på den mørke baggrund
• Påvirkningen på billedet. Brand: Dark Mode kan give en anden følelse end dit originale brand image. Hvis dit brand understreger lysstyrke eller lysstyrke
• Mere kompleks design: Design til både lystilstand og mørk tilstand fungerer godt. Brug for at være mere forsigtig med at vælge flere farver og elementer.

4. hvor skal det starte?

• Målanalyse: Hvornår bruger din bruger ofte webstedet? Er der et specielt ønske om vision?
• Bestem designsystem: Farvepalet til både lystilstand og mørk tilstand tydeligt. Bestem farveintensiteten. Til tekst, baggrund, ikon og interaktive elementer, der har passende kontrast.
• Start med vigtige dele: kan begynde at bruge den mørke tilstand, der skal bruges med destinationssiden eller produktsiden med høj konvertering først for at se svaret.
• For brugere at vælge: Der skal være muligheder for brugere at skifte mellem lystilstand og mørk tilstand af sig selv. Ikke tvunget til at bruge en tilstand

Spørgsmål om illustrationer: Infografisk billede viser fordele og overvejelser ved mørk tilstand med relaterede ikoner.

Eksempler fra den rigtige ting, der plejede at få succes

For klart at se, at Dark Mode UX ikke kun handler om skønhed, men hvordan er det en strategi, der hjælper med at opgradere brugere og gavne virksomheden? Se på eksemplet på mange verdensklasse -platforme og applikationer, der har succes med at bruge Dark Mode:

• YouTube: Det er en af de første platforme, der alvorligt bruger Dark Mode. At give brugerne mulighed for at se videoer i mørket mere komfortabelt. Reducer øjet træthed fra at stirre efter skærmen i lang tid, især dem, der ser videoer i løbet af natten, denne mulighed hjælper også med at øge den tid, som brugerne bruger på platformen (se tid) markant.
• Twitter (nuværende X): Online sociale netværk, som folk bruger hele tiden, og har Dark Mode giver brugerne mulighed for at udsætte nyhederne kontinuerligt uden at føle smerter. Selv hvis det bruges i et mørkt rum eller på sengen, før du går i seng, er svaret fra brugeren meget positiv. Får brugeren til at føle sig mere knyttet til applikationen
• Apple (iOS og MACOS): Apple -operativsystemer på både mobile og computere bruger den mørke tilstand overalt i systemet. Hjælper med at gøre oplevelsen konsekvent. Uanset applikationen åben kan du bruge den mørke tilstand. Dette viser virkelig opmærksomhed på brugeroplevelsen og påvirker brugernes tilfredshed som helhed.
• Google (Android og forskellige applikationer): I lighed med Apple skubbede Google mørk tilstand i hele Android -operativsystemet og i den populære Google -applikation, såsom Gmail, Google Maps, Chrome. Men hjælper også med at gemme batterier i Android -enhederne, der bruger OLED -skærmen effektivt

Disse eksempler påpeger, at Dark Mode ikke kun er en supplerende funktion. Men er et vigtigt element, der hjælper med at opgradere webtilgængeligheden og skabe en fantastisk oplevelse for mange brugere

Spørg efter illustrationer: YouTube, iOS/MACOS -skærm

Hvis du vil følge, hvad skal jeg gøre? (Kan bruges med det samme)

For designere og webstedsejere af WebFlow, der gerne vil bruge Dark Mode UX på dit websted. Dette er tjekliste og proceduren, som du kan begynde at gøre med det samme!

1. planlægger farvepalet til mørk tilstand

• Indstil primærfarver: Vælg hovedfarven på det brand, der vil blive brugt i den mørke tilstand, som kan justeres til at være lidt lys for at gøre det let at læse på den mørke baggrund.
• Sekundære farver og accentfarver: Definer farver og farver, fokus på brug til call -to -funktion (CTA), ikon eller del, der ønsker at tiltrække opmærksomhed
• Tekstfarver: Brug hvid eller lysegrå til hovedteksten. Og lysere farver til overskrift eller tekst, som du vil understrege
• Baggrundsfarver: Ingen grund til at være helt sort. Prøv at bruge mørkegrå, grå, blå eller blå grå. For at tilføje dimension og dybde
• Kontrastforhold: Sørg for, at farven på bogstaver og baggrunde har en passende kontrast (mindst 4,5: 1) for at gøre det lettere at læse. Især for dem, der har Nielsen Norman Group .

2. UI -elementer i webflow

• Globale farveprøver: Brug globale farveprøver i webstrømmen til at bestemme farven indstillet til lystilstand og mørk tilstand. Du kan skifte og administrere farven meget.
• Indstil interaktionen for skiftekontakt: Opret en vippekontakt mellem lystilstand og mørk tilstand ved hjælp af webflow -interageren. Når brugeren klikker på denne knap, skal du ændre klassens klasse eller SESC for at ændre farven, som du definerede.
• Juster typografi: Kontroller størrelsen og vægten af skrifttypen i den mørke tilstand, om det stadig er let at læse. Nogle gange kan det være nødvendigt at justere skrifttypens vægt for at være lidt tykkere i den mørke tilstand for at læse mere komfortabelt.
• Ikoner og illustrationer: Ikon og illustrationer skal tilpasses farveskemaet i mørk tilstand kan blive hvidt, lysegrå eller skitserer i stedet.
• Billeder: Overvej, om dine billeder stadig er gode i mørk tilstand eller ej. Nogle billeder kan have mørkt overlay eller lyser lidt for ikke at skille sig ud.

3. test og forbedring

• Test på ægte udstyr: Glem ikke at teste websteder på forskellige enheder, herunder mobiltelefoner, tablets og computere. For at sikre, at den mørke tilstand viser gode resultater på hver skærm og alle lysforhold
• Få feedback fra brugere: Giv din bruger mulighed for at feedback om den mørke tilstand, du oprettede. Oplysninger fra rigtige brugere er meget værdifulde for at afslutte forbedringen.
• Kontroller sidehastigheden: Selvom Dark Mode sparer batteriet. Men forsøm ikke den samlede sidehastighedsoptimering

Spørgsmål om illustrationer: WebFlow Designer Screen Image, der viser globale farveprøver og interaktion til Dark Mode Togle.

Spørgsmål, som folk har en tendens til at undre sig, og de svar, der er ryddet

At give dig mere selvtillid og forstå den mørke tilstand UX. Lad os se de populære spørgsmål med klare svar:

Q1: Dark Mode er altid bedre end lystilstand?

A: Ikke altid! Dark Mode har en tydelig fordel ved brugen i svagt lys, der sparer batterier til OLED/AMOLED -skærmen og hjælper med at reducere blåt lys. Men i et meget lyst miljø, såsom dagdag, kan lystilstand også give bedre læseoplevelser. Fordi de sorte bogstaver på den hvide baggrund er højere end det lysere sted, er den bedste måde "lad brugerne vælge", hvilken tilstand der skal bruges i henhold til deres præferencer og miljø.

Q2: Påvirker brugen af mørk tilstand SEO?

A: Direkte, at have en mørk tilstand påvirker ikke direkte SEO -placeringen. Google rangerer ikke webstedet, som om der er en mørk tilstand eller ej. Kan bruge webstedet længere og reducere ud af webstedet (afvisningshastighed). Dette er indirekte faktorer, som Google giver betydning for (især nyttigt indhold og kerne webvitaler ). Derfor kan det at have en god mørk tilstand være til fordel for SEO i det lange løb gennem UX -forbedringer.

Q3: Bør min hjemmeside have mørk tilstand?

A: Overvej målgruppen og egenskaberne ved dit websted.

• Hvis dit websted fokuserer på indhold, der skal læses i lang tid (f.eks. Blog, artikel, e-bog)
• Hvis din målgruppe har en tendens til at besøge webstedet i løbet af natten
• Hvis dit websted har et moderne eller premium billede
• Hvis du vil opgradere den mobile oplevelse og gemme batterier til brugere.

Hvis det betragtes som et af punkterne, er det værd at overveje en mørk tilstand. Men hvis dit websted kun er en kort destinationsside, der fokuserer hurtigt på konvertering. Dark Mode er muligvis ikke den første nødvendige ting.

Q4: Mørke tilstand skal altid være helt sort?

A: Ingen grund til at være helt sort ( #000000 )! Faktisk anbefaler de fleste UX/UI -designere at bruge mørkegrå i forskellige nuancer. I stedet for helt sort vil brugen af mørkegrå hjælpe med at reducere den alvorlige kontrast mellem baggrunden og hvide bogstaver. Få øjnene til at slappe af og læse lettere. For eksempel anbefales Google Material Design selv at bruge mørkegrå i stedet for helt sort til mørkt tema.

Spørgsmål om illustrationer: Billedikoner, spørgsmål og svar repræsenterer en tvivl om Dark Mode UX.

Resume for at være let at forstå + vil prøve at gøre

Kort sagt, Dark Mode UX er ikke kun en elegant funktion. Det får kun dit websted til at se cool ud, men det er "investeringer" i "brugeroplevelse", der vil gavne din virksomhed i det lange løb. Vi er interesseret i de små detaljer, såsom Dark Mode Options, viser, at vi "forstår" og "plejer" vores brugere. Og når brugeren har det godt med dit websted, har de en tendens til at være sammen med dig længere, vende tilbage til brug og selvfølgelig "klikke og købe" eller "gøre konvertering", som du vil have til sidst!

Så vent ikke! Lad os gå tilbage og se dit websted og overveje, om det er tid til at "opgradere" UX/UI med Dark Mode til dit websted. "Fald ikke rigtig ud af trend" og "Brug brugerens hjerte" dagens lille ændring kan skabe gode resultater for din virksomhed i morgen!

Spørg om illustrationer: Håndbilleder, der trykker på den mørke tilstand på webstedet med en kontinuerlig stigning i salgsgrafen.

Interesseret i at opgradere UX/UI på dit webflow -websted "Brug brugeren" og "Opret en ægte konvertering", ikke? Kan konsultere Vision X -hjerneeksperterne! Vi er klar til at hjælpe dig med at designe et smukt websted, let at bruge og møde din virksomhed i enhver dimension! Eller lær mere om webstedsdesign og udvikling af vores websted først.

‍