UX fidbek boʻsh holatda

1) Boʻsh holatlar nima va ular nima uchun zarur?

Boʻsh holat - bu ekran/vidjet boʻlib, u yerda asosiy tarkib vaqtincha mavjud emas: birinchi harakatdan oldin, tozalangandan keyin, nol natijada, yuklashda xato roʻy berganda, huquqlar/kirish imkoni boʻlmaganda.

• «bu yerda nima uchun bo’sh» deb tushuntirish;
• bo’limning qiymatini ko’rsatish;
• keyingi aniq qadamni (yoki tanlash uchun bir nechta) taklif qilish;
• tashvishni kamaytirish va parvarish qilishning oldini olish.

Yaxshi boʻsh holat = kontekst + foyda + harakat.

2) Bo’sh holatlar tipologiyasi

1. Birlamchi nol (birinchi vaqt empty): foydalanuvchi hali hech narsa yaratmagan/sozlamagan.
2. Nol qidirish/filtr: soʻrov natija bermadi.
3. Vaqtinchalik boʻshliq: maʼlumotlar yuklanmoqda yoki navbat bajarilmoqda.
4. Cheklov/huquq: kirish imkoniyati yoʻq, tekshirish darajasi yetarli emas.
5. Foydalanuvchi tomonidan tozalangan: chiqindilar qutisi/tarix tozalangan.
6. Texnik nosozlik: tarmoq/servis nosozligi, retray.

3) Dizayn prinsiplari

Kontekstlik: biz bo’shliqning aniq sababi haqida gapiramiz.
Qiymat → harakat: avval nima uchun bu bo’lim, keyin nima qilish kerak.
Bitta bosh CTA: zarur hollarda - ikkilamchi (learn more/FAQ).
Qisqacha va aniq: 1-2 jumla + aniq tugma.
Vizual tayanch: ikona/rasm ma’noni qo’llab-quvvatlaydi, chalg’itmaydi.
Boshi berk ko’chalarning oldini olish: har doim oldinga yo’l bor.
Ohangning uyg’unligi: do’stona va xotirjam; tanqidiy qadamlarda hazilsiz (to’lovlar, xavfsizlik).
A11y va lokalizatsiya: skrining yordamida oʻqiladi, toʻgʻri moyil boʻladi, satrlarning uzunligini hisobga oladi.

4) Bo’sh holat karkasi (shablon)

Sarlavha (opsional, 1 satr) - qadriyat yoki sababni tasdiqlash.
Matn (1-2 jumla) - «nima uchun bo’sh» + «keyingi nima».
Birlamchi CTA - asosiy maqsadli harakat.
Ikkilamchi STA/havola - yordam/qoidalar/hujjatlar.
Vizual (ixtiyoriy) - 24-96 px, ortiqcha yuklamaslik uchun oson illyustratsiya.

5) Ssenariylar bo’yicha patternlar

5. 1 Onbording/birinchi nol

Maqsad: birinchi muvaffaqiyatli harakatga olib kelish.

Matn: «Shaxsiy tavsiyalarni koʻrish uchun profilni toʻldiring va qiziqishlarni tanlang.»

CTA: «Profil to’ldirish »/« Manfaatlarni tanlash».
Maslahat: kuch/vaqt mikro-indikatorini qo’shing: «Bu ~ 1 daqiqa davom etadi».

5. 2 Qidirish/filtrlar = nol natija

Maqsad: soʻrovni tuzatishga yordam berish.

Matn: «Live blackjack» orqali hech narsa topilmadi. "Blackjack" dan foydalaning yoki "Provayder: X "filtrini olib tashlang"

CTA: «Filtrlarni olib tashlash» ikkinchi darajali: «Katalogni ochish».

5. 3 To’lovlar/hamyon bo’sh

Maqsad: usulni qo’shish/birinchi to’ldirishni rag’batlantirish.

Matn: «To’lov usulini saqlab qoling - to’ldirish va xulosalar tezroq o’tadi.»

CTA: «To’lov usuli qo’shilsin» ikkilamchi: «Qoidalar va komissiyalar».

5. 4 Verifikatsiya/kirish

