Çoxaddımlı formalar və kontekstin qorunması

1) Prinsiplər

1. Bir məqsəd bir neçə təbii addımdır. DB cədvəllərinə görə deyil, istifadəçinin məntiqinə görə bölün: «Məlumatlar → Təsdiq → Tamamlanma».
2. Hər addım tamamlanmış mənadır. Çox incə parçalamayın: 3-5 addım optimaldır.
3. Keçid konteksti sıfırlamamalıdır. Bütün sahələr, seçimlər və fayllar qorunur.
4. Geri qayıtmağa icazə verin. Geriyə - məlumat itkisi olmadan.
5. Tərəqqini izləyin. Tərəqqi bar, addım başlığı və aydın CTA.
6. İstifadəçi tərk edə və geri qayıda bilər. Layihə - yerli və ya serverdə.

2) Çoxaddımlı formanın arxitekturası

Müştəri statesi: lokal stor (məsələn, React Context/Redux/Signal) və ya müvəqqəti saxlama ('sessionStorage', IndexedDB).
Server State: 'draft _ id' ilə bir layihə hazırlayın, hər addımdan sonra saxlayın.
Təhlükəsizlik: 'draft _ id' istifadəçi ilə bağlıdır və N saat sonra sona çatır; məlumatlar rahat şifrələnir.

