Trendy UX/UI na 2021 (i nie tylko)

Prawdopodobnie Was trochę rozczaruję, bo nie będę dzisiaj się rozpisywać o gradientach, layoutach zdominowanych przez mocną typografię czy nowym skeuomorphizmie (bleh). Dzisiaj chcę opowiedzieć trendach i nurtach, które są nieco bardziej ponadczasowe. To nawet nie są trendy, to są kierunki i zasady, za którymi trzeba nadążać, jeśli nadal chce się być w grze. Tak więc moje zestawienie trendów UX/UI na 2021 będzie takim małym przewodnikiem, który pomoże Wam nadrobić ewentualne zaległości, oferować Waszym użytkownikom i klientom najlepszą jakość doświadczeń i wsparcie w biznesie.

Tak jak wspomniałam, trendy wizualne w UI przychodzą i odchodzą. Zmieniają się praktycznie każdego roku, ale nie można dać się zwariować i ślepo za nimi podążać. Strona internetowa czy aplikacja to nie płaszcz czy nowa bluzka. Nikt nie zmienia swojej strony internetowej co roku, bo po prostu nie ma na to pieniędzy. Dlatego moim zdaniem, trendy należy traktować jako inspirację i ewentualną wskazówkę, ale nigdy nie oddawać się im w zupełności. W przeciwnym razie znowu zaleje nas fala identycznych stron, które wręcz ciężko odróżnić, bo nie wyróżniają się niczym szczególnym i za rok będą już „przeterminowane”.

Trendy czy może drogowskazy?

Uważam, że jeśli chcemy zbudować dobry, ponadczasowy produkt, to powinniśmy przede wszystkim bazować na ID danej marki, dobrych praktykach i być zorientowani biznesowo. I tu dochodzimy do sedna – dobra strona, to ta która sprzedaje i wspiera biznes klienta. Doświadczony projektant będzie w stanie ocenić, czy aktualne trendy pomogą biznesowi klienta czy są zupełnie zbędne, a podczas projektowania warto skupić się na innych aspektach.

Także dzisiaj chciałabym napisać o trendach UX/UI na 2021, ale w sposób trochę przewrotny. Chcę pokazać Wam kierunki, które warto zgłębiać, niezależnie czy jesteście młodymi projektantami czy macie już kilka lat doświadczenia jako Product Designerzy.. To są tematy, które będą realnym wsparciem dla Waszych klientów i przysłużą im się zdecydowanie bardziej, niż rozprawa o gradientach i drop shadows.

No to co, zaczynamy!

1. Dostępność (accessibility) i projektowanie inkluzywne

Dostępność to nie trend czy moda, oczywiście, macie rację. To must have dla każdego, a przede wszystkim dla odpowiedzialnych i świadomych biznesów. O dostępności dużo się mówi, szczególnie w kontekście architektury i urbanistyki czy miejsca pracy, ale wciąż za mało mówi się o dostępności w cyfrowym świecie.

Ekskluzywność nie jest fajna w tym kontekście. Ekskluzywność to wykluczanie jednych, a premiowanie innej grupy. Jestem zdania, że w świecie cyfrowym nie ma na to miejsca, szczególnie w kontekście dostępności. Twoja strona internetowa czy aplikacja nie powinna wykluczać nikogo ze względu na wiek, niepełnosprawności czy kiepskiego internetu. Większość designerów pracuje na drogim, super sprzęcie, mamy dostęp do różnych narzędzi i gadżetów. Jesteśmy piękni i młodzi i tak dalej.. Często zapominamy przez to, że nasi odbiorcy często nie mają takiego szczęścia.

„Przecież mój produkt nie jest dla osób z niepełnosprawnościami…”. To największy mit, jaki można usłyszeć w temacie dostępności. Prosty test. Wyjdź na dwór w słoneczny dzień i odpal swoją aplikację lub stronę. Czy wszystko jest nadal czytelne? Czy jesteś w stanie używać aplikacji i wykonać w niej najważniejsze zadania?

