W centrum uwagi: zasady projektowania ciemnego interfejsu użytkownika

Ciemne projekty interfejsu użytkownika są widoczne z daleka, od ekranów mobilnych po ogromne telewizory. Ciemny motyw może wyrażać moc, luksus, wyrafinowanie i elegancję. Jednak projektowanie dla ciemnych interfejsów użytkownika wiąże się z wieloma wyzwaniami i nie spełni oczekiwań, jeśli zostanie źle zaimplementowane. Przed zanurzeniem się w „ciemną stronę” projektanci powinni spojrzeć, zanim skoczą.

Fizycy twierdzą, że czerń nie jest tak naprawdę kolorem; jest to brak światła . W swoich eksperymentach prześwietlających światło słoneczne przez pryzmaty, sir Isaac Newton nawet nie uwzględnił go w spektrum kolorów.

W psychologii kolorów większość kolorów reprezentuje różne rzeczy dla różnych ludzi. W kulturach zachodnich czerń często kojarzy się ze śmiercią, tajemnicą i złem. Zieleń często kojarzy się ze wzrostem ze względu na naturę. Niebieski jest niemal powszechnie uspokajający, ponieważ kojarzy się z niebem i wodą. Kolor jest emocjonalny.

Inne efekty mają charakter kulturowy. Na przykład fiolet nadal kojarzy się z luksusem, ponieważ w wielu starożytnych kulturach purpurowy barwnik był drogi i rzadki – stać na niego tylko tantiemy. Była to znacząca część kulturowego ducha czasu wystarczająco długo, by stać się częścią ludzkiej psychiki .

Produkty cyfrowe z ciemnymi interfejsami użytkownika — kojarzone z mocą, elegancją i tajemniczością — to budzący grozę trend. Chociaż często mówi się, że tryb ciemny może zmniejszyć zmęczenie oczu, nie ma dowodów na to, że to prawda. W pewnych okolicznościach ma również oszczędzać baterię. Jednak często ciemne motywy są wyborem estetycznym.

Ciemny i jasny interfejs użytkownika

Nie wszystkie interfejsy nadają się do ciemnego motywu. Projektanci powinni przyjrzeć się dopasowaniu marki, adekwatności kulturowej i psychologii kolorów oraz rozważyć ich emocjonalny wpływ , zanim zdecydują się na taką. To trudne zadanie równoważenia.

Podczas gdy aplikacja finansowa skierowana do milenialsów może osiągnąć efekt chłodny z mrocznym motywem, może być nieodpowiednia dla strony internetowej dużego banku skierowanej do ogółu społeczeństwa. Zbyt bogaci, zbyt mroczni i zbyt stylowi mogą stać się bardziej frustrujące, gdy ludzie chcą tylko sprawdzić swoje salda i zapłacić rachunek.

Ciemne interfejsy użytkownika aplikacji B2B SaaS są bardzo trudne do zaprojektowania. Standardowe składniki internetowego interfejsu użytkownika, takie jak tabele danych, widżety, formularze i listy rozwijane, mogą wyglądać dziwnie w ciemnym interfejsie użytkownika. Ponieważ wiele schematów kolorów nie działa dobrze z ciemnymi interfejsami użytkownika, niektóre marki i produkty — w zależności od rodzaju, kontekstu i czynników środowiskowych — nie są dobrze dopasowane i mogą okazać się wyzwaniem nie do pokonania.

Projektanci, którzy wcześniej nie pracowali z ciemnym interfejsem użytkownika i zdecydują się wskoczyć obiema stopami, mogą znaleźć się na wzburzonych, niezbadanych wodach. W oceanach mrocznych interfejsów użytkownika normy są naginane, zasady zmieniane, a pułapek jest mnóstwo.

To powiedziawszy, istnieje wiele dobrych powodów, aby używać ciemnych interfejsów użytkownika:

• 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 stworzyć uderzający, dramatyczny wygląd

Są też scenariusze, w których nie jest to zalecane:

• Gdy jest duża ilość tekstu (czytanie na ciemnym tle jest trudne)
• Gdy istnieje wiele mieszanych typów treści
• Gdy projekt wymaga szerokiej gamy kolorów

Kontrast w ciemnym projekcie interfejsu użytkownika

