Çok Adımlı Formlar ve Bağlam Koruması

1) İlkeler

1. Bir hedef birkaç doğal adımdır. Veritabanı tablolarına değil, kullanıcı mantığına göre bölün: "Veri - Onay - Tamamlama".
2. Her adım tam bir anlamdır. Çok ince ezmeyin: 3-5 adım optimaldir.
3. Geçiş, bağlamı sıfırlamamalıdır. Tüm alanlar, seçimler ve dosyalar kaydedilir.
4. Bırak geri döneyim. Geri - veri kaybı yok.
5. İlerlemeyi takip et. İlerleme çubuğu, adım başlığı ve net CTA'lar.
6. Kullanıcı gidebilir ve geri dönebilir. Taslak - yerel olarak veya sunucuda.

2) Çok adımlı mimari

İstemci durumu: yerel mağaza (örneğin, React Context/Redux/Signal) veya geçici depolama ('sessionStorage', IndexedDB).
Sunucu durumu: 'draft _ id'ile bir taslak oluşturun, her adımdan sonra kaydedin.
Güvenlik: 'Draft _ id' kullanıcıyla ilişkilidir ve N saat içinde sona erer; Veriler dinlenirken şifrelenir.

• 'currentStep' - geçerli adımın indeksi;
• 'TamamlanmışAdımlar' - tamamlanmış listesi;
• 'hatalar' - adım başı hatalar;
• '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) Adım ve düzen tasarımı

Yapı: Yukarıdan (mobil) dikey gezinme (masaüstü )/ilerleme çubuğu.

Adımın görünür adı "1'dir. Kişisel veriler," "2. Kimlik kanıtı"

• Bunlardan ilki "Next "/" Continue ".
• İkincil - "Geri".
• Son adımda - "Tamamla "/" Gönder ".

• ' Aria-current =" step"' kullanın.
• Adımlar eşit değilse % göster.
• "Daha sonra geri gelebilir" istemi ekleyin.

4) Bağlamı ve verileri kaydedin

Otomatik kaydetme

• Alan değişikliği (500-1000 ms'lik bir debunk ile);
• Bir sonraki adıma geçin
• sekme odak kaybı.

• Yerel olarak ('localStorage'/IndexedDB) - form kısaysa;
• Sunucu - CCM/ödemeler/anket için.

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

Kurtarma

Formu açarken bir taslak ('draft _ id' veya yerel anahtar) arayın.

• "12:42 pm'den itibaren taslak bulundu Kaydedilen konumdan devam etmek istiyor musunuz?
• Çakışma durumunda (yeni alanlar) - değişikliklerin vurgulanmasıyla "taslağı güncelle".

5) UX geçiş kalıpları

Yalnızca yerel adım doğrulamasından sonra ilerleyin.
Geri - veri kaybı yoksa onay olmadan.
Bir ağ hatası durumunda, yerel olarak kaydedin, "Bir sonraki bağlantıda geri yükle'yi gösterin.
URL'yi keyfi olarak değiştirmeyin:'/form/step/2 '- navigasyon/kurtarma için uygundur.
Bir sonraki adıma hızlı geçiş için 'Ctrl + Enter' tuşlarını destekleyin.

6) Durumlar ve görsel ipuçları

Devam ediyor: gri/etkin gösterge, adım yalnızca bir önceki tamamlanmışsa tıklanabilir.
Tamamlandı: yeşil tik/simge; Düzenleme için açılabilir.
Hata: kırmızı anahat, alanın altındaki ve ilerleme satırındaki metin.
Devre dışı - Geçerli olandan sonraki adımlar gizlenir veya kullanılamaz.

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 ve kullanılabilirlik

' aria-current =" step"' etkin adım için.
Adım değişikliği 'aria-live =' kibar'tarafından seslendirilir.
Odağı mevcut adım içinde tutun; geçiş sırasında - başlığa geçin.
Sekme ve Enter navigasyon öngörülebilir; Esc bağlamı kaybetmemelidir.
Adım adım ilerleme çubukları için adım için 'role = "list"', 'role = "lisitem"'ve' aria-label 'kullanın.

8) Hata ve kesme davranışı

