Ciemne interfejsy użytkownika. Dobry i zły. Za I przeciw.

Ciemne interfejsy użytkownika są dramatyczne, stylowe i eleganckie. Niemniej jednak projektanci powinni stąpać ostrożnie, jeśli zdecydują się chodzić po „ciemnej stronie”.

Tworzenie wyglądu i stylu produktu jest jednym z podstawowych obowiązków projektanta — początkowa decyzja projektowa musi być odpowiednia do celu produktu, konkretnej sytuacji i odbiorców. Kolorystyka będzie miała długotrwały wpływ i musi być starannie dobrana — a wszystko zaczyna się od wyboru tła, na którym zostaną umieszczone elementy projektu — „płótna”. Zwykłym wyborem, prawie domyślnie, jest białe tło.

Istnieją dobre powody, aby wybrać jasne tło. Kontrast, tekst i czytelność oraz możliwość pracy z szeroką gamą subtelnych kolorów to tylko niektóre z nich. Według wielu badań naukowych optymalna czytelność wymaga czarnego tekstu na białym tle. Branding może również wpłynąć na decyzję, ponieważ logo i kolory firmy nie będą działać z ciemną paletą kolorów.

Większość badań wykazała, że ​​ciemny tekst na jasnym tle jest lepszy od jasnego tekstu na ciemnym tle, tzn. jest łatwiejszy do odczytania. W jednym ze słynnych badań „zmęczenie wzroku” było znacznie większe, gdy badani czytali jasne znaki na ciemnym tle w porównaniu do ciemnych znaków na jasnym tle (Bauer, D., Bonacker, M. i Cavonius, CR 1983).

Jest też oczekiwanie : ludzie są przyzwyczajeni do oglądania różnorodnych treści renderowanych ciemnym atramentem na białym tle, prezentowanych wraz z obrazami. Pomyśl o gazetach i czasopismach, które istnieją od ponad 350 lat. Cofając się jeszcze dalej – trzydzieści pięć tysięcy lat do epoki paleolitu (czasów jaskiniowców), znajdujemy rysunki jaskiniowe lwów i mamutów, zazwyczaj umieszczane na jasnym tle z węglem drzewnym lub spalonymi kośćmi, którymi kreślono przedstawienia.

Niemniej jednak, gdy projekt to uzasadnia, współcześni projektanci produktów cyfrowych mogą z różnych powodów zdecydować się na pracę w ciemnej kolorystyce. Jak zasugerowano powyżej, często jest to wybór estetyczny mający na celu przekazanie dramatu i wywołanie emocji – czegoś nieoczekiwanego – lub być może projektant chce połączyć projekt z brandingiem lub upewnić się, że treść wizualna się wyróżnia.

Jeśli jednak projektant zdecyduje się przejść na „ciemną stronę”, stanie przed szeregiem wyzwań. W grę wchodzą wszelkiego rodzaju problemy z użytecznością — głównie związane ze skanowalnością, czytelnością i kontrastem. Głównym aspektem do rozważenia jest wystarczający kontrast między tekstem a tłem. Należy również wziąć pod uwagę kontekst (przypadek użycia) i środowisko, a także urządzenie, na którym interfejs użytkownika będzie prawdopodobnie oglądany.

Niektóre ciemne interfejsy są zaprojektowane tak, aby zminimalizować „cyfrowe zmęczenie oczu”. Wraz z rozwojem technologii cyfrowej przez większość dnia wpatrujemy się w ekrany. Cyfrowe zmęczenie oczu to częsta przypadłość, która codziennie dotyka miliony ludzi. Spowodowane przez wszystko, od nadmiernego korzystania z komputera po regularną ekspozycję na jasne światło, może powodować bóle głowy, ból szyi, niewyraźne widzenie i pieczenie/pieczenie oczu.

Istnieją nawet takie rzeczy, jak zespół widzenia komputerowego (CVS) i „dyskomfort oczny”. Według badań ponad 83 procent Amerykanów korzysta z urządzeń cyfrowych przez ponad dwie godziny dziennie, a 60,5% zgłasza, że ​​doświadcza objawów cyfrowego zmęczenia oczu. (Oczy prześwietlone: ​​dylemat urządzenia cyfrowego.)

