Boş durumlarda UX geri bildirimi

1) Boş durumlar nelerdir ve neden ihtiyaç duyulur?

Boş durum, ana içeriğin geçici olarak bulunmadığı bir ekran/widget'tır: ilk eylemden önce, temizlendikten sonra, sıfır sonuçla, indirme hatasıyla, hak/erişim olmadan.

• "Burası neden boş'diye açıklayın;
• Bölümün değerini göster;
• Net bir sonraki adımı önerin (veya aralarından seçim yapabileceğiniz daha fazlası)
• Kaygıyı azaltır ve tımar etmeyi önler.

İyi boş durum = bağlam + fayda + eylem.

2) Boş durum tipolojisi

1. İlk kez boş-Kullanıcı henüz bir şey oluşturmadı/yapılandırmadı.
2. Sıfır Arama/Filtre: Sorgu sonuç vermedi.
3. Geçici boşluk: Veriler yükleniyor veya kuyruk çalışıyor.
4. Kısıtlama/hak: erişim yok, yetersiz doğrulama seviyesi.
5. Kullanıcı Temizlendi: Geri Dönüşüm Kutusu/Geçmiş Temizlendi.
6. Teknik sorun: ağ/servis arızası, yeniden ödeme.

3) Tasarım ilkeleri

Bağlamsallık: Boşluk için belirli bir nedenden bahsediyoruz.
Değer - eylem: Önce neden bu bölüm, sonra ne yapmalı.
Bir ana CTA: gerekirse - ikincil (daha fazla bilgi/SSS).
Kısalık ve özgüllük: 1-2 cümle + açık düğme.
Görsel destek: Simge/illüstrasyon anlamı destekler, dikkati dağıtmaz.
Çıkmaz yollardan kaçınmak: Her zaman bir yol vardır.
Ton tutarlılığı: samimi ve sakin; Kritik adımlarda şaka yok (ödemeler, güvenlik).
A11y ve yerelleştirme: ekran okuyucu tarafından okunabilir, doğru eğimli, satırların uzunluğunu dikkate alır.

4) Boş durum çerçevesi (şablon)

Başlık (isteğe bağlı, 1 satır) - Talep değeri veya nedeni.
Metin (1-2 cümle) - "neden boş" + "sırada ne var".
Birincil CTA ana hedef eylemdir.
İkincil ACS/link - yardım/kurallar/dokümantasyon.
Görsel (isteğe bağlı) - 24-96 piksel kolay çizim, aşırı yükleme yapmayın.

5) Komut dosyası desenleri

5. 1 Onboarding/ilk sıfır

Hedef: İlk başarılı eyleme yol açar.
Metin: "Kişiselleştirilmiş önerileri görmek için bir profil doldurun ve potansiyel müşterileri seçin".
CTA: Profili Doldur/Potansiyel Müşterileri Seç.
İpucu: Bir mikro kuvvet/zaman göstergesi ekleyin: "~ 1 dakika sürecek".

5. 2 Arama/filtreler = sıfır sonuç

Amaç: İsteğin ayarlanmasına yardımcı olun.

Metin: "Hiçbir şey bulunamadı "canlı blackjack. "Blackjack'i deneyin veya" Provider: X "filtresini kaldırın"

CTA: "Filtreleri Sıfırla" ikincil: "Açık Dizin".

5. 3 Ödemeler/cüzdan boş

Amaç: yöntem ekleme/ilk ikmali teşvik etmek.
Metin: "Ödeme yönteminizi kaydedin - yeniden doldurmalar ve para çekme işlemleri daha hızlı olacaktır".
CTA: "Ödeme Yöntemi Ekle" ikincil: "Kurallar ve Ücretler".

5. 4 Doğrulama/erişim

Amaç: Kısıtlamayı ve geri çekilme yolunu şeffaf bir şekilde açıklamak.

Metin: "Bu bölüm kimlik onayından sonra kullanılabilir. Genellikle 2 dakika kadar sürer"

CTA: "Get Verified" ikincil: "Neden gerekli?"

5. 5 Transit/geçici boşluktaki veriler

Amaç: Bekleyen kaygıyı azaltmak.

Metin: "Verilerinizi toplamak. Bu genellikle 30 saniye kadar sürer. Bir sayfa bırakabilirsiniz - her şey hazır olduğunda sizi bilgilendireceğiz"

CTA: "Anlaşılabilir" ikincil: "Bundan sonra ne olacak?"

5. 6 Temizleme/kaldırma işleminden sonra

Amaç, eylemi onaylamak ve bir sonraki adımı önermektir.

Metin: "Tarih temizlendi. Yeni işlemler bir sonraki yeniden doldurma işleminden sonra görünecektir"

CTA: "Kontör".

5. 7 Hata/Retray

Amaç: net bir iyileşme yolu.

Metin: "Veri yüklenemedi. Ağınızı kontrol edin veya tekrar deneyin"

CTA: "Tekrarla" ikincil: "Sistem durumu".

6) Mikroteksler: hazır şablonlar

• "Seçilen oyunlar, ilkini eklediğinizde burada görünecektir. [Favorilere ekle]»

• "{query}" için hiçbir şey bulunamadı İsteği hassaslaştırın veya filtreleri sıfırlayın. [Filtreleri Sıfırla]"

• "Henüz kaydedilmiş bir yönteminiz yok. Ödemelerinizi hızlandırmak için bir kart veya cüzdan ekleyin. [Yöntem Ekle]"

• "Bu özellik yaş onayı olmadan kullanılamaz. ~ 2 dakika sürecek. [Yaşı onaylayın] [Neden?]"

