web design uiMay 1, 20269 min read

Boş Durumlar Ürünün Kendisidir

Boş durumlar cila değildir. Onlar aktivasyon yüzeyi, ilk izlenim ve kullanıcılar gerçek veriyi görmeden önce tutundurma eğrinizin kırılıp kırılmayacağına karar veren ekrandır.

By Boone
XLinkedIn
Empty States Are the Product

Ürününüzdeki en önemli ekran, içinde hiçbir şey olmayan ekrandır. Dashboard değil. Ayarlar sayfası değil. Kullanıcının henüz hiç veri yokken indiği ekran. O ekran, tüm ürünün tek bir kareye sıkıştırılmış halidir ve çoğu ekip ona sonradan akla gelen bir iş gibi davranır.

Boş durumlar vakti olan kişiye atanır. Elinde büyüteç tutan birinin stok illüstrasyonunu ve "Burada henüz bir şey yok." cümlesini alırlar. Sonra ekip yayına çıkar ve aktivasyonun neden düz kaldığını merak eder. Boş durum cila değildi. Ürünün kendisiydi. Siz sadece yanlış olanı yaptınız.

Boş durum aktivasyon yüzeyidir

Aktivasyon dashboard'da gerçekleşmez. Boş durumda gerçekleşir. Kullanıcı ürünün ikinci bir oturumu hak edip etmediğine tam orada karar verir.

Yeni bir kullanıcı yol haritanızı ya da vaka çalışmalarınızı görmez. Üzerinde logonuz olan boş bir ekran ve "tamam, şimdi ne yapacağım" diye soran küçük bir ses görür. Ekranın bundan sonra söylediği şey ürün olur. Boş durum, kullanıcının şimdiye kadar kullandığı tek üründür.

Linear bunu anlıyor. Boş gelen kutusu "Issue yok." demez. Tek bir klavye kısayolu, tek bir net sonraki adım ve önemseyen insanların yaptığı bir aracın içinde olduğunuz hissi olan sıkı kurgulanmış bir tuvaldir. Boş durum aktivasyondur. Dashboard ödüldür.

Her boş durum ne söylüyor

Boş durum, sistemin söyleyecek başka bir şeyi olmadığında konuşmasıdır. Ne söylerse marka olur ve kullanıcının bu ürünün ona nasıl davrandığına dair ilk izlenimini oluşturur.

Kötü bir boş durum veri olmadığı için özür diler. İyi olan, kullanıcının buraya bilerek geldiğini varsayar ve ona bir sonraki hamleyi verir. Fark duruştadır. Biri "üzgünüm, burada bir şey yok" der. Diğeri "işler şöyle başlar" der.

Notion'ın boş dokümanı sektördeki en temiz örnektir. Yumuşak bir prompt, bir slash menü ipucu, anında klavye odağı. İllüstrasyon yok, karşılama ekranı yok. Yazma eylemi aktivasyondur ve boş durum üründür.

Tasarımcıların sürekli yanlış yaptığı beş arketip

Çoğu ekip "boş durumu" tek bir tasarım problemi sayar. Aslında beş tanedir. Her biri farklı bir anda ortaya çıkar, tutundurmada farklı bir rol oynar ve farklı bir nedenle başarısız olur.

Yan yana beş etiketli kartın voxel diyagramı, her biri bir boş durum arketipini temsil ediyor: ilk çalıştırma, sonuç yok, izin yok, bağlantı yok ve AI çıktısı yok
Yan yana beş etiketli kartın voxel diyagramı, her biri bir boş durum arketipini temsil ediyor: ilk çalıştırma, sonuç yok, izin yok, bağlantı yok ve AI çıktısı yok

1. Sıfır veri, ilk çalıştırma

Kullanıcının ürünü ilk açtığında gördüğü ekran. Proje yok, doküman yok, geçmiş yok. Uygulamadaki en yüksek riskli boş durum ve genellikle en çok ihmal edilen.

Cursor'ın ilk açılış durumu bir ders niteliğinde. Tek bir editör penceresi, yumuşak bir prompt, klavye için hazırlanmış örnek bir komut. Tur yok, tooltip geçit töreni yok, "Cursor'a hoş geldiniz" modalı yok. Kullanıcı zaten işin içinde.

