Empty states və UX ipuçları

1) Niyə boş dövlətlər lazımdır

• niyə boş olduğunu izah edir,
• bundan sonra nə edəcəyini göstərir,
• təhlükəsiz ilk addım təklif edir,
• narahatlığı azaldır və dəstək vaxtına qənaət edir.

2) Empty-halların tipologiyası

1. İlk başlanğıc (ilk dəfə) - istifadəçi hələ heç nə etməyib.
2. Heç bir məlumat (zero data) - mahiyyət yaradılmamışdır və ya siyahı boşdur.
3. Filtrlər/axtarış (no results) - şərtlər hər şeyi istisna etdi.
4. Səhv/Müvəqqəti əlçatmazlıq - şəbəkə/server, lakin məlumatlar prinsipcə mövcuddur.
5. Heç bir hüquq/məhdudiyyət yoxdur - giriş qadağandır, KUS/rol/limit tələb olunur.
6. Texniki xidmət - planlı iş, gözləmə.

3) Kart strukturu empty

İkona/illüstrasiya (həddindən artıq yüklənməyin; kontrast ≥ AA).
Başlıq bir sətirdir: «Burada hələ boşdur».
Səbəb/Kontekst: «Hələ əlavə etməmisiniz» .../« Filter heç bir uyğunluq tapmadı ».
1-2 hərəkət (CTA): birincili (əsas ssenari), ikincili (alternativ).
Kömək üçün link (isteğe bağlı).
Səhifə səviyyəsi: adi naviqasiya və filtrləri saxlayın - ekranı dalana çevirməyin.

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 və mətn (UX-kopyalama)

Aydın və mehriban. «0x səhv» qaçın....

Səbəb → fəaliyyət. «VIP» filtri bütün qeydləri istisna etdi. Süzgəci sıfırlamaq?"

Günahsız. İstifadəçini boşluqda günahlandırmayın.
Bir fikir - bir cümlə.
Lokalizasiya: mədəni metaforalardan çəkinin; mətn uzunluğu + 20-30% qoyun.

5) Şəkil və vizual

Neytral, görünməz; dark mövzuda illüstrasiyaların işıqlığını artırın.
Yalnız məna daşıyıcısı kimi illüstrasiyalardan istifadə etməyin.
Miqyaslı sabit; grid və baza xəttini sındırmayın.

6) CTA və alternativlər

Birincil CTA əsas növbəti addımdır (yaratmaq/depozit/abunə).
İkincili - «demo bax», «idxal», «filtrləri sıfırla».
Seçim limiti: 2 CTA-ya qədər; qalanları - «Başqa».
Risklər/ödənişlər zamanı - nəticələr və ləğv haqqında şəffaf mətn.

7) Ssenarilər üzrə boş hallar

7. 1 ilk başlanğıc

3-5 addımdan Hyde Checklist: «Ödəniş üsulunu əlavə edin», «Provayderi seçin».
«Atla» düyməsi + bələdçi linki.

7. 2 Məlumat yoxdur

Qısa izahat «niyə boş» + CTA «Yeni »/« İdxal».
İpucu: «CSV yükləyə bilərsiniz» (şablona link).

7. 3 Filtrələr/axtarış

Aktiv olan filtrləri və «Sıfırla» düyməsini göstərin.
Yaxın təsadüflər və ya alternativ sorğular təklif edin.

7. 4 Səhv/əlçatmazlıq

"Bir problemlə üzləşdik. Daha sonra cəhd edin" + "Təkrarla "/" Sistem statusu".