Widzisz, dostępność to nie tylko projektowanie dla osób z niepełnosprawnościami. To dostosowywanie się do różnych warunków, w których używany będzie dany produkt. W pełnym słońcu każdy z nas ma w pewien sposób ograniczoną sprawność. Nasze oczy nie odróżniają tak dobrze kolorów, potrzebują większych kontrastów. Ze złamaną ręką trudniej pisać długie wiadomości, trudniej trafić w klawisze. Dlatego tak ważne, aby mieć z tyłu głowy różne scenariusze i ułatwiać dostęp, a nie go specjalnie komplikować.

W sumie, to grożą za to nawet konsekwencje prawne. Dosyć głośno było o sprawie, gdzie sieć Domino’s została pozwana przez niewidomego mężczyznę z powodu niedostosowania ich strony internetowej. Niewidomy wygrał tą sprawę. W Polsce standardy WCAG muszą spełniać między innymi strony rządowe. Na nich można często spotkać opcję przełączenia się na wersję bardziej kontrastową i możliwość powiększenia sobie liter.

Dostępność to cała gama różnych czynników, które wpływają na odbiór danego produktu. Nie będę wchodzić już głębiej w szczegóły, ale zostawiam kilka haseł, które możecie sobie wygooglować, jeśli chcecie wejść głębiej w temat (do czego zachęcam).

WCAG (Web Content Accessibility Guidelines), Inclusive Design, Plugin do sketcha i figmy – Stark.

2. UX writing i micro copy

• 

Wiesz, że tekstami stronie też można niechcący kogoś wykluczyć? Czasami, kiedy wyspecjalizujemy się w jakieś dziedzinie (a często wtedy, kiedy udajemy, że jesteśmy specjalistami, a tak naprawdę niewiele wiemy), używamy wyrafinowanego słownictwa, które często jest na wyrost. Są to różnego rodzaju branżowe słówka, górnolotne zdania. Babcia jest pewnie dumna, bo wnusiu taki mądry, ale wiesz… jak chcesz komuś coś sprzedać, skoro on nawet nie rozumie, co chcesz sprzedać? Na wejściu sprawiasz, że użytkownik czuje się głupi, przez co czuje się nieswojo, budzi to w nim niepokój.

Staraj się, aby Twoje komunikaty były tak proste i zrozumiałe, jak to jest możliwe. Powinny być zrozumiałe dla 7-latka, jak i dla specjalisty. Czy to oznacza, że teksty na stronie będą nudne i mdłe? Niekoniecznie! Wykorzystaj osobowość swojej marki, aby stworzyć teksty, które zapadną w pamięć. Ludzie lubią przywiązywać się do marek, które mają ciekawą historię lub komunikują się w ciekawy sposób, nawiązują relację z odbiorcami.

Oprócz tekstów, ważne jest również tak zwane „micro copy”. To wszystkie buttony, labelki inputów, komunikaty błędów itd. Małe, niepozorne wyrażenia, które potrafią umilić doświadczenia, a także uprzykrzyć życie. Te komunikaty muszą być zrozumiałe, ale to także fajna przestrzeń do pokazania charakteru marki. Dobrze robi to na przykład inpost.

Co mogę polecić w tym temacie, aby pogłębić swoją wiedzę? Wygoogluj: UX Writing, micro copy.

3. Konwersja jest ważniejsza od wyglądu

Oczywiście, że fajnie projektować turbo trendy stronkę, ociekającą gradientami, animacjami i cieniowaniem. Taką, od których dribbble pęka w szwach. Ale wiecie co jest ważniejsze? Większość stron i aplikacji tworzone jest, aby przynosić zysk. Nie mówię, że to się wyklucza, ale widać wyraźnie, że dla wielu osób warstwa wizualna jest ważniejsza. Dlatego tak ważne jest, aby designerzy posiadali też jakąkolwiek wiedzę biznesową.

