Feedback UX în stări goale

1) Care sunt stările goale și de ce sunt necesare

O stare goală este un ecran/widget în care conținutul principal este absent temporar: înainte de prima acțiune, după curățare, cu un rezultat zero, cu o eroare de descărcare, fără drepturi/acces.

• explică „de ce este gol aici”;
• arată valoarea secțiunii;
• Sugerează un pas clar următor (sau mai mult pentru a alege de la)
• reducerea anxietății și prevenirea îngrijirii.

Stare goală bună = context + beneficiu + acțiune.

2) Tipologia de stat goală

1. prima dată gol-Utilizatorul nu a creat/configurat nimic încă.
2. Zero Search/Filter: interogarea nu a returnat niciun rezultat.
3. Vid temporar: Datele sunt încărcate sau coada rulează.
4. Restricție/drept: fără acces, nivel de verificare insuficient.
5. Utilizator eliminat: Recycle Bin/Istoric eliminat.
6. Problemă tehnică: defecțiuni de rețea/service, retray.

3) Principii de proiectare

Contextualitate: vorbim despre un motiv specific pentru gol.
Valoare → acțiune: mai întâi de ce această secțiune, apoi ce să faceți.
Un CTA principal: dacă este necesar - secundar (aflați mai multe/Întrebări frecvente).
Brevitate și specificitate: 1-2 propoziții + buton clar.
Suport vizual: pictograma/ilustrația acceptă sensul, nu distrage atenția.
Evitarea fundăturilor: Există întotdeauna o cale de urmat.
Consistența tonului: prietenos și calm; nici o glumă în pași critici (plăți, securitate).
A11y și localizare: poate fi citit de cititorul de ecran, înclinat corect, ia în considerare lungimea liniilor.

4) cadru de stat gol (șablon)

Titlu (opțional, 1 linie) - Valoare de revendicare sau motiv.
Text (1-2 propoziții) - „de ce este gol” + „ce urmează”.
CTA primar este principala acțiune țintă.
ACS secundar/link - ajutor/reguli/documentație.
Vizual (opțional) - ilustrare ușoară de 24-96 px, nu se supraîncarcă.

5) Modele scriptate

5. 1 Onboarding/primul zero

Scopul: să conducă la prima acțiune de succes.
Text: „Pentru a vedea recomandările personalizate, completați un profil și selectați conduce”.
CTA: Populați profilul/Selectați conduce.
Sfat: Adăugați un indicator micro forță/timp: „Va dura ~ 1 minut”.

5. 2 Căutare/filtre = rezultat zero

Scop: Ajutați la ajustarea cererii.

Text: „Nimic găsit pe „blackjack live. „Încercaţi „blackjack” sau eliminaţi „Furnizor: X „filtru”

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

5. 3 Plăți/portofel gol

Obiectiv: stimularea adăugării metodei/primei reaprovizionări.
Text: „Salvați metoda de plată - reumplerile și retragerile vor merge mai repede”.
CTA: „Adăugați metoda de plată” secundar: „Reguli și taxe”.

5. 4 Verificare/acces

Scop: explicați transparent restricția și ruta de retragere.

Text: "Această secțiune este disponibilă după confirmarea identității. De obicei durează până la 2 minute"

CTA: „Get Verified” secundar: „De ce este necesar?”

5. 5 Date în tranzit/vid temporar

Scopul: de a reduce anxietatea de așteptare.

Text: "Colectarea datelor. Acest lucru durează de obicei până la 30 de secunde. Puteți lăsa o pagină - vă vom anunța când totul este gata"

CTA: „De înțeles” secundar: „Ce se întâmplă în continuare?”

5. 6 După curățare/îndepărtare

Scopul este de a confirma acțiunea și de a sugera următorul pas.

Text: "Istoria a fost ștearsă. Noi tranzacții vor apărea după următoarea reumplere"

„Reîncarcă-te”.

5. 7 Eroare/Retray

Scopul: o cale clară de recuperare.

Text: "Nu a reușit să încarce date. Verificați rețeaua sau încercați din nou"

CTA: „Repetați” secundar: „Starea sistemului”.

6) Microtexte: șabloane gata făcute

• "Jocurile selectate vor apărea aici atunci când adăugați primul. [Adaugă la favorite]"

• "Nimic nu a fost găsit pentru "{query}" Rafinați cererea sau resetați filtrele. [Resetare filtre]"

• "Nu aveți încă metode salvate. Adăugați un card sau un portofel pentru a accelera plățile. [Adăugare metodă]"

• "Caracteristica nu este disponibilă fără confirmarea vârstei. Durează ~ 2 minute. [Confirmă vârsta] [De ce?]"

• "Numărăm statisticile pentru ultimele 24 de ore... Acest lucru este, de obicei, de până la 30 de secunde. Vă vom arăta o notificare atunci când ați terminat"