Figma'nın yeni dosya tuvali aynı şeyi farklı bir tonda yapar. Temiz bir sonsuz tuval, erişilebilir bir araç çubuğu, bıraktığınız yerde duran bir imleç. Bunu beş adımlık bir kontrol listesi ve "Çalışma alanınızı bağlayın" duvarıyla açılan ürünlerle karşılaştırın. Biri araç gibi hissettirir. Diğeri ödev gibi.

2. Filtreden sıfır sonuç

Kullanıcı az önce belirli bir şey istedi ve ürününüzün gösterecek hiçbir şeyi yok. Bu bir güven anıdır. Boş durum aramayı kabul etmeli, çalıştığını doğrulamalı ve bir sonraki adımı sunmalı.

Linear aktif filtreyi, tek satırlık bir açıklamayı ve net bir "Filtreleri temizle" eylemini gösterir. Stripe'ın ödemeler dashboard'u, bir tarih aralığı sonuç döndürmediğinde aynısını yapar. Sayfa ortadan kaybolmaz. Açıklar, sonra teklif sunar.

Başarısızlık biçimi çıkmaz sokaktır: "Sonuç bulunamadı." Nokta. Bağlam yok, çıkış yok. Kullanıcı ürünün yarattığı bir durumda sıkışıp kalır ve ürün onu oradan çıkarmayı reddeder.

3. Sıfır izin

Kimsenin tasarlamadığı ama herkesin yayına aldığı boş durum. Kullanıcı erişimi olmayan bir ekrana düşer ve ürün merak ettiği için onu cezalandırır. Bir 403, bir "İznin yok" satırı, bir çıkmaz.

İyi sürüm kullanıcıya saygı duyar. Erişimi kimin verebileceğini açıklar, tek tıkla "Erişim iste" düğmesi sunar ve sonra ne olacağını söyler. Slack, üye olmayan biri olarak özel bir kanala tıkladığınızda bunu yapar. Boş durum duvarı kapıya çevirir.

4. Sıfır bağlantı

Kullanıcı ürününüzü açtı ve ürün henüz hiçbir şeye bağlanmadı. Hiç ödeme yokken Stripe. Hiç deploy yokken Vercel. Hiçbir kanalın gerçek olmadığı yeni bir Slack çalışma alanı. Uygulamadaki en yüksek terk riski, çünkü kullanıcı boş bir ürüne bakıyor ve onu doldurmaya henüz kendini adamadı.

Stripe Atlas'ın "henüz ödeme yok" durumu bir ustalık dersidir. Üzgün yüzlü boş bir grafik yok. Dashboard'un göstereceği etkinlik türünü gösterir, sizi ilk entegrasyonunuza yönlendirir ve bir sonraki adımda ihtiyaç duyacağınız API anahtarına doğrudan bağlantı verir.

Vercel'in boş proje listesi boşluğun tam tersidir. Bir deploy düğmesi, bir import seçeneği, aynı ekranda örnek bir şablon. İlk deploy aktivasyon olayıdır ve boş durum pisttir.

5. Sıfır AI çıktısı

Yeni ve çoğu ürün bunda başarısız oluyor. Kullanıcı bir prompt gönderdi ve sistemin döndürecek bir şeyi yok. Model zaman aşımına uğradı, girdi yetersizdi ya da bir çıktı bariyeri engelledi.

Kötü sürüm "Üzgünüz, bir şeyler ters gitti." der. İyi sürüm nettir. Neden hiçbir şey dönmedi, kullanıcı neyi değiştirebilir, yeniden deneme yolu var mı. Loom'un ilk kayıt akışı benzer bir sorunu iyi çözer: kayıt yüklenemediğinde boş durum hatayı açıklar ve dosyayı kaybetmeden anında yeniden deneme sunar. AI ürün onboarding tasarımı incelemesi, AI çekirdek yüzey olduğunda onboarding'in genel şeklinin nasıl değiştiğini anlatır.

Her boş durumun neye ihtiyacı var

