Czym jest UI i UX design

Po tej lekcji odróżnisz UI od UX, nazwiesz trzy miary użyteczności i opiszesz, czym zajmuje się projektant na przykładzie prawdziwego problemu małej firmy.

Dwa słowa, które często się myli

UI (user interface) to interfejs użytkownika: wszystko, co człowiek widzi i czego dotyka na ekranie. Przyciski, pola formularzy, ikony, kolory, kroje pisma, odstępy, komunikaty o błędach. Projektant UI odpowiada za to, żeby te elementy były czytelne, spójne i jasno pokazywały, co można zrobić.

UX (user experience) to doświadczenie użytkownika: całość wrażeń i reakcji, które powstają, gdy ktoś korzysta z produktu, a także przed i po użyciu. Norma ISO 9241-210 opisuje UX właśnie w ten sposób, jako postrzeganie i reakcje osoby wynikające z używania systemu, produktu lub usługi albo z oczekiwania na to użycie. UX obejmuje więc też to, czy produkt w ogóle rozwiązuje właściwy problem, czy klient rozumie ofertę i czy po zakończeniu zadania wie, co się stało.

Prosta reguła: UI to warstwa, którą widać. UX to cała droga, którą człowiek przechodzi, żeby osiągnąć swój cel. Dobry UI pomaga w dobrym UX, ale go nie zastępuje. Piękny formularz, który pyta o niepotrzebne dane, nadal daje złe doświadczenie.

Użyteczność: trzy miary, które da się sprawdzić

W rozmowach o UX szybko pojawia się słowo użyteczność (usability). Norma ISO 9241-11 definiuje ją jako stopień, w jakim określeni użytkownicy mogą osiągnąć określone cele w określonym kontekście użycia. Ocenia się ją trzema miarami:

• skuteczność: czy użytkownik w ogóle osiągnął cel (na przykład zarezerwował wizytę);
• efektywność: ile wysiłku, czasu i kroków go to kosztowało;
• satysfakcja: jak ocenia to doświadczenie, czy czuł się pewnie i czy wróci.

Zwróć uwagę na słowa „określeni użytkownicy” i „określony kontekst”. Aplikacja, która jest wygodna dla dwudziestolatka przy biurku, może być trudna dla seniora na przystanku, w słońcu, z telefonem w jednej ręce. Dlatego projektant zawsze pyta: kto, po co i w jakich warunkach.

Opracowanie na podstawie norm ISO 9241-210 i ISO 9241-11.

Przykład, który poprowadzi Cię przez kurs

W całym kursie pracujemy na jednym, fikcyjnym przykładzie. Szprycha to serwis rowerowy z Gdańska z dwoma punktami: we Wrzeszczu i w Oliwie. Dziś klienci umawiają się telefonicznie. W sezonie telefon dzwoni bez przerwy, mechanicy odrywają się od pracy, a część osób rezygnuje, bo nie może się dodzwonić. Właścicielka chce prostego narzędzia do rezerwacji przeglądu przez internet. Przegląd podstawowy kosztuje w cenniku firmy 120 zł, a pełny 250 zł (to dane naszego przykładu, nie rynkowe).

Jak to wygląda z perspektywy UX i UI?

• Pytania UX: kto rezerwuje (studenci dojeżdżający rowerem, rodziny, osoby z rowerami elektrycznymi)? Co jest dla nich najważniejsze: termin, cena, czas naprawy? Czy wiedzą, czym różni się przegląd podstawowy od pełnego? Co się dzieje po rezerwacji?
• Pytania UI: jak pokazać wolne terminy w kalendarzu na telefonie? Jak wyróżnić przycisk „Zarezerwuj”? Jak czytelnie podać cenę i czas trwania usługi?

Gdyby od razu zaprojektować ładny kalendarz, można by przeoczyć, że klienci najczęściej pytają przez telefon nie o termin, tylko o to, czy serwis naprawia ich typ roweru. To jest typowy błąd: zaczynanie od ekranów zamiast od problemu.

Czym na co dzień zajmuje się projektant

W małych zespołach jedna osoba łączy role UX i UI. W większych firmach spotkasz osobne stanowiska: badacza (UX researcher), projektanta produktu (product designer), projektanta interfejsu (UI designer) i specjalistę od treści (UX writer). Niezależnie od nazwy stanowiska praca składa się z podobnych czynności:

1. Rozmowy z użytkownikami i obserwacja, jak dziś radzą sobie z zadaniem.
2. Porządkowanie informacji: co ma się znaleźć w produkcie i w jakiej kolejności.
3. Szkice i wireframy, czyli proste makiety układu ekranów.
4. Projekt wizualny i komponenty interfejsu.
5. Prototyp, który da się „klikać”, i testy z prawdziwymi ludźmi.
6. Współpraca z programistami przy wdrożeniu i poprawki po testach.

Każdy z tych kroków omówimy w kolejnych modułach. Na końcu kursu złożysz je w jeden projekt dla Szprychy.

Najważniejsze w 3 punktach

1. UI to warstwa widoczna na ekranie, UX to całe doświadczenie osoby, która chce osiągnąć cel z pomocą produktu.
2. Użyteczność mierzysz skutecznością, efektywnością i satysfakcją, zawsze dla konkretnych użytkowników i kontekstu.
3. Projektowanie zaczyna się od zrozumienia problemu, a nie od rysowania ekranów.

Źródła

• ISO 9241-210:2019 Ergonomics of human-system interaction, Part 210: Human-centred design for interactive systems, https://www.iso.org/standard/77520.html (dostęp: październik 2026)
• ISO 9241-11:2018 Ergonomics of human-system interaction, Part 11: Usability: Definitions and concepts, https://www.iso.org/standard/63500.html (dostęp: październik 2026)
• Nielsen Norman Group, The Definition of User Experience (UX), https://www.nngroup.com/articles/definition-user-experience/