🖱️ Interakcja i UX

Interakcja i feedback

Jak system komunikuje się z użytkownikiem. Feedback, statusy, progresywne ujawnianie i cofanie akcji.

Wszystkie zasady

01

Natychmiastowy feedback Immediate Feedback

Po każdej akcji użytkownika system powinien odpowiedzieć w ciągu 100 milisekund zmianą wizualną. Kliknięcie przycisku zmienia jego kolor, wpisanie tekstu pojawia się natychmiast na ekranie, przesunięcie suwaka aktualizuje wartość w czasie rzeczywistym. Opóźniony feedback prowadzi do wielokrotnego klikania.

Tip: Każdy przycisk powinien mieć stan :active (wizualna zmiana przy kliknięciu), :hover (podświetlenie) i :disabled (wyszarzenie). Jeśli akcja trwa dłużej niż 100ms, zmień przycisk natychmiast (np. pokaż spinner wewnątrz przycisku).
02

Przewidywalność interakcji Interaction Predictability

Użytkownik powinien wiedzieć, co się stanie po kliknięciu, zanim kliknie. Przycisk 'Wyślij' powinien wysyłać, a nie otwierać nowe okno. Link powinien prowadzić tam, dokąd wskazuje tekst. Niespodzianki w interfejsie podważają zaufanie i spowalniają użytkownika.

Tip: Nazywaj przyciski i linki dokładnie tym, co robią. 'Wyślij wiadomość' zamiast 'Dalej'. 'Otwórz w nowej karcie' zamiast samego linku, który otwiera się w nowej karcie bez ostrzeżenia. Jeśli link prowadzi do PDF, napisz '(PDF, 2.3 MB)'.
03

Odkrywalność Discoverability

Użytkownik powinien odkryć dostępne funkcje bez instrukcji. Jeśli w liście można swipować elementy, pokaż to wizualnie (np. delikatne przesunięcie pierwszego elementu). Ukryte funkcje, które działają tylko po kliknięciu prawym przyciskiem lub geście, są niewidoczne dla większości użytkowników.

Tip: Zrób inwentaryzację wszystkich funkcji w swoim produkcie i sprawdź, czy każda jest widoczna lub sugerowana wizualnie. Jeśli odkryłeś funkcję, której nowi użytkownicy nie znajdą bez instrukcji, dodaj wizualną podpowiedź.
04

Progresywne ujawnianie Progressive Disclosure

Pokazuj tylko to, co potrzebne w danym momencie, a resztę ujawniaj stopniowo. Zaawansowane filtry ukryj za 'Więcej opcji', szczegóły produktu za 'Pokaż więcej', zaawansowane ustawienia za osobną zakładką. Nie obciążaj początkującego użytkownika wszystkim naraz.

Tip: Podziel ustawienia na 'Podstawowe' (widoczne od razu) i 'Zaawansowane' (ukryte za kliknięciem). 80% użytkowników potrzebuje tylko podstawowych. Zaawansowani i tak wiedzą, gdzie szukać.
05

Widoczność statusu systemu System Status Visibility

Użytkownik powinien wiedzieć, w jakim stanie jest system: czy dane się zapisały, czy plik się uploaduje, ile procent procesu jest gotowe. Pasek postępu, toast z potwierdzeniem, zmiana statusu w nagłówku, to wszystko sygnały statusu.

Tip: Dla każdego procesu trwającego dłużej niż 2 sekundy dodaj informację o postępie (progress bar lub spinner z procentami). Dla procesów kończących się natychmiast dodaj toast z potwierdzeniem ('Zapisano', 'Wysłano', 'Usunięto').
06

Cofanie akcji Undo

Możliwość cofnięcia akcji zmniejsza lęk przed eksperymentowaniem i popełnianiem błędów. Gmail po usunięciu maila pokazuje 'Cofnij' na kilka sekund. Edytor tekstu ma Ctrl+Z. Każda destrukcyjna lub trudno odwracalna akcja powinna mieć mechanizm cofania.

Tip: Zamiast pytać 'Czy na pewno?' przed usunięciem (dialog potwierdzenia), pozwól usunąć od razu i pokaż toast z opcją 'Cofnij' przez 5-10 sekund. To szybsze, mniej inwazyjne i równie bezpieczne.
07

Mikrointerakcje Microinteractions

Mikrointerakcje to małe, subtelne animacje reagujące na akcje użytkownika: pulsujący przycisk, animacja checkmark po zapisaniu, bounce przy błędnej próbie logowania. Nie są kluczowe funkcjonalnie, ale budują poczucie jakości i responsywności interfejsu.

Tip: Dodaj mikrointerakcje do trzech kluczowych momentów: sukces (animacja checkmark), błąd (shake inputa), ładowanie (pulsujący skeleton). Nie przesadzaj z ilością. Trzy dobrze dobrane mikrointerakcje są lepsze niż animacja na każdym elemencie.

Powiązane kategorie

Chcesz wiedzieć więcej?

Sprawdź interakcje w swoim projekcie

Sprawdź Design Review Checklist →