Koʻp bosqichli shakllar va kontekstni saqlash

1) Qonunning

1. Bir maqsad - bir nechta tabiiy qadamlar. DB jadvallari bo’yicha emas, balki foydalanuvchining mantig’i bo’yicha: «Ma’lumotlar → Tasdiqlash → Yakunlash».
2. Har bir qadam - tugallangan ma’no. Juda mayda maydalang: 3-5 qadam maqbuldir.
3. Oʻtish kontekstni bekor qilmasligi kerak. Barcha maydonlar, saylovlar va fayllar saqlanadi.
4. Qaytishga ruxsat bering. Orqaga - maʼlumotlarni yoʻqotmasdan.
5. Taraqqiyotni kuzating. Progress bar, qadam sarlavhasi va aniq CTA.
6. Foydalanuvchi chiqib qaytishi mumkin. Loyiha - lokal yoki serverda.

2) Ko’p bosqichli shakl arxitekturasi

Mijoz steyti: lokal stor (masalan, React Context/Redux/Signal) yoki vaqtinchalik saqlash (’sessionStorage’, IndexedDB).
Server state:’draft _ id’loyihasini yarating, har qadamdan keyin saqlang.
Xavfsizlik:’draft _ id’foydalanuvchi bilan bogʻlangan va N soatdan keyin tugaydi; maʼlumotlar xotirjam shifrlanadi.

• ’currentStep’ - joriy qadam indeksi;
• ’completedSteps’ - tugallanganlar ro’yxati;
• ’errors’ - per-qadam xatolari;
• `progress = current / total`.

js const formState = {
draftId: "d-84f...",
currentStep: 2,
steps: [ { id: "personal", completed: true }, { id: "kyc", completed: false } ],
data: { name:"", idPhoto:null },
lastSaved: Date. now()
}

3) Qadamlar va maket dizayni

Tuzilishi: vertikal navigatsiya (desktop )/yuqoridan progress bar (mobile).
Qadamning koʻrinadigan nomi: "1. Shaxsiy ma’lumotlar» «, 2. Shaxsni tasdiqlash".

• Asosiy - «Keyingi «/« Davom etish ».
• Ikkilamchi - «Orqaga».
• Oxirgi qadamda - «Tugal «/» Joʻnatish ».

• ’aria-current =’ step’dan foydalaning.
• Agar qadamlar notekis boʻlsa,% ni koʻrsating.
• «Keyinroq qaytish mumkin» maslahatini qoʻshing.

4) Kontekst va ma’lumotlarni saqlash

Avto- saqlash

• maydon o’zgarganda (debauns 500-1000 ms);
• keyingi qadamga o’tish;
• tabning fokusini yoʻqotish.

• lokal (’localStorage ’/IndexedDB) - agar shakli qisqa bo’lsa;
• server - KTS/to’lovlar/so’rovnoma uchun.

js const saveDraft = debounce(async (data) => {
await fetch('/api/draft', { method:'POST', body: JSON. stringify(data) });
}, 800);

Qayta tiklash

Shakl ochilganda loyihani qidiring (’draft _ id’yoki lokal kalit).

• (Yangi maydon) - oʻzgarishlarni yoritgan holda «loyihani yangilash».

5) UX o’tish patternlari

Faqat qadam lokal validatsiyadan keyin oldinga siljish.
Agar maʼlumot yoʻqolmasa, orqaga qaytish tasdiqlanmaydi.
Agar tarmoq xato qilsa, uni lokal saqlaymiz va «Keyingi ulanishda tiklaymiz».
URLni oʻzboshimchalik bilan oʻzgartirmang: ’/form/step/2’→ navigatsiya/tiklash uchun qulay.
Keyingi bosqichga oʻtish uchun’Ctrl + Enter’ni qoʻllab-quvvatlang.

6) Holatlar va vizual maslahatlar

In progress: kulrang/aktiv indikator, qadam faqat oldingisi tugagan taqdirdagina bosiladi.
Completed: yashil belgi/ikonka; tahrirlash uchun ochish mumkin.
Error: qizil kontur, maydon va progress chizig’idagi matn.
Disabled: joriy bosqichdan keyingi qadamlar yashirilgan yoki mavjud emas.

html
<nav aria-label = "Progress">
<ol class="steps">
<li class = "done "> <span> 1 </span> Data </li>
<li class = "current" aria-current = "step "> <span> 2 </span> Documents </li>
<li> 3 Verification </li>
</ol>
</nav>

7) A11y va ommaboplik

Aktiv qadam uchun’aria-current =’step’.
Qadam oʻzgarishi’aria-live =’polite’deb aytiladi.
Fokusni joriy qadam ichida saqlang; oʻtayotganda sarlavhaga koʻchiring.
Tab va Enter navigatsiyasi oldindan aytib boʻlmaydi; Esc kontekstni yoʻqotmasligi kerak.
Bosqichma-bosqich progress barlar uchun’role = «list»’,’role = «listitem»’va’aria-label’dan foydalaning.

8) Xato va uzilishlardagi xulq-atvor

Tarmoq muvaffaqiyatsiz tugadi: "Ulanish uzildi. Maʼlumotlar lokal saqlanadi".
Taymaut: 3-5 soniyadan so’ng avtomatik ravishda takrorlash; muvaffaqiyatsiz bo’lganda - oflayn loyiha.
Seans uzilishi: logindan keyin → «Oxirgi qadamdan davom ettirish».
Xato: qisman toʻldirilgan maydonlarni saqlaymiz, muammoli maydonlarni yoritamiz.

