Stări goale și sugestii UX

1) De ce sunt necesare stări goale

• explică de ce gol,
• arată ce să facă în continuare,
• oferă un prim pas sigur,
• reduce anxietatea și economisește timp de sprijin.

2) Tipologia stărilor goale

1. Prima dată - utilizatorul nu a făcut nimic încă.
2. Zero date - Entitățile nu sunt create sau lista este goală.
3. Filtre/căutare (fără rezultate) - condiții excluse toate.
4. Eroare/indisponibilitate temporară - rețea/server, dar datele sunt în principiu.
5. Nici un drept/restricție - accesul interzis, QAS/rol/limită necesară.
6. Întreținere - lucrări planificate, în așteptare.

3) Structura cărții goale

Pictogramă/ilustrație (nu se supraîncarcă; contrast ≥ AA).
Titlu dintr-o linie: „Aici este încă gol”.

Motivul/contextul: "Nu ați adăugat încă... "/" Filtrul nu a găsit potriviri "

1-2 acțiuni (CTA): primar (scenariu principal), secundar (alternativ).
Link către salvare (opțional).
Nivelul paginii: păstrați navigarea obișnuită și filtrele - nu transformați ecranul într-o fundătură.

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 text (copywriting UX)

În mod clar și cu amabilitate. Evitați „Eroare 0x”....
Motiv → acţiune. "Filtrul VIP a exclus toate intrările. Doriți să resetați filtrul?
Fără vină. Nu da vina pe utilizator pentru gol.
Un gând, o propoziţie.
Localizare: Evitați metaforele culturale; semn de carte + 20-30% din lungimea textului.

5) Ilustrații și vizuale

Neutru, discret; în tema întunecată, crește ușurința ilustrațiilor.
Nu folosiți ilustrațiile ca singurul mediu de semnificație.
Scala este fixă; Nu rupeţi grila sau linia de bază.

6) CTA și alternative

CTA primară este pasul următor principal (creare/depunere/abonare).
Secundar - „vezi demo”, „import”, „reset filters”.
Limita de selecție: până la 2 CTA; restul este în „More”.
Cu riscuri/plăți - text transparent despre consecințe și anulare.

7) Stări goale după scenariu

7. 1 Prima rulare

Lista de verificare Hyde de 3-5 pași: „Adăugați o metodă de plată”, „Alegeți un furnizor”.
Skip butonul + link-ul de ghid.

7. 2 Nu există date

O scurtă explicație de ce este gol + CTA Creare/Import.
Indiciu: „Puteți încărca CSV” (link către șablon).

7. 3 Filtre/căutare

Afișați ce filtre sunt active și butonul „Reset”.
Sugerează închiderea meciurilor sau interogări alternative.

7. 4 Eroare/indisponibilitate

"Ne - am confruntat cu o problemă. Încercați din nou mai târziu" + "Încercați din nou "/" Starea sistemului "