Maqsad: cheklovni va olib tashlash usulini shaffof tushuntirish.

Matn: "Ushbu bo’lim shaxsni tasdiqlaganidan so’ng mavjud. Odatda 2 daqiqagacha davom etadi"

CTA: «Tekshiruvdan o’tish» ikkinchi darajali: «Nima uchun kerak?»

5. 5 Yo’ldagi ma’lumotlar/vaqtinchalik bo’shliq

Maqsad: kutish tashvishini kamaytirish.

Matn: "Sizning ma’lumotlaringizni yig’ayapmiz. Odatda 30 soniyagacha davom etadi. Sahifani qoldirsangiz, hamma narsa tayyor bo’lganda xabar beramiz"

CTA: «Tushunarli» ikkinchi darajali: «Bundan keyin nima bo’ladi?»

5. 6 Tozalash/olib tashlashdan keyin

Maqsad: harakatni tasdiqlash va keyingi qadamni taklif qilish.

Matn: "Tarix tozalangan. Yangi operatsiyalar keyingi to’ldirishdan keyin paydo bo’ladi"

CTA: «Hisob raqami to’ldirilsin».

5. 7 Xato/retraj

Maqsad: qayta tiklashning aniq yo’li.

Matn: "Maʼlumotlarni yuklab boʻlmadi. Tarmoqni tekshiring yoki yana urinib koʻring"

CTA: «Takrorlash» ikkilamchi: «Tizim maqomi».

6) Mikrotextlar: tayyor shablonlar

• "Bu yerda siz birinchisini qo’shganingizda tanlangan o’yinlar paydo bo’ladi. [Tanlanganlarga qoʻshish]"

• «{query}» soʻrovi boʻyicha hech narsa topilmadi. Soʻrovni aniqlashtiring yoki filtrlarni bekor qiling. [Filtrlarni olib tashlash]"

• "Sizda hali saqlangan usullar yoʻq. Toʻlovlarni tezlashtirish uchun karta yoki hamyon qoʻshing. [Usulni qoʻshish]"

• "Bu funksiya yoshni tasdiqlamasdan mavjud emas. Bu ~ 2 daqiqa davom etadi. [Yoshni tasdiqlash] [Nima uchun?]"

• "Oxirgi 24 soat ichidagi statistikani hisoblaymiz... Bu odatda 30 soniyagacha. Hamma narsa tayyor bo’lganda bildirishnomani ko’rsatamiz"

• "Xizmat mavjud emas. Biz allaqachon tuzatmoqdamiz. Holatni keyinroq koʻrib chiqing yoki tekshiring. [Takrorlash] [Tizim maqomi]"

7) Vizual til va rasmlar

CTA bilan bahslashmaslik uchun yengil monoxrom/ikki rangli rasmlardan foydalaning.
O’lchamlari va cheklovlari - kontent kartochkasidagi kabi (vizual muvofiqlik).
Stressli stsenariylarda (to’lov/xavfsizlik) hazil sahnalarini tasvirlamang.

8) Mahalliylashtirish va foydalanish

Satrlar uzunligiga zaxirani qoʻying (DE/TR uzunroq).
Raqamli formatlarni, valyutani, sanalarni lokal ravishda tarjima qiling.
Ekranlar uchun: role = «status», aria-live = «polite/assertive».
Faqat rasmga maʼno qoʻymang: matnni takrorlang.
320 px va WCAG kontrastini tekshiring.

9) Metrika va eksperimentlar

• Asosiy bo’sh holat CTA bo’yicha CTR;
• «birinchi muvaffaqiyatga» konvertatsiya qilish (activation event);
• birinchi amal qilishigacha bo’lgan vaqt;
• progresssiz ekranga qaytish chastotasi;
• qidirishning nol natijalari ulushi;
• ssenariy bo’yicha qo’llab-quvvatlash uchun murojaatlar.

• aniq vs umumiy sarlavha;
• CTA - harakat feʼli vs neytral;
• vaqtni baholashni qo’shish;
• ikkilamchi CTA (SSS) ning mavjudligi va tugmalar tartibi;
• rasm vs ikona vs vizualsiz.

10) Anti-patternlar

