Niesamowity Dark Mode. Dobre praktyki projektowania w trybie ciemnym.

Popularność trybu ciemnego stale rośnie. Jestem pewna, że jesteście przyzwyczajeni do wyświetlania opcji trybu ciemnego i niejednokrotnie natknęliście się na ciemny interfejs na co najmniej jednym ze swoich urządzeń — może nawet nie zdając sobie z tego sprawy! Rzućmy okiem na to, co robią najlepsze marki i jak możesz zaprezentować interfejs dark mode we własnych projektach. W tym artykule poznasz zalety i wady trybu ciemnego oraz najlepsze praktyki podczas projektowania trybu ciemnego.

Wracając do korzeni

Istnieje wiele teorii o początkach dotyczących trybu ciemnego: jedni mówią, że to Apple jest prekursorem, inni, że Google i jeszcze wiele innych teorii. Nie powinniśmy ignorować początków tradycyjnego podejścia „dark-on-light” do projektowania interfejsu. Zrozumienie korzeni pomaga dostrzec zalety oraz fakt, dlaczego ten odwrócony schemat kolorów, jest wciąż tak niepokojący dla wielu użytkowników. Jeśli spojrzymy na świat technologii, ten wciąż żywy i zyskujący na popularności trend, prawdopodobnie zaczął się od Twittera. Firma eksperymentowała ze schematem kolorów już w 2016 roku, jednak przez falę krytyki, straciła na rzecz dużych marek technologicznych, które zaprezentowały własne ciemne motywy w kolejnych latach. Znane marki, takie jak Facebook, Google, WhatsApp, Instagram i Apple, były pierwszymi inicjatorami przyjęcia interfejsów trybu ciemnego i wpłynęły na wielu kolejnych, którzy poszli w ich ślady. 

Spójrzmy nieco dalej niż aplikacje, które zdominowały naszą codzienność. Jeśli cofniemy się do 1991 roku, niektórzy z nas, korzystali wtedy z systemu operacyjnego Apple System 7 – CloseView, który oferował ciemny motyw. Nie zapominajmy o monitorach komputerowych, które miały, zielono-czarny wygląd niczym, zielony kod spływający na czarne tło w Matrixie. 😉 To był krok w stronę oryginalnego trybu ciemnego: oldschoolowych, monochromatycznych monitorów pierwszych komputerów. Ten klasyczny ciemny wygląd wyszedł z mody w latach 80. na rzecz czarnego tekstu na białym tle, który miał naśladować wygląd atramentu na papierze.

Dark mode

Ale dość historii i przejdźmy do tego, co jest aktualnie trybem ciemnym, dla użytkowników. Ponieważ kolory nie są takie same, jak w ich źródle inspiracji, giganci technologiczni musieli wymyślić adaptacyjną alternatywę dla swoich projektów internetowych i mobilnych. Poczynając od miksu kolorystycznego, adaptując minimalizm, aranżując elementy, aż po zachowanie całego systemu — wszystko zostało zmienione, aby zaoferować prostsze i jednocześnie lepsze rozwiązanie niż poprzednia, pospolita biała wersja. Dziś coraz więcej projektantów korzysta z trybu ciemnego, wdrażając dark mode w swoje produkty. Nie jest tajemnicą, że posiada on zarówno wielu zwolenników, jak i przeciwników. 
Co to jest tryb ciemny i dlaczego jest to wciąż aktualny trend w projektowaniu interfejsów? Dark mode, określany jako „tryb nocny”, „tryb cienia” lub „widok ciemny” jest terminem projektowym używanym do opisania interfejsu użytkownika, który wykorzystuje ciemny kolor, jako podstawowy kolor tła, odwracając domyślne światło – na ciemny motyw.

Zalety korzystania z trybu ciemnego 

Ulga dla oczu

