Boş durum (empty state) tasarımı

Kısaca

NN/g'den Kate Kaplan, boş durumu içeriğin henüz olmadığı ya da gösterilemediği kutu, ekran veya panel olarak tanımlar. Favoriler listesi, uyarı paneli, yeni açılmış bir dashboard ve sonuçsuz bir arama bunun örnekleridir.

Kaplan'a göre tamamen boş bırakılan bir alan kafa karıştırır ve kullanıcının sisteme güvenini azaltır. Audit'lerde en çok unutulan ekran bence boş durum. Tasarım dosyasında hep dolu hal çizilir, boş hal geliştiricinin varsayılan metnine kalır.

Oysa her yeni kullanıcı ürünü ilk kez boş haliyle görür. Bu yüzden boş hali en az dolu hal kadar özenle çizerim.

Dört boş durum türü

Dört türün ekranı aynı görünür: bir liste ve içinde hiçbir şey. Ama kullanıcı o ana her seferinde başka bir yoldan gelir. Mesaj da buna göre değişmeli.

• İlk kullanım

  Ne zaman: Kullanıcı alanı henüz hiç doldurmadı.

  Ne söylemeli: Burada ne görüneceğini ve nasıl dolacağını.

  Tek eylem: Alanı dolduran ilk iş: "İlk görevi ekle".

• Kullanıcının temizlediği

  Ne zaman: Kullanıcı her şeyi bitirdi, okudu ya da sildi.

  Ne söylemeli: İşin bittiğini. Buradaki boşluk bir başarıdır.

  Tek eylem: Sonraki mantıklı adım: "Yarın için görev ekle".

• Sonuç yok

  Ne zaman: Arama ya da filtre hiçbir şey döndürmedi.

  Ne söylemeli: Aranan şeyi ve neden boş kaldığını.

  Tek eylem: Aramayı genişletmek: düzeltilmiş kelimeyle aramak ya da filtreyi kaldırmak.

• Hata

  Ne zaman: İçerik var ama yüklenemedi.

  Ne söylemeli: Ne olduğunu ve verinin kaybolmadığını.

  Tek eylem: Sorunu çözen iş: çoğu zaman "Yeniden dene".

Her türde tek bir birincil eylem öneririm. İkinci bir yol gerekiyorsa, örneğin "Daha fazla bilgi", onu daha sade bir bağlantı olarak koyun. Seçenek çoğaldıkça karar uzar. Bunu Hick yasası sayfasında anlattım.

Canlı örnek: kötü ve iyi hali yan yana

Aşağıdaki örnekte aynı görev uygulamasının dört boş halini görüyorsunuz. Kötü hallerde boşluk soğuk bir cümleyle, "0 sonuç" gibi bir sayıyla ya da bir hata koduyla geçiştiriliyor. İyi hallerde her ekran kendi durumunu anlatıyor.

Dört tür, iki hal

İlk kullanım

Kötü Şu anki hali

Görevler

Kayıt bulunamadı.

İyi Önerilen hali

Görevler

Henüz görev yok

Görevleriniz burada listelenir. İlk görevinizi ekleyin, bitirince yanındaki kutuyu işaretleyin.

İlk görevi ekle

• Buraya ne geleceğini söylüyor
• Tek eylem var

Kullanıcı temizledi

Kötü Şu anki hali

Görevler

Kayıt bulunamadı.

İyi Önerilen hali

Görevler

Bugünkü görevlerin hepsi bitti

12 görevin hepsini tamamladınız. Yarın için bir görev ekleyebilir ya da bugünü kapatabilirsiniz.

Yarın için görev ekle

• Başarıyı söylüyor
• İlk kullanımla karışmıyor
• Sonraki adımı veriyor

Sonuç yok

Kötü Şu anki hali

Görevler

Arama: faturs

0 sonuç

İyi Önerilen hali

Görevler

Arama: faturs

“faturs” için sonuç bulunamadı

Yazımı kontrol edin ya da daha kısa bir kelimeyle arayın. Şunu mu demek istediniz: fatura?