Güçlü olanlar beş öğeyi paylaşır. Birini atlarsanız ekran tekrar özür moduna düşer.

  1. Bağlam. Kullanıcının neye baktığını ve neden boş olduğunu söyleyin. "Henüz issue yok" yetmez. "Bu döngüde issue yok. İlkini C ile ekle." işini yapan bir ekrandır.
  2. Eylem. Tek bir birincil eylem, tek bir tuş, tek bir düğme. Ne yapacaklarını anlatan üç cümle yazıyorsanız tasarım yanlıştır.
  3. Ses. Sistemin söyleyecek başka şeyi olmadığındaki sesi markanın geri kalanıyla uyumlu olmalı. Samimi bir ürünün içindeki steril bir hata tonu büyüyü bozar.
  4. Hiyerarşi. Başlık, tek satırlık açıklama, birincil eylem, isteğe bağlı ikincil bağlantı. İşi gerçek görsel hiyerarşinin yaptığı dört öğe. Fazlası dağınıklıktır.
  5. Hareket. Ekranın canlı olduğuna dair yumuşak bir ipucu. Yanıp sönen bir imleç, ince bir CTA nabzı, küçük hareketli bir ok. Ürünün kullanıcıyı beklediğinin sinyali.

Boş durumları öldüren hata biçimleri

Altı kalıp, diğer her şeyden daha fazla boş durumu öldürür.

Geçiştiren illüstrasyonlar. Pano tutan bir karakter. Bir teleskop. Süzülen bir astronot. Bunlar ekranın yapması gereken işin yerini alır ve ürünün gerçek metin yazacak kadar ciddi olmadığını gösterir.

Çıkmaz durumlar. Sonraki adımı olmayan "Burada henüz bir şey yok". Çıkışı olmayan bir 404. Erişim yolu olmayan bir 403. Sonraki eylemi olmayan her boş durum, tutundurmada bir sızıntıdır.

Nutuk atan boş durumlar. Bu bölümün ne işe yaradığını anlatan uzun bir paragraf. Kullanıcı ürünü kullanmaya geldi, eğitim okumaya değil. Boş durum üç paragraf gerektiriyorsa, ekranın daha fazla metne değil, ürünün daha az açıklamaya ihtiyacı var.

Inbox-zero tuzağı. "İlk eylem" akışından önce "hepsi bitti" kutlamasını tasarlamak. Superhuman inbox zero'yu aylarca gerçek işle hak eder. Çoğu ürün kutlamayı hak etmeden kopyalar ve kullanıcılar ilk günde kendilerine tepeden bakıldığını hisseder.

"Burada henüz bir şey yok" kaçamağı. Üç kelime, bağlam yok, eylem yok, ses yok. Bir tasarımcının pes etmesinin boş durum karşılığı. Bu cümle ürününüzde yayındaysa, tutundurmanız zaten kırılmıştır.

Tüm arketiplerde aynı jenerik. İlk çalıştırma, sonuç yok, izin yok, bağlantı yok için yeniden kullanılan tek bir bileşen. Her arketipin riski farklıdır. Tek bir bileşen, hepsini ezmeden hepsine hizmet edemez.

Boş durum denetimi

Kameraya doğru eğilmiş dikey bir kontrol listesi kart yığınının voxel render'ı, her satırda mercan rengi bir onay kutusu ve beyaz bir metin çubuğu var, yürütülen bir denetimi çağrıştırıyor
Kameraya doğru eğilmiş dikey bir kontrol listesi kart yığınının voxel render'ı, her satırda mercan rengi bir onay kutusu ve beyaz bir metin çubuğu var, yürütülen bir denetimi çağrıştırıyor