Produkty SaaS typu business-to-business i aplikacje do edycji multimediów są używane przez wiele godzin bez przerwy. Wiele z nich zostało zaprojektowanych w ciemnym interfejsie użytkownika, aby zmniejszyć zmęczenie oczu, a jednocześnie zapewnić przejrzystość wizualną. Takie podejście wymaga jednak starannej, wstępnej oceny kierunku projektowania.

Większość programistów używa czarnego ekranu z kodowaną kolorami składni, aby zmniejszyć zmęczenie oczu. Jak ujął to programista Toptal, Kevin Bloch: „Czarne tło zmniejsza zmęczenie oczu i ułatwia odczytywanie automatycznego kodowania kolorami, co znacznie przyspiesza zrozumienie kodu na pierwszy rzut oka”.

Programista Toptal Amin Shah Gilani dodaje: „Osobiście używam słonecznego, ciemnego motywu w moim edytorze kodu. Wolę ciemny motyw, ponieważ ciemniejsze tło jest bardziej przyjemne dla oczu, zwłaszcza że albo lubię przyciemniać światła, albo pracować w nocy”.

Interfejsy użytkownika aplikacji do gier mają również tendencję do ciemniejszych motywów. Kontekst gry i środowisko, w którym gracze grają, lepiej pasują do czarnej palety kolorów. Czarne tło wzmacnia efektowne efekty wizualne, wprowadza poczucie tajemniczości, zapewnia lepszy kontrast i wspiera hierarchię wizualną.

Kiedy ciemny interfejs użytkownika działa dobrze

Większość interfejsów użytkownika związanych z rozrywką (telewizory Smart TV, konsole do gier oraz aplikacje telewizyjne i filmowe) ma zwykle ciemne motywy — nie bez powodu. Większość czynności związanych z rozrywką odbywa się wieczorem, jest oglądana z odległości 6-10 stóp i oglądana w słabo oświetlonych pomieszczeniach — innymi słowy, ekran pasuje do otoczenia. Ponadto kolorowe treści (np. okładki i promocje) wyróżniają się dramatycznie na interfejsach o ciemnych motywach.

Celem jest dopasowanie do kontekstu działania: „Ściemnia się, odpoczywam i chcę pooglądać telewizję”. Podobnie jak tysiące maleńkich żarówek, ekrany cyfrowe emitują światło wszędzie tam, gdzie obecny jest jasny piksel; stąd jasny interfejs użytkownika oświetliłby pokój – niepożądany efekt, biorąc pod uwagę aktywność. W tym scenariuszu projekt interfejsu użytkownika próbuje dopasować kontekst: urządzenie, zawartość, aktywność i środowisko.

W odpowiednim kontekście, środowisku, aplikacji i użytkowaniu interfejsy użytkownika z czarnym tłem mają sens. Zawsze bierz pod uwagę kontekst , w którym prawdopodobnie będzie używany interfejs. Ale to idzie dalej — wybór powinien zależeć od treści i kontekstu : co , kiedy , gdzie i na jakim urządzeniu .

• Aby uzyskać mocny, dramatyczny wygląd i efektowne efekty wizualne
• Dać poczucie stylu i elegancji, luksusu i prestiżu
• Aby stworzyć poczucie intrygi i tajemnicy
• Aby pomóc skoncentrować się i kierować uwagą użytkownika przy minimalnym rozpraszaniu
• Aby wspierać wizualną hierarchię i architekturę informacji

Ciemne interfejsy użytkownika powinny być używane tylko z rzadkim, minimalnym tekstem i „fragmentowanymi” informacjami z silnym naciskiem na elementy wizualne — z lekkim tekstem. Jeśli używany jest tekst, powinien kontrastować z ciemnym tłem — najlepiej czystą bielą lub innym mocnym kolorem (nie ciemnoszarym) na czarnym tle.

Kiedy ciemny interfejs użytkownika nie działa dobrze

Jak wskazano wcześniej w artykule, interfejsy użytkownika z ciemnymi motywami są złym wyborem w przypadku treści z dużą ilością tekstu i danych lub w przypadku korzystania z różnych typów treści (tekst, obrazy, wideo, tabele danych, listy rozwijane, pola itp. ). Ogólny konsensus w społeczności projektantów jest taki, że ciemne interfejsy użytkownika są ogromnym wyzwaniem do projektowania, chyba że masz do czynienia z prostą treścią i po prostu odrobiną tekstu tu i tam.