“fatura” ile ara

• Belirgin ve büyük
• Aranan kelimeyi tekrar ediyor
• Çıkış yolu gösteriyor

Hata

Kötü Şu anki hali

Görevler

Error 500: request failed

İyi Önerilen hali

Görevler

Görevler yüklenemedi

Bağlantı kesildi ama görevleriniz silinmedi. İnternet bağlantınızı kontrol edip yeniden deneyin.

Yeniden dene

• Verinin silinmediğini söylüyor
• Yeniden deneme yolu var

Bir tür seçin. Solda sık gördüğüm kötü hal, sağda önerdiğim hal var. İyi haldeki butona basın: boş durum kaybolur ve listeye bir öğe eklenir. Ekranları bu sayfa için ben yazdım. JavaScript kapalıysa dört tür alt alta görünür.

İlk iki türün kötü hali aynı: "Kayıt bulunamadı." Yeni gelen kullanıcı da işini bitiren kullanıcı da aynı cümleyi görüyor. İyi halde yeni gelen ne yapacağını öğreniyor, işini bitiren de bittiğini.

İlk kullanım: boş ekranı ilk adıma çevirin

Kaplan, boş durumları öğrenme ipucu olarak kullanmayı önerir. Bu ipuçları yalnızca kullanıcı ilgili alana geldiğinde görünür. Kaplan'a göre bağlam içindeki yardım çoğu zaman hemen uygulanabilir, bu yüzden ilk açılışta zorla gösterilen tanıtım turlarından daha akılda kalıcıdır.

Kaplan'ın üçüncü önerisi, alanı dolduracak işe doğrudan yol vermektir. "Ayrıntıları görmek için çalışma alanında talep gönderin" yazmak eksik kalır, çünkü bunun nasıl yapılacağını söylemez. Bunun yerine o adıma götüren bir buton ya da bağlantı koyun.

Makaledeki bir örnek, karmaşık bir üründe iki yol sunar: dış veri kaynağı bağlamak ya da örnek veri yükleyip ürünü güvenle denemek. Bence örnek veri, kullanıcıya dolu ekranı karar vermeden önce gösterir.

Onboarding kalıbında boş durumu tanıtım turu ve ipucuyla karşılaştırdım. Kısa cevap şu: boş durum kullanıcının işini durdurmaz, kullanıcı bir şey ekleyene kadar yerinde bekler.

Kullanıcının temizlediği liste

En sık atlanan tür bu. Kullanıcı gelen kutusunu ya da görev listesini bitirmiştir. Karşısına ilk gün gördüğü "Henüz bir şey yok, ilk görevinizi ekleyin" ekranı çıkarsa, ürün onu yeni biri sanıyor demektir.

Bence burada mesaj kısa bir takdir olmalı: işin bittiğini ve ne kadarının bittiğini söyleyin. Eylem de sonraki mantıklı adım olsun. Bu, yeni görev eklemek ya da arşive bakmak olabilir.

Silme sonrası boşalan listeye bir şey daha eklerim: geri alma. Kullanıcı son öğeyi yanlışlıkla sildiyse, boş ekran ona dönüş yolu göstermelidir.

Sonuç yok: çıkmaz sokak bırakmayın

NN/g'den Kathryn Whitenton, sonuçsuz arama sayfaları için 2014'te üç yönerge yazdı. Birincisi, sonuç olmadığını gözden kaçmayacak biçimde söyleyin. Kullanıcının gözü sonuçları aradığı için küçük ve soluk bir not hiç okunmayabilir.

İkinci yönerge ileri bir yol vermektir. Whitenton aranan kelimeyi düzenlenebilir bir kutuda tekrar göstermeyi ve benzer aramalar önermeyi örnek verir. Yazım düzeltmesi ve farklı ya da daha az kelimeyle arama ipucu da önerileri arasında.

Son yönerge espriyle ilgili: alay gibi okunabilecek şakadan kaçının. Aradığını bulamamış biri bunu iyi karşılamayabilir.

