Tmavý režim UX: Nejen trend. Ale co to ovlivňuje uživatele?

Skutečný problém v životě

Už jste někdy byli v noci a orba sociálních médií? Nebo si přečtěte důležité články, ale jasné světlo z obrazovky telefonu nebo počítače místo toho bodlo oči, dokud se musí zúžit nebo pociťovat všechny mé bolesti hlavy? Nebo se někdy musí spěchat, abyste zavřeli obrazovku, protože se cítí, že baterie se dostane příliš rychle?

Nejedná se o malé věci, zejména ve věku, kdy žijeme s obrazovkou téměř po celou dobu. Od rána je to práce, učení, online nakupování nebo dokonce rekreace, pokud web nebo aplikace, kterou používáme, nemá možnosti, které jsou vhodné pro použití v každé situaci, může to snadno zhoršit naše zkušenosti.

Výzva pro ilustrace: Obrázek ženy nebo muže sedícího před počítačem nebo telefonem v temné místnosti. S výrazem nepohodlí nebo použijte ruce k otřesu

Proč k tomuto problému došlo?

Tyto problémy se vyskytují z mnoha faktorů. Zejména z hlediska designu, uživatelského rozhraní (UI) a uživatelského prostředí (UX), které neuvažují o různých uživatelských prostředích.

Představte si: Většina webových stránek je navržena s jasně barevným pozadím (bílý režim), který je vhodný pro použití v prostředí s dostatečným světlem během dne. Ale když to bylo v noci nebo v místnosti se slabým světlem, barva bílého světla vyšla hodně. Okamžitě se stal velkým problémem. Mezi hlavní příčinu těchto problémů patří:

• Nadměrný rozdíl světla: Když bílé pozadí kontrastuje s tmavými písmeny ve tmě, musí naše oči tvrději pracovat, aby se zaostřilo. Snadno způsobuje řasy
• Emise modrého světla: Obrazovka z elektronických zařízení uvolňuje modré světlo. Které mohou v dlouhodobém horizontu ovlivnit zdraví spánku a očí, zejména pokud se používají po dlouhou dobu ve tmě
• Síla obrazovky: Pro obrazovku OLED nebo AMOLED (nalezená v nových chytrých telefonech). Černé pixely používají mnohem méně energie než bílé pixely. To znamená, že použití tmavého režimu může skutečně ukládat baterie.
• Nemožná dostupnost designu: Někdy návrháři neuvažují uživatele s problémy očí. Nebo ti, kteří musí obrazovku používat po dlouhou dobu, což vede k žádnému výběru, což pomáhá snížit zatížení očí

Výzva pro ilustrace: Infographic obrázky ukazují rozdíly mezi bílým režimem a tmavým režimem s kruhem ukazujícím použití baterie OLED/AMOLED obrazovky v každém režimu.

Pokud to odejde, jak to ovlivní?

Pokud stále necháme používání webových stránek nebo aplikací, které nemají tmavý režim nebo nemají pro uživatele flexibilní design UX/UI. Může to ovlivnit mnoho aspektů, a to jak se samotnými uživateli, tak s vaší firmou.

• Dopad na uživatele:
  • Problémy se zdravím očí: opálení, suché oči, bolest hlavy a mohou negativně ovlivnit oči z dlouhodobého hlediska.
  • Neomezený spánek: Modré světlo přijaté před spaním může bránit produkci melatoninu. Je obtížnější spát nebo nemůže dobře spát
  • Zkušenosti s špatným použitím: Uživatelé se cítí nepohodlně, frustrovaní a mohou přestat používat tento web nebo aplikaci.
• Ovlivňující vaše podnikání:
  • Míra konverze se snížila: Když se uživatel cítí nepříjemně nebo frustrovaný z použití, pravděpodobně opustí web rychleji odmítnout kliknout na tlačítko Objednávka, vyplnit formulář nebo dělat jakékoli činnosti, co chcete
  • Míra bookce je vyšší: Míra vstupu bude okamžitě zvýšena. Protože uživatel nechce být na webu, díky kterému se cítí špatně
  • Snížená loajalita značky: Uživatelé uvidí, že vaše značka nevěnuje pozornost zkušenostem zákazníka. Způsobuje, že se nevrátíte opakovaně používat
  • Nesnášená rasa: Zatímco konkurenti mohou začít používat Dark Mode nebo design, který se zaměřuje na uživatele k použití. Ztratíte konkurenční výhodu.

