Metody projektowania doświadczenia i interfejsu użytkownika nieustannie ewoluują. Każdego roku pojawiają się nowe zjawiska oraz przekształcają istniejące już trendy. Zebraliśmy 7 inspirujących kierunków w projektowaniu UX/UI.

1. Glassmorfizm

Trend ten skupia się na połączeniu rozmytego tła, cieni i przezroczystości. Dzięki temu osiągany jest efekt trójwymiarowości designu, który jest jednocześnie czysty, elegancki i futurystyczny. Wypukłe elementy są dobrze wyeksponowane, a przyciski same się proszą o kliknięcie. Ma to pozytywny wpływ na UX, także dlatego, że niewątpliwe walory estetyczne  stylu skłaniają do interakcji.

Interfejs opiera się na kartach (oknach) otoczonych subtelnymi, jasnymi ramkami oraz cieniem. Są przezroczyste (efekt matowego szkła), a tło pod nimi rozmyte. Daje to wrażenie głębi. Wykorzystuje się wyraziste kolory, ale subtelne tła oraz gradienty i elementy geometryczne. 

2. Oryginalne ilustracje

Trend umieszczania w designie unikalnych ilustracji był widoczny już w zeszłych latach, ale stawiano wtedy na minimalizm. Obecnie eksperymentuje się z bardziej odważnymi projektami. Cechują je często kontrastowe kolory oraz asymetryczność.

Zaletą stosowania oryginalnych ilustracji jest możliwość zaznaczenia wyrazistego wizerunku marki. W ten sposób wyróżnimy się na tle stosującej jedynie zdjęcia lub proste ikony konkurencji. Nadajemy także stronie niepowtarzalny charakter, pozwalając stworzyć indywidualny styl komunikacji marki (wprowadzając np. brand hero).

Grafiki są w stanie także w bezpośredni albo metaforyczny sposób tłumaczyć np. zawartość okna lub czynność, którą może wykonać użytkownik. Może to działać jako zachęta do podjęcia działania. Równocześnie walory estetyczne ilustracji wpływają pozytywnie na doświadczenie użytkownika.

3. Animacje i mikrointerakcje

Ruch w sposób oczywisty sprzyja dynamizacji witryny. Za pomocą prostych, osiągalnych nieobciążającymi urządzeń użytkowników technik (np. CSS), możemy aktywizować użytkownika. Wprowadzając ruch, ilustrujemy treści strony doskonalej niż przy użyciu statycznej grafiki.

Animacje, pojawiające się  podczas przewijania strony, dają wrażenie, że są wywoływane przez użytkownika. Mogą także uzupełniać się służąc do opowiadania historii snutej podczas scrollowania witryny. 

Zadanie aktywizacji użytkownika spełniają tym bardziej mikrointerakcje. Jeżeli grafika czy ikona porusza się po najechaniu myszką, odwiedzający stronę czuje, że jego działanie wpływa na kształt witryny. Skłania to do podjęcia działania, jakim może być np. kliknięcie okna. Poruszające się elementy mogą też występować w formie interaktywnych przełączników, animacji na pasku postępu czy występować podczas wprowadzania danych.

Angażujące animacje można osiągnąć także w trzech wymiarach, co jest obecnie popularnym trendem. Obracające się obiekty dają wrażenie głębi w obrazie. Pozwalają przede wszystkim pokazać produkt z wielu stron, ale także skłaniają do interakcji przy bardziej abstrakcyjnych czy schematycznych projektach graficznych.

4. Asymetria

Projektanci przyzwyczajeni są do zachowywania symetrii w projektach, aby dać użytkownikowi wrażenie ładu na stronie czy w aplikacji. Harmonijne projekty ponadto nie prowadzą do nadmiernego rozproszenia użytkownika, który może skupić się na najważniejszych z punktu użyteczności cechach produktu cyfrowego. 

Z drugiej strony wprowadzenie asymetrii budzi zaciekawienie i przyciąga uwagę użytkownika. Pozwala też designowi wyróżnić się na tle innych projektów. Tworzenie wrażenia zamierzonej przypadkowości może także być sposobem na przedstawienie kreatywnego aspektu wizerunku marki.

Efekt ten uzyskuje się często za pomocą dzielenia ekranu, kontrastowych schematów kolorów i wyraźnych linii. Trzeba jednak pamiętać, że tego, jak użytkownik będzie poruszał się po witrynie, nie możemy pozostawić przypadkowi. Ważne jest, aby elementy układały się w logiczną ścieżkę prowadzącą do realizacji celu witryny. Należy także zachować równowagę kompozycyjną.

Istotne jest również fakt, że asymetria nie będzie odpowiednia dla każdej marki. Strony korporacyjne powinny zazwyczaj konotować stabilność i harmonię, aby budziły zaufanie. Warto także, by witryny e-commerce z kolei, gdzie podstawowe znaczenie ma optymalizacja ścieżki zakupowej, ostrożnie podchodziły do tego trendu.

