UX a UI – czym się różnią
UX – doświadczenie
- jak działa ścieżka użytkownika
- struktura, kolejność kroków, treści
- badania, testy, makiety
- odpowiada na pytanie „czy to jest wygodne?”
UI – interfejs
- jak wygląda to, co widać na ekranie
- kolory, typografia, przyciski, ikony
- projekt graficzny i system komponentów
- odpowiada na pytanie „czy to jest czytelne i spójne?”
W praktyce UX i UI projektuje się razem, ale kolejność jest ważna: najpierw ścieżki i makiety (UX), potem wygląd (UI). Piękny interfejs nie uratuje strony, na której nie da się znaleźć ceny ani kontaktu.
Przykłady UX: słabe i dobre rozwiązania
UX najłatwiej zrozumieć na konkretnych sytuacjach. W każdym z poniższych przykładów słaba i dobra wersja mogą wyglądać tak samo – różnią się tylko tym, ile wysiłku kosztuje użytkownika załatwienie sprawy. Animacja pokazuje to na formularzu kontaktowym: ten sam cel, dwie różne ścieżki.
| Sytuacja | Słaby UX | Dobry UX |
|---|---|---|
| Formularz zapytania | dziewięć obowiązkowych pól, w tym NIP i budżet; po błędzie wszystko trzeba wpisać od nowa | trzy pola; błąd widać od razu przy polu, a wpisane dane zostają |
| Menu strony firmowej | nazwy z wewnętrznego języka firmy, np. „Dział DH” albo „Oferta 2” | nazwy potrzeb klienta, np. „Dla hurtowni”, „Cennik”, „Kontakt” |
| Telefon na komórce | numer jako obrazek albo zwykły tekst do przepisania | klikalny numer w nagłówku – po dotknięciu wystarczy potwierdzić połączenie |
| Cena usługi | tylko „zapytaj o cenę”, bez żadnej wskazówki | cena „od” albo widełki i krótka informacja, od czego zależy koszt |
| Zamówienia w sklepie B2B | każde zamówienie składane od zera, produkty szukane tylko po nazwie | ponowienie zamówienia z historii, wyszukiwanie po indeksie lub kodzie EAN, import listy produktów z pliku |
| Wyszukiwarka mieszkań na stronie dewelopera | lista plików PDF z rzutami do pobrania | filtry metrażu, piętra i liczby pokoi, a przy każdym lokalu rzut, cena i status |
| Komunikat o błędzie | „Nieprawidłowe dane” bez wskazania, co poprawić | konkretna podpowiedź, np. „NIP ma 10 cyfr – brakuje jednej” |
Wspólny mianownik jest prosty: dobry UX zdejmuje z użytkownika pracę – mniej pól, mniej zgadywania, mniej telefonów z pytaniem „gdzie to znajdę?”. Takie poprawki często nie wymagają nowej strony, tylko zmian w ścieżkach, które już istnieją.
Jak wygląda projektowanie UX
| Etap | Co powstaje |
|---|---|
| Poznanie użytkowników | kto korzysta ze strony, z jakim pytaniem i na jakim urządzeniu |
| Ścieżki i architektura informacji | struktura menu i podstron, kolejność kroków |
| Makiety | układ ekranów bez grafiki, łatwy do zmiany |
| Testy z użytkownikami | kilka osób wykonuje zadania – widać, gdzie się gubią |
| Projekt UI i wdrożenie | gotowy wygląd i działająca strona |
| Pomiar po starcie | dane z analityki: gdzie ludzie rezygnują |
Sygnały, że strona ma problem z UX
- dużo wejść, mało zapytań – ludzie nie znajdują kontaktu albo nie wiedzą, co dalej,
- formularz, który na telefonie trudno wypełnić,
- klienci dzwonią z pytaniami, na które odpowiedź jest na stronie – ale trudno ją znaleźć,
- menu, w którym nazwy działów są zrozumiałe tylko dla firmy.
Część z tych problemów rozwiązują drobne zmiany – piszemy o nich w tekście konwersja strony firmowej. O UX w serwisach z kontami użytkowników piszemy w tekście UX w portalach internetowych.
UX w Iguana Studio
Każdy projekt zaczynamy od makiet kluczowych ścieżek, a dopiero po ich akceptacji powstaje projekt graficzny. Szczegóły na stronie tworzenie stron internetowych.
