Empty state tasarımı, henüz veri yokken veya arama sonuçsuz kaldığında kullanıcıyı boş bir duvar yerine net bir sonraki adıma yönlendirir. Bu rehberde boş durumları yükleme göstergelerinden ayırır, bileşenleri ve uygulanabilir adımları netleştiririz.
Uygulama veya sitede liste boşsa, arama sonuç vermezse ya da kullanıcı henüz hiçbir içerik eklemediyse ekran sessiz kalmamalıdır. Empty state tasarımı, bu anı bir çıkmaz sokak olmaktan çıkarıp açıklama, örnek ve tek net eylem sunan bir arayüz desenine çevirir. Amaç “hiçbir şey yok” demek değil; kullanıcının niyetini kaybetmeden bir sonraki adımı göstermektir.
Bu rehber empty state’i spinner ve iskelet ekrandan ayırır; türleri, bileşenleri, yazım ilkeleri ve kontrol listesini adım adım ele alır. KepezWeb olarak arayüz kararlarını ziyaretçi niyeti ve net eylem üzerinden ele alırız.
Empty State Nedir ve Ne Zaman Görülür?
Empty state, bir ekranın beklenen içeriği henüz gösteremediği, ancak teknik olarak yüklemenin tamamlandığı durumdur. Veri gelmiyor değildir; veri yoktur, filtrelenmiştir veya kullanıcı henüz üretmemiştir. Bu yüzden durum “bekleme” değil “boşluk + yönlendirme”dir.
Sık görülen anlar şunlardır:
- Yeni hesap: sipariş, proje, dosya veya favori listesi henüz oluşmamıştır.
- Arama ve filtre: kriterler o kadar dardır ki sonuç kümesi sıfırdır.
- Silme sonrası: son öğe kaldırılmış, liste boşalmıştır.
- Yetki veya kapsam: kullanıcının erişebildiği kayıt yoktur.
- Geçici iş kuralı: sepet, bildirim veya taslak alanı bilinçli olarak boştur.
Bu anlarda kullanıcı genelde “sistem bozuldu mu?” diye düşünür. İyi bir empty state tasarımı o belirsizliği tek cümlede kapatır ve eylemi görünür kılar.
Empty State, Skeleton ve Spinner Farkı
Boş ekranı yükleme göstergeleriyle karıştırmak sık yapılan bir hatadır. Skeleton ve spinner “içerik geliyor” der; empty state “içerik yok, şunu yap” der. Aynı gri kutu veya dönen ikonla üç durumu birleştirmek, kullanıcıyı yanlış beklentiye sokar.
| Durum | Ne anlama gelir? | Kullanıcıya mesaj | Tipik UI | Sonraki adım |
|---|---|---|---|---|
| Spinner | İstek sürüyor, sonuç henüz belli değil | Bekle, işlem devam ediyor | Dönen gösterge, kısa metin | Genelde yok; süre kısa tutulur |
| Skeleton screen | Yerleşim biliniyor, veri yükleniyor | Yakında içerik gelecek | Gri bloklar, satır iskeleti | Yükleme bitince gerçek içerik |
| Empty state | Yükleme bitti; gösterilecek kayıt yok | Neden boş ve ne yapabilirsin | İllüstrasyon/ikon, metin, CTA | Oluştur, temizle, keşfet, destek |
Kural net olsun: istek devam ediyorsa skeleton veya spinner; yanıt boş geldiyse empty state. Filtre paneli açıkken sonuç sıfırsa yine empty state gösterin; yükleniyormuş gibi davranmayın.
Empty State Türleri ve Uygun Mesajlar
Tek bir “veri yok” şablonu her boşluğu çözmez. Türü ayırmak hem metni hem CTA’yı netleştirir.
İlk kullanım (onboarding boşluğu)
Kullanıcı henüz hiçbir şey eklememiştir. Mesaj teşvik edici olmalı; suçlayıcı değil. “Henüz projeniz yok” yerine “İlk projenizi oluşturun; ekip ve dosyalar burada toplanır” gibi fayda odaklı bir cümle işe yarar. CTA çoğunlukla “Oluştur”, “İçe aktar” veya “Örnekle başla”dır.
Sıfır arama / filtre sonucu
Kullanıcı aktif olarak arıyordur. Boşluk sistem hatası değil, dar kriterdir. Metin kriteri hatırlatmalı ve gevşetme yolu sunmalıdır: “Bu filtrelerle sonuç bulunamadı. Tarihi genişletin veya kategoriyi temizleyin.” İkincil eylem: filtreleri sıfırla, önerilen aramalar, popüler öğeler.
Silme veya arşiv sonrası boşluk
Liste bilinçli olarak boşalmıştır. Kısa onay ve geri alma yolu güven verir: “Tüm taslaklar arşivlendi. Geri almak için arşive gidin.” Burada yeni oluşturma CTA’sı her zaman doğru olmayabilir; bağlamı koruyun.
Yetki veya boş kapsam
Kullanıcı kayıtları göremez çünkü yetkisi yoktur veya atandığı kapsam boştur. “Yetkiniz yok” demek yerine erişim talebi veya yöneticiye yönlendirme daha nettir. Bu tür empty state’lerde yanlış “oluştur” butonu kafa karıştırır.
Hata ile boşluğu karıştırmamak
Sunucu hatası, zaman aşımı veya ağ kopması empty state değildir. Hata ekranı sorunu, yeniden denemeyi ve gerekirse destek kanalını anlatır. Empty state ise “sistem çalışıyor, içerik yok” demelidir. Bu ayrımı metinde ve görsel dilde koruyun.
İyi Empty State Tasarımının Bileşenleri
Güçlü bir empty state dört parçanın dengeli birleşimidir: görsel, başlık, açıklama ve eylem. Her biri işlev taşır; süs için eklenmez.
Görsel veya ikon
Basit, markayla uyumlu ve abartısız bir illüstrasyon veya çizgi ikon yeterlidir. Anlamsız maskot veya uzun animasyon dikkat dağıtır. Mobilde görseli küçültün veya gizleyin; metin ve CTA her zaman görünür kalsın.
Başlık: durumu tek cümlede söyleyin
Başlık “Boş” gibi genel olmasın. “Henüz sipariş yok”, “Aramanızla eşleşen ürün bulunamadı”, “Favori listeniz boş” gibi somut ifadeler kullanın. Kullanıcı hangi ekranda olduğunu anında anlamalıdır.
Açıklama: neden + ne işe yarar
Kısa paragraf neden boş olduğunu ve boşluğun nasıl dolacağını anlatır. Teknik jargon yerine iş diline yakın cümleler tercih edin. Gerekirse tek örnek verin: “İlk fatura kaydınızı eklediğinizde özet burada görünür.”
Birincil ve ikincil eylem
Tek birincil CTA yeterlidir. İkinci eylem varsa daha düşük görsel ağırlıkta olsun: filtreleri temizle, örnek veriyi yükle, yardım makalesine git. CTA metni fiil içersin; “Devam” yerine “Ürün ekle”, “Filtreleri temizle” gibi net etiketler kullanın. Mesaj ve buton hiyerarşisi için hero section tasarımındaki mesaj–CTA dengesi empty state bloklarında da işe yarar.
Yazım ve Ton: Boşluğu Suçlamadan Yönlendirme
Empty state metni kısa, sakin ve eyleme dönük olmalıdır. “Hiçbir şey yapmadınız” tonu kullanıcıyı uzaklaştırır. Bunun yerine mevcut niyeti kabul eden cümleler yazın.
- Olumlu çerçeve: ne mümkün, ne kazanılacak.
- Somut eylem: tek net fiil.
- Bağlama uygun dil: B2B panelde “oluştur”, e-ticarette “ürün ekle” veya “filtreyi gevşet”.
- Gereksiz mizah yok: boş fatura listesinde şaka güveni zedeler.
Erişilebilirlik de yazımın parçasıdır. Yalnızca renkle “boş” anlatmayın; metin her zaman okunur olsun. İkonun yanında metin bulunmalı, CTA klavye ile odaklanabilir olmalı ve boş durum ekran okuyucuya anlamlı bir başlıkla duyurulmalıdır.
Sektör Örnekleriyle Uygulama
Aynı desen, farklı iş modellerinde farklı CTA’lara bağlanır.
E-ticaret vitrini ve sepet
Kategori filtresi sıfır sonuç verdiğinde “Bu seçimle ürün yok” demek yetmez. Popüler alternatifler, filtre sıfırlama ve arama önerisi sunun. Sepet boşsa yalnızca “Sepetiniz boş” yazmak ciroyu boşa harcar; öne çıkan koleksiyon veya son bakılan ürünlere giden tek bağlantı daha anlamlıdır. Katalog ve sepet boşluklarını planlarken e-ticaret sitesi akışında empty state’leri ayrı ekranlar olarak ele almak gerekir.
Kurumsal panel ve SaaS
Yeni kullanıcıya boş tablo göstermek yerine ilk kaydı, örnek veriyi veya kurulum sihirbazını önerin. “İçe aktar” ile “Manuel ekle” seçenekleri yan yana durabilir; birincil olanı iş modelinize göre seçin. Liste sayfalarındaki boş durum, hizmet listesinden detaya giden netlik kadar önemlidir: kullanıcı nereye gideceğini anlamalıdır.
Arama sonuçları ve içerik siteleri
Blog veya kaynak aramasında sıfır sonuç, ilgili etiketlere veya popüler yazılara köprü kurmalıdır. “Sonuç yok” ile biten bir sayfa, ziyaretçiyi tarayıcı geri tuşuna iter. Burada empty state bir keşif yüzeyi gibi çalışır.
Uygulama Kontrol Listesi
Empty state tasarımını üretime almadan önce şu soruları netleştirin:
- Bu boşluk yükleme mi, gerçek boşluk mu, yoksa hata mı? Üç durum için ayrı UI var mı?
- Boşluğun türü nedir: ilk kullanım, filtre, silme, yetki?
- Başlık somut mu? Kullanıcı hangi ekranda olduğunu anlıyor mu?
- Açıklama nedeni ve faydayı iki cümlede veriyor mu?
- Tek birincil CTA var mı ve metni fiil içeriyor mu?
- İkincil eylem gerçekten gerekli mi, yoksa gürültü mü?
- Mobilde görsel metni ezmiyor mu; CTA parmakla kolay basılıyor mu?
- Boş durum analitiğe bağlandı mı: gösterim, CTA tıklama, tamamlanan ilk eylem?
- Boş ekrandan dönen kullanıcı aynı hataya düşmemesi için geri bildirim (toast, onay) var mı?
- Marka görseli sade mi; erişilebilir kontrast ve metin alternatifi sağlandı mı?
Ölçüm olmadan empty state “güzel bir boşluk” olarak kalır. En azından empty gösterim sayısı ile birincil CTA dönüşümünü izleyin; hangi mesajın ilk eylemi hızlandırdığını görün.
Sık Yapılan Hatalar
Aşağıdaki kalıplar boş ekranı faydaya çevirmek yerine kullanıcıyı yavaşlatır:
- Yalnız ikon veya yalnızca “Veri yok” yazısı; eylem yok.
- Skeleton’ı empty state sanıp sürekli gri kutular göstermek.
- Aynı anda üç birincil buton koymak ve önceliği kaybetmek.
- Filtre sonucu boşken “bir şey ekle” demek; oysa kullanıcı arıyordur.
- Hata kodunu empty state metnine gömmek.
- Mobilde dev illüstrasyonla CTA’yı aşağı itmek.
- Her liste için kopyala-yapıştır genel metin kullanmak.
KepezWeb projelerinde empty state’i sayfa iskeletinin parçası gibi ele alırız: hangi listenin hangi boşluk türlerini üretebileceği tasarım aşamasında konuşulur, son anda eklenmez. Web tasarım sürecinde bu durumlar kullanıcı akış haritasına yazıldığında hem geliştirme hem içerik üretimi netleşir.
Sıkça Sorulan Sorular
Empty state her boş listede zorunlu mudur?
Evet, kullanıcı o ekranda içerik bekliyorsa boşluğun nedeni ve sonraki adım görünür olmalıdır. Teknik olarak boş bir tablo bırakmak belirsizlik üretir.
Empty state ile 404 aynı şey midir?
Hayır. 404 kaynak bulunamadığını; empty state ise geçerli bir ekranda gösterilecek kaydın olmadığını anlatır. Mesaj, görsel dil ve CTA’lar farklı kurgulanmalıdır.
İllüstrasyon şart mı?
Şart değildir. Net başlık, kısa açıklama ve güçlü CTA çoğu iş panelinde yeterlidir. İllüstrasyon marka ve ilk kullanım deneyimini destekliyorsa eklenir; yoksa metin odaklı sade bir blok tercih edilir.
Sıfır arama sonucunda ne önermeliyim?
Önce filtre veya sorguyu gevşetme yolunu verin. Ardından popüler veya yakın sonuçlar, son bakılanlar veya kategori keşfi sunun. “Ürün ekle” gibi oluşturma CTA’sı arama bağlamında genelde yanlıştır.
Empty state metinleri kim yazmalı?
Ürün, tasarım ve içerik birlikte karar vermelidir. Teknik ekip durumu, tasarım hiyerarşiyi, içerik ise tonu ve eylem etiketini netleştirir. Son metin gerçek veri senaryolarında kontrol edilmelidir.
Boş ekranı bir “eksik” gibi değil, dönüşüm ve öğrenme anı gibi ele almak arayüz kalitesini belirgin biçimde yükseltir. Listeniz, sepetiniz veya paneliniz için empty state akışını netleştirmek istiyorsanız teklif al sayfasından projenizi kısaca anlatabilirsiniz; birlikte hangi boşluk türlerinin net sonraki adıma bağlanacağını planlarız.
