Boş durumlar ve UX ipuçları

1) Boş durumlara neden ihtiyaç duyulur

• Neden boş olduğunu açıklar,
• Bundan sonra ne yapılacağını gösterir,
• güvenli bir ilk adım sunar,
• Kaygıyı azaltır ve destek süresinden tasarruf sağlar.

2) Boş durumların tipolojisi

1. İlk kez - kullanıcı henüz bir şey yapmadı.
2. Sıfır veri - Varlıklar oluşturulmaz veya liste boştur.
3. Filtreler/arama (sonuç yok) - koşullar tüm hariç.
4. Hata/geçici erişilemezlik - ağ/sunucu, ancak veriler prensipte.
5. Hak/kısıtlama yok - erişim engellendi, QAS/rol/sınır gerekli.
6. Bakım - planlı çalışma, bekleme.

3) Boş kart yapısı

Simge/illüstrasyon (aşırı yükleme yapmayın; Kontrast ≥ AA)

Tek satırlık başlık: "Burası hâlâ boş".

Sebep/bağlam: "Henüz eklemediniz... "/" Filtre eşleşme bulamadı "

1-2 eylem (CTA): birincil (ana senaryo), ikincil (alternatif).
Kurtarmaya bağlantı (isteğe bağlı).
Sayfa seviyesi: her zamanki gezinme ve filtreleri tutun - ekranı çıkmaz sokağa çevirmeyin.

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4) Ton ve metin (UX metin yazarlığı)

Açıkça ve nazikçe. "Hata 0x"....'den kaçının

Sebep - eylem. VIP filtresi tüm girişleri hariç tuttu. Filtreyi sıfırlamak istiyor musunuz?
Suçluluk yok. Boşluk için kullanıcıyı suçlamayın.
Bir düşünce, bir cümle.
Yerelleştirme: Kültürel metaforlardan kaçının; Yer imi + metin uzunluğunun %20-30'u.

5) İllüstrasyonlar ve görsel

Tarafsız, göze batmayan; Karanlık temada, resimlerin hafifliğini artırın.
İllüstrasyonları tek anlam aracı olarak kullanmayın.
Ölçek sabittir; Izgarayı veya satır taban çizgisini kırmayın.

6) CTA ve alternatifleri

Birincil CTA bir sonraki ana adımdır (oluşturma/para yatırma/abone olma).
İkincil - "bkz. demo", "içe aktarma", "filtreleri sıfırlama".
Seçim sınırı: 2 CTA'ya kadar; Gerisi "Daha Fazlası'nda.
Riskler/ödemeler ile - sonuçları ve iptali hakkında şeffaf metin.

7) Senaryoya göre boş durumlar

7. 1 İlk çalıştırma

3-5 adımdan oluşan Hyde kontrol listesi: "Bir ödeme yöntemi ekleyin", "Bir sağlayıcı seçin".
Düğme + kılavuz bağlantısını atla.

7. 2 Veri yok

Neden boş + CTA Oluşturma/İçe Aktarma olduğuna dair kısa bir açıklama.
İpucu: "CSV yükleyebilirsiniz" (şablona bağlantı).

7. 3 Filtreler/arama

Hangi filtrelerin etkin olduğunu ve "Sıfırla" düğmesini gösterin.
Yakın eşleşmeler veya alternatif sorgular önerin.

7. 4 Hata/kullanılamaması

"Bir sorunla karşılaştık. Daha sonra tekrar deneyin" + "Retry "/" System Status "