Empty States Nedir?
Veri olmadığında gösterilen ekran. İlk kullanım, arama sonuçsuz, bağlantı hatası gibi durumlar. İyi tasarlanmış empty state, kullanıcıyı kaybetmek yerine aksiyona yönlendirir. 2026 itibarıyla empty state tasarımı, UX olgunluğunun göstergelerinden biri olarak kabul edilmektedir.
Empty State Türleri
İlk Kullanım (First Use)
- Henüz veri yok (boş liste, boş favori)
- Kullanıcıyı ilk aksiyona yönlendir
- Motive edici mesaj ve CTA
- Örnek: "Henüz fotoğraf yok. İlk fotoğrafını çek!"
Arama Sonuçsuz
- "Sonuç bulunamadı"
- Alternatif öneriler sun
- Arama terimini düzeltme önerisi
- Popüler/önerilen içerik göster
Hata Durumu
- Bağlantı hatası (offline)
- Sunucu hatası (500)
- "Tekrar dene" butonu
- Otomatik retry (arka planda)
Boş Sepet / Liste
- Alışveriş sepeti boş
- Bildirim listesi boş
- Kullanıcıyı ilgili sayfaya yönlendir
İzin Gerekli
- Fotoğraf galerisi erişimi yok
- Konum izni verilmemiş
- Neden gerektiğini açıkla + ayarlara yönlendir
Empty State Tasarım İlkeleri
- İllüstrasyon/ikon: Görsel dikkat çekici (Lottie animasyonları etkili)
- Başlık: Kısa, durumu açıklayan
- Açıklama: Ne yapılabileceğini anlatan
- CTA butonu: Aksiyona yönlendiren
- Pozitif ton: "Hiçbir şey yok" yerine "Başlayalım!"
Loading States
Skeleton Screen
- İçerik yerleşiminin "iskelet" hali
- Shimmer/pulse animasyonu
- Gerçek yükleme hissi verir
- Spinner'dan daha iyi algılanır
- 2026 itibarıyla en çok tercih edilen loading pattern
- Instagram, Facebook, LinkedIn bu yaklaşımı kullanır
Progress Indicator
- Belirsiz: Spinner (ne kadar süreceği bilinmiyor)
- Belirli: Progress bar (indirme, yükleme)
- Circular progress: Dosya yükleme, export
Pull to Refresh
- Aşağı çekerek yenileme
- iOS ve Android'de standart
- Animasyonlu geri bildirim
Inline Loading
- Liste sonunda "daha fazla yükle"
- Infinite scroll ile otomatik
- Pagination göstergesi
Algılanan Performans
Gerçek hız kadar algılanan hız da önemli:
- Optimistic UI: İşlem bitmeden sonucu göster (like butonu, mesaj gönderme)
- Skeleton: Boş sayfadan daha hızlı algılanır
- Progressive loading: Önce metin, sonra görsel
- Prefetch: Muhtemel sonraki sayfayı önceden yükle
- Blur-up: Düşük çözünürlüklü placeholder → yüksek çözünürlük görsel
- Stale-while-revalidate: Eski veriyi göster, arka planda güncelle
Platform Farkları
iOS
- UIActivityIndicatorView (spinner) veya ProgressView
- SwiftUI ile ProgressView ve redacted(reason: .placeholder) skeleton desteği
- Pull to refresh: UIRefreshControl / SwiftUI .refreshable modifier
Android
- CircularProgressIndicator / LinearProgressIndicator (Material 3)
- ShimmerLayout veya Accompanist placeholder ile skeleton
- SwipeRefreshLayout ile pull to refresh
React Native
- ActivityIndicator component'i
- Skeleton: react-native-skeleton-placeholder veya custom shimmer
- FlatList onEndReached ile infinite scroll
- RefreshControl ile pull to refresh
- Lottie ile özel loading animasyonları
Best Practices
- Empty state'leri tasarlamayı ATLAMAYIN (sık karşılaşılan durum)
- Her boş duruma özel mesaj yaz
- Skeleton screen'i spinner'a tercih et
- Loading süresi 1 saniyeden kısaysa spinner gösterme (flicker yapar)
- Hata durumunda ne yapılacağı net olsun
- Offline durumu için özel empty state tasarla
- Loading state'lerde content shift (kayma) olmamasına dikkat et
Empty state, "bir şeyler ters gitti" değil, "bir fırsat" olarak değerlendirin. İyi tasarlanmış boş sayfa, kullanıcıyı aksiyona yönlendirir.