Puste stany i wskazówki UX

1) Dlaczego puste stany są potrzebne

• wyjaśnia dlaczego puste,
• pokazuje, co dalej robić,
• oferuje bezpieczny pierwszy krok,
• zmniejsza lęk i oszczędza czas wsparcia.

2) Typologia pustych stanów

1. Pierwszy raz - użytkownik jeszcze nic nie zrobił.
2. Zero danych - Podmioty nie są tworzone lub lista jest pusta.
3. Filtry/wyszukiwanie (brak wyników) - warunki wyłączone wszystkie.
4. Błąd/tymczasowa niedostępność - sieć/serwer, ale dane są zasadniczo.
5. Brak praw/ograniczeń - odmowa dostępu, wymagany QAS/rola/limit.
6. Konserwacja - planowana praca, czekanie.

3) Pusta struktura karty

Ikona/ilustracja (nie przeciążać; kontrast ≥ AA).
Jeden nagłówek: „Tu wciąż jest pusty”.

Powód/kontekst: "Jeszcze nie dodano... Filtr nie znalazł dopasowania

1-2 działania (CTA): podstawowe (główny scenariusz), drugorzędne (alternatywne).
Link do ratownictwa (opcjonalnie).
Poziom strony: zachowaj zwykłą nawigację i filtry - nie zmieniaj ekranu w ślepy zaułek.

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4) Ton i tekst (kopiowanie UX)

Wyraźnie i uprzejmie. Unikaj „błędu 0x”....
Powód → działanie. "Filtr VIP wykluczył wszystkie wpisy. Chcesz zresetować filtr?
Bez poczucia winy. Nie obwiniaj użytkownika za pustkę.
Jedna myśl, jedno zdanie.
Lokalizacja: Unikaj metafor kulturowych; zakładka + 20-30% długości tekstu.

5) Ilustracje i wizualne

Neutralne, dyskretne; w ciemnym motywie, zwiększyć lekkość ilustracji.
Nie używaj ilustracji jako jedynego medium znaczeniowego.
Skala jest ustalona; Nie łamać siatki ani linii wyjściowej.

6) CTA i alternatywy

Podstawowy CTA jest głównym kolejnym krokiem (utwórz/złóż/subskrybuj).
Drugorzędne - „see demo”, „import”, „reset filters”.
Limit wyboru: do 2 CTA; Reszta jest w „Więcej”.
Z ryzykiem/płatnościami - przejrzysty tekst o konsekwencjach i anulowaniu.

7) Puste stany według scenariusza

7. 1 Pierwszy bieg

Lista kontrolna Hyde 3-5 kroków: „Dodaj formę płatności”, „Wybierz dostawcę”.
Pomiń przycisk + link przewodnik.

7. 2 Brak danych

Krótkie wyjaśnienie dlaczego jest pusty + CTA Create/Import.
Wskazówka: „Można załadować CSV” (link do szablonu).

7. 3 filtry/wyszukiwanie

Pokaż, które filtry są aktywne i przycisk „Resetuj”.
Sugeruj bliskie spotkania lub alternatywne pytania.

7. 4 Błąd/niedostępność

"Stanęliśmy w obliczu problemu. Spróbuj ponownie później" + "Retry "/" Status systemu "