UX i UI — czym to jest naprawdę, jak to ocenić i skąd się wzięło „9400% zwrotu"

Dwie litery obok siebie w każdej ofercie, i prawie zawsze użyte tak, jakby znaczyły to samo. Nie znaczą, a różnica nie jest akademicka: decyduje o tym, co dostajecie za pieniądze i w którym momencie projektu wolno jeszcze zmienić zdanie.

Ten tekst jest napisany dla osoby, która zamawia, a nie projektuje. Zawiera też sekcję, której zwykle nie ma: skąd naprawdę wzięła się liczba „każda złotówka w UX zwraca sto złotych", którą powtarza pół branży — łącznie z poprzednią wersją tego artykułu.

UX i UI to nie synonimy

Najprostsze rozróżnienie, jakie działa w rozmowie z wykonawcą:

UX to decyzje o tym, co i w jakiej kolejności. Ile kroków dzieli wejście na stronę od wysłania zapytania. Co widać bez przewijania. Które informacje są potrzebne do decyzji, a które tylko zajmują miejsce. Czego na stronie nie będzie. Efektem pracy UX jest struktura i uzasadnienie — nie obrazek.

UI to decyzje o tym, jak to wygląda i reaguje. Kolory, typografia, odstępy, stany przycisków, zachowanie przy najechaniu, komunikaty błędów. Efektem jest projekt graficzny, który da się oddać do kodowania.

Konsekwencja praktyczna jest jedna i warto ją znać przed podpisaniem umowy: UI powstaje na zaakceptowanym UX, nie zamiast niego. Jeśli w ofercie jest „projekt UX/UI" wyceniony jedną kwotą i dostarczany jako jeden plik z kolorami, kupujecie UI, a warstwa UX została pominięta albo zrobiona w domyśle. Gdzie ta granica przebiega technicznie i dlaczego szkic jest brzydki celowo, rozpisujemy przy wireframe'ach.

I rzecz, która w ofertach znika najczęściej: UX nie jest warstwą estetyczną. Można mieć stronę ładną i nieużyteczną, a także brzydką i skuteczną. Jeśli rozmowa o UX sprowadza się do tego, czy podoba się Wam odcień, rozmawiacie o UI.

Czym jest projektowanie zorientowane na człowieka — według normy, nie według agencji

Na to istnieje norma międzynarodowa i warto ją znać, bo daje Wam język, w którym da się zapytać o konkret.

ISO 9241-210, „Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems", definiuje projektowanie zorientowane na człowieka jako „podejście do projektowania i tworzenia systemów, którego celem jest uczynienie systemów interaktywnych bardziej użytecznymi przez skupienie się na sposobie ich używania oraz zastosowanie wiedzy i technik z zakresu ergonomii i użyteczności". Cytujemy z publicznie dostępnego pierwszego wydania z 15 marca 2010; wydanie obowiązujące to 2019 i jest płatne.

Norma wymienia sześć zasad. Poniżej każda z nich przełożona na to, co znaczy dla Waszego budżetu i Waszego ryzyka.

Projekt oparty na jawnym zrozumieniu użytkowników, zadań i środowiska. Czyli: ktoś ustalił, kto tu przychodzi i po co, zanim narysował pierwszy ekran. Bez tego dostajecie układ dopasowany do cudzych przyzwyczajeń — zwykle do ostatniego projektu tej agencji.

Użytkownicy zaangażowani przez cały czas projektowania. To jest zasada najczęściej pomijana i najdroższa w pominięciu. Jeśli nikt nie sprawdza projektu na ludziach w trakcie, błędy wyjdą po uruchomieniu — a wtedy ta sama poprawka kosztuje wielokrotnie więcej. U nas ten mnożnik wynosi mniej więcej 1:30 i jest policzony na naszych stawkach; rachunek rozpisujemy w tekście o wireframe'ach.

Projekt napędzany i korygowany oceną z udziałem użytkowników. Nie opinią zespołu i nie opinią zarządu. Różnica jest mierzalna: opinia daje preferencję, obserwacja daje zachowanie.

Proces iteracyjny. To jest zasada, która w umowach znika jako pierwsza, bo brzmi jak koszt. Akceptowanie projektu w ciemno, na podstawie jednej makiety i bez zaplanowanej rundy poprawek, jest tańsze w wycenie i droższe w realizacji — bo poprawki i tak się wydarzą, tyle że na etapie, na którym nazywają się przebudową.

