Informacje zwrotne UX w pustych stanach

1) Jakie są puste stany i dlaczego są one potrzebne

Pusty stan to ekran/widżet, w którym główna zawartość jest tymczasowo nieobecna: przed pierwszą akcją, po czyszczeniu, z zerowym wynikiem, z błędem pobierania, bez praw/dostępu.

• wyjaśnić „dlaczego tutaj jest pusty”;
• pokazać wartość sekcji;
• Zaproponuj wyraźny kolejny krok (lub więcej do wyboru)
• zmniejszyć lęk i zapobiec uwodzeniu.

Dobry stan pusty = kontekst + korzyść + działanie.

2) Typologia stanu pustego

1. pierwszy raz pusty-Użytkownik nie stworzył/nie skonfigurował jeszcze niczego.
2. Zero Search/Filter: Zapytanie nie zwróciło żadnych wyników.
3. Tymczasowa nieważność: Dane są ładowane lub uruchomiona kolejka.
4. Ograniczenie/prawo: brak dostępu, niewystarczający poziom weryfikacji.
5. Użytkownik oczyszczony: Recycle Bin/History Cleared.
6. Problem techniczny: awaria sieci/usługi, przekwalifikowanie.

3) Zasady projektowania

Kontekst: mówimy o konkretnej przyczynie pustki.
Wartość → działanie: najpierw dlaczego ta sekcja, a następnie co robić.
Jedna główna CTA: w razie potrzeby - drugorzędna (dowiedz się więcej/FAQ).
Zwięzłość i specyficzność: 1-2 zdania + jasny przycisk.
Wsparcie wizualne: ikona/ilustracja wspiera znaczenie, nie odwraca uwagi.
Unikanie ślepych zaułków: zawsze jest droga do przodu.
Konsystencja tonów: przyjazny i spokojny; nie żartuje w krytycznych krokach (płatności, bezpieczeństwo).
A11y i lokalizacja: czytelny przez czytnik ekranu, prawidłowo nachylony, uwzględnia długość linii.

4) Pusta ramka stanu (szablon)

Tytuł (opcjonalny, 1 wiersz) - Wartość lub powód roszczenia.
Tekst (zdanie 1-2) - „dlaczego jest pusty” + „co dalej”.
Podstawowym celem jest CTA.
Wtórny ACS/link - pomoc/zasady/dokumentacja.
Wizualne (opcjonalne) - łatwa ilustracja 24-96 px, nie przeciążać.

5) Skryptowane wzory

5. 1 Wejście na pokład/pierwsze zero

Cel: doprowadzić do pierwszego udanego działania.
Tekst: „Aby zobaczyć spersonalizowane zalecenia, wypełnij profil i wybierz wskazówki”.
CTA: Profil zaludnienia/Wybierz wskazówki.
Wskazówka: Dodaj mikro siłę/wskaźnik czasu: „Zajmie to ~ 1 minutę”.

5. 2 Wyszukiwanie/filtry = wynik zerowy

Cel: Pomoc w dostosowaniu żądania.

Tekst: „Nic nie znaleziono na żywo „blackjack. „Spróbuj „blackjacka” lub usunąć „Dostawca: X „filtr”

CTA: „Reset Filters” secondary: „Open Directory”.

5. 3 Płatności/portfel pusty

Cel: stymulowanie dodawania/pierwszego uzupełniania metody.
Tekst: „Zapisz swoją formę płatności - uzupełnienia i wypłaty pójdą szybciej”.
CTA: „Dodaj formę płatności” drugorzędne: „Zasady i opłaty”.

5. 4 Weryfikacja/dostęp

Cel: przejrzyste wyjaśnienie ograniczenia i drogi wycofania.

Tekst: "Ta sekcja jest dostępna po potwierdzeniu tożsamości. Zwykle trwa do 2 minut"

CTA: „Get Verified” secondary: „Dlaczego jest to konieczne?”

5. 5 Dane w tranzycie/tymczasowa nieważność

Cel: zmniejszyć lęk czekania.

Tekst: "Zbieranie danych. Zwykle trwa to do 30 sekund. Możesz zostawić stronę - powiadomimy Cię, kiedy wszystko będzie gotowe"

CTA: „Zrozumiałe” wtórne: „Co będzie dalej?”

5. 6 Po czyszczeniu/usunięciu

Celem jest potwierdzenie działania i zaproponowanie kolejnego kroku.

Tekst: "Historia oczyszczona. Nowe transakcje pojawią się po następnym uzupełnieniu"

CTA: „Doładuj”.

5. 7 Błąd/przekaźnik

Cel: jasna droga powrotu do zdrowia.

Tekst: "Nie udało się wczytać danych. Sprawdź swoją sieć lub spróbuj ponownie"

CTA: „Powtarzać” wtórne: „Status systemu”.

6) Mikrotekty: gotowe szablony

• "Wybrane gry pojawią się tutaj, gdy dodasz pierwszą. [Dodaj do ulubionych]"

• "Nic nie znaleziono dla "{zapytanie}" Dopracuj żądanie lub zresetuj filtry. [Zresetuj filtry]"

• "Nie masz jeszcze żadnych zapisanych metod. Dodaj kartę lub portfel, aby przyspieszyć płatności. [Dodaj metodę]"

• "Funkcja nie jest dostępna bez potwierdzenia wieku. To zajmie ~ 2 minuty. [Potwierdź wiek] [Dlaczego?]"

