Empty states va UX maslahatlar

1) Nima uchun bo’sh holatlar kerak?

• Nima uchun boʻsh ekanligini tushuntiradi
• Bundan keyin nima qilish kerakligini koʻrsatadi
• xavfsiz birinchi qadamni taklif qiladi,
• tashvishni kamaytiradi va qo’llab-quvvatlash vaqtini tejaydi.

2) Empty-holatlar tipologiyasi

1. Birinchi ishga tushirish - foydalanuvchi hali hech narsa qilmagan.
2. Maʼlumot yoʻq (zero data) - mohiyat yaratilmagan yoki roʻyxat boʻsh.
3. Filterlar/qidirish (no results) - hamma narsani istisno qildi.
4. Xato/vaqtinchalik foydalanish imkoniyati - tarmoq/server, lekin maʼlumotlar printsipial jihatdan mavjud.
5. Huquqlar/cheklovlar mavjud emas - kirish taqiqlangan, KTS/rol/limit talab qilinadi.
6. Texnik xizmat ko’rsatish - rejali ishlar, kutish.

3) Empty kartochkasining tuzilmasi

Ikonka/rasm (ortiqcha yuklamaslik; kontrast ≥ AA).
Sarlavha bitta satrda: «Bu yerda hali boʻsh».
Sababi/konteksti: «Siz hali qoʻshmagan» .../« Filter hech qanday mos kelmadi ».
1-2 harakat (CTA): birlamchi (asosiy stsenariy), ikkilamchi (muqobil).
Yordam uchun link (ixtiyoriy).
Sahifa darajasi: odatdagi navigatsiya va filtrlarni saqlang - ekranni boshi berk ko’chaga aylantirmang.

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 va matn (UX-nusxa ko’chirish)

Aniq va samimiy. «0x xatosi» dan qoching....
Sababi → amal. «VIP» filtri barcha yozuvlarni chiqarib tashladi. Filterni oʻchirishni istaysizmi?
Aybsiz. Foydalanuvchini boʻshliqda ayblamang.
Bitta fikr - bitta jumla.
Mahalliylashtirish: madaniy metaforalardan qoching; matn uzunligining + 20-30% ni belgilang.

5) Rasmlar va vizual

Neytral, ko’rinmas; dark mavzuda rasmlarning yorqinligini oshiring.
Rasmlarni yagona maʼno manbai sifatida ishlatmang.
Masshtab belgilangan; toʻr va asosiy chiziqni buzmang.

6) CTA va muqobillari

Birlamchi CTA - asosiy keyingi qadam (yaratish/depozit/imzolash).
Ikkilamchi - «demo ko’rish», «import», «filtrlarni yo’q qilish».
Tanlash limiti: 2 ta CTAgacha; qolganlari «Yana» da.
Tavakkalchiliklarda/to’lovlarda - oqibatlari va bekor qilinishi to’g "risidagi shaffof matn.

7) Ssenariylar bo’yicha bo’sh holatlar

7. 1 Birinchi ishga tushirish

3-5 qadamdan iborat «To’lov usulini qo’shing», «Provayderni tanlang».
«Oʻtkazib yuborish» tugmasi + qoʻllanmaga havola.

7. 2 Maʼlumot yoʻq

«Nima uchun boʻsh» + CTA «Yaratish »/« Import qilish» qisqacha izohi.
Maslahat: «CSV’ni yuklab olish mumkin».

7. 3 Filterlar/qidirish

Qaysi filtrlar faol ekanligini koʻrsating va «Olib tashlash» tugmasini bosing.
Yaqin tasodiflar yoki muqobil soʻrovlarni taklif qiling.

7. 4 Xato/mavjud emas

"Biz muammoga duch keldik. Keyinchalik" + "Takrorlash "/" Tizim holati" dan foydalaning.