Ciągła praca przed komputerem, czy patrzenie na jasny ekran na dowolnym urządzeniu powoduje zmęczenie oczu, niewyraźne widzenie, podwójne widzenie, bóle głowy, ból szyi / pleców i inne. Tryb ciemny pomaga zredukować uczucie dyskomfortu, gdyż emituje o wiele mniej szkodliwego światła niebieskiego, które odpowiada za przyspieszone uczucie zmęczenia oczu.  Dodatkowo, światło niebieskie wpływa na zaburzenia cyklu snu, dlatego zaleca się, aby szczególnie wieczorem na urządzeniach mieć włączony filtr niebieskiego światła. Poprawa komfortu związanego z interfejsami oraz z możliwością przełączenia na tryb ciemny, może zachęcić użytkowników do dłuższego pozostania i korzystania z witryny.

Oszczędza czas pracy baterii

Tryb ciemny może oszczędzać baterię urządzenia. Wiele urządzeń z ekranami OLED mogą wyłączać czarne piksele, gdy nie są używane. Tryb ciemny wykorzystuje zwiększoną liczbę czarnych pikseli, dzięki czemu zużycie baterii mocno spada. Korzystanie z dark mode jest efektywne, gdy zależy nam na dłuższym użytkowaniu naszego telefonu czy innego urządzenia. 

Pozytywne emocje

Wielu użytkowników interfejsu w trybie dark mode korzysta z nich z uwagi na chęć bycia “eko” oraz ze względu na korzyści zdrowotne. Tryb ciemny daje im, poczucie, że robią coś zdrowszego, wywołując dobre samopoczucie – coś w rodzaju tego samopoczucia, które pojawia się, gdy w sklepie używasz torbę na zakupy wielokrotnego użytku lub wielokrotnie napełniasz wodą butelkę z filtrem.

Estetyczny design

Dark mode może być także wyróżnikiem marki, budować wizerunek firmy, komunikować o jej istotnych cech i atrybutach, a także produktach. Korzystanie z dark mode na stronie internetowej firmy, czy też postawienie na ciemne elementy w mediach społecznościowych – będzie tu ładnym wyróżnikiem marki. Estetyka projektu w trybie ciemnym może wywoływać silne uczucia i emocje odwiedzających użytkowników. Często kojarzy się użytkownikom z elegancją i nowoczesnością, a także wyrafinowaniem. Czarny, utożsamiany jest z elegancją tajemniczością – więc jeśli taki jest przekaz waszej marki, dark mode pozwoli go jeszcze bardziej wyróżnić.  Ciemniejsze kolory wywołują emocje związane z luksusem i dostatkiem. Ciemne tło poprawia kontrast strony, sprawiając, że staje się ona bardziej wyrazista i przyjemniejsza w odbiorze dla użytkowników. Grafiki, zdjęcia, ikony są o wiele bardziej czytelne, gdy widnieją na ciemnym tle, a to za sprawą poziomu kontrastu. W ten sposób możemy w świetnie wyróżnić poszczególne elementy graficzne, które będą łatwiej skupiały wzrok odbiorców. Tryb ciemny pozwala także użytkownikom na większe zaangażowanie dłuższe przeglądanie witryny.

Wady korzystania z trybu ciemnego

Jak wszystko, tak też i tryb ciemny ma swoje wady. Przedstawię kilka powodów, dla których ciemny motyw może być przeszkodą w zamierzonych celach projektu.

Zacznijmy od tego, że dark mode, może zmniejszyć więź emocjonalną. Dlaczego tak się dzieje? Jasne kolory wywołują pozytywne emocje. Jeśli użytkownicy tego potrzebują, wprowadzenie ciemnych kolorów może stworzyć przed nimi mentalną barierę. Skutkować to będzie trudnością w emocjonalnym połączeniu z ciemnym motywem. Jeśli jasne kolory mogą wywoływać żywe emocje, to ciemne? – może być odwrotnie. Więc zbadać należy, kto jest głównym użytkownikiem twojego produktu.

