Dark mode. Trend czy potrzeba użytkowników?

W ósmym odcinku (pierwszego sezonu) naszego WWWłaśnie podcastu poruszyłem temat ciemnych interfejsów użytkownika. Temat wydał mi się na tyle ciekawy, że postanowiłem go rozwinąć w formie tekstowej.

Ciemne interfejsy są coraz częściej spotykane i to nie tylko w systemach operacyjnych. Już kilka razy widziałem ten temat wymieniony jako trend w designie na 2019. Myślę, że mogę się z tym zgodzić. Na pewno będzie tego teraz więcej. Czy to dobrze?

Windows ciemny motyw posiada. MacOS ciemny motyw posiada. Android ciemny motyw posiada (w zależności od nakładki producenta, ale czysty posiada). Linux ciemny motyw posiada (w zależności od dystrybucji). iOS ciemny motyw będzie posiadał (chodzą plotki, że już niebawem).

źródło: https://dribbble.com/shots/5094248-Football-date-dashboard

Czy jednak tak powinno być? Czy faktycznie, ciemny interfejs jest dobry do wszystkiego? A może lepiej go unikać i trzymać się klasycznego podejścia czarno na białym?

To zależy

Jak to z reguły bywa — nie ma jednoznacznego przepisu co do tego, jak będzie dla naszych użytkowników lepiej.  Trzeba znaleźć złoty środek. Dziś postaram się przedstawić kilka argumentów za oraz kilka przeciw. Będziesz mógł lepiej ocenić, czy ciemny interfejs nadaje się dla Twojego produktu, czy jednak lepiej, aby to inni go używali. Postaram się także przywołać kilka mitów odnośnie do przewagi ciemnego interfejsu np. oszczędzanie energii.

Temat ciemnego UI jest dość złożony i przekonałem się o tym niedawno. W zespole, z którym projektuję POSa (Point of Sale), na jednym ze spotkań pewien interesariusz rzucił tekstem w stylu a może zróbmy alternatywną ciemną wersję, podoba mi się tego typu soft. Propozycja ta nie była podparta żadnymi danymi, ot kwestia gustu. Pytanie padło na podatny grunt, ponieważ właściwie wszyscy się zgodzili. Dlaczego nie? Mamy technologię, aby taką zmianę wprowadzić dość szybko, nie jest to trudne zadanie (wtedy tak myślałem), działajmy.

Popełniłem jednak pewien błąd. Pomysł spodobał mi się tak bardzo, że otworzyłem XD i od razu zacząłem przerabiać kolejne ekrany. Z początku naprawdę wyglądało to dobrze (dla nas). Jednak z czasem zaczynaliśmy coraz bardziej tracić ten efekt WOW, który widzieliśmy na początku. Zadowolenie z prototypu spadało proporcjonalnie do liczby komponentów, które były zmieniane na ciemne. Coś ewidentnie było nie tak. Mój błąd polegał na zbagatelizowaniu tego tematu. No bo przecież jak ciężkie może być odwrócenie kilku kolorów? Oryginalnie POS jest jasny z jednym kolorem przewodnim i zachowuje odpowiednie kontrasty, aby sprostać WCAG pod względem czytelności. Otóż odwrócenie tych kilku kolorów oraz „podrasowanie” wizualnie kilku komponentów okazało się jednak trudne.

W momencie, gdy już wszyscy mogliśmy stwierdzić, że jednak coś poszło źle, postanowiłem naprawić swój błąd. Dopiero wtedy usiadłem do odpowiednio głębokiego researchu. Im więcej czytałem na ten temat, tym więcej błędów widziałem w naszym działaniu. I dziś postaram się podzielić moimi odkryciami.

Czytelność

Ktoś kiedyś przeprowadził badania… Pokazały one, że lepiej nam się czyta z kartki niż z ekranu. Pod wieloma względami takimi jak prędkość czytania (20-30% wolniej z ekranu), dokładność w kontekście mylenia liter czytanego tekstu, zmęczenia oczu, przyzwyczajenie do medium (wolimy drukowane) i innymi. Zapraszam tutaj jeśli ktoś chciałby przeczytać całe badanie. Jest jednak pewien problem. Te badania zostały przeprowadzone w latach osiemdziesiątych, gdy po raz pierwszy komputer wygrał w szachy z człowiekiem, Nintendo pokazało swojego pierwszego Gameboya, a najnowszy sprzęt od Apple wyglądał tak:

No to ja się nie dziwię, że kartka wygrała. Pamiętam jeszcze swój pierwszy monitor CRT. Potrafiło to zmęczyć oczy.