Osoba, która nazywa się Product Designerem, powinna umieć doradzić klientowi i być w stanie zaproponować takie funkcjonalności w produkcie, które realnie wpłyną na poprawę konwersji. Powinna skupiać się na celach, przygotowywać mierniki, eksperymenty i badania, które pozwolą zwalidować hipotezy.

W naszej pracy nie ma miejsca na dyskusje z klientem, który odcień niebieskiego będzie lepszy czy gdzie umieścić przycisk Call to action. Klient nie jest końcowym użytkownikiem, Ty też nim nie jesteś. Więc jak się dowiedzieć, które rozwiązanie będzie lepsze? Najlepiej wyjść z tym do użytkowników. Jeśli to działająca strona, można przygotować test A/B z dwoma wariantami. Po zakończeniu porównać wyniki i wybrać ten, który lepiej konwertował – czyli np. wygenerował więcej zapytań przez formularz, telefonów czy dodań produktów do koszyka. Nie zdziw się, jeśli Twoja wersja nie „wygra”, przynajmniej będziesz pewien, że udało się odkryć preferencje użytkownika i skorzysta nam tym biznes klienta.

Do googlowania dalej: conversion, growth driven design, business goals, Hotjar, google analytics.

4. Zrozumienie lejka sprzedażowego

Lejek sprzedażowy to kolejny temat powiązany z konwersją. Warto zgłębić ten obszar, aby projektować lepsze strony internetowe, które realnie przyczyniają się do realizacji celu biznesowego klienta.

Kiedy zrozumiesz koncepcję lejków sprzedażowych i ich etapy, będziesz w stanie projektować lepsze punkty konwersji. Lejki powiązane są mocno user journeys. Dlatego warto wiedzieć, w jaki sposób użytkownik porusza się po naszej stronie i dzięki tej wiedzy, na każdym etapie wzmacniać konwersję oraz przejścia do kolejnego etapu – aż do finalnego, czyli zakupu naszego produktu, usługi czy innej pożądanej czynności, w zależności od typu biznesu.

W większości przypadków Twoja strona internetowa jest jednym z górnych etapów lejka sprzedażowego. Dla większości osób będzie to pierwszy styk z marką, a Ty nie będziesz miał żadnych informacji o użytkowniku. Końcowy etap lejka to sprzedaż, punkt finalnej konwersji i zamiana osoby odwiedzajacej stronę w klienta. Rolą Product Designera jest takie zaprojektowanie strony internetowej, aby ułatwić tę drogę i jak najprędzej zamienić anonimowego visitorsa w customera.

Nadal nie czujesz koncepcji lejków sprzedażowych? Spróbuję wytłumaczyć to na przykładzie. Wyobraź sobie, że używać mediów społecznościowych do promowania nowego wpisu na firmowym blogu. Użytkownik Facebooka widzi Twój post, ponieważ wykorzystałeś ciekawą grafikę, która przykuła jego uwagę. Klika w post na facebooku i trafia na Waszego firmowego bloga. Tym samym staje się on „odwiedzającym” na Twojej stronie. O odwiedzającym wiemy niewiele – znamy zazwyczaj źródło przekierowania, przeglądarkę z jakiej korzysta, rodzaj urządzenia i kraj. Są to dane zapisywane w przeglądarce, tak zwane cookies. Dostęp do tych danych mamy poprzez chociażby Google Analytics czy hotjar, o ile są wpięte na stronie. Niestety, na podstawie tych informacji nie jesteśmy w stanie skontaktować się z taką osobą, żeby na przykład zaproponować jej specjalną ofertę, która zachęci ją do zakupu. Dlatego tak ważne jest, aby osoba ta skonwertowała nam na kolejny etap, czyli zostawiła swoje dane kontaktowe, zazwyczaj jest to imię, nazwisko oraz email, a czasami sam email. W tym celu na stronie proponujemy zapis do newslettera, założenia konta z dodatkowymi rabatami, pobranie ebooka. Wtedy mamy już otwartą drogę kontaktu do takiej osoby – możemy słać jej ciekawe oferty i dodatkowe materiały, które zachęcą ją do ponownego odwiedzenia strony.