Projekt obejmujący całość doświadczenia. Nie tylko ekran. Wiadomość potwierdzająca, ścieżka telefoniczna, to, co się dzieje po wysłaniu formularza, i to, czy ktokolwiek na niego odpowiada.

Zespół o wielu kompetencjach. Norma mówi wprost, że projektowanie zorientowane na człowieka nie jest zadaniem jednej osoby. Jeśli w ofercie stoi jeden projektant robiący wszystko od badań po kod, wiecie, czego nie kupujecie.

Dziesięć heurystyk Nielsena jako lista kontrolna dla zamawiającego

Najbardziej użyteczny zestaw zasad w tej dziedzinie ma trzydzieści sześć lat i nadal działa. Jakob Nielsen opracował go z Rolfem Molichem w 1990 roku, a obecną wersję zawęził w 1994 — i to jest w nim najciekawsze: lista powstała z analizy czynnikowej 249 realnych problemów z użytecznością, wybranej tak, żeby możliwie mało zasad tłumaczyło możliwie dużo błędów. To nie jest czyjaś opinia o dobrym projektowaniu.

Poniżej pełna dziesiątka, a potem trzy rozpisane na pytania, które możecie zadać, patrząc na własną stronę.

Zapobieganie błędom (zasada 5). Pytanie kontrolne: czy formularz sprawdza dane w trakcie wypełniania, czy pozwala kliknąć „wyślij" i dopiero wtedy pokazuje, co jest nie tak? I czy po błędzie pola zachowują to, co już wpisano?

Sprawdziliśmy pod tym kątem własny formularz kontaktowy i nie przechodzi tej heurystyki w pełni. Biblioteka formularzy jest u nas wywołana bez wskazania trybu walidacji, co domyślnie znaczy „sprawdzaj przy wysłaniu" — czyli dokładnie zachowanie opisane wyżej jako gorsze. Zachowujemy za to wpisane wartości po błędzie, więc nikt nie wypełnia formularza dwa razy. Zapisujemy to tutaj, bo artykuł, który wystawia cudzym stronom ocenę, a własnej nie sprawdza, jest wart tyle co reklama.

Widoczność stanu systemu (zasada 1). Pytanie kontrolne: czy po kliknięciu „wyślij" użytkownik wie, co się dzieje? U nas wskaźnik ładowania pojawia się z sekundowym opóźnieniem — celowo, żeby przy szybkiej odpowiedzi nie mrugał — ale to jest kompromis, nie spełnienie zasady, i tak go traktujemy.

Zgodność ze światem rzeczywistym (zasada 2). Pytanie kontrolne: czy interfejs mówi językiem Waszego klienta, czy językiem wykonawcy? „Skonfiguruj instancję", „wybierz wariant SKU" i „panel zarządzania encjami" to zdania napisane przez kogoś, kto opisuje swoją pracę, a nie Waszą sprzedaż.

Pozostałe siedem zasad jest równie użytecznych i wszystkie da się sprawdzić bez wiedzy technicznej — na tym polega ich wartość. Heurystyki nie zastępują testu z prawdziwymi ludźmi; pozwalają wyłapać połowę problemów, zanim ten test się odbędzie.

Co wiadomo z badań o tym, jak ludzie czytają stronę

Dwa wyniki są tu ważniejsze od reszty, bo oba mają podaną próbę i oba przekładają się bezpośrednio na układ.

Pierwsze dziesięć sekund rozstrzyga, czy ktoś zostanie. Badanie Microsoft Research objęło 205 873 strony po 10 000 wizyt każda, czyli ponad dwa miliardy czasów pobytu, i dopasowało do nich rozkład Weibulla. Wynik: przeciętna wizyta trwa niecałą minutę, prawdopodobieństwo wyjścia jest najwyższe w pierwszych dziesięciu sekundach i pozostaje wysokie przez kolejne dwadzieścia. Po około trzydziestu sekundach tempo wychodzenia wyraźnie spada — kto został pół minuty, zwykle zostaje dłużej.