Idąc dalej, pomyśl o remoncie w mieszkaniu, ciemne kolory sprawiają, że przestrzeń staje się mniejsza, dla niektórych nawet pokoje z ciemnymi ścianami mogą być klaustrofobiczne. Tryb ciemny w witrynie, może działać w ten sam sposób. Jeśli chcesz stworzyć wrażenie przestrzeni, ciemny interfejs może sprawić, że przestrzeń będzie jednak mniejsza. Projektując w oparciu o ciemny motyw, warto pamiętać o właściwych kolorach i kontrastach. Kolory o niskim kontraście mogą być trudne do odczytania. 

Zanim dodasz tryb ciemny do swojej witryny:

• Zbadaj, czy jest on odpowiedni dla zawartości projektowanej witryny.
• Upewnij się, czy schemat kolorów spełnia standardy kontrastu kolorów ułatwień dostępu.
• Ogranicz liczbę elementów, aby uniknąć bałaganu.
• Sprawdź, czy projekt będzie działał zarówno w warunkach słabego, jak i mocnego oświetlenia.
• Zastosuj oświetlenia nad cieniami, aby przekazać głębię.
• Unikaj nasyconych kolorów.
• Daj użytkownikom możliwość przełączania się tam i z powrotem, pomiędzy trybami, według własnego uznania.
• Sprawdź, czy witryna w dark mode jest elegancka, mocna, ma silny i angażujący przekaz.

Przykłady

Chrome i pozostałe przeglądarki

Czarne tło jest dostępne w wielu w przeglądarkach. Są to między innymi: Chrome, Firefox, Opera i Microsoft Edge. Na przykładzie Chrome, który jest zdecydowanie najbardziej popularny, jeśli chcemy włączyć dark mode to w karcie przeglądarki musimy najpierw wejść w Ustawienia. Następnie przejść do zakładek Wygląd > Motyw > Rozszerzenia, w której będzie dostępny do wyboru Dark Mode.

Apple iOS 13

Proces ustawienia dark mode od Apple jest bardzo prosty i wymaga jedynie, aby w Ustawieniach zakładka Wyświetlacz i jasność, wybrać opcję Włącz tryb ciemny.

Youtube

Na Youtube zarówno w wersji desktopowej i mobilnej wystarczy przełączyć w ustawieniach na tryb ciemny.

Messenger

Aby dokonać zmiany z trybu jasnego na dark mode trzeba przycisnąć naszą ikonkę profilową i tuż pod nią wybrać możliwość przejścia na tryb ciemny.

Netflix

Nie daje możliwości wyboru. Zarówno strona jak i aplikacja Netflix funkcjonują wyłącznie w trybie ciemnym, bez opcji przełączenia na jasny. Ma to prawdopodobnie zapewnić wyższy komfort z oglądania dla użytkowników, ze względu na odpowiedni kontrast i wyróżnienie obrazów.

Dark mode to wciąż wiodący i jak najbardziej aktualny trend, nie tylko popularny temat wśród projektantów, ale także coraz częściej pośród użytkowników. Tryb ciemny odnosi się do zmian kolorów w projektowaniu stron internetowych i projektach aplikacji mobilnych. Jeśli przyjrzysz się bliżej, zobaczysz, że nie chodzi tylko o kolor, ale także o to, jak wpływa to na całokształt doświadczeń użytkownika podczas użytkowania. Ważne jest to, jak inni użytkownicy widzą go w trybie ciemnym. Dark mode, zapewnia bardzo oczekiwaną i korzystną zmianę, której użytkownicy potrzebowali,  jednocześnie dając komfort, który przekształcił go w aktualnie realny trend webowy i mobilny. W świecie, w którym ekrany są codziennością, ważne jest, aby podjąć kroki w kierunku ochrony wzroku, nawet w przypadku czegoś tak prostego, jak użycie trybu ciemnego telefonu.