Podívejte se na článek o UX/UI na WebFlow, díky kterému zákazníci kliknou a kupují více, aby pochopili, jak dobrý zážitek ovlivňuje převod. [Cite: 106]

Výzva pro ilustrace: Graf ukazující sníženou rychlost konverze a zvýšenou míru okamžitého opuštění souběžně s obrazem uživatelů s bolestí očí. Nebo ukazují nespokojený výraz

Existuje nějaké řešení? A kde by to mělo začít?

Tyto problémy lze vyřešit pomocí Temného režimu UX. Tmavý režim není jen módním trendem designu. Je však řešením, které splňuje problém s nízkým osvětlením a také poskytuje mnoho dalších výhod. Zahájení by mělo být považováno za následující:

1. Co je Temný režim, který ux rozumí?

• Tmavý režim (Dark Mode): Je zobrazení uživatelského rozhraní, které používá tmavé tóny jako hlavní, jako je černé nebo tmavě šedé pozadí. A použijte písmena nebo jiné prvky k jasnému, naproti režimu světla (světlý režim), který používá bílé nebo světlé barvy

2. výhody používání tmavého režimu

• Pohodlnější při slabém osvětlení: Pomáhá snižovat jas obrazovky. Způsobuje, že oči se uvolní a redukují oční ideální pro použití v noci nebo v temné místnosti.
• Úspora energie baterie: U zařízení s OLED nebo AMOLED obrazovkami používá zcela černý displej méně energie než bílá. Což má za následek delší prodloužení životnosti baterie
• Snižte modré světlo: Tmavý režim přirozeně sníží modré množství uvolněné z obrazovky. Což může pomoci lépe spát, pokud se použije před spaním
• Přidat krásu a moderní: Dark režim často dává prémiové pocity, moderní a odlišné od obecných webových stránek.
• Pomáhat některým skupinám uživatelů: Uživatelé s určitou barevnou slepotou nebo ti, kteří jsou alergičtí na jasné světlo, může být velmi užitečný z tmavého režimu

3. Zvažte před použitím

• Jasné čtení: Tmavý režim nemusí být vhodný pro čtení ve velmi jasném prostředí. Protože to může rozjasnit písmena na temném pozadí
• Dopad na obrázek. Značka: Tmavý režim může poskytnout jiný pocit od původního obrazu značky. Pokud vaše značka zdůrazňuje jas nebo jas
• Složitější design: Návrh režimu světla i tmavý režim pro dobře fungování. Při výběru více barev a prvků je třeba být opatrnější.

4. Kde by to mělo začít?

• Analýza cíle: Kdy bude váš uživatel často používat web? Existuje zvláštní touha po vizi?
• Určete návrhový systém: Paleta barev pro režim světla i pro tmavý režim jasně. Určete intenzitu barvy. Pro text, pozadí, ikonu a interaktivní prvky, které mají vhodný kontrast.
• Počínaje důležitými součástmi: Může začít používat tmavý režim k použití na stránce vstupní stránky nebo na stránce produktu s vysokou konverzí nejprve vidět odpověď.
• Pro uživatelé si vybrat: Měli by existovat možnosti pro uživatelé, aby se sami přepnuli mezi režimem světla a tmavým režimem. Není nucen používat jeden režim

Výzva pro ilustrace: Infographic Image ukazuje výhody a úvahy o tmavém režimu s souvisejícími ikonami.

Příklady ze skutečné věci, která bývala úspěšná

Abychom jasně viděli, že Dark Mode UX není jen o kráse, ale o tom, jak je to strategie, která pomáhá upgradovat uživatele a prospívat podnikání? Podívejte se na příklad mnoha světových platforem a aplikací, které jsou úspěšné při používání Dark Mode:

• YouTube: Je to jedna z prvních platforem, které vážně používají Dark Mode. Umožnit uživatelům pohodlněji sledovat videa ve tmě. Snižte únavu očí od zírání na obrazovku po dlouhou dobu, zejména ty, kteří sledují videa během noci, tato možnost také pomáhá zvýšit dobu, kterou uživatelé na platformě (doba sledování) výrazně.
• Twitter (Aktuální x): Online sociální sítě, které lidé používají po celou dobu, s temným režimem umožňuje uživatelům nepřetržitě odkládat zprávy bez pocitu bolesti. I když se používá v temné místnosti nebo na posteli před spaním, reakce uživatele je velmi pozitivní. Způsobuje, že se uživatel cítí více připojen k aplikaci
• Apple (iOS a MacOS): Apple operační systémy na mobilních i počítačích používají tmavý režim po celém systému. Pomáhá učinit zážitek konzistentní. Bez ohledu na otevřenou aplikaci můžete použít tmavý režim. To ukazuje na skutečnou pozornost uživatelské zkušenosti a ovlivňuje spokojenost uživatelů jako celku.
• Google (Android a různé aplikace): Podobně jako Apple, Google tlačil Dark Mode v celém operačním systému Android a v populární aplikaci Google, jako je Gmail, Google Maps, Chrome. Ale také pomáhá ukládat baterie v zařízeních Android, která efektivně používají OLED obrazovku

Tyto příklady poukazují na to, že tmavý režim není jen doplňkovým prvkem. Ale je to důležitý prvek, který pomáhá upgradovat dostupnost webu a vytvořit skvělý zážitek pro mnoho uživatelů

Výzva pro ilustrace: YouTube, obrazovka iOS/MacOS

Pokud chcete následovat, co dělat? (Lze použít okamžitě)

Pro designéry a majitele webových stránek WebFlow, kteří by na vašem webu chtěli používat UX Dark Mode. Toto je kontrolní seznam a postup, který můžete začít okamžitě!

1. Plány Palety barev pro tmavý režim

• Nastavit primární barvy: Vyberte hlavní barvu značky, která bude použita v tmavém režimu, která může být upravena tak, aby byla mírně jasná, aby bylo snadné číst na tmavém pozadí.
• Sekundární barvy a přízvukové barvy: Definujte barvy a barvy, zaměřte se na použití pro výzvu k (CTA), ikonu nebo část, která chce přitahovat pozornost
• Barvy textu: Pro hlavní text použijte bílou nebo světle šedou. A jasnější barvy pro nadpis nebo text, které chcete zdůraznit
• Barvy pozadí: Není třeba být úplně černé. Zkuste použít tmavě šedou, šedou, modrou nebo modrou šedou. Přidat dimenzi a hloubku
• Poměr kontrastu: Ujistěte se, že barva písmen a pozadí má vhodný kontrast (nejméně 4,5: 1), aby bylo snazší číst. Zejména pro ty, kteří mají skupinami Nielsen .

2. prvky UI v webflow

• Globální políčka: Pomocí globálních vzorníků ve WebFlow určete barvu sady pro režim světla a tmavý režim. Barevu můžete hodně přepínat a spravovat.
• Nastavte interakci pro přepínač přepínače: Vytvořte přepínač mezi režimem světla a tmavým režimem pomocí WebFlow Interact. Když uživatel klikne na toto tlačítko, změňte třídu třídy nebo SESC a změňte barvu podle definování.
• Upravit typografii: Zkontrolujte velikost a hmotnost písma v temném režimu, zda je stále snadné číst. Někdy může být nutné upravit hmotnost písma, aby byla v tmavém režimu o něco silnější, aby bylo možné pohodlněji přečíst.
• Ikony a ilustrace: Ikona a ilustrace by měly být přizpůsobeny barevnému schématu tmavého režimu, mohou místo toho z bílé, světle šedé nebo obrys.
• Obrázky: Zvažte, zda jsou vaše obrázky stále dobré v tmavém režimu nebo ne. Některé obrázky mohou mít tmavé překrytí nebo mírně rozjasňují, aby také nevynikly.

3. Testujte a zlepšujte

• Test na skutečném vybavení: Nezapomeňte testovat webové stránky na různých zařízeních, včetně mobilních telefonů, tabletů a počítačů. Aby se zajistilo, že tmavý režim ukazuje dobré výsledky na každé obrazovce a ve všech světelných podmínkách
• Získejte zpětnou vazbu od uživatelů: Dejte svému uživateli příležitost zpětnou vazbu o tmavém režimu, který jste vytvořili. Informace od skutečných uživatelů jsou velmi cenné pro dokončení zlepšení.
• Zkontrolujte rychlost stránky: Ačkoli tmavý režim uloží baterii. Nezanedbávejte však celkovou optimalizaci rychlosti stránky

