Kuika’nın Stepper elementi, adım adım ilerleyen süreçleri kullanıcıya düzenli bir şekilde sunar. Kullanıcılar her adımı sırasıyla geçerek sürecin içeriğine ulaşabilir. Özellikle çok aşamalı formlar, kayıt süreçleri veya iş akışları için idealdir.
Stepper elementi yalnızca web uygulamalarında desteklenmektedir.
Kullanım Alanları
Kayıt ve Hesap Oluşturma → Adım adım bilgi girişi, doğrulama ve tercihler.
Ödeme Süreci → Teslimat adresi, ödeme bilgisi, sipariş onayı.
Form Doldurma → Uzun formları küçük adımlara bölmek.
Anket / Quiz → Her adım bir soru olacak şekilde yapılandırma.
İş Akışları → Proje aşamaları veya belge onay süreçlerini görselleştirme.
Rezervasyon → Otel, doktor, etkinlik kayıt adımlarını sırayla sunma.
Öğrenme Platformları → Ders veya kurs modüllerini adım adım ilerletme.
Yerleştirme / Başvuru → İş ve staj süreçlerinde adımları takip etme.
Kullanım Senaryosu – Hesap Oluşturma Süreci
Bir uygulamada kullanıcı kaydı, üç aşamalı bir Stepper ile oluşturulur:
General Info → Kullanıcı temel bilgilerini girer.
Payment Info → Ödeme detaylarını ekler.
Activate Account → Hesabını aktif hale getirir.
Her adım tamamlandığında kullanıcı bir sonraki adıma geçer. Aktif adım mavi renkle vurgulanır, tamamlanan adımlar onay simgesiyle gösterilir.
UI Design Modülü İşlemleri
UI Design modülüne gidin.
Sol kenardaki Elements > Interactive kategorisinden Stepper elementini seçin.
Ekrana sürükleyip bırakın.
Step’leri düzenleyin:
Step 1: General Info
Step 2: Payment Info
Step 3: Activate Account
Her adıma özel içerikleri (form, bilgi alanı vb.) ekleyin.
Özelliklerin Senaryo Bağlamında Kullanılması
Stepper1
Açıklama: Adım düzenlemelerinin yapıldığı ana alandır.
Kullanım: +Add Stepper Item ile yeni adımlar eklenebilir veya mevcut adımlar yeniden adlandırılabilir.
Step Direction
Açıklama: Adımların yönünü belirler.
Seçenekler:
Horizontal → Yatay görünüm (örneğin kayıt adımları)
Vertical → Dikey görünüm (örneğin çok adımlı formlar)
Unfinished Step Color
Açıklama: Henüz tamamlanmamış adımların rengini belirler.
Finished Step Color
Açıklama: Tamamlanan adımların rengini tanımlar.
Active Step Color
Açıklama: Kullanıcının bulunduğu aktif adımı vurgulamak için kullanılır.
Aksiyonlar (Actions)
Stepper elementinde adımlar arasında geçiş, Button aksiyonları ile yönetilebilir.
Örnek: Buton ile Döngüsel Stepper
3 adım oluşturun: Step1, Step2, Step3
Bir Button ekleyin ve buton metnini “Next Step” olarak ayarlayın.
Aksiyon ekleyin:
OnClick → UI Control → Set Value Of → Step1
Aynı işlemi Step2 ve Step3 için de ekleyin.
Son adımda tekrar Step1’e dönülür → Döngüsel geçiş sağlanır.
Senaryo Tamamlandığında
Kullanıcı adım adım süreci takip eder.
Aktif adım vurgulanır, tamamlanan adımlar işaretlenir.
Döngüsel yapı kurulduysa adımlar sürekli yeniden başlatılabilir.
Kullanıcı hangi aşamada olduğunu kolayca anlayabilir.
Kısıtlamalar
Stepper yalnızca web uygulamalarında çalışır.
Çok fazla adım eklenirse görünüm karmaşıklaşabilir.
İpuçları & Best Practices
Sık yapılan hata: Tüm adımları aynı renkte bırakmak → Kullanıcı aktif adımı seçemez.
Step Direction seçimini süreç uzunluğuna göre yapın:
Vertical → Çok adımlı formlar
Horizontal → Kısa süreçler
Adım başlıklarını kısa, açıklayıcı ve tek satırda tutun.
Uzun süreçlerde her adım sonunda “Next” veya “Back” butonları kullanın.
