Empty states we UX maslahatlar

1) Näme üçin boş ýagdaýlar gerek?

• näme üçin boşdygyny düşündirýär,
• näme etmelidigini görkezýär,
• howpsuz birinji ädim teklip edýär,
• aladany azaldýar we goldaw wagtyny tygşytlaýar.

2) Empty-ýagdaýlaryň tipologiýasy

1. Ilkinji gezek başlamak - ulanyjy entek hiç zat etmedi.
2. Maglumat ýok (zero data) - zatlar döredilmedi ýa-da sanaw boş.
3. Süzgüçler/gözleg (no results) - şertler hemme zady aýyrdy.
4. Hata/wagtlaýyn elýeterlilik - tor/serwer, ýöne maglumatlar prinsipde bar.
5. Hukuklar/çäklendirmeler ýok - girmek gadagan, KUS/rol/çäk talap edilýär.
6. Tehniki hyzmat - meýilleşdirilen işler, garaşmak.

3) Empty kartoçkasynyň gurluşy

Nyşan/illýustrasiýa (artykmaç ýüklemäň; kontrast ≥ AA).
Bir setirli sözbaşy: "Şu ýerde entek boş".
Sebäp/kontekst: "Siz entek goşmadyňyz" .../" Süzgüç gabat gelmedi ".
1-2 hereket (CTA): başlangyç (esasy ssenariýa), ikinji (alternatiw).
Kömek üçin link (goşmaça).
Sahypa derejesi: Adaty nawigasiýaňyzy we süzgüçleriňizi saklaň - ekrany duralga öwürmäň.

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) Äheň we tekst (UX-göçürmek)

Aýdyň we hoşniýetli. 0x hatasyndan gaça duruň....

Sebäp → Hereket. "VIP" süzgüç ähli ýazgylary aýyrdy. Süzgüçini täzelemelisiňizmi?"

Günäkär däl. Ulanyjyny boşlukda günäkärlemäň.
Bir pikir - bir söz.
Lokalizasiýa: medeni metaforalardan gaça duruň; tekstiň uzynlygynyň + 20-30% -ini goýuň.

5) Suratlar we wizual

Bitarap, göze görünmeýän; garaňky mowzukda suratlaryň ýagtylygyny ýokarlandyryň.
Illüstrasiýalary ýeke-täk many göteriji hökmünde ulanmaň.
Masştab kesgitlenildi; tor we esasy çyzygy döwmäň.

6) CTA we alternatiwalar

Başlangyç CTA - esasy indiki ädim (döretmek/depozit/gol çekmek).
Ikinjisi - "demo görüň", "import", "süzgüçleri taşlaň".
Saýlamak üçin çäk: 2 CTA-a çenli; galanlary - "Başga".
Töwekgelçiliklerde/töleglerde - netijeleri we ýatyrylmagy barada aç-açan tekst.

7) Ssenariler boýunça boş ýagdaýlar

7. 1 Ilkinji başlamak

3-5 ädimden ybarat "Töleg usulyny goşuň", "Üpjün edijini saýlaň".
"Sypdyrmak" düwmesi + gollanma baglanyşygy.

7. 2 Maglumat ýok

"Näme üçin boş" + CTA "Täze "/" Import" gysga düşündiriş.
Maslahat: "CSV ýükläp bolýar" (şablona baglanyşyk).

7. 3 Süzgüçler/gözlemek

Haýsy süzgüçleriň işjeňdigini we "Taşla" düwmesini görkeziň.
Ýakyn gabat gelişleri ýa-da alternatiw soraglary hödürläň.

7. 4 Ýalňyşlyk/Elýeterlilik

"Biz bir mesele bilen ýüzbe-ýüz bolduk. Soňra synap görüň" + "Gaýtala "/" Ulgamyň ýagdaýy".