Bence filtreli listelerde de aynı mantık geçerli: hangi filtrenin listeyi boşalttığını söyleyin ve onu tek tıkla kaldırma yolu verin.

Hata: boşluğu durum bilgisiyle karıştırmayın

Kaplan'ın ilk yönergesi, boş durumu sistem durumunu bildirmek için kullanmaktır. Ona göre tamamen boş bir alan, sistemin çalışıp çalışmadığı konusunda kafa karıştırır. Kullanıcılar devam etmeden önce emin olmak için sorguyu birkaç kez yeniler ve zaman kaybeder.

Bence bu, Nielsen'in ilk kullanılabilirlik ilkesinin boş ekrandaki karşılığı.

Kaplan daha kötü bir kalıbı da anlatır: içerik hâlâ yüklenirken "kayıt yok" yazıp sonra sonuçları göstermek. Bu güveni zedeler. En kötü durumda aceleci kullanıcılar, yani çoğu kullanıcı, asıl içeriği hiç görmez.

Yükleme sürerken ilerleme göstergesi kullanın, "kayıt yok" mesajını işlem bittikten sonra gösterin.

Hata halinde boş durum aslında bir hata mesajıdır. Nielsen'in dokuzuncu ilkesi bu mesajın sade dilde ve hata kodu olmadan yazılmasını ister. Metni nasıl yazacağınızı hata mesajları kalıbında ayrıntılı anlattım.

Benim notum

Bir ürüne audit yaparken her listeyi boşaltmayı denerim. Yeni hesap açarım, listeyi sonuna kadar temizlerim, filtreleri saçma bir kombinasyona getiririm ve bağlantıyı keserim. Böylece dört türün hepsini ekranda görürüm.

En sık gördüğüm hata, dört türün tek bir bileşene bağlanmasıdır. Geliştirici "liste boşsa şu metni göster" diye bir kez yazar ve neden boş olduğu hiç sorulmaz. Ben tasarım dosyasında her liste için dört boş hali ayrı çizerim.

Dashboard'larda da boş grafik görürüm: eksenler var, çizgi yok. Dashboard kalıbında bunun için de bir boş hal önerdim. Grafik boşsa neden boş olduğunu grafiğin yerine yazın.

Erişilebilirlik notu

WCAG 2.2'nin 4.1.3 Durum Mesajları ölçütü AA düzeyindedir. Odak değişmeden beliren durum mesajlarının yardımcı teknolojiye bildirilmesini ister. W3C'nin örnekleri arasında "Sonuç bulunamadı" türünden mesajlar da var.

Canlı aramada sonuç listesi boşaldığında ekran okuyucu kullanıcısı da bunu duymalı. Ben bunun için mesajı role="status" taşıyan bir alana yazarım. Yukarıdaki örnekte butona basınca listenin dolduğu da aynı yolla okunuyor.

Boş durumdaki buton da sıradan bir butondur: klavyeyle ulaşılmalı, odak halkası görünmeli. Ölçütlerin tamamını WCAG rehberinde anlattım.

Kontrol listesi

Bir ürünün boş hallerini yayından önce bu listeyle kontrol ederim. Kendi ürününüzün boş ekranlarına benim bakmamı isterseniz UX Audit bunu kapsar.

• Hiçbir liste ya da panel tamamen boş kalmıyor.
• İlk kullanım ve kullanıcının temizlediği liste farklı mesaj gösteriyor.
• Mesaj buraya ne geleceğini söylüyor.
• Her boş durumda tek bir birincil eylem var.
• Sonuçsuz aramada aranan kelime tekrar ediliyor ve bir çıkış yolu var.
• Filtre listeyi boşalttıysa hangi filtre olduğu yazıyor.
• Yükleme sürerken "kayıt yok" yazmıyor, ilerleme göstergesi var.
• Hata halinde kod yok ve yeniden deneme yolu var.
• Boş durum mesajı ekran okuyucuya bildiriliyor.