UI i UX to pojęcia, które często pojawiają się obok siebie. Nic dziwnego — oba dotyczą projektowania produktów cyfrowych i bardzo często pracują ze sobą ramię w ramię.
Nie oznaczają jednak tego samego.
UX odpowiada za doświadczenie. UI za sposób, w jaki to doświadczenie wygląda i działa na poziomie interfejsu.
A dobry produkt potrzebuje obu. Jeśli dopiero zaczynasz swoją przygodę z projektowaniem cyfrowym, ten przewodnik pomoże Ci zrozumieć najważniejsze pojęcia, etapy pracy i zasady, od których warto zacząć.
„Design to nie tylko to, jak coś wygląda i jak się czuje. Design to sposób, w jaki coś działa.” — Steve Jobs
Czym właściwie jest UX?
UX, czyli User Experience, to całość doświadczeń użytkownika związanych z produktem.
Może to być strona internetowa, aplikacja mobilna, sklep internetowy czy rozbudowany system dla pracowników.UX obejmuje między innymi sposób poruszania się po produkcie, łatwość wykonywania zadań, dostępność informacji, logikę interakcji czy reakcję produktu na działania użytkownika. Najprościej mówiąc:
UX odpowiada na pytanie: czy korzystanie z produktu jest łatwe, logiczne i użyteczne?
A czym jest UI?
UI, czyli User Interface, to interfejs, z którym użytkownik bezpośrednio się kontaktuje.
Kolory, typografia, przyciski, ikony, formularze, spacing, komponenty czy animacje — wszystko to jest częścią UI.
Ale UI to nie tylko estetyka. Dobry interfejs pomaga użytkownikowi zrozumieć, co może zrobić, gdzie powinien kliknąć i co wydarzy się później.
Dlatego atrakcyjny wizualnie interfejs, który jest trudny w obsłudze, nadal jest słabym projektem.
UX i UI — czym się różnią? Można uprościć to w ten sposób:
UX projektuje doświadczenie.
UI projektuje interfejs.
UX może określić, jak użytkownik przejdzie przez proces zakupu. UI zadba o to, jak wygląda koszyk, przycisk „Kup teraz” czy komunikat po zakończeniu transakcji.
Oba obszary są ze sobą mocno powiązane.
Zacznij od użytkownika
Jednym z największych błędów początkujących projektantów jest rozpoczynanie pracy od ekranu. Otwierają Figmę i zaczynają projektować. Tymczasem pierwsze pytanie powinno brzmieć:
Kim jest użytkownik i czego chce dokonać?
Poznaj jego potrzeby, cele, problemy i kontekst, w którym korzysta z produktu. Dzięki temu projektowanie przestaje być zgadywaniem.
Zrób research
Dobry UX nie powstaje wyłącznie na podstawie intuicji projektanta.
Analizuj użytkowników, konkurencję, istniejące rozwiązania i dane. Korzystaj z wywiadów, ankiet, analityki, testów użyteczności czy analizy zachowań użytkowników — zależnie od projektu.
Research nie musi być skomplikowany. Jego zadaniem jest przede wszystkim zmniejszenie liczby założeń, na których opierasz projekt.
Zacznij od struktury
Zanim wybierzesz kolor przycisku, zastanów się, gdzie ten przycisk powinien się znaleźć. Wireframe’y pomagają zaplanować strukturę strony lub aplikacji bez skupiania się na warstwie wizualnej.
To dobry moment na sprawdzenie:
- czy informacje są odpowiednio uporządkowane,
- czy użytkownik wie, co zrobić dalej,
- czy najważniejsze elementy są widoczne,
- czy ścieżka użytkownika jest logiczna.
Najpierw struktura. Potem wygląd.
Projektuj systemowo
W większych projektach pojedyncze ekrany szybko przestają wystarczać. Potrzebujesz komponentów, zasad, wariantów i spójnego systemu, który pozwoli projektować kolejne elementy szybciej i bardziej konsekwentnie.
Dlatego warto poznać podstawy Design Systems.
System projektowy nie tylko porządkuje interfejs. Ułatwia również współpracę między projektantami, developerami i innymi członkami zespołu.
Pamiętaj o dostępności
Dobry produkt cyfrowy powinien być użyteczny dla możliwie szerokiego grona odbiorców.
Kontrast, wielkość elementów, widoczny focus, odpowiednia hierarchia informacji, obsługa klawiatury czy poprawne komunikaty błędów to nie dodatki.
To elementy dobrego projektowania. Dlatego podstawy WCAG i accessibility warto poznawać już na początku swojej drogi jako projektant.
Testuj, zanim wdrożysz
Nawet najbardziej przemyślany projekt może zawierać problemy, których projektant po prostu nie zauważa.
Dlatego warto testować rozwiązania z użytkownikami. Obserwuj, gdzie się zatrzymują, czego nie rozumieją i jakie elementy sprawiają im trudność. Nie podpowiadaj od razu rozwiązania. Najpierw zobacz, jak użytkownik radzi sobie sam.
Czasem jeden test potrafi ujawnić problem, którego nie zauważył cały zespół.
Naucz się korzystać z Figmy
Figma jest jednym z podstawowych narzędzi współczesnego projektanta UI/UX. Ale znajomość programu to dopiero początek.
Warto poznać komponenty, warianty, Auto Layout, prototypowanie, style, biblioteki i podstawy pracy z Design Systemami.
Najważniejsze pozostaje jednak to, co projektujesz, a nie jak szybko klikasz w Figmie.
Myśl jak projektant, nie jak dekorator
Najważniejsza zmiana w myśleniu przy przejściu z grafiki do UX/UI jest prosta.
Nie pytaj tylko:
„Czy to wygląda dobrze?”
Pytaj:
„Czy użytkownik wie, co ma zrobić?”
„Czy rozumie, co się właśnie wydarzyło?”
„Czy może osiągnąć swój cel bez zbędnego wysiłku?”
Bo UI/UX nie polega na dekorowaniu ekranów.
Polega na projektowaniu doświadczeń, które mają sens.
Na koniec: zacznij od problemu
UI/UX może wydawać się skomplikowane, szczególnie na początku. Narzędzia, metodologia, research, prototypy, Design Systems, accessibility — lista rzeczy do poznania jest długa.
Nie musisz jednak nauczyć się wszystkiego od razu. Zacznij od podstaw.
Obserwuj użytkowników. Analizuj dobre produkty. Projektuj. Testuj. Wyciągaj wnioski. I przede wszystkim ucz się zadawać właściwe pytania. Bo dobry projektant nie zaczyna od odpowiedzi.
Zaczyna od właściwego problemu.