W skrócie: UX (user experience) to całość doświadczenia, czyli to, czy produkt rozwiązuje problem i czy droga do celu jest logiczna. UI (user interface) to warstwa wizualna, czyli układ, typografia, kolory i komponenty. UX bez UI to schemat bez wyrazu, UI bez UX to ładna fasada, w której nie da się nic załatwić. Dobry produkt wymaga obu.
Spis treści
Krótka odpowiedź
UX odpowiada za to, jak produkt działa i czy załatwia sprawę: strukturę, ścieżki, nazewnictwo, kolejność kroków. UI odpowiada za to, jak produkt wygląda i reaguje: układ, typografię, kolor, komponenty i ich stany. Granica bywa płynna, ale rozróżnienie porządkuje pracę, a przy tym wyjaśnia, dlaczego „ładna strona" potrafi nie sprzedawać.
Restauracja, nie lukier
Popularna metafora głosi, że UX to ciasto, a UI to lukier. Jest chwytliwa i myląca, bo sugeruje, że UI to ozdoba. Lepsza jest restauracja: UX to menu, kolejność podawania, czas oczekiwania i to, czy kelner rozumie pytania. UI to wystrój, zastawa i czytelność karty. Wieczór może zepsuć i surowy kotlet, i lepka podłoga. Gość nie analizuje, która „warstwa" zawiodła. Po prostu nie wróci.
Co konkretnie robi projektant UX
- bada użytkowników i ich problemy (wywiady, testy, analityka),
- projektuje architekturę informacji: co gdzie jest i jak się nazywa,
- rysuje przepływy (user flows) i makiety funkcjonalne (wireframes),
- testuje prototypy z ludźmi, zanim powstanie kod,
- pilnuje, by każdy krok przybliżał użytkownika do celu, a firmę do konwersji.
Efekt pracy UX bywa niewidzialny: nikt nie chwali strony za to, że „dało się wszystko znaleźć". Widoczny jest dopiero jego brak.
Co konkretnie robi projektant UI
- przekłada makiety na finalny język wizualny marki,
- buduje hierarchię typograficzną i siatkę,
- projektuje komponenty ze wszystkimi stanami (hover, focus, błąd, ładowanie),
- dba o kontrasty i dostępność (WCAG),
- projektuje mikrointerakcje, które dają poczucie płynności.
Efekt pracy UI widać natychmiast, i to on buduje pierwsze wrażenie wiarygodności. Badania pokazują, że oceny zaufania do strony powstają w ułamkach sekund, na podstawie estetyki.
Co się dzieje, gdy zabraknie jednej warstwy
UI bez UX: „piękny labirynt": strona zachwyca na screenach z portfolio, ale użytkownik nie umie znaleźć cennika, formularz ma 14 pól, a droga do zakupu prowadzi przez 6 ekranów. Efekt: ruch jest, konwersji brak.
UX bez UI: „użyteczna nuda": wszystko działa logicznie, ale wygląd z poprzedniej dekady podważa wiarygodność. W segmencie premium i w branżach opartych na zaufaniu to dyskwalifikacja.
Jak to wygląda w praktyce procesu
W zdrowym procesie warstwy następują po sobie i się przeplatają: badania → architektura → wireframe'y → testy (UX), potem projekt wizualny i design system (UI), potem znowu testy. Dlatego rozdzielanie „etapu UX" i „etapu UI" między różne firmy zwykle boli, bo decyzje jednej warstwy nieustannie wpływają na drugą.
W Sweet Lava obie warstwy (plus AX – doświadczenia z AI) projektuje jeden zespół, a wdrażają programiści siedzący obok. Zobacz, jak pracujemy.