• "Liczymy statystyki za ostatnie 24 godziny... To zwykle do 30 sekund. Pokażemy ci powiadomienie, gdy skończysz"

• "Usługa jest niedostępna. Już naprawiamy. Spróbuj później lub sprawdź status. [Powtórz] [Status systemu]"

7) Język wizualny i ilustracje

Użyj ilustracji światła monochromatycznego/dwudźwiękowego, aby uniknąć kłótni z CTA.
Wymiary i tiret - jak karta treści (konsystencja wizualna).
Nie przedstawiaj humorystycznych scen w stresujących scenariuszach (płatność/bezpieczeństwo).

8) Lokalizacja i dostępność

Umieścić zapasy na długości linii (DE/TR dłużej).
Tłumacz formaty numeryczne, waluta, daty lokalnie.
Dla czytników ekranu: rola = „status”, aria-live = „grzeczny/asertywny” dla dynamiki.
Nie umieścić znaczenia tylko na obrazku: duplikat z tekstem.
Sprawdź czytelność 320 px i kontrast WCAG.

9) Metryki i eksperymenty

• CTR na głównym pustym CTA;
• konwersja na „pierwszy sukces” (wydarzenie aktywacyjne);
• Czas na pierwsze działanie
• częstotliwość powrotu na ekran bez postępu;
• Procent zerowych wyników wyszukiwania
• wzywa do wsparcia scenariusza.

• specyficzny nagłówek vs common header;
• Czasownik akcji CTA vs neutralny;
• Dodanie oszacowania czasu
• obecność wtórnej CTA (FAQ) oraz kolejność przycisków;
• ilustracja vs ikona vs bez wizualnego.

10) Anty-wzory

„Tutaj jest pusty” bez wyjaśnienia lub kroku.
Żarty w krytycznych krokach (płatność, bezpieczeństwo).
Jeden Dowiedz się więcej CTA bez kontekstu.
Zastawa pasywna: "należy dodać. "Napisz aktywnie: "Dodaj"...
Długie akapity: maksymalnie 1-2 zdania.
Łożysko zamiast etykiety w formach - pogarsza A11y i zrozumienie.
Ukryte ograniczenia („chwilowe”, choć możliwe jest opóźnienie).

11) Lista kontrolna przed zwolnieniem

• Jest jasne, dlaczego jest pusty?
• Czy istnieje wartość do sekcji w jednym zdaniu?
• Czy istnieje jeden główny CTA i, w razie potrzeby, drugorzędny?
• Czy tekst jest krótki (≤ 140 znaków) i specyficzny?
• W stosownych przypadkach dodany czas/szacunek nakładu?
• Ton pasuje do skryptu (spokojny/wspierający)?
• Lokalizacja i A11y sprawdzone (atrybuty aria, kontrast)?
• Obraz nie dominuje CTA?

12) Przykłady przed/po

Katalog gier (pierwsze zero)

Przed: „Tu jeszcze nic nie ma”

Po: "Zbierz swoją taśmę. Wybierz 3 ulubione gatunki - zacznijmy polecać. [Wybierz gatunki]"

Zero wyszukiwania

Przed: „Nic nie znaleziono”

Po: "Przez "high-limit ruletka" nie ma wyników. Usuń filtr "High-limit" lub spróbuj "ruletka. „[Zresetuj filtry]”

Płatności

Przed: „Brak metod płatności”

Po: "Zapisz kartę lub portfel - uzupełnienie i wypłata będzie szybsze. [Dodaj metodę] [Opłaty i warunki]"

Weryfikacja

Przed: „Brak dostępu”

Po: "Sekcja jest dostępna po potwierdzeniu tożsamości. To zajmuje ~ 2 minuty. [Poddaj się weryfikacji] [Dlaczego to ma znaczenie]"

13) Wbudowanie w system projektowania

• „title” (ciąg, opcjonalnie)
• „body” (krótki tekst 1-2 zdania)
• „prim, Action {label, onClick}”
• „Działanie {etykieta, href/onClick}”
• „ikona/ilustracja” (opcjonalnie)

Przechowuj teksty w plikach i18n obok komponentu, utrzymuj klucze i opisy, podłącz tone-map (ton i leksykon dla sytuacji).

14) Szybki konstruktor (kopiowanie i używanie)

• Nagłówek: „Zacznij od pierwszego kroku”
• Tekst: „Będą tu rekomendacje, jak tylko wybierzesz interesy”.
• CTA: „Wybierz wskazówki”
• Wtórne: „Jak to działa?”

• Tekst: "Nic nie znaleziono przez "{query}" Zresetuj filtry lub dopracuj zapytanie"
• CTA: „Zresetuj filtry”
• Drugorzędny: „Katalog”

• Tekst: "Funkcja dostępna po potwierdzeniu wieku. Zwykle do 2 minut"
• CTA: „Potwierdzenie wieku”
• Wtórne: „Dlaczego jest to konieczne?”

• Tekst: "Zbieramy dane na dany dzień. To zwykle do 30 sekund. Damy ci znać, kiedy to się skończy"
• CTA: „Dobrze”

Końcowy arkusz oszustwa

Kontekst + wartość + działanie - w jednym „stosie”.
Jeden główny CTA bez konkurencji w wadze wizualnej.
Krótkie i szczegółowe: 1-2 zdania.
Zawsze wyjście z impasu: bez ślepych ekranów.
Lokalizacja i A11y są na poziomie komponentów.