«Bu yerda hech narsa yo’q».
Tanqidiy qadamlardagi hazillar (to’lov, xavfsizlik).
Kontekstga bog’lanmasdan bitta CTA «Ko’proq ma’lumot olish».
Passiv garov: «qo’shilishi kerak». Faol yozing: «Qo’shing»....
Uzun xatboshilar: 1-2 ta taklif maksimal.
Pleysholder shakldagi yorliq o’rniga A11y va tushunishni yomonlashtiradi.
Yashirin cheklovlar («bir zumda», garchi kechikish mumkin).

11) Chiqarishdan oldingi chek-varaq

• Nima uchun boʻsh ekanini tushunyapsizmi?
• Bitta gapning maʼnosi bormi?
• Bitta asosiy CTA va kerak bo’lsa, ikkilamchi CTA bormi?
• Matn qisqa (140 belgidan ≤) va aniq?
• Vaqt/harakat bahosi qoʻshilganmi?
• Ton stsenariyga mos keladimi?
• Lokalizatsiya va A11y tekshirilganmi?
• Rasm CTA ustun emasmi?

12) «oldin/keyin» misollari

Oʻyin katalogi (birinchi nol)

Do: «Bu yerda hali hech narsa yo’q»

Soʻngra: "Lentangizni yigʻing. 3 ta sevimli janrni tanlang - tavsiya qilishni boshlaymiz. [Janrlarni tanlash]"

Nol qidirish

Oldingisi: «Hech narsa topilmadi»

«high-limit roulette» bo’yicha natijalar yo’q. «High-limit» filtrini olib tashlang yoki «roulette» ni urinib koʻring. [Filtrlarni olib tashlash]"

To’lovlar

Do: «To’lash usuli yo’q»

So’ngra: "Karta yoki hamyoningizni saqlang - to’ldirish va natijalar tezroq bo’ladi. [Usulni qo’shish] [Komissiyalar va muddatlar]"

Verifikatsiya

Gacha: «Kirish yoʻq»

So’ngra: "Bo’lim shaxsni tasdiqlaganidan keyin mavjud. Bu ~ 2 daqiqa davom etadi. [Tekshiruvdan o’tish] [Nima uchun bu muhim]"

13) Dizayn tizimiga kiritish

• ’title’ (satr, ixtiyoriy)
• ’body’ (1-2 jumlaning qisqa matni)
• `primaryAction { label, onClick }`
• `secondaryAction { label, href/onClick }`
• ’icon/illustration’ (ixtiyoriy)

Matnlarni komponent yonidagi i18n fayllarda saqlang, kalitlar va tavsiflarni qoʻllab-quvvatlang, tone-map (vaziyatlar boʻyicha ton va leksika) ni ulang.

14) Tezkor konstruktor (nusxa ko’chirish va undan foydalanish)

• Sarlavha: «Birinchi qadamdan boshlang»
• Matnda: «Bu yerda siz manfaatlarni tanlaganingizdan so’ng tavsiyalar bo’ladi.»
• CTA: «Manfaatlarni tanlash»
• Ikkinchisi: «Bu qanday ishlaydi?»

• Matn: «{query}» uchun hech narsa topilmadi. Filtrlarni olib tashlang yoki soʻrovni aniqlashtiring"
• CTA: «Filtrlarni olib tashlash»
• Ikkilamchi: «Katalog»

• Matn: "Funksiya yoshi tasdiqlangandan keyin mavjud. Odatda 2 daqiqagacha"
• CTA: «Yoshni tasdiqlash»
• Ikkinchisi: «Bu nima uchun kerak?»

• Matn: "Bir sutkada ma’lumotlarni yig’ayapmiz. Bu odatda 30 soniyagacha. Hamma narsa tayyor boʻlganda xabar beramiz"
• CTA: «Yaxshi»

Yakuniy shpargalka

Kontekst + qiymat + harakat - bitta «stok» da.
Vizual vazn bo’yicha raqobatsiz bitta asosiy CTA.
Qisqacha va aniq: 1-2 ta taklif.
Har doim boshi berk ko’chadan chiqish yo’q.
Lokalizatsiya va A11y komponent darajasida joylashtirilgan.