Výzva pro ilustrace: Obrázek obrazovky WebFlow Designer ukazující globální vzorky a interakci pro TONT TOGLE.

Otázky, které lidé mají tendenci divit a odpovědi, které jsou vymazány

Chcete -li vám dát větší důvěru a porozumět temnému režimu UX. Podívejme se na populární otázky s jasnými odpověďmi:

Q1: Tmavý režim je vždy lepší než režim světla?

A: Ne vždy! Tmavý režim má zřetelnou výhodu použití při slabém osvětlení, ukládání baterií pro obrazovku OLED/AMOLED a pomáhá snižovat modré světlo. Ale ve velmi jasném prostředí, jako je denní den, může režim Light také poskytnout lepší zážitky ze čtení. Protože černá písmena na bílém pozadí jsou vyšší než jasnější místo, je nejlepším způsobem „umožnit uživatelům zvolit“, který režim použít podle jejich preferencí a prostředí.

Q2: Ovlivňuje použití tmavého režimu SEO?

Odpověď: Přímo, s tmavým režimem nemá přímo ovlivnění hodnocení SEO. Google nesedí webové stránky, jako by existoval tmavý režim nebo ne. Může web používat déle a snížit z webu (míra opuštění). Jedná se o nepřímé faktory, kterým Google dává důležitost (zejména užitečný obsah a základní webové vitály ). Proto může mít dobrý tmavý režim z dlouhodobého hlediska prospěch SEO prostřednictvím vylepšení UX.

Q3: Měl by mít můj web Dark Mode?

Odpověď: Zvažte cílové publikum a vlastnosti vašeho webu.

• Pokud se váš web zaměřuje na obsah, který je třeba číst po dlouhou dobu (například blog, článek, e-kniha)
• Pokud vaše cílové publikum má tendenci navštěvovat web během noci
• Pokud má váš web moderní nebo prémiový obrázek
• Pokud chcete upgradovat mobilní zážitek a ušetřit baterie pro uživatele.

Pokud je považován za jeden z bodů, přidání tmavého režimu stojí za to zvážit. Pokud je však váš web jen krátkou vstupní stránkou, která se rychle zaměřuje na konverzi. Tmavý režim nemusí být první nezbytnou věcí.

Q4: Tmavý režim musí být vždy úplně černý?

Odpověď: Není třeba být zcela černá ( #000000 )! Ve skutečnosti většina návrhářů UX/UI doporučuje používat tmavě šedou v různých odstínech. Namísto zcela černé pomůže použití tmavě šedé snížit závažný kontrast mezi pozadím a bílými písmeny. Usnadněte si oči a čtěte. Například samotný design materiálu Google se doporučuje používat tmavě šedou místo zcela černé pro tmavé téma.

Výzva pro ilustrace: Ikony obrazu, otázky a odpovědi představují pochybnosti o Temném režimu UX.

Shrnutí, které má být snadno pochopitelné + chtějí to zkusit udělat

Stručně řečeno, Dark Mode UX není jen elegantní funkce. Díky tomu bude váš web vypadat pouze skvěle, ale je to „investice“ do „uživatelské zkušenosti“, která z dlouhodobého hlediska bude přínosem pro vaše podnikání. Záleží nám na malých detailech, jako jsou možnosti temného režimu, ukazuje, že naše uživatele „chápeme“ a „péče“. A když se uživatel cítí dobře o vašem webu, mají tendenci být s vámi déle, vraťte se k použití a samozřejmě „klikněte a kupujte“ nebo „provést převod“, které chcete nakonec!

Takže nečekejte! Vraťme se a podívejme se na váš web a zvažte, zda je čas „upgradovat“ UX/UI s tmavým režimem na váš web. „Nepřipadněte z trendu“ a „používat srdce uživatele“, dnešní malá změna může zítra přinést skvělé výsledky pro vaši firmu!

Výzva pro ilustrace: Obrázky rukou, které stisknou na tmavém režimu na webu s neustálým zvyšováním grafu prodeje.

Máte zájem o upgrade UX/UI na vašem webu WebFlow, „Použijte uživatele“ a „Vytvořit skutečnou konverzi“, že? Může se poradit s odborníky na mozek Vision X! Jsme připraveni vám pomoci navrhnout krásný web, snadno se používat a setkat se s vaší firmou v každé dimenzi! Nebo se nejprve dozvíte více o designu a vývoji našich webových stránek.

‍