Ağ hatası: "Bağlantı kayboldu. Veriler yerel olarak kaydedilecektir.
Zaman aşımı: 3-5 saniye içinde otomatik olarak tekrarlayın; başarısızlık üzerine - çevrimdışı taslak.
Oturum sonu: oturum açıldıktan sonra - "Son adımdan devam et".
Adım hatası: kısmen doldurulmuş alanları kaydedin, sorunlu alanları vurgulayın.

9) Paralel oturumlar ve güvenlik

'draft _ id' kullanıcı başına benzersizdir.
Yeni bir sekme açarken - "Başka bir oturum açık. Güncelleyin veya buradan devam edin.
CCM/finansal formlar için, veriler taslağı kaydetmeden önce istemci (AES/GCM) üzerinde şifrelenir.
Taslakları TTL ile silin (örneğin, 7 günlük işlem yapılmaması).

10) iGaming Senaryo Örnekleri

10. 1 CCM/doğrulama

1. Kişisel veriler: 2. Belgeler: 3. 4 kontrol edin. Tamamlama.

Bir fotoğraf yükledikten sonra otomatik olarak kaydedin.
Bir aradan sonra test adımından kurtarma.
Durum göstergesi ile "onay bekliyor".

10. 2 Ödeme/depozito

Adımlar: 1. Miktarı - 2. Yöntem: 3. Teyit edildi.
Yöntem verileri oturumlar arasında saklanır.
Miktarı temizlemeden yöntem seçimine dönebilirsiniz.

10. 3 Sınırları belirleme

Adımlar limit türü - değer - onaydır.
İlerleme kalan adımları gösterir.
Tamamlandıktan sonra - ekran "Etkili olacak"....

11) Metrikler ve kontrol

Tamamlanma oranı: Tüm adımları tamamlayan kullanıcıların yüzdesi.
Adım başına bırakma: hangi adımda ayrılırlar.
Adım başına ortalama süre и Tamamlanma Süresi.
Otomatik kaydetme başarı oranı.
Hata kurtarma oranı - Bir hatadan sonra başarılı kurtarma yüzdesi.

12) Antipatterns

"Geri" olmadan zor navigasyon.
Yeniden başlatmada girdi kaybı.
Bağlam olmadan adımların üzerinden atlamak.
10 ekran başına bir ortak gönderim.
Adım hatası - ve "Yeniden başlat".
Ağ arızasından sonra boş ekran.
Anlamsal adları olmayan ilerleme çubuğu ("1/4/7"...).

13) Tasarım sistemi belirteçleri (örnek)

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 hazır ayarları

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) KG kontrol listesi

Kaydetme ve geri yükleme

• Her adımda bir taslak oluşturulur ve güncellenir.
• Yeniden başlatmada, kurtarma kullanılabilir ve doğrudur.
• Sürüm çakışması ele alınıyor (eski/yeni biçim).

Navigasyon

• "Geri" veri kaybetmez.
• URL geçerli adıma karşılık gelir.
• İlerleme çubuğu durumla senkronize edildi.

Ağ ve çevrimdışı

• Çevrimdışı yerel olarak kaydeder ve çevrimiçi olarak geri yükler.
• Başarısızlık mesajları anlaşılabilir ve yıkıcı değildir.

A11y

• ' aria-current =" step"', 'aria-live = "kibar"' iş.
• Odak adım başlığına taşınır.

Performans

• Geçişler anlıktır (≤ 100 ms).
• Eşzamansız kaydetmeler UI'leri engellemez.

15) Tasarım sistemindeki belgeler

Компоненты: 'StepIndicator', 'MultiStepForm', 'AutosaveBanner', 'DraftRecoveryModal'.
Bağlam (yerel vs sunucu), A11y ve ARIA niteliklerini depolamak için kılavuzlar.
UX şablonları: KYC, depozitolar, limitler, anketler, bir hatadan sonra iade.
Ağ hatası ve başarılı kurtarma örnekleriyle yapma/yapma.

Kısa Özet

Çok adımlı form, kullanıcının dikkati dağılmış, sayfayı yeniden başlatmış veya ağı kaybetmiş olsa bile sürekli bir işlem gibi hissetmelidir. Otomatik kaydetme, kurtarma, görünür ilerleme ve güvenli geri alma, karmaşık senaryoları (KYC, ödemeler, limitler) öngörülebilir ve güvenilir deneyimlere dönüştürür.