Empty State Tasarımı: Boş Ekranları Fırsata Çevirme
Seviye: Başlangıç - Orta Kategori: UX Design Son güncelleme: Ocak 2025
Giriş
Kullanıcı uygulamanı açtı. Karşısında bomboş beyaz bir ekran var. "Şimdi ne yapacağım?" Bu an kritik. İyi tasarlanmış empty state kullanıcıyı yönlendirir, değer sunar, aksiyon aldırır. Empty state sadece "veri yok" demek değil. Bir fırsat: Onboarding yapmak, değer önerisi iletmek, kullanıcıyı motive etmek için.
Bu yazıda farklı empty state türlerini, nasıl tasarlanacağını ve best practice'leri öğreneceksin.
Empty State Nedir?
Empty State (Boş Durum): Bir ekran veya bölümde gösterilecek içerik olmadığında kullanıcıya sunulan tasarım durumu. Boşluğu anlamlı mesaj, görsel ve aksiyonla dolduran, yönlendirici arayüz.
Diğer isimleri: Zero state, Blank slate, First-run experience, No data state.
Empty State Türleri
1. First Use (İlk Kullanım)
Kullanıcı yeni, henüz hiç içerik oluşturmamış. Amaç: Karşıla, değer göster, ilk aksiyona yönlendir.
2. No Results (Sonuç Yok)
Arama veya filtreleme sonucu boş. Amaç: Durumu açıkla, alternatif öner.
3. Cleared (Temizlenmiş)
Kullanıcı içeriği sildi veya tamamladı. Amaç: Kutla (başarı), sonraki adımı öner.
4. Error-Induced (Hata Kaynaklı)
Teknik sorun nedeniyle veri yüklenemedi. Amaç: Durumu açıkla, çözüm öner.
5. Permission (İzin Gerekli)
İçerik var ama erişim izni yok. Amaç: Neden erişilemiyor açıkla, çözüm (giriş/upgrade) öner.
Empty State Anatomisi
Etkili bir empty state: Görsel element, Başlık, Açıklama metni, Birincil CTA, İkincil aksiyonlar (opsiyonel).
Yazım Rehberi
Görsel Tasarım
| Stil | Kullanım | Örnek |
|---|---|---|
| Spot illustration | Tek, odaklı görsel | Boş kutu, arama simgesi |
| Scene illustration | Bağlamlı sahne | Çalışma masası, doğa |
| Character | Marka maskotu | Kişilik katmak için |
| Abstract | Minimal, soyut | Kurumsal, ciddi |
| İkon | Basit, minimal | Küçük alanlar |
Yaygın Hatalar
Şimdi Sen Dene
25 dakika
Görev: Bir fitness uygulaması için empty state'leri tasarla. Antrenman takibi, ilerleme grafikleri, başarı rozetleri, arkadaş sistemi.
- First use - Antrenman listesi (6 dk) İllüstrasyon, başlık, açıklama, CTA
- No results - Arama (5 dk) "Yoga" araması sonuç vermedi. Başlık, öneriler, alternatif aksiyonlar
- Cleared - Bugünün görevleri (5 dk) Kutlama tonu, başarı mesajı, sonraki adım
- Empty friends - Arkadaş listesi (5 dk) Sosyal motivasyon, ekleme aksiyonu
- No data - İlerleme grafiği (4 dk) Durumu açıkla, ne zaman görünecek
Özet
- Empty state = içerik olmadığında gösterilen tasarım durumu
- Türleri: First use, No results, Cleared, Error-induced, Permission
- Anatomi: Görsel + Başlık + Açıklama + CTA + İkincil aksiyonlar
- First use: Karşılayıcı, değer odaklı, teşvik edici
- No results: Yardımcı, çözüm önerici
- Cleared: Kutlayıcı, motive edici
- İnsan dilinde yaz, teknik jargon yok
- Her zaman aksiyon sun, çıkmaz sokak bırakma
- Değer önerisi ilet, sadece "boş" deme
- Farklı durumlar için farklı mesajlar
- Mobilde daha kompakt, tek CTA
İlgili İçerikler
Önceki: Loading State Tasarımı
Sonraki: Navigation ve Menü Tasarımı (yakında)
İlgili konular:
İlgili Roadmap: UI Designer Roadmap → State Design
Kaynaklar
- Empty States - UI Patterns (İngilizce)
- The Art of the Empty State - Invision (İngilizce)
- Empty State Inspiration - Mobbin (İlham için)
- Really Good UX - Empty States (Örnekler)