• "Serviciul nu este disponibil. Deja reparăm. Încercați mai târziu sau verificați starea. [Repetă] [Starea sistemului]"

7) Limbaj vizual și ilustrații

Utilizați ilustrații monocrome/cu două tonuri pentru a evita argumentarea cu CTA.
Dimensiuni și liniuțe - ca un card de conținut (consistență vizuală).
Nu descrie scene umoristice în scenarii stresante (plată/securitate).

8) Localizare și disponibilitate

Pune stoc pentru lungimea liniilor (DE/TR mai mult).
Traduceți formate numerice, valută, date la nivel local.
Pentru cititorii de ecran: rol = „stare”, aria-live = „politicos/asertiv” pentru dinamică.
Nu puneți înțeles numai în imagine: duplicați cu text.
Verificați lizibilitatea 320 px și contrastul WCAG.

9) Măsurători și experimente

• CTR pe principalul CTA gol;
• conversia la „primul succes” (eveniment de activare);
• Timpul până la prima acțiune
• frecvența de întoarcere la ecran fără progres;
• Procentul de rezultate de căutare zero
• solicită sprijin pentru scenarii.

• un antet specific vs comun;
• Verb de acțiune CTA vs neutru;
• Adăugarea unei estimări de timp
• prezența unui CTA secundar (FAQ) și ordinea butoanelor;
• ilustrație vs pictogramă vs fără vizual.

10) Anti-modele

„Aici este gol” fără explicații sau pas.
Glume în pași critici (plată, securitate).
One Learn More CTA without context.
Passive lien: "trebuie adăugat. "Scrie activ: "Adaugă"...
Paragrafe lungi: 1-2 propoziții maxime.
Înlocuitor în loc de etichetă în forme - înrăutățește A11y și înțelegerea.
Constrângeri ascunse („instantanee”, deși întârzierea este posibilă).

11) Lista de verificare înainte de lansare

Este clar de ce este gol?

• Există valoare pentru secțiunea într-o singură propoziție?
• Există un CTA principal și, dacă este necesar, unul secundar?

Textul este scurt (≤ 140 caractere) și specific?

• Adăugat timp/efort estimare dacă este cazul?
• Ton meciuri script (calm/susținere)?
• Localizare și A11y verificate (atribute aria, contrast)?
• Imaginea nu domină CTA?

12) Înainte/după exemple

Catalog Jocuri (Primul Zero)

Înainte: „Nu este nimic aici încă”

După: "Colecta banda. Alege 3 genuri preferate - să începem să recomandăm. [Alege genuri]"

Căutare zero

Înainte: „Nu s-a găsit nimic”

După: "Prin "ruleta high-limit" nu există rezultate. Eliminați filtrul "High-limit" sau încercați "ruletă. „[Resetare filtre]”

Plăți

Înainte: „Fără metode de plată”

După: "Salvați cardul sau portofelul - reaprovizionarea și retragerea vor deveni mai rapide. [Adăugați metoda] [Taxe și termeni]"

Verificare

Înainte: „Fără acces”

După: "Secțiunea este disponibilă după confirmarea identității. Durează ~ 2 minute. [Verificaţi] [De ce contează]"

13) Încorporarea într-un sistem de proiectare

• „titlu” (șir, opțional)
• „corp” (text scurt 1-2 propoziții)
• 'primaryAction {etichetă, onClick}'
• 'licealAction {etichetă, href/onClick}'
• „icon/ilustrare” (opţional)

Stocați textele în fișierele i18n de lângă componentă, mențineți tastele și descrierile, conectați tonul-hartă (ton și lexicon pentru situații).

14) Constructor rapid (copiere și utilizare)

• Titlu: „Începeţi cu primul pas”
• Text: „Vor fi recomandări aici de îndată ce alegeți interese”.
• CTA: „Selectați conduce”
• Secundar: „Cum funcționează?”

• Text: "Nimic nu a fost găsit prin "{query}" Resetați filtrele sau rafinați interogarea"
• CTA: „Resetarea filtrelor”
• Secundar: „Catalog”

• Text: "Caracteristică disponibilă după confirmarea vârstei. Este de obicei de până la 2 minute"
• CTA: „Confirmă vârsta”
• Secundar: „De ce este necesar?”

• Text: "Colectăm date pentru a doua zi. Acest lucru este, de obicei, de până la 30 de secunde. Te anunţăm când se termină"
• CTA: „Bun”

Foaie de trișat finală

Context + valoare + acțiune - într-o singură „stivă”.
Un CTA principal fără concurență în greutate vizuală.
Scurt și specific: 1-2 propoziții.
Întotdeauna calea de ieșire din impas: nici ecrane mort-end.
Localizarea și A11y sunt la nivelul componentelor.