Her boş durumu şu yedi sorudan geçirin. Hepsine net bir evet diyemiyorsanız, ekran bitmemiştir.

  1. Ekran kullanıcıya nerede olduğunu ve neden boş olduğunu söylüyor mu? Bir etiket, tek satırlık bir açıklama, bir neden. Tahmin etmek zorundalarsa ekran yüklenmeden önce başarısız olmuştur.
  2. Tam olarak bir birincil eylem var mı? Birbiriyle yarışan iki düğme değil. Hiyerarşi ve kontrastla belirginleştirilmiş tek bir eylem, ekranın gerçekte olduğu hero bölümü gibi.
  3. Ses ürünün geri kalanıyla uyumlu mu? Dolu bir ekranın yanında yüksek sesle okuyun. Ton değişiyorsa, boş durum başka bir markayı giymiştir.
  4. Sonraki adım tek tuşla ya da tıkla yapılabilir mi? "Ayarlara git, sonra bağlan, sonra geri dön" değil. Tek hamle. Daha uzun olan her şey, boş durumun üstlenmesi gereken iştir.
  5. Ekran terk edilmiş değil, canlı hissettiriyor mu? Bir imleç, bir nabız, bir yer tutucu, bir ipucu. Statik bir boşluk, doğru çalışsa bile bozuk hissettirir.
  6. Ekran arketipe özgü mü? Her arketipin riski ve metni farklıdır. Yeniden kullanılan jenerik bir bileşen sistem değil, kötü bir kokudur.
  7. Kullanıcı sadece bu ekranı görürse, ürünü satıyor mu? Cevap hayırsa, boş durum üzerine düşeni yapmıyordur ve yeni kullanıcıların çoğu ürünü bu ekrana göre yargılayacaktır.

Her boş durumu bu yedi soruyu geçen bir ürün, uğraşmadan aktive eder. Geri kalan her şey, ikna işini zaten yapmış ekranların üzerine biner.

Prensibi seç, sonra ekranı yayınla

Boş durumlar cila katmanı değil, yük taşıyan katmandır. 2026'da kazanan ürün, ilk ekranı, sıfır sonuç sayfası ve bağlantısı kesilmiş dashboard'u zaten kullanıcının kaydolduğu ürün gibi hissettiren üründür. Landing page tasarım prensipleri incelemesi pazarlama sayfası versiyonudur, web tasarım prensipleri yazısı ise ürünün geri kalanının nasıl takip ettiğini anlatır.

Önce dashboard'u tasarlamayı bırakın. Üzerinde hiçbir şey olmayan ekranla başlayın. Dashboard ödüldür. Boş durum anlaşmadır.

Sıkça sorulan sorular

Boş durum ile sıfır durum arasındaki fark nedir?

Çoğu ekipte aynı anlama gelirler. "Sıfır durum" daha çok ilk çalıştırma, veri yok senaryolarını ifade etme eğilimindedir. "Boş durum" daha geniştir ve beklenen içeriğin olmadığı her ekranı kapsar: filtrelenmiş sonuçlar, izin duvarları ve AI hataları dahil. Prensipler aynıdır.

Her boş durumda illüstrasyon olmalı mı?

Hayır. Çoğunda olmamalı. İllüstrasyon, bilgi taşıyorsa, markanın ihtiyaç duyduğu bir ton belirliyorsa ya da karmaşık bir ilk çalıştırma açıklamasını görsel olarak sabitliyorsa haklıdır. Pano tutan sevimli bir karakter tasarım değil, dekorasyondur. Ekran illüstrasyonsuz çalışıyorsa, illüstrasyonsuz yayınlayın.

Boş durum için metin nasıl yazılır?

En fazla iki cümle. Birincisi kullanıcının neye baktığını ve neden boş olduğunu söyler. İkincisi bir sonraki hamleyi, etken çatıda, bir fiille anlatır. Her sıfatı ve her özrü atın. Yüksek sesle okuyun. Stok bir şablon gibi geliyorsa, yeniden yazın.

Önce boş ekranı tasarlayın

Üzerinde hiçbir şey olmayan ekran, her şeye karar veren ekrandır. Dashboard ve entegrasyonlar, bilerek tasarlamamış olabileceğiniz bir ilk izlenimin üzerinde durur. O ekranı doğru yapmanın maliyeti fazladan bir haftadır. Yanlış yapmanın maliyeti, kimsenin açıklayamadığı tutundurma eğrisidir.

Boş durumları en sonda temizlik olarak değil, ürünün bir parçası olarak tasarlayan bir ekip istiyorsanız, Brainy'yi tutun. Kullanıcının gördüğü ilk ekranın, hatırladığı ekran olduğu ürünler yayınlıyoruz.

Want a product where the empty states do the selling instead of the apologizing? Brainy designs first-run flows and zero states as part of the product, not as cleanup.

Get Started

More from Brainy Papers

Keep reading