Wyzwanie polega na utrzymaniu odpowiedniego kontrastu, co wpływa na nadrzędne wyzwanie: czytelność, która jest połączona z użytecznością, która wpływa na UX. Generalnie wszystkie kolory działają na białym tle, podczas gdy na ciemnym tle użyteczna gama kolorów jest drastycznie zmniejszona.

Oto przykład z prawdziwego świata, kiedy nie używać interfejsu o ciemnych motywach: byłem zaangażowany w projekt B2B SaaS, w którym dyrektor generalny był nieugięty, że aby „być inny”, chciał użyć ciemnego motywu Interfejs użytkownika — pasujący do marki firmy… dla całej platformy. Za wszystko. Po kilku spotkaniach i zebraniu zespołu projektowego i menedżerów produktu za przyczynę, byliśmy w stanie odciągnąć go od tak potencjalnie katastrofalnej decyzji.

Platforma wykorzystywała standardowy zestaw komponentów UI aplikacji SaaS, dzięki czemu była pełna formularzy, widżetów, list rozwijanych, piktogramów i ikon wraz z danymi tekstowymi i liczbowymi w tabelach. Nawigacja, układ i funkcjonalność stałyby się niezwykle trudne do zarządzania przy jednoczesnym osiągnięciu wystarczającego kontrastu i spójnego schematu kolorów. Podsumowując, byłoby prawie niemożliwe, aby wszystko działało z interfejsem o ciemnej tematyce.

W zależności od stosowności aplikacji, być może właściwym wyborem byłoby zasugerowanie kombinacji jasnych i ciemnych interfejsów użytkownika. Na przykład strony ustawień z widżetami i formularzami oraz tabelami danych można było zaprojektować na jasnym tle, a strony analityczne z wykresami można było zaprojektować w ciemniejszym schemacie kolorów.

Co robić, a czego nie używać Dark UI

Podsumowując, należy ostrożnie podejść do decyzji o zastosowaniu ciemnego interfejsu użytkownika. Projektanci nie powinni tego robić z niewłaściwych powodów — aby być modnym, innym lub kopiować czyjś projekt. Ważne jest, aby projektant wziął pod uwagę kontekst, treść (kontrast i czytelność), urządzenie i przypadek użycia oraz miał dobry powód do wyboru. Jest to delikatna akcja balansowania, ponieważ potencjalnie istnieje wiele korzyści, ale także wiele pułapek.

Kiedy można używać ciemnych interfejsów użytkownika:

• Kiedy schemat kolorów brandingu to gwarantuje
• Kiedy projekt jest rzadki i minimalistyczny z tylko kilkoma rodzajami treści
• Gdy jest to właściwe ze względu na kontekst i zastosowanie, na przykład aplikacje rozrywkowe w nocy
• Aby zmniejszyć zmęczenie oczu, np. strony analityczne używane przez długi czas
• Aby wywołać emocję — na przykład uczucie intrygi i tajemnicy
• Aby stworzyć uderzający, dramatyczny wygląd
• Aby stworzyć poczucie luksusu i prestiżu
• Aby wspierać wizualną hierarchię

Kiedy najlepiej trzymać się z dala od ciemnych interfejsów użytkownika:

• Gdy jest dużo tekstu (czytanie na ciemnym tle jest trudne)
• Gdy na ekranie jest dużo mieszanej treści
• W przypadku aplikacji B2B z dużą ilością formularzy, komponentów i widżetów
• Gdy projekt wymaga szerokiej gamy kolorów

Do przejścia na „ciemną stronę” należy podchodzić ostrożnie. Przed podjęciem tak potencjalnie niepewnej i pełnej pułapek decyzji zaleca się głębsze, dokładniejsze badania i analizy. Kiedy projektant pójdzie tą ścieżką, bardzo trudno jest zawrócić. Zaleca się, aby projektanci rozważyli wszystkie aspekty — dobre i złe, nakazy i zakazy, zanim wskoczą obiema nogami.

• • •

Dalsza lektura na blogu Toptal Design:

• eCommerce UX – przegląd najlepszych praktyk (z infografiką)
• Znaczenie projektowania zorientowanego na człowieka w projektowaniu produktu
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
• Zasady heurystyczne dla interfejsów mobilnych
• Projekt przewidujący: jak tworzyć magiczne doświadczenia użytkownika