Projektuję interfejsy UI/UX
Strony internetowe, aplikacje i produkty cyfrowe. Projektuję ich wygląd - UI - ale zanim zacznę przesuwać "prostokąty" w Figmie, zastanawiam się, jak człowiek właściwie ma z tego korzystać. Bo nawet najładniejszy przycisk jest trochę bezużyteczny, jeśli nikt nie wie, po co ma go kliknąć.
Zostaw kontakt
Od struktury do gotowego interfejsu
Projektuję interfejsy stron i aplikacji, dbając zarówno o ich wygląd, jak i sposób działania. W Figmie tworzę kompletne projekty i interaktywne prototypy, które można sprawdzić jeszcze przed wdrożeniem.
UI to to, co widzisz. UX to to, co się dzieje, kiedy zaczniesz klikać
Te dwa pojęcia są wrzucane do jednego worka tak często, że właściwie można byłoby już nadrukować na nim „UI/UX”.
A jednak oznaczają coś innego.
UI - User Interface - to warstwa wizualna produktu: typografia, kolory, przyciski, formularze, karty, menu, układ ekranów.
UX - User Experience - zaczyna się wcześniej. Proces ten odpowiada na pytania: co użytkownik chce zrobić? co powinien zobaczyć najpierw? czy wie, gdzie kliknąć? czy kolejny krok jest logiczny? czy formularz naprawdę musi mieć dziewięć pól?
I dlaczego najważniejsza funkcja aplikacji schowała się w menu, do którego prowadzą trzy kroki?
Projektując interfejs, staram się odpowiadać na te pytania zanim zacznę dopieszczać cienie pod kartami.
Projektuję sposób używania ekranów
Wyobraź sobie aplikację do prowadzenia quizu podczas transmisji LIVE. Widz potrzebuje właściwie trzech rzeczy: pytania, odpowiedzi oraz informacji o tym, co dzieje się dalej. Prowadzący w tym samym czasie potrzebuje wyniku, poprawnej odpowiedzi, podpowiedzi, stanu gry, kół ratunkowych i kontroli nad przebiegiem programu.
Ten sam produkt. Dwie zupełnie różne potrzeby. W aplikacji quizowej, którą zaprojektowałem, dlatego powstały dwa osobne poziomy interfejsu: widz dostaje maksimum prostoty, prowadzący - maksimum kontroli.
To właśnie tutaj UX zaczyna być ciekawy. Nie wtedy, kiedy zastanawiamy się, czy przycisk powinien być zielony czy granatowy. Tylko wtedy, kiedy pytamy: co ten konkretny człowiek musi zobaczyć właśnie teraz?
Dobry interfejs trochę znika
Jeśli korzystasz z aplikacji i po kilku minutach przestajesz zauważać jej interfejs, to zwykle dobry znak: wiesz, gdzie jesteś, wiesz, co możesz zrobić, a kolejne kroki są przewidywalne.
Nie musisz zastanawiać się nad każdym kliknięciem. Szczególnie dobrze widać to w narzędziach używanych podczas pracy. Kiedy prowadzę transmisję LIVE, jednocześnie patrzę w kamerę, czytam czat, rozmawiam z widzami, steruję OBS-em i pilnuję programu. Ostatnią rzeczą, której potrzebuję, jest aplikacja pytająca mnie: „A może teraz przypomnisz sobie, w której zakładce ukryliśmy tę funkcję?”
Dlatego najważniejsze działania muszą być dokładnie tam, gdzie użytkownik będzie ich szukał. Nie tam, gdzie ładnie wyglądają na mockupie.
Najpierw problem. Potem Figma
Figma jest narzędziem, bardzo dobrym, ale nadal tylko narzędziem. Projekt UI/UX zaczynam od ustalenia kilku prostych rzeczy: kto będzie tego używał? co chce zrobić? co jest najważniejsze? jak wygląda typowa droga użytkownika? co może go zatrzymać albo zdezorientować? co powinno wydarzyć się po kliknięciu? Dopiero później powstają ekrany. Dzięki temu projekt nie zaczyna się od pytania: „jaki zrobimy nagłówek?” tylko: „co ma tutaj zrobić użytkownik?”
Projektowanie UI stron internetowych
Strona internetowa również jest interfejsem. I wbrew pozorom jej UX nie kończy się na tym, czy menu działa. Użytkownik często trafia na stronę po coś bardzo konkretnego: chce sprawdzić usługę / porównać ofertę / poznać cenę / zobaczyć realizacje / zostawić kontakt.
Dlatego przy projektowaniu stron internetowych pracuję nad hierarchią informacji, strukturą sekcji, nawigacją, CTA oraz sposobem prowadzenia użytkownika przez treść.
Dobrym przykładem jest Mollii. Głównym celem strony było doprowadzenie pacjenta do kontaktu, dlatego CTA nie zostało zostawione samotnie na samym dole strony. Pojawia się w miejscach, w których użytkownik może być gotowy zrobić kolejny krok: bez szukania, cofania czy bez gry w „znajdź formularz”.
Mobile nie jest pomniejszonym desktopem
Jednym z najprostszych sposobów na stworzenie słabego interfejsu mobilnego jest: zaprojektować piękny desktop, zaznaczyć wszystko, zrobić mniejsze i modlić się. Na telefonie zmienia się nie tylko szerokość ekranu. Zmienia się sposób korzystania z produktu. Dlatego przy projektowaniu UI uwzględniam wersję mobilną już podczas pracy nad strukturą interfejsu, a nie jako techniczny obowiązek wykonywany pięć minut przed przekazaniem projektu do wdrożenia.
Ładny formularz nadal może być złym formularzem
UI można dopracować do perfekcji: idealne odstępy, świetna typografia i gradient jak z prezentacji Apple, A potem użytkownik widzi: imię*, nazwisko*, firma*, stanowisko*, telefon*, e-mail*, kod pocztowy*, skąd o nas wiesz?*, opisz szczegółowo swoje potrzeby*
i zamyka kartę. UX bardzo często polega właśnie na odejmowaniu: czy można zrobić ten proces krócej?
Projektowanie doświadczenia użytkownika nie zawsze wymaga wymyślenia czegoś nowego. Czasami wymaga usunięcia połowy tego, co wymyśliliśmy wcześniej.
Dostępność nie powinna być dodatkiem
Kontrast, wielkość tekstu, widoczne stany aktywne, logiczna hierarchia nagłówków, czytelne formularze, przewidywalna nawigacja, odpowiednio duże elementy interaktywne to nie są rzeczy, które powinny pojawić się pod koniec projektu jako: „a teraz zróbmy jeszcze WCAG”.
Nie jestem UX researcherem. I nie będę udawał, że jestem
UX jest ogromną dziedziną: badania jakościowe, badania ilościowe, wywiady, testy moderowane, analiza behawioralna, warsztaty, mapy doświadczeń, setki metod, specjalizacji i procesów. Nie sprzedaję Ci laboratorium UX z zespołem researcherów siedzących za lustrem weneckim.
Moją główną specjalizacją jest projektowanie UI i komunikacja wizualna, rozszerzone o praktyczne projektowanie UX. Czyli: architekturę informacji, user flow, hierarchię, scenariusze użycia, prototypowanie, logikę interakcji, responsywność, dostępność oraz analizowanie tego, czy projekt faktycznie jest wygodny dla człowieka.
Przy większym produkcie wymagającym rozbudowanych badań UX należy zaangażować odpowiedniego specjalistę. I powiem Ci to zamiast dopisywać „UX Research” do faktury.
Czasem najlepszy UX to jedna funkcja
Nie każda aplikacja potrzebuje dashboardu, onboardingu, profilu użytkownika, centrum powiadomień, systemu osiągnięć i bocznego menu z siedemnastoma pozycjami.
Dobrym przykładem jest Czysty Schowek - prosta aplikacja na macOS rozwiązująca jeden konkretny problem: kopiujesz tekst z internetu, dokumentu albo innej aplikacji. Razem z tekstem kopiujesz font, wielkość, kolor, linki i inne formatowanie. A potem wklejasz tekst z gotowym formatowaniem.
Czysty Schowek ma zrobić jedną rzecz: zamienić skopiowany tekst na czysty tekst bez formatowania. Aplikacja działa z poziomu paska menu macOS i właściwie nie powinna przeszkadzać użytkownikowi bardziej, niż jest to konieczne. To mały produkt, ale właśnie w takich projektach szczególnie dobrze widać UX.
LiveOS - interfejs projektowany z myślą o LIVE
LiveOS powstał najpierw dlatego, że sam potrzebowałem lepszego narzędzia podczas transmisji LIVE. To zmienia sposób projektowania. Nie wymyślam wtedy hipotetycznego użytkownika: sam nim jestem.
Podczas transmisji chcę szybko widzieć czat, informacje o widzach i najważniejsze dane bez przeklikiwania się przez kolejne ekrany. LiveOS zapisuje również statystyki transmisji. Interfejs musi więc pogodzić dwa bardzo różne scenariusze: teraz - szybko pokaż mi to, czego potrzebuję podczas transmisji, oraz później - pozwól mi przeanalizować, co właściwie się wydarzyło.
To właśnie takie produkty lubię projektować najbardziej. Bo UI nie powstaje dla efektownego screenshota. Powstaje po to, żebym faktycznie chciał z niego korzystać kilka godzin później.
AI potrafi zrobić interfejs. I to właśnie jest problem
Przy projekcie LiveOS dużą część interfejsu generowałem bezpośrednio przy pomocy AI: nie był to mój projekt UI i nigdy tak go nie pokazuję. Dzięki temu zobaczyłem coś bardzo ciekawego. AI świetnie radzi sobie z poleceniami: dodaj kartę / status / przycisk / panel / etc. A potem po kilkudziesięciu takich decyzjach okazuje się, że właśnie powstał kokpit Boeinga do czytania komentarza. I to świetnie pokazuje różnicę między: działa a dobrze się tego używa. Dlatego wykorzystuję AI w procesie projektowym i wdrożeniowym, ale decyzji o hierarchii produktu nie powinno się delegować wyłącznie do generatora kolejnych komponentów.
Co mogę zaprojektować?
UI stron internetowych
Landing page, strona firmowa, serwis produktowy, platforma czy sklep. Projektuję strukturę oraz warstwę wizualną na desktop i urządzenia mobilne.
UI aplikacji webowych
Panele użytkownika, dashboardy, narzędzia wewnętrzne, aplikacje SaaS i bardziej niestandardowe produkty cyfrowe.
Aplikacje i narzędzia wewnętrzne
Nie każdy produkt musi trafić do miliona użytkowników. Czasem najlepszą inwestycją jest małe narzędzie, które codziennie oszczędza czas pięciu osobom w firmie.
Prototypy w Figmie
Interaktywny prototyp pozwala sprawdzić strukturę produktu i sposób przechodzenia między ekranami jeszcze zanim rozpoczną się prace programistyczne.
UX istniejącego produktu
Masz już stronę lub aplikację, ale coś w niej zwyczajnie nie gra? Mogę przeanalizować strukturę, hierarchię, interfejs i podstawowe ścieżki użytkownika oraz wskazać miejsca wymagające uproszczenia.
Design system i komponenty
Przy większych interfejsach pojedyncze ekrany szybko przestają wystarczać. Powtarzalne komponenty, zasady typografii, kolory, spacing i stany interakcji pomagają zachować spójność produktu podczas dalszego rozwoju.
Najczęściej zadawane pytania
Czym zajmuje się UI designer?
UI designer projektuje wizualną warstwę stron internetowych, aplikacji i innych produktów cyfrowych. Odpowiada między innymi za układ ekranów, typografię, kolorystykę, komponenty, przyciski, formularze i sposób prezentacji informacji. W moich projektach UI łączę dodatkowo z podstawowym UX, brandingiem i komunikacją.
Czym różni się projektowanie UI od UX?
UI, czyli User Interface, dotyczy przede wszystkim wyglądu i elementów interfejsu. UX, czyli User Experience, obejmuje szersze doświadczenie użytkownika: strukturę produktu, przepływy, kolejność informacji, sposób realizowania zadań oraz łatwość obsługi. W praktyce oba obszary mocno się przenikają.
Czy projektujesz aplikacje w Figmie?
Tak. Projektuję interfejsy stron internetowych i aplikacji w Figmie. W zależności od potrzeb projekt może obejmować również komponenty, wersje responsywne oraz interaktywny prototyp pokazujący sposób przechodzenia między ekranami.
Czy projektujesz UX?
Tak, w zakresie związanym z projektowaniem produktu: architekturą informacji, user flow, hierarchią treści, logiką interakcji, wireframe'ami, prototypowaniem, responsywnością i dostępnością. Nie pozycjonuję się jako wyspecjalizowany UX researcher prowadzący rozbudowane badania jakościowe i ilościowe. Jeżeli projekt ich wymaga, warto rozszerzyć zespół o takiego specjalistę.
Czy projektujesz zarówno strony internetowe, jak i aplikacje?
Tak. Projektuję interfejsy stron internetowych, landing page'y, aplikacji webowych, dashboardów, paneli użytkownika oraz narzędzi wewnętrznych. Zakres procesu dopasowuję do wielkości i stopnia złożoności produktu.
Czy przygotowujesz wersję mobilną projektu?
Tak. Responsywność uwzględniam już podczas projektowania interfejsu. Widok mobilny nie jest dla mnie wyłącznie pomniejszoną wersją desktopu - powinien uwzględniać inny sposób korzystania z urządzenia oraz ograniczoną przestrzeń ekranu.
Czy zajmujesz się również wdrożeniem?
W przypadku stron internetowych mogę również nadzorować lub realizować wdrożenie zależnie od technologii i zakresu projektu. Przy aplikacjach mogę przygotować projekt i prototyp do przekazania programiście oraz konsultować interfejs podczas implementacji. Jeśli aplikacja jest prosta i da się ją wdrożyć szybciej - przy pomocy AI - poinformuję Cię o tym.
Czy mogę zlecić redesign istniejącej aplikacji lub strony?
Tak. Nie zawsze trzeba projektować produkt od początku. Mogę przeanalizować istniejący interfejs, jego hierarchię, podstawowe ścieżki użytkownika oraz warstwę wizualną i na tej podstawie zaproponować redesign lub konkretne usprawnienia.
Ile kosztuje projekt UI/UX?
Cena zależy przede wszystkim od liczby ekranów, złożoności produktu, liczby wersji responsywnych, zakresu prototypowania oraz tego, czy projekt wymaga stworzenia komponentów lub design systemu. Mała strona internetowa i rozbudowany panel SaaS to dwa zupełnie inne zakresy pracy, dlatego projekt wyceniam po poznaniu jego założeń.