Na każdą grupę odbiorców będą działały inne mechanizmy, różnić się one będą także na każdym etapie lejka. Jak je najlepiej dobrać? Są pewne dobre praktyki, ale oczywiście najlepiej będzie przetestować to na Twojej konkretnej grupie odbiorców – np. używając testów A/B i sprawdzając, co będzie konwertowało lepiej. Jest też kilka narzędzi, które pomagają w automatyzacji na każdym etapie lejka np. Hubspot czy Mailchimp.

5. Personalizacja

Wstawianie imienia użytkownika na początku maila już chyba na nikim nie robi wrażenia, a na pewno nie o takiej personalizacji chcę dzisiaj mówić. Wspominałam już wcześniej o narzędziach analitycznych, które dają nam dostęp do plików cookies. Warto zapoznać się z Google Analytics czy Hotjarem, a najlepiej z jednym i długim. Jest mnóstwo materiałów, które pomogą Wam postawić pierwsze kroki. Pozwoli Wam. to odkryć wiele informacji na temat Waszych użytkowników – grupa wiekowa, płeć, kraj, język, zawód, zainteresowania. To wszystko można wykorzystać do lepszej personalizacji strony.

Bazując na tych informacjach możesz spersonalizować stronę pod konkretną grupę odbiorców. Można na przykład zastosować inne słownictwo lub obrazki lepiej dopasowane do target grupy. Wykorzystuje to na przykład Netflix. Sprawdzają oni na przykład, jakie okładki filmów lepiej przyciągają uwagę poszczególnych grup i na podstawie tych obserwacji wybierają covery, które działają najlepiej. Dlatego właśnie Ty i Twój znajomy możecie mieć inne okładki ulubionego serialu z Netflixa, ponieważ na podstawie historycznych danych wybierają Wam okładki, które mają większy potencjał nakłonienia Was do kliknięcia i obejrzenia odcinka. Personalizowane są także kategorie filmów na stronie głównej, bazują one na Waszej historii oglądania, z której określane jest, co może trafić w Wasz gust tym razem.

Do dalszego czytania w tym temacie: Google Analytics, Hotjar, dynamic pages, dynamic content, cookies

6. Performance, animacje, ruch

Pewnie słyszeliście o technologii 5G, która powoli pojawia się na rynku. (Spokojnie, zostaw tę aluminiową czapkę). Pierwsi operatorzy zapowiadają obsługę standardu 5G, do którego przystosowany jest choćby najnowszy iPhone 12. Co to zmienia dla nas, jako projektantów?

Dla nas 5G to przede wszystkim szybkość, szybkość jakiej do tej pory nie doświadczyliśmy. Wiele rzeczy będzie działo się wręcz natychmiastowo. Szybsze pobieranie, wysyłanie, ładowanie.. Loadery niedługo mogą okazać się zbędne. To ogromna szansa dla rozwoju technologii VR i AR. Będziemy mogli wprowadzać więcej ruchu w nasze projekty, więcej interakcji, a nawet renderować grafiki 3D na stronie internetowej bez spadku wydajności. Brzmi niesamowicie, co?

Oczywiście nie ma co się oszukiwać, że rozwój 5G nastąpi szybko. To będzie proces, który będzie trwał latami, a i tak prawdopodobnie nie dotrze to do wszystkich użytkowników internetu. Dlatego warto potraktować to jako inspirację i pobawić się trochę ruchem, ale nie popadajmy w skrajności. Pamiętajcie także, że nie każdy będzie miał dostęp do super szybkiego internetu i naszymi filmami, animacjami i renderami możemy całkowicie uniemożliwić komuś dostęp do informacji – w razie potrzeby wróć do punktu pierwszego tego artykułu, gdzie pisałam o dostępności w świecie cyfrowym.