9) Parallel sessiyalar va xavfsizlik

’draft _ id’ foydalanuvchi uchun noyob.
Yangi tabni ochishda "Boshqa seans ochildi. Yangilash yoki davom ettirish".
KTS/moliyaviy shakllar uchun - ma’lumotlar loyihani saqlashdan oldin mijozga (AES/GCM) shifrlanadi.
TTL boʻyicha loyihalarni olib tashlash (masalan, 7 kunlik harakatsizlik).

10) iGaming ssenariylari namunalari

10. 1 MSK/verifikatsiya

1. Shaxsiy maʼlumotlar → 2. Hujjatlar → 3. Tekshirish → 4. Yakunlash.

Fotosurat yuklangandan keyin avtoseyv.
Tanaffusdan keyin tekshirish bosqichidan tiklash.
Tasdiqlashni kutish holati.

10. 2 To’lov/depozit

Qadamlar: 1. Summa → 2. Usul → 3. Tasdiqlash.
Usul to’g "risidagi ma’lumotlar sessiyalar oralig’ida saqlanadi.
Mablagʻni yoʻqotmasdan usulni tanlashga qaytish mumkin.

10. 3 Limitlar o’rnatish

Qadamlar: limit turi → qiymat → tasdiqlash.
Taraqqiyot qolgan qadamlarni koʻrsatadi.
Tugallangandan so’ng - «orqali kuchga kiradi» ekrani....

11) Metrika va nazorat

Completion rate: Barcha qadamlarni bajargan foydalanuvchilar%.
Drop-off per step: qaysi bosqichda ketishadi.
Average time per step и Time-to-Complete.
Auto-save success rate (qancha loyihalar tiklangan).
Error recovery rate: muvaffaqiyatsiz tugaganidan keyin muvaffaqiyatli davom etganlar ulushi.

12) Antipatternlar

Orqaga qaytmasdan qattiq navigatsiya.
Qayta ishga tushirishda kiritilgan maʼlumotlarni yoʻqotish.
Kontekstsiz qadamlar orqali sakrash.
10 ekranga bitta umumiy submit.
Qadamdagi xato - va «Yangidan boshlash».
Tarmoq muvaffaqiyatsiz tugaganidan keyin boʻsh ekran.
Ma’nosiz progress bar («1/4/7»...).

13) Dizayn-tizim tokenlari (misol)

json
{
"steps": {
"radius": 10,
"gap": 8,
"barHeight": 4,
"activeColor": "#2B9F5E",
"inactiveColor": "#E0E0E0"
},
"autosave": {
"debounceMs": 800,
"retryMs": 3000,
"ttlDays": 7
},
"a11y": {
"ariaLive": "polite",
"focusBehavior": "scrollToTitle"
}
}

CSS-presetlar

css
.steps { display:flex; gap:8px; list-style:none; counter-reset:step; }
.steps li { position:relative; flex:1; text-align:center; }
.steps li::before { counter-increment:step; content:counter(step); display:block; width:24px; height:24px; line-height:24px; margin:0 auto 4px; border-radius:50%; background:var(--inactive); color:#fff; }
.steps li. done::before { background:var(--success); }
.steps li[aria-current="step"]::before { background:var(--primary); }

14) QA-chek-varag’i

Saqlash va tiklash

• Loyiha har qadamda yaratiladi va yangilanadi.
• Qayta ishga tushirilganda, qayta tiklash mumkin.
• Versiyalar mojarosi qayta ishlanmoqda (eski/yangi format).

Navigatsiya

• «Orqaga» maʼlumot yoʻqotmaydi.
• URL joriy bosqichga mos keladi.
• Progress bar holat bilan sinxronlashtirilgan.

Tarmoq va oflayn

• Offline lokal saqlaydi va onlayn holda tiklaydi.
• Xato haqidagi xabarlar tushunarli va samarasiz.

A11y

• ’aria-current =» step»’,’aria-live = «polite»’ishlamoqda.
• Fokus qadam sarlavhasiga koʻchiriladi.

Spektakl

• Tezkor o’tish (100 ms ≤).
• Asinxron saqlash UIni bloklamaydi.

15) Dizayn-tizimdagi hujjatlar

Компоненты: `StepIndicator`, `MultiStepForm`, `AutosaveBanner`, `DraftRecoveryModal`.
Kontekstni saqlash bo’yicha gaydlar (local vs server), A11y va ARIA atributlari.
UX shablonlari: KYC, depozitlar, limitlar, anketalar, xatodan keyin qaytarish.
Do/Don’t tarmoq muvaffaqiyatsiz tugashi va muvaffaqiyatli tiklanishi misollari bilan.

Qisqacha xulosa

Foydalanuvchi chalg’itgan, sahifani qayta ishga tushirgan yoki tarmoqni yo’qotgan bo’lsa ham, ko’p bosqichli shakl uzluksiz jarayon sifatida sezilishi kerak. Avto- saqlash, tiklash, ko’rinadigan taraqqiyot va xavfsiz retrajlar murakkab stsenariylarni (KYC, to’lovlar, limitlar) oldindan aytib bo’ladigan va ishonchli tajribaga aylantiradi.