Wracając jednak do sprawy czytelności… Czy tekst będzie czarny na białym tle, czy biały na czarnym nie ma większego znaczenia w kontekście tego, jak łatwo będzie nam go przeczytać. Chodzi o kontrast pomiędzy fontem a tłem. Jeśli zostanie zachowany odpowiedni, to wszystko będzie grało dla użytkownika. Pamiętajmy także o tym, że font, jakiego użyjemy, będzie również miał kolosalny wpływ na czytelność — zarówno przy ciemnym, jak i jasnym UI. Kontrast pomiędzy czarnymi literami na białym tle oraz białymi literami na czarnym tle będzie taki sam. Pamiętajmy jednak, że dla większości ludzi i w większości przypadków tekst, który czytają, jest jednak wyraźniejszy, gdy jest ciemny na jasnym tle. Z tego powodu może dojść do pewnego utrudnienia w czytaniu tekstu w negatywie (biały na czarnym tle) spowodowanego brakiem przyzwyczajenia. To niekoniecznie musi być złe, ponieważ możemy w ten sposób przyciągnąć uwagę.

Astygmatyzm — według różnych źródeł około 30% populacji ma tę wadę wzroku. Dlaczego o tym wspominam? Według naukowców z University of British Columbia właśnie wspomniana wada ma wpływ na to, czy łatwiej czyta nam się tekst w pozytywie, czy w negatywie. Podczas patrzenia na jasny ekran do źrenicy dociera więcej światła. Ta zamyka się, zmniejszając efekt deformacji soczewki w naszym oku. Można to wziąć pod uwagę, przy założeniu, że użytkownik nie wie o swojej wadzie wzroku i okularów nie nosi.

Większość programistów, jakich znam, korzysta z ciemnego interfejsu swojego edytora kodu. Poza argumentami wymienionymi powyżej w kontekście czytelności dodatkowo pod uwagę można wziąć kwestię kolorowania składni. O ile w przypadku tekstu białego na czarnym i czarnego na białym kontrast pozostaje taki sam, o tyle w przypadku kolorów na białym i kolorów na czarnym tle jest już zupełnie inaczej. Gdy chodzi o kolorowanie składni — wychodzi na to, że łatwiej skanuje się wzrokiem interfejs ciemny.

Wyróżnienie

Ciemny interfejs daje nam możliwość wyróżnienia kolorów, czy też zdjęć, ponieważ dzięki lepszym kontrastom są szybciej zauważalne. Nie możemy jednak przeładować interfejsu różnymi typami danych, ponieważ ta przewaga zniknie.

Źródło animacji: https://dribbble.com/shots/5094443-Animation-of-Fitbit-Redesign

Łatwiej jest nam wychwycić zdjęcia na ciemnym tle tak samo, jak akcentowane kolory. Jeśli jednak będzie na ekranie zbyt dużo pomieszanych danych, dla przykładu tekstu i zdjęć — już wcale łatwiej nie będzie. Dobrym przykładem może być interfejs Spotify lub różnych aplikacji streamujących wideo. Okładki czy to albumów, czy promujące daną produkcję dobrze wyróżniają się na ciemnym tle.

Jeśli jednak przesadzimy z ilością, to stracimy też czytelność.

Nie chodzi mi tutaj o to, że Wykop taki zły. Są też inne kwestie związane z ciemnym interfejsem, które poruszę poniżej i tam akurat Wykop będzie dobrym przykładem :) Chcę zwrócić uwagę, że to, co w jednym przypadku będzie zaletą, może bardzo szybko okazać się wadą w innym. To jednak zależy od tego, co nasz ciemny UI ma robić.

Zmęczenie oczu

To bardzo ważny aspekt do rozważenia podczas podejmowania decyzji, czy idziemy w ciemny, czy też w jasny UI. W tym przypadku pod uwagę bierzemy interfejsy, z którymi będziemy mieli kontakt przez dłuższy okres. Dobrym przykładem będą tutaj wspomniane już wcześniej edytory kodu, soft dla grafików, czy też tak zwane aplikacje biurowe, jak pakiet Office/Google docs.

Często korzystam z aplikacji do projektowania. Lubię korzystać z nich właśnie w wersji ciemnej. Gdy jeszcze kodziłem, mój WebStorm również miał zawsze włączony ciemny motyw (drakula o ile dobrze pamiętam). Gdy długo siedzę przed ekranem, to właśnie ciemny interfejs jest dla mnie lepszym rozwiązaniem. Mam wrażenie, że moje oczy mniej się męczą. Porównuje tutaj, chociażby Adobiego/Sketcha z WordPressem/JIRĄ. Gdy piszę dłuższy tekst, taki jak ten, zwłaszcza w ciemniejszym otoczeniu mam wrażenie, że biel wszędzie w koło staje się uciążliwa.

Zdaję sobie sprawę, że jest to poniekąd spowodowane jasnością wyświetlacza (z reguły mam ją ustawioną na maxa), ale taka daje mi zadowalający kontrast. Dłuższa praca, zwłaszcza wieczorami, jest uciążliwa. Chyba wszyscy znamy to uczucie, gdy odblokujemy w nocy rozjaśniony telefon.

I tutaj dochodzimy do chyba jednej z najważniejszych kwestii ciemnego UI.

Pora dnia i nocy

