UI

Co to właściwie znaczy

UI (z angielskiego „user interface”, interfejs użytkownika) to cała widoczna warstwa strony czy aplikacji: przyciski, pola, kolory, czcionki, układ. To wszystko, z czym klient ma bezpośredni kontakt oczami i palcem. UX to wrażenie z używania, UI to konkretne elementy, które to wrażenie tworzą.

Przykład z życia firmy

Restauracja robi nową stronę: piękną, ciemne tło, elegancka cienka czcionka, animacje. UI zachwyca na pierwszy rzut oka. Ale przycisk „Rezerwuj stolik” jest szary na czarnym tle i ledwo go widać, więc z 1000 wchodzących rezerwuje tylko 12. Po jednej zmianie (przycisk na jaskrawy pomarańcz, dobrze widoczny) rezerwacji robi się 34, przy tym samym ruchu. Ładny UI sprzedawał mniej niż brzydszy, ale czytelny.

Dlaczego to dla Ciebie ważne

UI to pierwsze wrażenie i wiarygodność: koślawa strona odstrasza, zanim klient przeczyta choć słowo. Ale ładny wygląd bez wygody to pułapka: łatwo zakochać się w estetyce i zapomnieć, że klient wszedł coś załatwić, nie podziwiać. Dobre UI ma nie tylko wyglądać, ale prowadzić rękę do właściwego przycisku.

Jak to wykorzystać

Patrz na UI oczami klienta, który spieszy się z telefonem w ręku, nie oczami projektanta. Najważniejszy przycisk ma być największy i najlepiej widoczny: kontrast ważniejszy niż moda. Zanim zachwycisz się nową szatą, sprawdź, czy przez tę szatę wciąż łatwo kupić.

UI: rozwinięcie skrótu i różnica z UX

UI to skrót od angielskiego user interface, czyli interfejs użytkownika: wszystko, co użytkownik widzi i czego dotyka na ekranie, na przykład przyciski, menu, formularze, kolory i czcionki. UX, czyli user experience, to doświadczenie użytkownika: czy cała ścieżka jest prosta, szybka i zrozumiała. UI odpowiada na pytanie „jak to wygląda”, a UX na pytanie „jak się z tego korzysta”. Ładny interfejs nie wystarczy, jeśli klient nie może znaleźć koszyka.

Z czego składa się UI

• Układ: rozmieszczenie elementów na stronie.
• Typografia: czcionki, wielkość tekstu, odstępy.
• Kolory: barwy marki, kontrast, kolory przycisków i komunikatów.
• Elementy sterowania: przyciski, pola, przełączniki, menu.
• Ikony i grafiki.
• Stany: jak element wygląda po najechaniu, kliknięciu, przy błędzie.

Przykłady z różnych branż

• Sklep internetowy. Przycisk „Dodaj do koszyka” jest jedynym wyraźnym kolorem na stronie produktu, więc od razu przyciąga wzrok.
• Usługi. Na telefonie numer do gabinetu jest dużym przyciskiem na dole ekranu, łatwym do kliknięcia kciukiem.
• Firma B2B. Panel klienta hurtowni pokazuje najczęściej zamawiane produkty na górze, bez szukania w katalogu.

Jak poprawić UI krok po kroku

1. Sprawdź stronę na telefonie: czy tekst jest czytelny bez powiększania, a przyciski łatwe do kliknięcia.
2. Zadbaj o kontrast tekstu z tłem. Standard WCAG zaleca kontrast co najmniej 4,5 do 1 dla zwykłego tekstu.
3. Ogranicz liczbę kolorów i czcionek do kilku.
4. Wyróżnij jeden główny przycisk na każdej stronie.
5. Obejrzyj nagrania sesji, na przykład w Microsoft Clarity, i zobacz, gdzie ludzie klikają w miejsca, które nie są klikalne.

Najczęstsze błędy

Najczęstszy błąd to szary tekst na białym tle, ładny w projekcie, ale słabo czytelny. Drugi to zbyt małe przyciski na telefonie. Trzeci to elementy, które wyglądają na klikalne, a nie są, albo odwrotnie: linki, których nie da się odróżnić od zwykłego tekstu.

Zasady dobrego UI

• Hierarchia: najważniejsze elementy są największe i najbardziej widoczne.
• Spójność: przyciski, kolory i czcionki wyglądają tak samo na całej stronie.
• Kontrast: tekst jest czytelny na tle, także w słońcu na telefonie.
• Odstępy: elementy mają miejsce, nic się nie zlewa.
• Informacja zwrotna: po kliknięciu użytkownik widzi, że coś się stało.

