UI/UX tasarımda empty state ve error state çoğu zaman küçük detay gibi görünür ama gerçek ürün kalitesini, kullanıcı güvenini ve tamamlanma oranını doğrudan etkiler.
Bir ürünün kalitesi sadece ana ekranda belli olmaz.
Bazen asıl kalite, hiçbir veri yokken ya da bir şeyler yanlış gittiğinde ortaya çıkar.
Yani empty state ve error state dediğimiz alanlarda.
Bunlar küçük detay gibi görünür.
Ama kullanıcı açısından çok kritik anlardır.
Çünkü kullanıcı tam o anda şunu düşünür:
Burada ne oldu ve şimdi ne yapmam gerekiyor?
İyi tasarım bu soruya hızlı cevap verir.
Kötü tasarım ise kullanıcıyı boşlukta bırakır.
Empty state nedir?
Empty state, bir ekranda gösterilecek içerik henüz olmadığında ortaya çıkan durumdur.
Mesela yeni açılmış bir dashboard.
Henüz eklenmiş görev yok.
Arama sonucu bulunamadı.
Sepet boş.
Bildirim yok.
Kullanıcı tüm dosyaları sildi.
Bunların hepsi empty state olabilir.
Buradaki hata, bu ekranı sadece boş bırakmaktır.
Çünkü kullanıcı boş ekran görünce sistemin çalışıp çalışmadığından emin olamayabilir.
Bu gerçekten boş mu?
Yüklenmedi mi?
Ben mi yanlış yaptım?
Bu soruları düşündürmemek gerekiyor.
İyi empty state ne yapar?
İyi bir empty state üç şeyi net anlatır:
- Burada neden içerik yok?
- Normalde burada ne görünecek?
- Kullanıcı şimdi ne yapabilir?
Bu kadar.
Uzun açıklamaya gerek yok.
İyi bir boş durum ekranı kullanıcıyı sakinleştirir ve bir sonraki adıma taşır.
Mesela “Henüz proje yok” demek tek başına zayıf kalabilir.
Daha iyi yaklaşım şudur:
Henüz proje oluşturmadın. İlk projenle görevlerini, dosyalarını ve ekip akışını burada takip edebilirsin.
Sonra net bir aksiyon:
Yeni proje oluştur.
Bu kadar basit.
Error state nedir?
Error state, kullanıcı bir hata yaptığında ya da sistem bir işlemi tamamlayamadığında görünen durumdur.
Form hatası olabilir.
Ödeme hatası olabilir.
Dosya yüklenememiş olabilir.
Sunucu cevap vermemiş olabilir.
Bağlantı kesilmiş olabilir.
Burada kritik olan şey, kullanıcıyı suçlamadan doğru bilgi vermektir.
“Hata oluştu” demek genelde yetersizdir.
Kullanıcı şunu bilmek ister:
- Ne yanlış gitti?
- Bu benim düzeltebileceğim bir şey mi?
- Nasıl devam edeceğim?
İyi hata mesajı bu üç soruya cevap verir.
Kötü hata mesajı kullanıcıyı yorar
Bir form düşün.
Kullanıcı tüm alanları dolduruyor.
Kaydet diyor.
Sonra üstte küçük bir mesaj çıkıyor:
“Geçersiz bilgi.”
Hangi bilgi geçersiz?
Neden geçersiz?
Nasıl düzeltilecek?
Belli değil.
Bu durumda kullanıcı tekrar tekrar denemek zorunda kalır.
Bu da güveni azaltır.
Özellikle ödeme, kayıt, başvuru, rezervasyon gibi kritik akışlarda kötü error state direkt kayıp yaratabilir.
Form hatalarında en basit kural
Hata mesajı problemli alanın yanında ya da çok yakınında olmalı.
Kullanıcı hatayı aramamalı.
Ayrıca sadece kırmızı renk kullanmak yeterli değil.
Metin de olmalı.
Çünkü herkes rengi aynı şekilde algılamaz.
Accessibility tarafında bu çok önemli.
Örnek:
Zayıf mesaj: “Hatalı giriş.”
Daha iyi mesaj: “E-posta adresi @ işareti içermeli.”
Daha iyi mesaj kullanıcıya hem problemi hem çözümü verir.
Empty state sadece süs değildir
Bazı ürünlerde empty state alanları çok süslü illüstrasyonlarla geçiştiriliyor.
İllüstrasyon olabilir.
Ama tek başına yetmez.
Boş durumun amacı ekranı sevimli göstermek değil, kullanıcıya yön vermektir.
Bu yüzden önce metin ve aksiyon düşünülmeli.
Görsel sonra gelir.
Kullanıcı o ekranda neden olduğunu anlamıyorsa, görsel ne kadar güzel olursa olsun UX zayıf kalır.
Product design açısından neden önemli?
Empty state ve error state ürünün gerçek hayattaki davranışını gösterir.
Çünkü gerçek kullanıcı her zaman ideal senaryoda ilerlemez.
Veri olmayabilir.
Arama sonuç dönmeyebilir.
Form yanlış doldurulabilir.
İnternet kopabilir.
Yetki eksik olabilir.
İyi product design bu durumları baştan düşünür.
Sadece “happy path” tasarlamak yetmez.
Ürün, sorun çıktığında da kullanıcıyı taşıyabilmeli.
Bu konu design system tarafıyla da bağlantılı. Çünkü hata, boş durum, loading ve success state gibi yapılar component mantığı içinde düşünülürse ürün daha tutarlı olur. Bu temel için Design Systems for Beginners yazısına bakabilirsin.
UX writing burada çok belirleyici
Empty state ve error state iyi yazı ister.
Çünkü bu ekranlarda kullanıcıya konuşan şey çoğu zaman metindir.
Kısa, net ve sakin olmak gerekir.
Kullanıcıyı suçlayan dilden kaçınmak gerekir.
“Yanlış girdiniz” yerine “Bu alan 8 karakterden kısa olamaz” demek daha iyidir.
“Bir hata oluştu” yerine “Dosya yüklenemedi. İnternet bağlantını kontrol edip tekrar deneyebilirsin” demek daha açıklayıcıdır.
İyi UX writing kullanıcının yükünü azaltır.
Tasarımcı için pratik checklist
Bir ekran tasarlarken sadece dolu halini değil, şu durumları da kontrol etmek lazım:
- İlk kullanımda içerik yoksa ne görünecek?
- Arama sonucu yoksa kullanıcı nereye yönlenecek?
- Liste tamamen silinirse ekran nasıl kalacak?
- Formda hatalı alan nasıl gösterilecek?
- Hata mesajı problemi açık söylüyor mu?
- Kullanıcıya çözüm öneriliyor mu?
- Sadece renk değil, metin de kullanılıyor mu?
- Loading sonrası boş sonuç ile hata durumu karışıyor mu?
- Mobilde mesajlar okunabilir mi?
- Screen reader için anlamlı metin var mı?
Bu checklist küçük görünür ama ürünü ciddi şekilde güçlendirir.
Portfolio için de iyi bir detay
Junior ya da mid-level tasarımcı portfolio hazırlarken sadece ana ekranları gösteriyor.
Ama empty state, error state, loading state gibi detayları göstermek fark yaratır.
Çünkü bu detaylar senin gerçek ürün düşündüğünü gösterir.
Bir işe alım yapan kişi şunu görür:
Bu kişi sadece güzel ekran değil, ürün davranışı da düşünüyor.
Portfolio tarafındaki bu yaklaşımı Junior UI/UX Tasarımcılar 2026’da Nasıl Öne Çıkar? yazısında daha geniş anlatmıştım.
Benim düşüncem
Empty state ve error state tasarımın arka sokakları gibi görülüyor.
Ama bence ürün kalitesi en çok buralarda belli oluyor.
Çünkü kullanıcı tam bu anlarda desteğe ihtiyaç duyuyor.
İyi tasarım kullanıcıyı yalnız bırakmaz.
Ne olduğunu söyler.
Neden olduğunu açıklar.
Bir sonraki adımı gösterir.
Bu yüzden UI/UX tasarımda sadece güzel ana ekran yapmak yetmez.
Boş, hatalı, bekleyen ve başarılı durumları da düşünmek gerekir.
Gerçek ürün hissi burada başlar.
UI/UX ve product design tarafında daha fazla içerik için UI/UX, Product Design ve Growth kategorilerine bakabilirsin.