7. VUI – interfejsy głosowe

Co do tego trendu jestem lekko sceptyczna, jak co roku, zaraz Wam wytłumaczę dlaczego. Co roku czytam o wielkim boom technologii głosowych, że to w końcu TEN ROK i w teraz VUI zawładną naszym światem. I co? I jakoś czuję, że nic się nie dzieję. Ten rozwój jest widoczny stopniowo, ale na pewno nie jest to efekt wielkiego wow.

Jasne, doceniam asystentów głosowych, sama używam sporadycznie Siri, głównie w kuchni lub samochodzie, kiedy mam zajęte ręce. Fajnie, że można zadzwonić do kogoś, stworzyć notatkę lub nastawić timer bez użycia rąk. Kiedy masz więcej smart gadżetów zabawa zaczyna robić się jeszcze ciekawsza. Możemy sterować światłem w pokoju, pogłaszać muzykę w bezprzewodowych słuchawkach, włączać robota sprzątającego – wszystko bez użycia przycisków, jedynie komendami głosowymi.

Ciężko mi powiedzieć, czy jesteśmy przed momentem wielkiego boom technologii głosowych, czy może ten moment już był, ale wydarzyło się to cicho, niepostrzeżenie i w naturalny sposób rozgościły się one w naszej codzienności. Niezależnie od tego, warto mieć na uwadze VUI, kiedy projektujemy nowe aplikacje – może należałoby rozważyć komendę głosową dla najważniejszej funkcji?

8. Nowa era responsywności?

Pamiętacie telefony z klapką? Wiadomo, sama miałam w gimnazjum motorolę z klapką i to było super cool. Teraz producenci smartphonów próbują wskrzesić ten trend, lecz w nieco innym wydaniu. Rozkładając telefon zwiększamy sobie powierzchnię ekranu, a wyświetlany kontent dopasowuje się do nowej przestrzeni. Jest to na pewno ciekawa koncepcja, bo odpowiada na dwa częste problemy – możemy mieć bardzo duży, czytelny ekran, ale jednocześnie nie musimy nosić w kieszeni telefonu wielkości tabletu.

Co to oznacza dla nas, jako projektantów? To byłaby nowa era responsywności. Z jednej strony nadal mamy rozdział między mobile, tablet i desktop, a dodatkowo różne rozdzielczości w obrębie jednego urządzenia. Aplikacje musiałby dostosowywać się do pomniejszonego ekranu, a następnie pokazywać więcej na ekranie rozłożonym.

Subiektywnie uważam, że to się nie przyjmie i nie ma czym się martwić na zapas. Niemniej, warto mieć to na uwadze i śledzić trendy technologiczne, aby być przygotowanym. Mnie ostatnio spotkało wyzwanie zaprojektowania aplikacji na Apple Watch, co również wiązało się z poszerzeniem wiedzy w temacie projektowania pod wearables oraz zmianą myślenia o projektowaniu aplikacji w ogóle. Aplikacje na zegarek mają zupełnie inne scenariusze użycia, a co za tym idzie zupełnie inną architekturę.

Podsumowanie

Tak jak zapowiedziałam, nie była to standardowa lista trendów, lecz bardziej kilka obszarów, które warto śledzić i znać, aby oferować klientom lepszej jakości usługę. Jeśli chcemy być dobrymi Product Designerami, to musimy być blisko biznesu, czy tego chcemy, czy nie. Znajomość tematów biznesowych, marketingowych bardzo poszerza horyzonty i otwiera nowe drogi. Pozwala na stawianie trafnych hipotez, podsuwa zupełnie nowe rozwiązania. Gradienty, cienie czy ilustracje będą przychodziły i odchodziły, a dobrze działająca, konwertująca strona nigdy nie wyjdzie z mody.