5. Rzeczywistość rozszerzona (AR)

AR jest odpowiedzią na możliwości, które dają urządzenia mobilne. Smartfony i tablety pozwalają użytkownikom na korzystanie z kamer do robienia zdjęć i przesyłania dynamicznego obrazu. Wykorzystanie ich do prezentowania swojego produktu może wznieść interakcję na wyższy poziom.

Są to projekty oparte na perspektywie pierwszej osoby pozwalające np. pokazać wykorzystanie produktu w otoczeniu użytkownika. Przykładem może być tutaj aplikacja Dulux, pozwalająca wirtualnie „przemalować” naszą ścianę na kolor wybrany z oferty marki. Podobnie postąpiła IKEA, której aplikacja umożliwia umeblowanie swojego pomieszczenia za pomocą produktów firmy.

Rozwiązania tego typu stosowane są także przez e-commerce branży odzieżowej. Tworzy się wirtualne lustra, dzięki którym można przymierzyć konkretne modele ubrań. Prezentacje tego typu można szeroko wykorzystać w handlu, a także nieruchomościach, edukacji, rozrywce czy mediach. Prowadzą do większego zaangażowania użytkownika, który może docenić właśnie np. praktyczne metody zastosowania produktów.

6. Wyrazista typografia

Wraz z pojawieniem się możliwości obsługi przez przeglądarki niestandardowych fontów, mogły one zacząć stanowić ważniejszy (a czasem nawet główny) element designu. Oparcie produktów na odważnej, ponadwymiarowej typografii przyciąga uwagę użytkownika i dostarcza wrażeń estetycznych. Jednocześnie teksty są oczywiście sposobem na przekazywanie istotnych treści.

Za pomocą kroju i wielkości fontów można stosować gradację informacji. Używa się do tego celu np. wersalików oraz pogrubień. Aby wyróżnić daną treść, stosuje się także czcionki bardziej odważne i wyraziste. Eksperymentuje się również z kolorystyką. Ważne, aby trafnie ustalić hierarchię informacji, gdyż zbyt duża ilość wyróżnionych tekstów jest myląca dla użytkownika.

Konstruując designy oparte na typografii, należy mieć na uwadze użytkowników urządzeń mobilnych. Jeżeli stosujemy metodę „mobile first”, czyli rozpoczynamy projektowanie od wersji na smartfony i tablety, możemy mieć pewność, że zbyt duże litery nie będą problemem w przypadku mniejszych ekranów.

7. Sztuczna inteligencja (AI)

Obecnie narzędzia do projektowania w coraz większym stopniu starają się ułatwiać pracę designerom za pomocą rozwiązań AI. Dowodem na to są nowe, inteligentne funkcje w Photoshopie, Sketchu czy Figmie. Umożliwiają one inteligentną edycję obrazów czy zachowanie spójności kolorów i zaawansowaną pracę z komponentami.

Duże możliwości daje także rozwiązanie projektowania generatywnego. Opiera się ono na analizie dużych ilości danych, które służą algorytmowi do tworzenia własnych rozwiązań. Mechanizmy odnajdują wzorce i prawidłowości, co pozwala na twórcze przetwarzanie istniejących rozwiązań.

Projektowanie generatywne można wykorzystać do tworzenia layoutów, materiałów marketingowych czy makiet prezentacji lub kontrolę dostępności designu. Wciąż także pojawiają się nowe zastosowania dla tej technologii. Interesujące rozwiązanie firmy NVidia GANVerse3D pozwala np. na przekształcenie obrazu 2D w model 3D. W związku ze wspomnianą wyżej popularnością elementów trójwymiarowych narzędzie to może być bardzo pomocne.

Trzymaj rękę na pulsie

Oczywiście wymienione przez nas trendy są tylko jednymi z wielu obecnie popularnych lub pojawiających się. Wciąż aktualny jest minimalizm, duże znaczenie zyskują interfejsy głosowe czy tryb ciemny designu. Do łask wraca także onboarding. Obserwowanie i wykorzystywanie aktualnych zjawisk w projektowaniu może sprawić, że nasze rozwiązania będą świeże oraz angażujące użytkowników.

To, co jest jednak najważniejsze, to dostosowanie projektu do charakteru marki. Trendy traktujmy jak paletę możliwości, ale nie trzymajmy się kurczowo najnowszych rozwiązań. Może się bowiem zdarzyć, że nie są spójne z dotychczasowym wizerunkiem marki, do którego powinniśmy nawiązywać, np. przeprojektowując stronę. Posługiwanie się właściwym dla niej językiem ma podstawowe znaczenie a priorytet to oczywiście potrzeby użytkowników.