UI na telefonie

Większość ruchu na wielu stronach pochodzi z telefonów. Przyciski powinny być na tyle duże, żeby łatwo trafić w nie palcem, a najważniejsze elementy w zasięgu kciuka. Menu ukryte pod ikoną musi być łatwe do znalezienia. Sprawdzaj projekt na prawdziwym telefonie, a nie tylko na zmniejszonym oknie przeglądarki.

UI a dostępność

Dobry interfejs jest wygodny także dla osób z niepełnosprawnościami. Wytyczne WCAG zalecają między innymi odpowiedni kontrast tekstu, możliwość obsługi strony klawiaturą, widoczne zaznaczenie aktywnego elementu i opisy obrazów. Wiele z tych zasad poprawia też wygodę wszystkich użytkowników, na przykład czytelność w słońcu.

Jak testować UI

1. Poproś kilka osób spoza firmy o wykonanie konkretnego zadania, na przykład znalezienia ceny.
2. Obserwuj, gdzie się zatrzymują i czego szukają.
3. Sprawdź mapy kliknięć i nagrania sesji.
4. Popraw jedną rzecz i sprawdź ponownie.

Pięć osób często wystarczy, żeby znaleźć najpoważniejsze problemy.

UI a zaufanie

Estetyczny i uporządkowany interfejs sprawia, że strona wydaje się bardziej wiarygodna. Literówki, rozjechane elementy i stare zdjęcia działają odwrotnie, nawet jeśli oferta jest dobra.

Pierwszy krok

Otwórz stronę na telefonie i sprawdź, czy przycisk kontaktu jest widoczny bez przewijania i łatwy do kliknięcia kciukiem.

Wyjaśnienie na prostym przykładzie

W samochodzie kierownica, pedały i przyciski to to, czego dotykasz. Gdy są tam, gdzie się spodziewasz, jedziesz bez myślenia. Gdy wycieraczki włączają się pokrętłem w dziwnym miejscu, szukasz go w deszczu.

UI, czyli interfejs użytkownika, to wszystko, co widzisz i klikasz na stronie albo w aplikacji: przyciski, menu, pola, kolory, czcionki. Dobry interfejs jest czytelny i przewidywalny. UI to wygląd i układ, a UX to całe doświadczenie, czyli czy dzięki temu wyglądowi łatwo coś załatwić.

Trudne słowa z tego hasła

• UX. Całe doświadczenie korzystania z produktu. Zobacz UX.
• Mikrocopy. Krótkie teksty na przyciskach i w formularzach. Zobacz mikrocopy.
• Above the fold. Część strony widoczna bez przewijania. Zobacz above the fold.
• Heatmapa. Mapa pokazująca, gdzie ludzie klikają na stronie. Zobacz heatmapa.

Ćwiczenie na 15 minut

1. Otwórz swoją stronę na telefonie.
2. Spróbuj w ciągu 30 sekund znaleźć numer telefonu i cennik.
3. Zapisz każde miejsce, w którym musiałeś się zastanowić.
4. Popraw jedno z nich, na przykład powiększ przycisk albo przenieś go wyżej.

Strona staje się łatwiejsza w obsłudze; gdzie ludzie naprawdę klikają, pokaże heatmapa.

Najczęstsze pytania

Co oznacza skrót UI?

User interface, czyli interfejs użytkownika: wszystko, co użytkownik widzi i czego używa na ekranie, takie jak przyciski, menu, formularze, kolory i czcionki.

Czym różni się UI od UX?

UI dotyczy wyglądu i elementów interfejsu. UX dotyczy całego doświadczenia korzystania, czyli tego, czy ścieżka jest prosta, szybka i zrozumiała.

Jak sprawdzić, czy interfejs jest czytelny?

Przetestuj stronę na telefonie, sprawdź kontrast tekstu z tłem w darmowym narzędziu do kontrastu i obejrzyj nagrania sesji użytkowników.

Czym jest WCAG?

To międzynarodowe wytyczne dostępności treści internetowych, które opisują między innymi kontrast, obsługę klawiaturą i opisy obrazów.

Ile osób potrzeba do testu interfejsu?

Często pięć osób wystarczy, żeby znaleźć najpoważniejsze problemy z używaniem strony.

Powiązane pojęcia

UX  ·  Landing page  ·  Mikrocopy