• "Son 24 saatin istatistiklerini sayıyoruz... Bu genellikle 30 saniyeye kadardır. İşiniz bittiğinde size bir bildirim göstereceğiz"

• «hizmet kullanılamıyor. Biz zaten tamir ediyoruz. Lütfen daha sonra deneyin veya durumu kontrol edin. [Tekrar] [Sistem Durumu]"

7) Görsel dil ve illüstrasyonlar

CTA ile tartışmaktan kaçınmak için hafif tek renkli/iki tonlu illüstrasyonlar kullanın.
Boyutlar ve girintiler - bir içerik kartı gibi (görsel tutarlılık).
Stresli senaryolarda (ödeme/güvenlik) mizahi sahneler tasvir etmeyin.

8) Yerelleştirme ve kullanılabilirlik

Hatların uzunluğu için stok koyun (DE/TR daha uzun).
Sayısal formatları, para birimini, tarihleri yerel olarak çevirin.
Ekran okuyucular için: role = "status", aria-live = "kibar/iddialı" dinamikler için.
Sadece resme anlam yüklemeyin: metinle çoğaltın.
320 px okunabilirlik ve WCAG kontrastını kontrol edin.

9) Metrikler ve deneyler

• Ana boş CTA üzerinde TO;
• "İlk başarı'ya (aktivasyon olayı) dönüşüm;
• İlk eylem zamanı
• ilerleme olmadan ekrana dönüş sıklığı;
• Sıfır arama sonuçlarının yüzdesi
• Senaryo desteği istiyor.

• Belirli bir vs ortak başlık;
• CTA eylem fiili vs nötr;
• Zaman tahmini ekleme
• İkincil bir CTA'nın (SSS) varlığı ve düğmelerin sırası;
• İllüstrasyon vs ikon vs görsel olmadan.

10) Anti-desenler

Açıklama veya adım olmadan "burası boş".
Kritik adımlarda şakalar (ödeme, güvenlik).
One Learn More İçerik olmadan CTA.
Pasif haciz: "eklenmelidir. "Aktif olarak yaz: "Ekle"...
Uzun paragraflar: En fazla 1-2 cümle.
Formlarda etiket yerine yer tutucu - A11y ve anlayışı kötüleştirir.
Gizli kısıtlamalar ("anlık", gecikme mümkün olsa da).

11) Yayın öncesi kontrol listesi

• Neden boş olduğu belli mi?
• Bir cümledeki bölümün değeri var mı?
• Bir ana CTA ve gerekirse ikincil bir tane var mı?
• Metin kısa mı (≤ 140 karakter) ve spesifik mi?
• Uygunsa zaman/çaba tahmini eklendi?
• Ton senaryoya uyuyor (sakin/destekleyici)?
• Yerelleştirme ve A11y kontrol edildi (arya nitelikleri, kontrast)?
• Görüntü CTA'ya hakim değil mi?

12) Örneklerden önce/sonra

Oyun Kataloğu (İlk Sıfır)

Daha önce: "Henüz burada bir şey yok"

Sonra: "Kasetini topla. 3 favori tür seçin - önermeye başlayalım. [Türler Seç]"

Sıfır Arama

Önce: "Hiçbir şey bulunamadı"

Sonra: "" Yüksek limitli rulet'ile sonuç yoktur. "Yüksek limitli" filtreyi kaldırın veya ruleti deneyin. "[Filtreleri Sıfırla]"

Ödemeler

Önce: "Ödeme yöntemi yok"

Sonra: "Kartınızı veya cüzdanınızı kaydedin - yenileme ve para çekme daha hızlı hale gelecektir. [Yöntem ekle] [Ücretler ve şartlar]"

Doğrulama

Önce: "Erişim yok"

Sonra: "Bölüm kimlik onayından sonra kullanılabilir. ~ 2 dakika sürer. [Doğrulandı] [Neden Önemlidir]"

13) Bir tasarım sistemine gömme

• 'yazı' (dize, isteğe bağlı)
• 'beden' (kısa metin 1-2 cümle)
• 'primaryAction {label, onClick}'
• 'secondaryAction {label, href/onClick}'
• 'icon/illüstrasyon' (isteğe bağlı)

Metinleri bileşenin yanındaki i18n dosyalarında saklayın, tuşları ve açıklamaları koruyun, ton haritasını bağlayın (durumlar için ton ve sözlük).

14) Hızlı yapıcı (kopyala ve kullan)

• Başlık: "İlk Adımla Başlayın"
• Metin: "İlgi alanlarını seçtiğiniz anda burada öneriler olacak".
• CTA: "Müşteri Adaylarını Seç"
• İkincisi: "Nasıl çalışır?"

• Metin: "" {query}'tarafından hiçbir şey bulunamadı Filtreleri sıfırlayın veya sorguyu hassaslaştırın"
• CTA: "Filtreleri Sıfırla"
• İkincil: "Katalog"

• Metin: "Özellik yaş onayından sonra kullanılabilir. Genellikle 2 dakikaya kadar"
• CTA: "Yaşı onaylayın"
• İkincisi: "Neden gereklidir?"

• Metin: "Gün için veri topluyoruz. Bu genellikle 30 saniyeye kadardır. Bittiğinde size haber vereceğiz"
• CTA: "İyi"

Son hile sayfası

Bağlam + değer + eylem - bir "yığın" içinde.
Görsel ağırlıkta rekabet olmayan bir ana CTA.
Kısa ve öz: 1-2 cümle.
Her zaman çıkmazdan çıkış yolu: Çıkmaz ekranlar yok.
Yerelleştirme ve A11y bileşen seviyesindedir.