Warto znać liczbę, która za tym stoi, bo rozstrzyga o kształcie całej krzywej: parametr kształtu wyszedł poniżej jedności na 98,5% stron. W tym rozkładzie wartość poniżej jedności znaczy „ujemne starzenie" — im dłużej ktoś jest na stronie, tym mniej prawdopodobne, że wyjdzie. Autorzy nazwali ten wzorzec „screen-and-glean": najpierw szybki przesiew, w którym ryzyko porzucenia jest wysokie, a po jego przejściu czytanie, w którym ryzyko maleje.

Konsekwencja projektowa jest konkretna i nie brzmi jak „róbcie ładnie": w pierwszym ekranie musi stać odpowiedź na pytanie, po co ta strona istnieje i co z niej ma czytelnik. Nie zapowiedź odpowiedzi, nie hasło o kompleksowych rozwiązaniach — odpowiedź.

Ludzie nie czytają, tylko skanują, i robią to w powtarzalny sposób. Badanie okulograficzne z 232 osobami patrzącymi na tysiące stron pokazało wzorzec w kształcie litery F: poziomy ruch w górnej części treści, drugi poziomy niżej i krótszy, oraz pionowe zejście wzdłuż lewej krawędzi.

Autorzy sami opatrują to zastrzeżeniem, które warto powtórzyć, bo w cytowaniach znika: to jest „przybliżony, ogólny kształt, a nie jednolite zachowanie co do piksela". Bywa E, bywa odwrócone L, a układ potrafi ten wzorzec zmienić — zdjęcie produktu albo długi nagłówek przesuwają uwagę gdzie indziej.

Praktyczny wniosek z obu badań razem: najważniejsze zdanie na stronie ma być pierwszym zdaniem, nie puentą, a informacje rozstrzygające decyzję nie mogą siedzieć w prawej kolumnie ani pod trzecim przewinięciem. To nie jest kwestia gustu i da się to sprawdzić bez badania — wystarczy zasłonić wszystko poniżej pierwszego ekranu i zapytać kogoś z zewnątrz, czym zajmuje się ta firma.

Skąd się wzięło „9400% zwrotu z UX"

Jeśli zbieraliście oferty, na pewno widzieliście tę liczbę albo jej kuzynkę: „każdy dolar zainwestowany w UX zwraca sto dolarów", „ROI z UX to 9900%". Poprzednia wersja tego artykułu podawała 9400%.

Prześledziliśmy łańcuch cytowań i warto znać jego koniec.

Wszystkie ślady prowadzą do jednego raportu: „The Six Steps For Justifying Better UX", autorzy Andrew Hogan i Deanna Laufer, wydany przez firmę badawczą Forrester 28 grudnia 2016 roku. I tu zaczynają się problemy.

Raport kosztuje 1 495 dolarów. Nie jest dostępny publicznie, więc praktycznie nikt, kto cytuje tę liczbę, jej nie widział w źródle.

Publiczne streszczenie raportu nie zawiera żadnej liczby ROI. Sprawdziliśmy — mówi, że wiele firm wciąż oczekuje dowodu zwrotu z inwestycji, i nie podaje żadnego wskaźnika.

Cytowania krążą w kółko. Każdy artykuł powołuje się na kolejny artykuł, ten na następny, i łańcuch nigdzie nie kończy się na danych. To jest definicja liczby bez pokrycia, niezależnie od tego, jak poważnie brzmi nazwa firmy w przypisie.

Dodatkowo krążąca wersja to 9900%, a nasza podawała 9400%. Powielaliśmy liczbę, której nikt nie widział, i jeszcze ją przekręciliśmy — to jest dokładnie ten mechanizm, przez który takie wskaźniki żyją.

Czym jest realny zwrot z UX, skoro nie mnożnikiem. Nie jest pojedynczą liczbą i nie da się go obiecać z góry, ale da się nazwać trzy miejsca, w których się pojawia:

Oszczędność prewencyjna. Błąd znaleziony na szkicu kosztuje przesunięcie prostokąta; ten sam błąd znaleziony po uruchomieniu kosztuje przebudowę komponentu, zmianę pól w systemie, poprawkę zapytań i testy. To jest ten rachunek 1:30 z naszych stawek.

Mniej obsługi. Każde pytanie, na które strona nie odpowiada, wraca jako telefon albo mail. Ten koszt nie pojawia się w wycenie projektu i pojawia się co miesiąc w czasie zespołu.