Ciemne interfejsy są mniej uciążliwe w nocy oraz gdy już nie jest tak jasno. Gdy  długo wpatrujemy się w biały ekran, siedząc w ciemnym pomieszczeniu, naszym oczom zajmuje trochę czasu, zanim przyzwyczają się do mroku. Wspomniane wcześniej interfejsy aplikacji streamingowych związanych z rozrywką poza eksponowaniem contentu często zostają włączone w tle, na kolejnym ekranie. Gdyby były jasne, odciągałyby naszą uwagę od treści, którą właśnie konsumujemy. Weźmy dla przykładu Netflixa odpalonego na laptopie, który podłączony jest do telewizora. Gdyby ekran laptopa cały czas gdzieś z boku świecił jasnymi kolorami, byłoby to irytujące i nam przeszkadzało. Innym przykładem może być Steam włączony na jednym monitorze, podczas gdy na drugim właśnie rozkoszujemy się grą. Ogólnie rzecz biorąc — jeśli nasz produkt jest używany w celu rozrywki i/lub głównie wieczorem/nocą, warto pomyśleć nad wprowadzeniem ciemnego UI.

Ciemny do pracy

Dlaczego jednak spora liczba ludzi pracujących z oprogramowaniem na etacie, głównie, gdy jest w biurze jasno (czy to od świateł, czy po prostu od słońca) wybiera ciemny interfejs? Tak jak wszyscy wiemy, większość rzeczy, które w Internecie możemy konsumować, jest jasna. Z kolei praca w IT oznacza spędzenie sporej części naszego życia właśnie przy monitorze. Wydaje mi się, że upodobanie do ciemny interfejs w aplikacjach stanowi pewną odskocznię. Jesteśmy w prosty sposób w stanie odróżnić pracę od innych czynności. Jakiś czas temu zacząłem pytać ludzi, którzy pracowali na ciemnym interfejsie skąd taki wybór. Oprócz wcześniej wspomnianych argumentów, że lepiej im się czyta, często pojawiała się odpowiedź oscylująca wokół sformułowania, że czarny UI = pro. Coś w tym jest. W końcu od jakiegoś czasu czarny to już nie tylko kolor żałoby, ale też…

źródło: The Verge

Ekskluzywność

Kolor czarny, a co za tym idzie ciemny interfejs może nieść dodatkowe przesłanie. Pamiętajmy jednak, że warto sprawdzić, w jaki sposób dany kolor odbierany jest w kręgu kulturowym, w który celujemy. W większości regionów czarny utożsamia się z tajemniczością, ekskluzywnością, prestiżem, elegancją albo mocą. Czarny może być też bardzo sexy.

Ciemny interfejs jest energooszczędny

Wiele razy spotkałem się z tezą, że dzięki czarnemu interfejsowi oszczędzamy baterię. W nowych Androidach nawet klawiatura zmienia z automatu kolor na ciemny, gdy włączony jest tryb oszczędzania energii. Czy więc można powiedzieć, że chcąc wydłużyć czas pracy na baterii, wystarczy włączyć ciemny interfejs? I tak i nie. To zależy od typu ekranu, który posiadamy. Pamiętajmy, że jeśli mamy ekran LCD, jest on równomiernie podświetlony w całości. Zmiana większości pixeli z białych na ciemne właściwie nie wpłynie na pobór energii. No, chyba że nasze urządzenie wyposażone jest w ekran OLED lub AMOLED. W przypadku tej technologii każdy pixel podświetlany jest oddzielnie. To właśnie dlatego ten typ ekranów ma tak głęboką czerń — pixele zostają wyłączone. W takiej sytuacji im więcej wyłączonych pixeli na ekranie, tym mniejszy pobór energii.

Podusmowując

Kiedy warto rozważyć wprowadzenie ciemnego interfejsu do produktu? To zależy. Sam powinieneś wiedzieć najlepiej. Ja podsunąłem Ci kilka kwestii do rozważenia przed podjęciem decyzji, aby była możliwie świadoma. Bo fajne, bo trend to nie są sensowne argumenty. Wartość takiej zmiany zależy od tego, w jakim produkcie chcemy ją zastosować i jak będzie używana. Kiedy poznamy preferencje naszych użytkowników co do tego, kiedy i jak korzystają z naszego produkty — wtedy podjęcie takiej decyzji może okazać się trafne. Wrócę teraz do przykładu Wykopu, który posiada opcjonalny tryb ciemny (styl nocny), z którego sam korzystam. Ustawiłem na automatyczny — gdy wchodzę na serwis późną porą, serwuje mi on zawartość w ciemnej skórce.

To chyba najlepsza opcja, jeśli zastanawiamy się nad wprowadzeniem takiego motywu. Zrobić z niego opcję. Najbezpieczniejsze rozwiązanie, ponieważ użytkownicy sami mogą zdecydować, co dla nich lepsze. Pamiętajmy także o tym, że jeśli nasz serwis często przekierowuje nas na zewnątrz, gdzie najprawdopodobniej UI będzie ociekał bielą, to w nocy nasze oczy będą często doznawały szoku. Długie wpatrywanie się w spore ilości danych prezentowane na skomplikowanych dashboardach bogatych w wiele kolorów, pomimo korzystania głównie wieczorami, może nie być najlepszym rozwiązaniem. Może nie, może tak — decyzja należy do Ciebie.