W tym miesiącu trafi do skrzynek subskrybentów również inny typ wiadomości – dużo krótszy, bogatszy w polecajki i krótsze przemyślenia i pomysły. To wiadomości, które nie będą archiwizowane na blogu, ale pozwolą mi na bieżąco dawać znać o ciekawych wydarzeniach, ofertach czy własnych inicjatywach. Szukam jeszcze na te krótkie formy nazwy, ale daję o tym znać, jeśli czytasz te wiadomości wyłącznie na blogu – to być może dobry moment żeby zapisać się jednak do mojego newslettera?
Newsletter, czerwiec 2022
Dziś wejdziemy w strefę projektowania interfejsów. I myślisz sobie pewnie – Aha! Obrazki! No niekoniecznie tylko obrazki. Lubimy zapominać, że projektowanie UI nie dotyczy wyłącznie interfejsów graficznych. Choć faktem jest, że trochę nas do tego kursy i oferty pracy przyzwyczaiły. Będzie dziś o warstwie wizualnej – bo na tym po prostu się znam, ale postaram pokazać się, że na tej grafice świat osób projektujących interfejsy się wcale nie kończy.
Mądre słówka
GUI (graphical user interface) – czyli właśnie te nasze graficzne interfejsy użytkowników.
Wbrew pozorom, projektowanie interfejsów nie dotyczy wyłącznie warstwy wizualnej (grafiki). Choć przyjęło się, że właśnie tym zajmują się osoby na stanowiskach UI Designerów. A nawet jeśli weźmiemy pod uwagę same graficzne interfejsy, to mamy sporą rozpiętość – nie tylko stronki i aplikacje.
Interfejsy graficzne znajdziemy przecież w bankomatach, kasach (samoobsługowych i tych obsługiwanych przez pracowników sklepu), biletomatach, samochodach, lodówkach, ale też grach, ekranach w muzeach i na dworcach. Otacza nas coraz więcej urządzeń pozwalających na interakcję z ekranem. Ale na to pozwala nie tylko grafika.
Skeumorfizm (Skeuomorphism) – w interfejsach polega na odtwarzaniu kształtów, barw, właściwości (w tym funkcji) rzeczywistych przedmiotów. W historii projektowania UI wraca do nas raz na jakiś czas. Duża część komponentów interfejsu przejęła nie tylko wygląd i sposób działania (wciskanie, przesuwanie), ale również nazwy przedmiotów codziennego użytku (folder, przycisk, suwak, dokument, album).
Wykorzystuje pełen przekrój efektów graficznych – grafikę 3D, cienie, gradienty, tekstury, przezroczystości, co wymaga swobody i wyczucia w projektowaniu (bardzo łatwo przesadzić). Obecnie takiej estetyki używamy głównie ze względów wizualnych (wytyczne wizualne marki, chęć wyróżnienia się).
Trendy, mody w projektowaniu UI
A jak już jesteśmy przy skeumorfizmie. Kojarzysz pewnie nazwę neumorphism. To taka nowa nazwa na skeumorfizm, która w gruncie rzeczy nie wnosi nic nowego.
Co roku, z reguły pod koniec lub na początku, internet zasypuje masa artykułów o najnowszych trendach w projektowaniu (nie tylko UI). Zdradzę Ci sekret – z reguły nie różnią się niczym od tych z poprzedniego roku. Zdarza się oczywiście, że jeden krój czy paleta kolorów stają się popularniejsze niż inne.
Raz na jakiś czas faktycznie pojawiają się próby odświeżenia stylu graficznego (np. ostatnio widać powrót do prostych, geometrycznych form, bardziej krzykliwych barw). Ale trudno powiedzieć żebyśmy w ostatnich latach oglądali jakiś przełom w projektowaniu wizualnym interfejsów.
W projektowaniu UI trendy mają swoje źródła przede wszystkim w:
➡️ technologiach (Flash, VR/AR, HTML5, CSS3, 3D)
➡️ aktualizacjach systemów znanych, dużych firm (Apple, Google, Microsoft)
➡️ społecznościach (Behance, Dribbble)
Co ciekawe – z tych ostatnich bardzo rzadko przechodzą do realnych produktów, a częściej to właśnie one bywają szeroko opisane w artykułach – pisanych przez projektantów dla projektantów. Bywa, że tworzone i powtarzane są przez osoby, które po prostu bawią się warstwą wizualną – nie oznacza to wcale, że są np. realne do wykonania patrząc na obecne technologie internetowe czy użyteczne. Gdyby przyjrzeć się im bliżej, po prostu nie mają sensu. Czy cieszą za to oko? Jasne! Czy są ładne i pokazują umiejętności ilustracyjne ich twórców? Pewka! Czy są tworzone głównie dla lajków? Tak podejrzewam. Więc warto uważać na to, by bezmyślnie nie adaptować jakiegoś rozwiązania do swoich projektów.
Dlatego przeglądając artykuły o trendach warto pamiętać, że:
➡️ czasami powstają na potrzeby marketingu (promuje je np. jakaś agencja reklamująca jednocześnie swoje usługi albo internetowy twórca sprzedający swoje kursy, książki)
➡️ nie muszą mieć sensu i nie są przebadane (mamy taki przypadek choćby z Material Design i słynnymi już polami tekstowymi w formie kreski)
➡️ niektóre bardzo źle się starzeją (skeumorfizm wiedzie tu prym)
➡️ mijają 🙂
UI to nie tylko Figma
Projektowanie interfejsów nie musi ograniczać się jedynie do pracy w programie do grafiki 2D. I choć to najpopularniejsze przypadki (jeśli ktoś szuka UI Designera, to właśnie do projektowania klasycznego GUI), to nie jedyne, gdzie projektujemy interfejsy.
Warto pamiętać o wciąż rozwijającej się działce interfejsów głosowych. Choć nie działają jeszcze idealnie i wciąż niewiele rozwiązań je obsługuje, to coś co będzie tylko powszechniejsze. W domu testuję całą sieć głośników od Google i uwierz mi – częściej mam je ochotę wyrzucić za okno niż włączać przy ich pomocy światło czy dodawać produkty do listy zakupów. Ale to wciąż obszar, który szalenie mnie interesuje i mam nadzieję, że będę miała kiedyś okazję wziąć w tworzeniu takiego interfejsu udział.
Mamy oczywiście interfejsy w VR – które, jakby nie patrzeć, są wciąż interfejsami graficznymi, ale wymagającymi znajomości trochę innych narzędzi. Sporo takich rozwiązań zaczyna pojawiać się w produktach medycznych i edukacyjnych (np. do szkoleń pracowników). W Polsce mamy kilka firm, które w tym obszarze działają.
A co powiesz na interfejsy mózg-komputer? Brzmi jak science-fiction? A co jeśli powiem Ci, że badania nad tym obszarem trwają od lat 70? Niemniej większy rozgłos zdobyły w ostatnich latach dzięki medialnej postaci – Elona Muska, założyciela min. firmy Neuralink. Zostawiam Ci linki do strony Neuralink oraz artykułu w Wikipedii o interfejsach mózg-komputer.
UI to nie tylko grafika
W niektórych częściach internetu przyjęło się, że rolą osób projektujących interfejsy jest kolorowanie obrazków. Najpierw wjeżdża UX Designer, klei te swoje makiety, prototypy, a potem oddaje robotę do „uładnienia” przez osoby zajmujące się UI Designem. I z całą pewnością są firmy, w których tak to działa, co więcej, taki podział się sprawdza.
Ale zanim sprowadzimy UI Designerów do klikaczy w programie, zastanówmy się jakie obszary w interfejsie są do zaprojektowania.
Interfejsy są wizualne (najczęściej) – to praca z projektowaniem graficznym na specyficzne medium. Praca z hierarchią wizualną, barwą, kompozycją, typografią, kształtem. Interfejsy przekazują informację – musimy więc wiedzieć jak ją skutecznie zaprojektować, by odbiorca komunikatu zrozumiał właściwie przekaz.
Interfejsy są interaktywne – a to oznacza, że zmieniają swoje stany, są dynamiczne. To myślenie poza płaskim obrazkiem jest bardzo ważne. Bo musisz jako UI Designer je zaprojektować. Nikt nie klika tylko w jeden przycisk albo uzupełnia tylko jednego pola. Korzystając z interfejsów przechodzimy przez różne procesy, w różnych momentach dnia, z bardzo różną uwagą, którą możemy im poświęcić. Zrozumienie kontekstu i sposobów interakcji z naszymi rozwiązaniami jest bardzo ważne, bo wpłynie, na sposób prezentacji komponentów w projekcie.
Interfejsy są tylko częścią produktu – osadzone w kontekście marki, konkretnego brandu, powinny być z nim spójne. Zdarza się, że firma ma już kilka produktów na innych urządzeniach (np. stronę internetową i aplikację natywną).
Interfejsy są linijkami kodu – mimo, że projektujemy je w programach graficznych, zmienią się zaraz w kod. Ale żeby to zrobić muszą być zaprojektowane tak, by było to możliwe. A to oznacza, że trzeba znać choćby podstawy, ogólne zrozumienie tego, jak obraz zamienia się w ten kod. Ten brak zrozumienia widać właśnie często w projektach na Dribbble. To także umiejętność przekazania naszego projektu do osób, które będą go programować. I umiejętność rozmowy z tymi osobami.
Interfejsy są dla ludzi – a więc powinniśmy umieć je z tymi ludźmi przetestować. Podstawowe testy, takie jak testy użyteczności (moderowane czy niemoderowane), testy A/B, nie powinny być dla Ciebie tajemnicą. Bo jak upewnisz się, czy Twój interfejs jest dobry? Jak będziesz mierzyć jego skuteczność?
Jak się uczyć projektowania UI?
Ciekawostką jest to, że o ile mamy na rynku sporo szkół i kursów poświęconych projektowaniu UX, samego projektowania UI nie ma zbyt wiele. Zdecydowanie więcej materiałów znajdziecie wśród tych darmowych – np. filmów na YouTube, tutoriali, artykułów w sieci. Niezmiennie moimi ulubieńcami są Smashing Magazine i Interaction Design Foundation (mają darmowe artykuły, kursy polecałam już wielokrotnie).
Skąd te braki? Wydaje mi się, że to po prostu trudne – stworzyć taki kurs, który poruszy wystarczająco te podstawowe zagadnienia i nie pominie kluczowych.
Z jednej strony mamy warstwę wizualną, z drugiej zagadnienia techniczne, obsługę programów i warstwę interakcji (użyteczność, podstawy UXa). Doświadczenie pokazuje mi, że kursy, które przeglądałam skupiają się albo na samej warstwie wizualnej lub warstwie bliższej UXa lub samej obsłudze programu.
Dlatego właśnie nie szukałabym jednego idealnego kursu, a zastanowiła się, w jakim obszarze odczuwam największe braki.
No i niezmiennie praktyka – żadna teoria nie nauczy nas projektować. Trzeba po prostu robić. Ćwiczyć, ćwiczyć i ćwiczyć i zobaczysz, że po jakimś czasie czujesz to bardziej. Widzisz więcej rzeczy, zaczynasz rozumieć, że coś gra lepiej lub mniej.
I oglądaj. Patrz, rób screeny – stron, aplikacji, pojedynczych komponentów. Przysięgam, że najwięcej moich zdjęć w telefonie to właśnie screeny różnych rozwiązań. Coś Ci się podoba? Dlaczego? Zastanów się chwilę co przykuło Twoją uwagę? Jak projektanci o to zadbali? Jakich efektów w tym celu użyli?
A jak już umiesz w piękne interfejsy…
To masz sporo opcji, które możesz wybrać jako te, do dalszego rozwijania. Są obszary, które blisko łączą się z projektowaniem graficznych interfejsów, ale nie są powszechnymi umiejętnościami u UI Designerów. To może być Twoja mocna strona na tle „konkurencji” jeśli szukać pracy/zleceń, ale też ciekawy obszar do pogłębienia. O czym mówię?
➡️ animacja – motion design, czyli poruszanie naszych interfejsów. Wiadomo – interfejs jest tworem dynamicznym, zmieniają się stany, mamy ładowanie, pojawianie się i znikanie elementów. I można to trochę usprawnić i uatrakcyjnić.
➡️ ilustracje – powszechne jest korzystanie z tak zwanych stocków (baz zdjęć, grafik) lub zamawianie ich u konkretnych ilustratorów/ilustratorek. Jeśli umiesz w ilustrację to się tym koniecznie pochwal w portfolio – to ogromna przewaga pozwalająca na tworzenie pięknych ilustracji, ikon czy elementów do animacji.
➡️ design systemy – jeśli masz doświadczenie w pracy na systemach lub jeszcze lepiej – w tworzeniu takich systemów, to ogromna karta przetargowa w tej chwili (sporo firm buduje właśnie swoje systemy lub zatrudnia osoby do ich utrzymywania).
➡️ branding – może myślisz, ale jak to, mam teraz robić logo? Niekoniecznie! Ale dobre zrozumienie roli brandingu, pracy z brandem, materiałami, które dostarcza klient i wyłapywaniem tego, czego po prostu klienci jeszcze nie mają, to przydatna umiejętność w pracy UI Designerów. Więc gdy zobaczysz taki punkt w wymaganiach na stanowisko UIowe, prawdopodobnie będzie oznaczać właśnie to.