• 'currentStep' - cari addım indeksi;
• 'completedSteps' - tamamlanmış siyahı;
• 'errors' - addım-addım səhvlər;
• `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) Addım dizaynı və maketi

Struktur: şaquli naviqasiya (desktop )/tərəqqi-bar üst (mobile).
Addımın görünən adı: "1. Şəxsi məlumatlar», «2. Şəxsiyyətin təsdiqi".

• Əsas - «Next «/« Davam ».
• İkinci - «Geri».
• Son addımda - «Tamamla «/» Göndər ».

• 'aria-current =' step 'istifadə edin.
• Addımlar qeyri-bərabər olduqda% göstərin.
• «Daha sonra qayıda bilərsiniz» ipucunu əlavə edin.

4) Kontekstin və məlumatların qorunması

Avtomatik qoruma

• sahənin dəyişməsi (debauns 500-1000 ms);
• növbəti addıma keçmək;
• sekmə fokus itkisi.

• yerli ('localStorage '/IndexedDB) - forma qısa olarsa;
• server - KOS/ödənişlər/anket üçün.

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

Bərpa

Formanı açarkən layihəni ('draft _ id' və ya lokal açar) axtarın.

• Münaqişə vəziyyətində (yeni sahələr) - dəyişiklikləri işıqlandırmaqla «layihəni yeniləyin».

5) UX keçid nümunələri

Yalnız addım yerli validasiya sonra irəli.
Geri - heç bir məlumat itkisi yoxdursa təsdiq olmadan.
Şəbəkə səhv olarsa, onu yerli saxlayırıq, «Növbəti qoşulmada bərpa edəcəyik».
Ixtiyari olaraq URL dəyişdirməyin: '/form/step/2 '→ naviqasiya/bərpa üçün əlverişlidir.
Növbəti addıma sürətli keçid üçün 'Ctrl + Enter' dəstəkləyin.

6) Hallar və vizual ipuçları

In progress: boz/aktiv göstərici, addım yalnız əvvəlki tamamlandıqda seçilir.
Completed: yaşıl çubuq/ikona; redaktə üçün açıla bilər.
Error: qırmızı kontur, sahənin altındakı mətn və tərəqqi xəttində.
Disabled: cari sonra addımlar gizli və ya mövcud deyil.

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 və əlçatanlıq

Aktiv addım üçün 'aria-current =' step '.
Addım dəyişikliyi 'aria-live =' polite 'səslənir.
Cari addım daxilində diqqət saxlayın; keçid - başlığa köçürün.
Tab və Enter naviqasiyası proqnozlaşdırıla bilər; Esc kontekstini itirməməlidir.
Addım-addım irəliləyən barlar üçün 'role =' list '', 'role =' listitem 'və' aria-label 'istifadə edin.

8) Səhvlər və fasilələr zamanı davranış

Şəbəkə uğursuzluğu: banner "Əlaqə itirildi. Məlumatlar yerli saxlanılacaq".
Zaman: 3-5 saniyədən sonra avtomatik olaraq təkrarlayın; uğursuzluq - oflayn layihə.
Seans fasiləsi: giriş → «Son addımdan davam».
Addım səhv: qismən doldurulmuş sahələri saxlayın, problemli sahələri vurğulayın.

9) Paralel sessiyalar və təhlükəsizlik

'draft _ id' istifadəçi üçün unikaldır.
Yeni sekmə açarkən - təklif "Başqa bir seans açılır. Yeniləyin və ya burada davam edin".
KOS/maliyyə formaları üçün - məlumatlar layihəni saxlamazdan əvvəl müştəridə (AES/GCM) şifrələnir.
TTL layihələrinin çıxarılması (məsələn, 7 günlük fəaliyyətsizlik).

10) iGaming ssenariləri nümunələri

10. 1 KUS/yoxlama

1. Şəxsi məlumatlar → 2. Sənədlər → 3. Yoxlama → 4. Tamamlanması.

Fotoşəkil yüklədikdən sonra avtoseyv.
Fasilədən sonra yoxlama addımından bərpa.
göstərici ilə «təsdiq gözləmək» vəziyyəti.

10. 2 Ödəniş/depozit

Addımlar: 1. Məbləğ → 2. Metodu → 3. Təsdiq.
Metod haqqında məlumatlar sessiyalar arasında saxlanılır.
Məbləği sıfırlamadan metodun seçiminə qayıtmaq mümkündür.

10. 3 Limitlərin quraşdırılması

Addımlar: limit növü → dəyəri → təsdiq.
Tərəqqi qalan addımları göstərir.
Tamamlandıqdan sonra - ekran «vasitəsilə qüvvəyə minəcək»....

11) Metrika və nəzarət

Completion rate: Bütün addımları tamamlayan istifadəçilərin% -i.
Drop-off per step: hansı addımda gedirlər.
Average time per step и Time-to-Complete.
Auto-save success rate (neçə layihələr bərpa).
Error recovery rate: uğursuz sonra uğurla davam payı.

12) Antipattern

«Geri» olmadan sərt naviqasiya.
Yenidən başlatma zamanı daxil edilmiş məlumatların itirilməsi.
Kontekst olmadan addımlardan atlama.
10 ekranda bir ümumi submit.
Addım səhv - və «Yenidən başlayın».
Şəbəkə uğursuzluğundan sonra boş ekran.
Məna adları olmayan tərəqqi bar («1/4/7»...).

13) Dizayn sistemi tokenləri (nümunə)

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 Presets

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-çek siyahısı

Saxlama və bərpa

• Layihə hər addımda yaradılır və yenilənir.
• Yenidən başladıqda, bərpa etmək mümkündür və düzgündür.
• Versiyalar konflikti işlənir (köhnə/yeni format).

Naviqasiya

• «Geri» məlumat itirmir.
• URL cari addıma uyğundur.
• Tərəqqi bar vəziyyəti ilə sinxronlaşdırılır.

Şəbəkə və oflayn

• Offline yerli saxlayır və online bərpa edir.
• Uğursuzluq mesajları başa düşüləndir və təsirsizdir.

A11y

• ' aria-current =» step»', 'aria-live = «polite»' işləyir.
• Fokus addım başlığına köçürülür.

Performans

• Ani keçidlər (≤ 100 ms).
• Asinxron qorunma UI-ni bloklamır.

15) Dizayn sistemində sənədləşmə

Компоненты: `StepIndicator`, `MultiStepForm`, `AutosaveBanner`, `DraftRecoveryModal`.
Kontekst saxlama qaydaları (local vs server), A11y və ARIA atributları.
UX şablonları: KYC, depozitlər, limitlər, anketlər, səhvdən sonra geri qaytarma.
Do/Don 't şəbəkə nasazlığı və uğurlu bərpa nümunələri ilə.

Qısa xülasə

Çox addımlı forma, istifadəçi diqqəti yayındırsa, səhifəni yenidən başlatsa və ya şəbəkəni itirsə belə, davamlı bir proses kimi hiss edilməlidir. Avtomatik qorunma, bərpa, görünən irəliləyiş və təhlükəsiz retrajlar mürəkkəb ssenariləri (KYC, ödənişlər, limitlər) proqnozlaşdırıla bilən və etibarlı təcrübəyə çevirir.