Loading State Tasarımı: Bekleme Süresini Kullanıcı Dostu Hale Getirme

Seviye: Başlangıç - Orta Kategori: UX Design Son güncelleme: Ocak 2025

---

Giriş

Bekleme kimse sevmez. Ama dijital dünyada bekleme kaçınılmaz: veri yükleniyor, dosya işleniyor, sayfa render ediliyor.

Araştırmalar gösteriyor: 1 saniye gecikme, %7 dönüşüm kaybı. 3 saniye bekleme, kullanıcıların %40'ını kaybettirir.

Ama önemli olan gerçek bekleme süresi değil, algılanan bekleme süresi. Doğru loading tasarımı ile 3 saniye 1 saniye gibi hissettirebilir.

Loading state, bu bekleme süresini yönetme sanatı. Spinner, skeleton, progress bar, optimistic UI - her biri farklı durumlar için.

Bu yazıda loading state tasarımının temellerini ve hangi durumda ne kullanacağını öğreneceksin.

---

Loading State Nedir?

[CALLOUT BOX] Loading State: İçerik veya işlem tamamlanana kadar kullanıcıya gösterilen geçici durum. Sistemin çalıştığını, kullanıcının beklemesi gerektiğini ve ne kadar bekleyeceğini (mümkünse) bildiren görsel feedback. [/CALLOUT BOX]

Neden gerekli:

• Sistemin donmadığını gösterir
• Kullanıcıyı bilgilendirir
• Algılanan beklemeyi azaltır
• Frustrasyon önler

---

Zaman Algısı Psikolojisi

Nielsen'ın Yanıt Süresi Kuralları

Algılanan Süreyi Etkileyen Faktörler

Daha kısa hissettirenler:

• İlerleme göstergesi
• Anlamlı animasyon
• İçerik önizlemesi (skeleton)
• Dikkat dağıtma

Daha uzun hissettirenler:

• Belirsizlik (ne kadar sürecek?)
• Hareketsiz ekran
• Boş beyaz sayfa
• Anksiyete (işlem başarılı olacak mı?)

---

Loading Pattern'leri

1. Spinner / Loader

Dönen veya hareket eden basit animasyon.

Kullanım:

• Kısa bekleme süreleri (<3 saniye)
• Belirsiz süre
• Küçük alanlar (buton içi, ikon)

Türleri:

• Circular spinner (dönen daire)
• Dots (hareket eden noktalar)
• Bars (yükselen/alçalan çubuklar)
• Custom brand animation

Avantajları:

• Basit implementasyon
• Her yerde kullanılabilir
• Tanınır pattern

Dezavantajları:

• İlerleme göstermez
• Monoton
• Uzun sürelerde frustrasyon

2. Skeleton Screen (Shimmer)

İçerik yapısının gri placeholder'larla gösterilmesi.

Kullanım:

• Sayfa/liste yüklemeleri
• Bilinen içerik yapısı
• Uzun bekleme süreleri

Örnek:

[████████████]        <- Başlık
[████████]            <- Alt başlık
[██████████████████]  <- Paragraf
[██████████████████]
[████████████]

[▓▓▓▓▓▓]  [████████]  <- Kart skeleton
          [██████]

Avantajları:

• Algılanan süreyi kısaltır
• İçerik beklentisi oluşturur
• Modern görünüm
• Layout shift önler

Dezavantajları:

• Implementasyon daha karmaşık
• Her içerik yapısı için ayrı skeleton
• Belirsiz içerik için zor

3. Progress Bar

İlerleme gösteren çubuk.

Kullanım:

• Belirli süre/adım sayısı
• Dosya yükleme/indirme
• Çok adımlı işlemler
• 10+ saniye beklemeler

Türleri:

• Determinate (belirli - %30, %50, %100)
• Indeterminate (belirsiz - sonsuz hareket)

Avantajları:

• Net ilerleme bilgisi
• Motivasyon sağlar
• Uzun sürelerde etkili

Dezavantajları:

• Yanlış tahmin frustrasyon yaratır
• Her duruma uygun değil

4. Optimistic UI

İşlemin başarılı olacağını varsayarak sonucu hemen gösterme.

Kullanım:

• Yüksek başarı oranlı işlemler
• Like, yorum, toggle
• Anlık feedback gereken durumlar

Örnek: Kullanıcı like butonuna tıkladı → Hemen +1 göster → Arka planda API çağır → Başarısızsa geri al

Avantajları:

• Sıfır bekleme hissi
• Anlık feedback
• Akıcı deneyim

Dezavantajları:

• Başarısızlık yönetimi gerekli
• Her işlem için uygun değil
• Veri tutarlılığı riski

5. Lazy Loading

İçeriği ihtiyaç anında yükleme.

Kullanım:

• Uzun listeler
• Görsel ağırlıklı sayfalar
• Infinite scroll
• Ekran dışı içerik

Örnek: Sadece görünür alandaki görselleri yükle, scroll ettikçe devamını yükle.

Avantajları:

• İlk yükleme hızlı
• Bant genişliği tasarrufu
• Performans artışı

Dezavantajları:

• Scroll sırasında bekleme
• SEO dikkat gerektirir

6. Progressive Loading

İçeriği aşamalı olarak gösterme.

Kullanım:

• Büyük görseller
• Kompleks sayfalar
• Öncelikli içerik var

Örnek:

• Önce metin, sonra görseller
• Önce düşük çözünürlük, sonra yüksek
• Önce above-the-fold, sonra below

Avantajları:

• Hızlı ilk içerik
• Kullanıcı okumaya başlayabilir

---

Hangi Pattern Ne Zaman?

---

Spinner Tasarımı

Boyut

Animasyon

Hız: 0.8-1.2 saniye döngü (çok hızlı stresli, çok yavaş durgun)

Easing: Linear veya ease-in-out

Renk: Brand rengi veya nötr gri

Buton Loading State

Default:  [  Kaydet  ]
Loading:  [ ◌ Kaydediliyor... ]
          (buton disabled, spinner + metin)

Best practices:

• Buton genişliği değişmesin
• Spinner + metin kombinasyonu
• Disabled state
• Çift tıklamayı engelle

---

Skeleton Screen Tasarımı

Temel Prensipler

1. Gerçek içeriği yansıt Skeleton, yüklenecek içeriğin yapısını göstermeli

2. Doğru boyutlar Skeleton boyutları gerçek içeriğe yakın olmalı (layout shift önleme)

3. Animasyon ekle Shimmer/pulse efekti canlılık verir

4. Renk seçimi Açık gri (#E5E7EB, #F3F4F6) arka plan üzerinde

Skeleton Anatomisi

Kart Skeleton:

┌─────────────────────┐
│ [▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓] │  <- Görsel placeholder
│                     │
│ [████████████]      │  <- Başlık (kısa çizgi)
│ [████████]          │  <- Alt başlık (daha kısa)
│                     │
│ [██████████████]    │  <- Açıklama satır 1
│ [█████████████████] │  <- Açıklama satır 2
│ [██████████]        │  <- Açıklama satır 3 (kısa)
│                     │
│ [████]  [████████]  │  <- Buton + meta bilgi
└─────────────────────┘

Shimmer Animasyonu

Soldan sağa hareket eden parlak gradient.

CSS örneği:

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

---

Progress Bar Tasarımı

Determinate Progress

Yüzde veya adım bazlı ilerleme.

Dosya yükleniyor...
[████████░░░░░░░░] 45%

Best practices:

• Yüzde veya "3/5 adım" göster
• Gerçekçi ilerleme (takılmama)
• Tamamlandığında success feedback

Indeterminate Progress

Süre belirsiz, sadece "çalışıyor" gösterimi.

Aranıyor...
[░░░████░░░░░░░░░] (kayar animasyon)

Kullanım: API çağrıları, arama, belirsiz işlemler

Progress Feedback

Uzun işlemlerde ek bilgi:

Dosya yükleniyor... 45%
Tahmini süre: ~2 dakika

---

Loading State Zamanlama

Delay Before Showing

Çok hızlı işlemlerde loading göstermemek için kısa gecikme.

Önerilen: 200-300ms bekle, sonra loading göster.

Neden: Flash loading rahatsız edici.

// Pseudo code
setTimeout(() => {
  if (stillLoading) showLoader();
}, 300);

Minimum Display Time

Loading gösterildiyse çok hızlı kaybolmaması.

Önerilen: En az 400-500ms göster.

Neden: Çok kısa flash kötü görünür.

---

Content Placeholder vs Spinner

[COMPARISON] Skeleton tercih et:

• Sayfa/liste yüklemelerinde
• İçerik yapısı bilinen durumlarda
• 1+ saniye beklemelerde
• Modern, profesyonel görünüm için

Spinner tercih et:

• Çok kısa işlemlerde (<1sn)
• Küçük alanlarda (buton, ikon)
• İçerik yapısı belirsizse
• Basitlik gerekiyorsa [/COMPARISON]

---

Yaygın Hatalar

1. Loading göstermemek

2. Layout shift

3. Çift tıklama

4. Yanlış progress

5. Loading flash

6. Tüm sayfayı bloklama

---

Erişilebilirlik

Screen Reader

• aria-busy="true" loading sırasında
• aria-live="polite" tamamlandığında bildir
• Loading metnini screen reader'a iletilebilir yap

Animasyon

• prefers-reduced-motion desteği
• Hareket hassasiyeti olan kullanıcılar için statik alternatif

Kontrast

• Loading indicator'ın görünür olması
• Arka plan ile yeterli kontrast

---

---

---

İlgili İçerikler

Önceki: Error State Tasarımı

Sonraki: Empty State Tasarımı

İlgili konular:

• Micro-interactions Tasarımı
• Error State Tasarımı
• Onboarding UX Tasarımı

İlgili Roadmap: UI Designer Roadmap → State Design

---

Kaynaklar

Derinleşmek istersen:

• Response Times - NNGroup (İngilizce, klasik)
• Skeleton Screens - UX Collective (İngilizce)
• Optimistic UI - Apollo (İngilizce, teknik)
• Everything You Need to Know About Skeleton Screens (İngilizce)