UX (User Experience) to całe doświadczenie użytkownika: czy szybko znajdzie to, czego szuka, i czy osiągnie swój cel bez frustracji. UI (User Interface) to warstwa, którą widzi i której dotyka: przyciski, menu, kolory, czcionki, formularze. Dobra strona potrzebuje obu – ładny interfejs nie uratuje strony, na której nie da się znaleźć ceny ani kontaktu.
Zasady dobrego UX – od czego zacząć
- **Poznaj użytkownika i jego cel** – co chce zrobić na stronie: kupić, porównać, zadzwonić, przeczytać poradnik?
- **Pokaż najważniejsze od razu** – pierwszy ekran mówi, czym jest strona i co można zrobić dalej.
- **Bądź przewidywalny** – użytkownicy spędzają większość czasu na innych stronach i oczekują, że Twoja działa podobnie: logo prowadzi do strony głównej, menu jest na górze, koszyk w prawym rogu.
- **Upraszczaj** – mniej pozycji w menu, mniej pól w formularzu, mniej kroków do celu.
- **Dawaj informację zwrotną** – po kliknięciu, wysłaniu formularza czy błędzie użytkownik musi wiedzieć, co się stało.
Błędy UI, które odstraszają użytkowników
- drobny tekst i słaby kontrast, np. jasnoszary na białym tle,
- przyciski, które nie wyglądają na klikalne, i linki, których nie da się odróżnić od tekstu,
- wyskakujące okienka zasłaniające treść zaraz po wejściu,
- automatycznie przewijane suwaki z najważniejszymi informacjami,
- formularze, które po błędzie kasują wpisane dane,
- elementy przeskakujące podczas ładowania.
Kolory i typografia
- **Ograniczona paleta** – kolor główny, akcentowy dla przycisków i kilka neutralnych. Kolor akcentu zarezerwuj dla działań, żeby przyciski się wyróżniały.
- **Kontrast** – wytyczne dostępności WCAG zalecają dla zwykłego tekstu kontrast co najmniej 4,5:1. Sprawdzisz go w narzędziach deweloperskich przeglądarki.
- **Kolor to nie jedyny nośnik informacji** – błąd w formularzu oznacz też tekstem lub ikoną, nie tylko czerwoną ramką.
- **Czcionki** – jedna lub dwie rodziny, tekst główny zwykle co najmniej 16 px, wiersze o długości ok. 60–80 znaków, odstęp między wierszami ok. 1,5.
- **Hierarchia** – nagłówki wyraźnie większe od tekstu, spójne odstępy między sekcjami.
Elementy graficzne i zdjęcia
Własne zdjęcia (zespołu, produktów, realizacji) budują zaufanie bardziej niż zdjęcia stockowe. Ikony pomagają szybko przeglądać listy, a schematy i zrzuty ekranu – zrozumieć instrukcje. Każdy obraz powinien coś wnosić, a nie tylko wypełniać miejsce. Pamiętaj o kompresji i tekstach alternatywnych – więcej w tekście o optymalizacji obrazów.
Storytelling w projekcie
Strona może prowadzić użytkownika jak opowieść: problem, rozwiązanie, dowody (opinie, liczby, realizacje), wezwanie do działania. Taka kolejność sekcji sprawdza się szczególnie na stronach ofertowych i lądowania.
Animacje bez spowalniania strony
- animuj głównie właściwości transform i opacity – przeglądarka obsługuje je płynnie,
- krótkie animacje (ok. 200–400 ms) pomagają zrozumieć zmianę, długie irytują,
- uszanuj ustawienie systemowe „ogranicz ruch” (prefers-reduced-motion),
- unikaj ciężkich bibliotek i filmów w tle na telefonach.
Wpływ efektów na wydajność sprawdzisz w Core Web Vitals.
Testowanie użyteczności
- **Testy z użytkownikami** – poproś kilka osób z grupy docelowej o wykonanie zadania (np. „znajdź cenę usługi i wyślij zapytanie”) i obserwuj, gdzie się zatrzymują. Już kilka osób pozwala wychwycić większość poważnych problemów.
- **Nagrania sesji i mapy cieplne** – np. Microsoft Clarity (bezpłatne) lub Hotjar.
- **Testy A/B** – porównanie dwóch wersji elementu na prawdziwym ruchu.
- **Analityka** – ścieżki w Google Analytics, strony z wysokim odsetkiem wyjść.
Jak mierzyć efekt zmian, opisuję w tekście o konwersji.
Przykład: przebudowa z naciskiem na UX
Typowy scenariusz przebudowy strony firmowej: menu skrócone z kilkunastu do kilku pozycji, numer telefonu i przycisk kontaktu widoczne na każdej podstronie, formularz skrócony do trzech pól, ceny lub widełki cen podane wprost, opinie klientów przeniesione obok oferty. Takie zmiany zwykle dają więcej zapytań bez zwiększania ruchu. Więcej o tym, jakie są kluczowe elementy projektu strony, i o dostępności stron piszę osobno.