Ciemny motyw nie jest czarnym motywem. Najlepiej byłoby to traktować jako motyw „słabo oświetlony”. Jednym z głównych problemów związanych z ciemnymi interfejsami użytkownika jest osiągnięcie wystarczającego kontrastu, aby elementy wizualne miały separację, a tekst był czytelny. Większość projektantów uważa, że ​​użycie czerni byłoby optymalne, aby uzyskać silny kontrast. Jednak lepiej nie używać prawdziwej czerni (#000000) dla tła lub kolorów powierzchni . Czarny jest najlepiej zarezerwowany dla innych elementów interfejsu użytkownika i używany oszczędnie. Na przykład prawdziwa czerń może być używana do małych elementów interfejsu użytkownika lub otaczającej ramki.

Ciemny motyw Google Material Design zaleca używanie ciemnoszarego (#121212) jako ciemnego koloru powierzchni motywu „w celu wyrażenia wzniesienia i przestrzeni w środowisku o szerszym zakresie głębi”. Ponadto wielu projektantów zaleca dodanie subtelnego ciemnoniebieskiego odcienia do ciemnych szarości podczas definiowania schematu kolorów. Ma tendencję do tworzenia lepszego ciemnego odcienia dla ekranów cyfrowych i przyjemniejszej ciemnej palety kolorów interfejsu użytkownika.

Zaletą korzystania z gamy szarości jest to, że daje projektantom swobodę, ponieważ można wyrazić szerszą gamę kolorów. Szara paleta pomaga również stworzyć głębię, ponieważ cienie można łatwiej dostrzec na tle szarości w porównaniu z czernią.

Szczególną uwagę należy zwrócić na kontrast tekstu w ciemnych interfejsach użytkownika.

Wytyczne dotyczące dostępności treści internetowych (WCAG) wzywają, aby „wizualna prezentacja tekstu miała współczynnik kontrastu co najmniej 4,5:1 ”, z wyjątkiem tekstu o dużej skali, który powinien mieć współczynnik kontrastu co najmniej 3:1 . Dlatego projektanci muszą zadbać o to, aby treść była czytelna w trybie ciemnym.

Dobrym pomysłem jest również przetestowanie prawidłowego kontrastu między innymi elementami interfejsu użytkownika, takimi jak karty, przyciski, pola i ikony na różnych wyświetlaczach i urządzeniach. Jeśli istnieje niezauważalna separacja między elementami interfejsu użytkownika, projekt za bardzo się miesza i może stać się nudny.

Skupiając uwagę: kolor;

Kolor wyróżnia się w ciemnych interfejsach użytkownika. Najlepiej używać schematów z jaśniejszymi, nienasyconymi kolorami akcentu. Unikaj używania nasyconych kolorów w ciemnych interfejsach użytkownika, ponieważ mogą one wizualnie wibrować na ciemnych powierzchniach. Co więcej, zgodnie z najlepszą praktyką, kolory muszą spełniać standard AA WCAG co najmniej 4,5:1 , gdy są używane z tekstem.

Podczas definiowania schematu kolorów dla ciemnego interfejsu użytkownika Google zaleca ograniczoną liczbę akcentów kolorystycznych, aby zachować większość dostępnej przestrzeni dla ciemnych powierzchni. Pomocne może być użycie dzielonych kolorów dopełniających. Schemat posiada jeden kolor dominujący oraz dwa kolory sąsiadujące z dopełnieniem koloru dominującego. W ten sposób zapewnia wymagany kontrast bez napięcia uzupełniającego schematu kolorów.

Właściwy schemat kolorów może pomóc w stworzeniu dobrego kontrastu. Colorable to przydatne narzędzie do wybierania kombinacji kolorów tekstu i tła zgodnych z ułatwieniami dostępu.

Tekst i istotne elementy, takie jak przyciski i ikony, powinny spełniać normy czytelności, gdy pojawiają się na ciemnym tle. Jak widać w powyższej aplikacji Jabra Sound+, w tekście i ikonach można używać kolorów innych niż biały.

Witryna Google Material Design zawiera przydatny generator palet kolorów (w sekcji „Narzędzia do wybierania kolorów”), za pomocą którego projektanci mogą tworzyć i stosować palety kolorów w interfejsie użytkownika. Poziom dostępności kombinacji kolorów można również zmierzyć za pomocą towarzyszącego narzędzia Color Tool.

„Użyj silnie kontrastujących kolorów, aby poprawić czytelność. Na postrzeganie kolorów wpływa wiele czynników, w tym rozmiar i grubość czcionki, jasność kolorów, rozdzielczość ekranu i warunki oświetleniowe”. Wytyczne Apple dotyczące interfejsu ludzkiego

Mniej znaczy więcej: wykorzystanie negatywnej przestrzeni

Jednym z podstawowych elementów udanego projektowania ciemnego interfejsu użytkownika jest umiejętne wykorzystanie negatywnej przestrzeni. Ciemne interfejsy użytkownika, jeśli są źle zaprojektowane, mogą sprawić, że produkty cyfrowe będą wyglądać na ciężkie i apodyktyczne. Aby zrównoważyć, projektanci mogą sprawić, że ciemne interfejsy będą lżejsze, wykorzystując negatywną przestrzeń w rzadkich, minimalistycznych projektach. Minimalistyczny design dotyczy zarówno tego, czego nie ma, jak i tego, co jest. Umiejętnie wykorzystana przestrzeń ujemna sprawi, że ciemny interfejs użytkownika będzie łatwiejszy do przeskanowania i umożliwi łatwiejsze przyswajanie informacji.

Francuski kompozytor Claude Debussy powiedział kiedyś: „ Muzyka to przestrzeń między nutami ”. To samo odnosi się do skanowalności — ujemna przestrzeń między elementami jest tym, co sprawia, że ​​układ działa. Liberalna ilość negatywnej przestrzeni wokół elementów interfejsu użytkownika nadaje im definicję. Podkreśla ważną treść i zapewnia niezbędną przestrzeń do oddychania, aby projekt nie wydawał się gęsty i zagracony. Bez przestrzeni oddechowej ludzki mózg jest mniej skłonny do skanowania interesujących miejsc i bardziej skłonny do wędrówek.

Interfejsy przepełnione zbyt dużą ilością elementów i tekstu to zmora wysokiej jakości ciemnego interfejsu użytkownika. Dzięki starannemu rozważeniu hierarchii wizualnej w ciemnych interfejsach użytkownika, projektanci mogą ułatwić skanowanie swoich dzieł, podnosząc w ten sposób wrażenia użytkownika.

Stylizacja słów: Typografia

Każdy fragment tekstu w ciemnych interfejsach użytkownika wymaga dokładnej analizy. Obawy są dwojakie: czytelność i kontrast. Po pierwsze, chodzi o rozmiar. Tekst musi być wystarczająco duży, aby zapewnić dobrą czytelność (mały tekst na ciemnym tle jest trudniejszy do odczytania). Po drugie, musi być wystarczający kontrast między tekstem a tłem.

Dostępność tysięcy czcionek cyfrowych ułatwia wyświetlanie wiadomości, które mają wpływ na nagłówki i wiadomości główne. Projektanci mogą złagodzić problemy z czytelnością, zwiększając kontrast i dostosowując rozmiar czcionki, odstępy między znakami i wysokość linii w przypadku mniejszego tekstu.

Rekomendacja W3C AAA dla tekstu o normalnym rozmiarze (mniej niż 18 punktów, jeśli nie jest pogrubiona) ma mieć współczynnik kontrastu co najmniej 7:1 . Dotyczy to również innych elementów interfejsu użytkownika: ikon, obrazów tekstu i etykiet tekstowych, takich jak etykiety przycisków. Na projektantach spoczywa obowiązek zapewnienia, że ​​wszystkie produkty cyfrowe są dostępne dla wszystkich. Nie tylko poprawia użyteczność, a zatem UX, to prawo w większości krajów.

Dla projektantów dostępne są niezliczone opcje pozyskiwania doskonałych krojów pisma, które działają dobrze w ciemnych interfejsach użytkownika. Czcionki Google, biblioteka czcionek i Adobe Typekit to tylko niektóre z nich, które oferują łatwą integrację aplikacji lub witryny oraz szeroki wybór opcji.

Głębokość komunikacji: Elewacja

Ciemny motyw nie oznacza mieszkania. Dzięki jasnym motywom oświetlenie, cienie i cienie tworzą wrażenie głębi. W przypadku ciemnych interfejsów użytkownika jest to trudniejsze, ponieważ zawierają głównie ciemne powierzchnie z rzadkimi akcentami kolorystycznymi. Mimo to projektanci mogą użyć trzech lub czterech poziomów elewacji z odpowiednimi schematami kolorów, aby tekst oddawał głębię.

Dlaczego głębokość? Większość nowoczesnych systemów projektowych wykorzystuje system poziomów elewacji do komunikowania głębokości. Poczucie głębi koresponduje ze światem przyrody. Nasza wizja ma percepcję głębi i żyjemy w świecie 3D. Głębia pomaga podkreślić wizualną hierarchię interfejsu. Na przykład elementy na pierwszym planie zwracają na siebie uwagę, takie jak okno dialogowe ostrzeżenia.

Powierzchnie są oświetlone w różny sposób, co oznacza różne poziomy elewacji. Im wyższa pozycja powierzchni w stosie elewacji (bliżej domniemanego źródła światła), tym jaśniejsza powierzchnia. Jaśniejsza powierzchnia ułatwia rozróżnienie wysokości między komponentami i pomaga widzieć cienie, dzięki czemu krawędzie każdej powierzchni są bardziej widoczne.

Opracowanie koloru powierzchni każdego poziomu wymaga staranności. Najlepiej nie mieć więcej niż czterech lub pięciu poziomów. Projektanci muszą wziąć pod uwagę kontrast tekstu, ponieważ powierzchnie w stosie stają się wyższe i stają się jaśniejsze. Jeśli kolor tła nie jest wystarczająco ciemny, aby osiągnąć poziom kontrastu co najmniej 15,8:1 między białym tekstem a powierzchnią, tekst na najwyższej (i najjaśniejszej) podwyższonej powierzchni nie spełni standardu 4,5:1. W niektórych przypadkach najlepiej jest określić kolor tekstu elementu jako prawdziwy czarny (#000000) w systemie projektowania, aby uzyskać dobry kontrast na jasnoszarym tle.

Inspiracje do projektowania mrocznego interfejsu użytkownika

Zastanawiając się nad zasadami przedstawionymi powyżej, oto kilka doskonałych przykładów projektowania ciemnego interfejsu użytkownika:

Atom Finance wykorzystuje ciemny motyw, aby uzyskać wyrafinowany wygląd i ogranicza kolory akcentów do trzech. Układ wykorzystuje negatywną przestrzeń i oszczędny, minimalistyczny projekt dla złożonej witryny finansowej. Witryna dobrze wykorzystuje subtelne cieniowanie, aby wskazać różne poziomy komponentów w interfejsie użytkownika.

Obie te minimalistyczne strony z ciemnymi motywami używają odważnej typografii. Ostrożne cieniowanie z jednym akcentem kolorystycznym jest stosowane zgodnie z najlepszymi praktykami projektowania ciemnego interfejsu użytkownika.

Pomimo wyzwań związanych z pracą z ciemnymi motywami dla aplikacji SaaS, ten pulpit nawigacyjny wizualizacji danych dla IBM jest wzorowy. Liczba kolorów akcentujących jest ograniczona do minimum, a witryna używa subtelnego cieniowania, aby pokazać różne poziomy interfejsu użytkownika.

Te aplikacje mobilne przestrzegają najlepszych praktyk projektowania ciemnego interfejsu użytkownika, używając prawdziwej czerni tylko do ramek, właściwego cieniowania elementów dla różnych poziomów elewacji i ograniczonej liczby kolorów akcentujących.

Streszczenie

Decyzję o zastosowaniu ciemnego interfejsu użytkownika zamiast tradycyjnego należy podejść z dyskrecją. Nie należy go wybierać z niewłaściwych powodów — aby być modnym, innym lub naśladować czyjś projekt. Projektanci powinni mieć silne uzasadnienie swojego wyboru i wziąć pod uwagę treść, kontekst użycia oraz urządzenie, na którym projekt się pojawi.

Ciemne motywy są odpowiednie dla niektórych produktów cyfrowych, ale ich wdrożenie jest trudne w przypadku innych. Najważniejsza jest prostota. Świetnie nadają się do prezentowania minimalistycznej zawartości, wizualizacji danych, witryn multimedialnych i platform rozrywkowych. Nie pasują do złożonych platform B2B z dużą ilością danych, stron z dużą ilością tekstu i mnóstwa zróżnicowanych treści.

Dla odważnych projektantów, gotowych do przekraczania nowych granic stylistycznych i odkrywania ciemnych interfejsów użytkownika przez emocjonalny i estetyczny obiektyw, oferują ekscytujący plac zabaw nieskończonych możliwości – po „ciemnej stronie”.

Pozwól nam wiedzieć co myślisz! Zostaw swoje przemyślenia, komentarze i opinie poniżej.

• • •

Dalsza lektura na blogu Toptal Design:

• Ciemne interfejsy użytkownika. Dobry i zły. Za I przeciw.
• Zasady projektowania i ich znaczenie
• Odkrywanie zasad projektowania Gestalt
• Przekonujące i poruszające — przewodnik po zasadach projektowania ruchu
• Popraw swój UX dzięki zasadom udanego projektowania interakcji