Wyższa konwersja bazowa — ale mierzona u siebie, nie przepisana z cudzego studium przypadku. Dlaczego cudze wyniki nie przenoszą się na Waszą stronę i jak to policzyć uczciwie, rozpisujemy w tekście o współczynniku konwersji.

Co jest inne, gdy sprzedajecie firmom

Większość poradników o UX opisuje sklep. W sprzedaży B2B trzy rzeczy działają inaczej i warto je nazwać, zanim zamówicie projekt zrobiony pod e-commerce.

Decyduje więcej niż jedna osoba. Na stronę wchodzi ktoś, kto szuka, ale zgodę wydaje ktoś inny — często po przesłaniu linku. Strona musi więc dać się przeczytać na dwa sposoby: szybko, przez szukającego, i punktowo, przez akceptującego, który wejdzie na trzy minuty i będzie chciał znaleźć zakres, referencje i sposób kontaktu.

Konwersją jest rozmowa, nie zakup. Cel jest wcześniejszy i tańszy dla odwiedzającego, co przesuwa cały projekt: zamiast usuwać tarcie z koszyka, usuwacie niepewność przed pierwszym mailem. Najskuteczniejszy element bywa najprostszy — powiedzenie wprost, co się dzieje po wysłaniu formularza i w jakim czasie ktoś odpowie.

Cykl jest długi, więc strona bywa czytana wielokrotnie. Ten sam człowiek wraca po tygodniu, żeby porównać. Układ, który dobrze działa za pierwszym razem, a nie pozwala niczego szybko odnaleźć za trzecim, kosztuje właśnie w tym momencie — i to jest argument za nawigacją zamiast jednej długiej strony.

Wszystkie trzy wynikają z tego samego, co badania o czasie pobytu: uwaga jest krótka i wraca. Pierwsze dziesięć sekund rozstrzyga, czy ktoś zostanie dziś, a możliwość szybkiego odnalezienia konkretu rozstrzyga, czy wróci z kimś jeszcze.

Ile to kosztuje i za co się płaci

Nie podamy widełek, bo każde, które byśmy podali, byłyby albo naszym cennikiem, albo zmyśleniem. Podamy za to, co składa się na cenę, żebyście umieli przeczytać cudzą ofertę.

Liczba unikalnych ekranów, nie podstron. Dziesięć podstron usług o tej samej budowie to jeden ekran do zaprojektowania i dziewięć do wypełnienia. Oferta licząca każdą osobno opisuje coś innego, niż się wydaje.

Czy w cenie są badania. Rozmowy z użytkownikami, test zadaniowy, analiza obecnej strony — to są osobne pozycje i najczęściej wypadające przy negocjacji ceny. Wypadają, bo nie widać ich w pliku na końcu.

Ile rund poprawek. Dwie rundy w umowie i trzy rundy w rzeczywistości to najczęstsza przyczyna sporu o zakres. Ustalcie liczbę i to, czym jest runda.

Czy powstaje system, czy zestaw obrazków. Projekt oddany jako komplet spójnych komponentów daje się rozwijać; projekt oddany jako pięć niezależnych ekranów wymaga projektanta przy każdej nowej podstronie. To rozstrzyga o kosztach przez następne lata, a nie o cenie dzisiaj.

Co dostajecie na własność. Pliki źródłowe czy podgląd? Licencja na czcionki czy tylko ich użycie w projekcie? To bywa różnica między zmianą wykonawcy a przepisaniem projektu od zera.

Jak ocenić ofertę UX/UI

Pięć pytań, wszystkie do zadania bez wiedzy projektowej.

„Co zrobi osoba, która wejdzie na tę stronę?" Jeśli odpowiedź brzmi „zapozna się z ofertą", wykonawca nie ma celu, tylko zakres.

„Skąd wiecie, że ten układ zadziała?" Dobra odpowiedź brzmi „nie wiemy, sprawdzimy" albo „z badania, które zrobimy w tygodniu drugim". Zła odpowiedź brzmi „mamy doświadczenie".

„Co się stanie, gdy nasz tekst będzie dwa razy dłuższy?" Pytanie brzmi błaho i rozstrzyga, czy projekt jest systemem, czy obrazkiem.

