Boş durum empty state

bilinen diğer adları empty state · boş ekran · sıfır durumu

Böyle diyorsan: "hiç kayıt yokken çıkan ekran" · "henüz bir şey yok yazısı" → bunun adı boş durum.

Liste/veri boşken gösterilen açıklama + ilk-adım aksiyonu; boş beyaz ekranın ilacı.

Boş durum, gösterilecek veri olmadığında ekranda kalan şeydir — ve çoğu üründe hiç tasarlanmaz, o yüzden kullanıcı boş beyaz bir alanla karşılaşıp arayüzün bozuk olduğunu düşünür. İyi bir boş durum üç şeyi birden yapar: ne olduğunu söyler, neden böyle olduğunu açıklar ve ilk adımı gösterir. En çok atlanan ayrım ise boşluğun TÜRÜDÜR: hiç veri olmaması (yeni kullanıcı), aramanın sonuç bulamaması (filtre çok dar) ve hata yüzünden veri gelmemesi birbirinden tamamen farklı durumlardır ve aynı ekranla karşılanamazlar. İlkinde kullanıcıya yol gösterilir, ikincisinde filtre gevşetilir, üçüncüsünde tekrar denenir.

Kapsam: Bu madde veri GELDİ ve boş çıktı durumunu kapsar. Veri hâlâ yoldaysa gösterilecek şey İskelet Yükleme ya da Spinner'dır; sayfada duran kalıcı uyarı ise Uyarı Şeridi maddesindedir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı

SiparişlerimFiltrele

📦

Henüz sipariş yok

Aşama aşama gezmek için okları ya da numaraları kullan.

YAPIM PROMPTU — AJANINA YAPIŞTIR

Sipariş listesine boş durum ekle: yumuşak ikon + 'Henüz siparişin yok — ilk siparişinle %10 indirim' + 'İlk siparişini ver' birincil butonu; filtre uygulanmış da sonuç boşsa FARKLI ekran: 'Bu filtrelerle sonuç yok' + 'Filtreleri temizle'; yüklenirken boş durum FLAŞLAMASIN — önce skeleton, veri kesinleşince boş durum.

DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Boş durumum huysuz; klasikleri sırayla ele: (1) 'veri yok' ile 'filtre sonucu boş' aynı ekranda — kullanıcı filtreyi temizlemeyi akıl edemiyor; (2) sayfa yüklenirken bir anlığına boş durum FLAŞLIYOR sonra veri geliyor (durumlar karışmış: loading≠empty); (3) eylem butonu yok — çıkmaz sokak; (4) metin teknik ('0 kayıt bulundu'); (5) hata durumu da boş durum gibi gösteriliyor — 'internetin mi yok, verim mi yok' belirsiz. Belirti şu:

ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)

1Görsel/ikonhafif illüstrasyon
Boşluğun 'bozuk değil, henüz boş' olduğunu söyleyen yumuşak görsel.
2Açıklamainsan dili
'Henüz sipariş yok' — teknik değil ('0 kayıt bulundu' değil); mümkünse faydayı da söyler.
3Birincil eylemilk adım butonu
Boş durumun asıl işi: kullanıcıyı İLK eyleme taşımak — eylemsiz boş ekran çıkmaz sokaktır.
4Boşluk türü ayrımıveri yok / filtre boş
Hiç veri olmaması ile filtrenin sonuç bulamaması AYRI ekranlardır; ikincide eylem 'filtreyi temizle'dir.

DURUMLAR — HANGİ HÂLDE NE OLUR

Aİlk kullanımhiç veri yok
Kullanıcı yeni. Burası bir fırsattır: ürünün ne işe yaradığını gösteren ve ilk adımı attıran en doğal yerdir. 'Kayıt yok' demek yerine 'İlk siparişini oluştur' de.
BArama sonuçsuzfiltre çok dar
Veri var ama bu sorguya uymuyor. Filtreleri temizleme, yazım önerisi ya da yakın sonuç sun; kullanıcı yanlış bir şey yapmadı.
CHataveri gelemedi
İstek başarısız. Bunu boşlukmuş gibi gösterme — 'kayıt yok' demek yanlış bilgi vermektir; hata olduğunu söyle ve tekrar dene sun.
DYetki yokerişim reddedildi
Veri var ama bu kullanıcıya kapalı. Boş liste göstermek yerine sebebi söyle; yoksa kullanıcı kaybolmuş veri arar.
ETemizlendikullanıcı sildi
Kullanıcı kendi boşalttı. Bu olumlu bir hâldir; kutlanabilir ('Hepsi tamam') ve ilk kullanımdan farklı bir dil ister.

KODDAKİ ADLARI

UX	loading/empty/error/success ayrımı	dört durum dört ekran
UX	birincil eylem zorunlu	çıkış yolu
Metin	insan dili + fayda	teknik dil yasak

ERİŞİLEBİLİRLİK & SIK HATA

Boş durumu ekran okuyucuya duyur (role="status"): liste güncellendi ve boş çıktıysa görsel bir illüstrasyon hiçbir şey söylemez.
İllüstrasyon dekoratifse aria-hidden ile gizle; bilgi taşımıyorsa okunması yalnızca gürültüdür.
Metni insan diliyle yaz. 'Veri bulunamadı' teknik bir cevaptır; kullanıcı ne yapacağını öğrenmez.
Birincil eylem gerçek bir düğme olsun ve klavyeyle ulaşılabilsin; boş durumun tek çıkış yolu odur.
Hata durumunu boşluk gibi gösterme: 'kayıt yok' demek, aslında var olan verinin kaybolduğunu düşündürür ve kullanıcıyı yanlış yönlendirir.

SIK KARIŞTIRILANLAR

İskelet yüklemeden farkı. İskelet 'veri YOLDA' der, boş durum 'veri YOK' der. Karıştırıldığında ortaya sonsuza kadar parıldayan gri kutular çıkar. Veri geldiyse ve boşsa iskeleti bırakıp boş duruma geçmek zorundasın: bekleme bitmiştir, söylenecek şey değişmiştir.

İskelet yükleme sayfasına git →

Uyarı şeridinden farkı. Boş durum içeriğin YERİNİ alır — ekranda ondan başka bir şey yoktur; uyarı şeridi ise var olan içeriğin yanında durur. Bu yüzden boş durum bir yönlendirme fırsatıdır (ilk adımı attırır), şerit ise bir bilgilendirmedir. Boş listenin üstüne şerit koyup altını boş bırakmak ikisinin de işini yarım yapar.

Uyarı şeridi sayfasına git →

KAYNAKLAR

standartMDN — role="status" ↗
Liste boş çıktığında sonucun duyurulması.
standartW3C — WCAG 2.2, Error Identification (3.3.1) ↗
Hata durumunun boşlukmuş gibi değil hata olarak bildirilmesi.
birincilW3C — ARIA APG, kalıp listesi ↗
Boş durum için resmi bir kalıp yoktur; davranışı canlı bölge ve buton kalıplarından kurarsın.

İLGİLİ PARÇALAR

İskelet yükleme skeleton Uyarı şeridi alert / banner Arama çubuğu search bar Dosya yükleme file upload

AYNI AİLEDE · GERI BILDIRIM