„Które elementy będziemy mogli zmieniać sami?" Ostatni moment, w którym ta odpowiedź jest tania.

„Czego w tym projekcie nie robicie?" Najważniejsze zdania w każdej ofercie zaczynają się od „nie obejmuje". Ich brak nie znaczy, że wszystko jest w cenie.

Czego ten tekst nie rozstrzyga

Jak zrobić test z użytkownikami. Metoda pięciu osób, zadania zamiast pytań i to, co z tego wynika, są przy wireframe'ach.

Jak zmierzyć skuteczność strony. Współczynnik konwersji, jego mianownik i to, dlaczego benchmarki nie są celem, mają własny tekst.

Dostępność i WCAG. To osobna dziedzina z własnymi wymaganiami prawnymi i własnym tekstem, a nie podrozdział UX.

Co ustalić przed projektowaniem. Cele, odbiorca i zakres zapadają w briefie — osobno.

Skąd te liczby

• Dziesięć heurystyk użyteczności — Jakob Nielsen i Rolf Molich, pierwsza publikacja 1990, obecny zestaw zawężony w 1994 na podstawie analizy czynnikowej 249 problemów z użytecznością: „10 Usability Heuristics for User Interface Design", Nielsen Norman Group, strona aktualizowana 30 stycznia 2024.
• Definicja i sześć zasad projektowania zorientowanego na człowieka — ISO 9241-210, „Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems". Cytujemy z publicznie dostępnego pierwszego wydania z 15 marca 2010; wydanie obowiązujące to 2019 i jest płatne, więc nie możemy zacytować jego brzmienia.
• Pierwsze dziesięć sekund, próg trzydziestu sekund i parametr kształtu poniżej jedności na 98,5% stron — badanie źródłowe: Chao Liu, Ryen W. White, Susan Dumais, „Understanding Web Browsing Behaviors through Weibull Analysis of Dwell Time", Microsoft Research, SIGIR 2010; 205 873 strony po 10 000 obserwacji czasu pobytu. Omówienie dla praktyków: Jakob Nielsen, „How Long Do Users Stay on Web Pages?", Nielsen Norman Group, 11 września 2011.
• Krzywa przeżycia na figurze — policzona ze wzoru Weibulla, nie narysowana odręcznie. Publikacja podaje rozkłady obu parametrów, a nie jedną parę dopasowaną do całej sieci, więc użyte na wykresie k = 0,5 i λ = 35 s są wartościami poglądowymi z podanych przez autorów przedziałów: parametr kształtu poniżej jedności na 98,5% stron i czas pobytu do 70 sekund na 80% stron. Wynikiem badania jest kierunek krzywej, nie jej dokładne położenie, i tak ją podpisujemy.
• Wzorzec F w czytaniu stron — Jakob Nielsen, „F-Shaped Pattern For Reading Web Content", Nielsen Norman Group, 2006. Badanie okulograficzne z 232 osobami. Zastrzeżenie autorów przenosimy razem z wynikiem: to przybliżony kształt, nie zachowanie co do piksela.
• Mnożnik 1:30 między poprawką na szkicu a poprawką w kodzie — nasze własne stawki i nasz własny rachunek pracy, rozpisany w tekście o wireframe'ach. To nie jest benchmark rynkowy.
• Walidacja naszego formularza i opóźnienie wskaźnika ładowania — sprawdzone w kodzie tego serwisu 16 września 2026, nie deklarowane.
• Raport, do którego prowadzi „9400% ROI" — Andrew Hogan, Deanna Laufer, „The Six Steps For Justifying Better UX", Forrester, 28 grudnia 2016, cena 1 495 dolarów. Publiczne streszczenie nie zawiera żadnej liczby zwrotu z inwestycji.
• Czego tu nie ma: poprzednia wersja tego tekstu podawała 9400% ROI z UX, wzrost konwersji o 200% z dobrego interfejsu, twierdzenie, że 75% użytkowników ocenia wiarygodność firmy po wyglądzie strony, wzrosty o 25%, 30% i 35%, oraz 2,7 miliarda dolarów, które Amazon miał zyskać na przeprojektowaniu płatności. Żadna z tych liczb nie miała źródła; zostały usunięte, nie poprawione.