Boş durum arayüzü tasarımı: İçerik yokken sonraki adıma yönlendirin
İlk kullanım, sonuç bulunamaması, verilerin temizlenmesi ve hata durumlarını yararlı metinler, açık eylemler ve bağlama uygun görsellerle tasarlamak için pratik bir çerçeve.
Boş bir panel belirsizlik yaratır. Kişi uygulamanın yüklenip yüklenmediğini, aramasının başarısız olup olmadığını veya bir şey eklemesi gerekip gerekmediğini merak edebilir. Yararlı bir boş durum, ne olduğunu adlandırır ve sonraki adımı seçmesine yardımcı olur.
Önce içeriğin eksik olma nedenini belirleyin. İlk kullanım, sonuçsuz arama, bilerek temizlenmiş veriler ve sistem hatası farklı mesaj ve eylemler gerektirir. Buradaki örnekler varsayımsal tasarım alıştırmalarıdır; ürün vaka incelemeleri veya performans iddiaları değildir.
Önemli noktalar
- Metni, çizimi veya eylemi seçmeden önce içeriğin neden bulunmadığını sınıflandırın.
- Yüklenme ve başarısızlık geri bildirimini doğrulanmış boş sonuçtan ayrı tutun.
- Belirli bir başlık, gerektiğinde kısa bir açıklama ve ilgili bir sonraki adımı yazın.
- Durumu erişilebilirlik, dar düzenler ve kurtarma yolları dahil bağlamı içinde inceleyin.
1. Alanın neden boş olduğunu teşhis edin
Boş durumu süsleme fırsatı olarak değil, ürün hakkında bir bildirim olarak ele alın. Ekran görünmeden hemen önce ne olduğunu, sistemin ne bildiğini ve kişinin durumu değiştirip değiştiremeyeceğini sorun. NN/g, boş durumları durumu iletme, öğrenmeyi destekleme ve temel görevlere yol açma fırsatları olarak tanımlar. Bu fırsatlar önce durumu doğru belirlemeye bağlıdır.
Özellikle bir istek hâlâ sürerken “Öğe yok” göstermeyin. Sonuç belli olana kadar yükleme göstergesini veya iskelet görünümü koruyun. İstek başarısız olursa hatayı ve kurtarma seçeneğini açıklayın. Sıfır öğeyle başarıyla tamamlanırsa eşleşen içerik olmadığını söyleyin. Bu ayrım, kişilerin geçici gecikmeyi veya sistem sorununu gerçek bir sonuç sanmasını önler.
| Durum | Anlamı | Yararlı yanıt |
|---|---|---|
| İlk kullanım | Özellik hazırdır, ancak kişi henüz hiçbir şey eklememiş veya oluşturmamıştır. | Buraya neyin geleceğini açıklayın ve oluşturma, ekleme veya keşfetme için doğrudan bir yol sunun. |
| Sonuç yok | Arama, filtre veya tarih aralığı başarıyla tamamlanmış ancak eşleşme bulunmamıştır. | Ölçütlerin eşleşme üretmediğini doğrulayın; ilgili bir ayarlama veya filtreyi temizleme önerin. |
| Temizlenmiş veri | Kişi normalde burada görünen öğeleri tamamlamış veya kaldırmıştır. | Bir sorun varmış izlenimi vermeden tamamlanmayı veya boş sonucu belirtin; yararlıysa başka bir görev sunun. |
| Hata | Sistem beklenen içeriği getirip gösterememiştir. | Başarısız olan şeyi açık dille anlatın ve yeniden deneme gibi bir kurtarma eylemi sunun. |
| Yükleniyor | Sistem henüz içerik olup olmadığını belirlememiştir. | İlerlemeyi veya yüklenme durumunu gösterin; boş sonuç duyurusunu erkenden yapmayın. |
2. Nedene uygun metin yazın
Durumu adlandırmak için başlığı, ne anlama geldiğini veya nasıl devam edileceğini anlatmak için destek metnini kullanın. Başlık kolay taranabilsin. Yalnızca gerçek bir soruyu yanıtlıyorsa ek cümle ekleyin. Apple'ın yazım rehberi boş ekranlarda açık sonraki adımlar, eylem odaklı etiketler ve sorunun nasıl çözüleceğini anlatan doğrudan hata mesajları önerir. Anlamı örten kelime oyunlarından, “Burada hiçbir şey yok” gibi belirsiz başlıklardan ve kişiyi suçlayan metinlerden kaçının.
Örneğin ilk kullanımda varsayımsal bir kaydedilenler ekranı “Kaydettiğiniz rehberler burada görünür” ve ardından “Daha sonra dönmek için bir rehberi kaydedin” diyebilir; düğmesi “Rehberlere göz at” olabilir. Tamamlanmış bir kontrol listesi “Her şeyi tamamladınız” diyebilir ve “Tamamlanan görevleri görüntüle” seçeneğini sunabilir. Bu örnekler farklı gerçeklikleri anlatır: ilki bir özelliğin nasıl doldurulacağını öğretir, ikincisi başarılı bir sonucu doğrular.
Eşleşme bulunmayan başarılı bir arama için varsayımsal mesaj “'orkide' ile eşleşen proje yok” olabilir ve “Daha geniş bir terim deneyin veya filtreleri temizleyin” önerebilir. Sorguyu koruyun ve filtre değişikliklerini mümkün olduğunca geri alınabilir kılın. Ağ hatasında “Projeler yüklenemedi” ve “Yeniden dene” yazın. Sistem kontrol edememişken proje olmadığını iddia etmeyin.
- Mesajın bağlam dışında da anlamlı olması için ilgili nesneyi veya ölçütü adlandırın.
- Düğmede “Proje oluştur”, “Filtreleri temizle” veya “Yeniden dene” gibi bir fiil kullanın.
- Yönergeleri etkilenen içeriğin yanında tutun; renk veya görselin yanında metin de kullanın.
- Kişilerin sorunu çözmek için ihtiyacı yoksa “Hay aksi”, suçlayıcı dil ve teknik kodlardan kaçının.
3. Sonraki adımı otomatik değil, yararlı kılın
Kişi durumu makul biçimde değiştirebiliyor veya görevine devam edebiliyorsa eylem sunun. İlk kullanımda oluşturma veya ekleme, sonuç yoksa kısıtlamayı kaldırma, hata varsa yeniden deneme yararlı olabilir. Temizlenmiş gelen kutusu veya bitmiş antrenman hiçbir eylem gerektirmeyebilir. Panel etkileşimli görünsün diye her duruma düğme zorlamayın.
Kurtarma yolunu sorunun büyüklüğüne uygun tutun. Başarısız yenileme genellikle engelleyici bir uyarı değil, satır içi açıklama ve yeniden deneme gerektirir. Apple, geri bildirimin bilginin önemine uygun olmasını ve uyarıların kritik, eyleme dökülebilir durumlara ayrılmasını önerir. Aramada kişinin emeğini koruyun ve sorguyu sessizce değiştirmek yerine mantıklı ayarlamalar sunun. Material Design da gerçekten yardımcı olduklarında başlangıç içeriği, kısa eğitici içerik veya açıkça etiketlenmiş en iyi eşleşmeleri alternatif olarak önerir.
Çizimi yalnızca bağlam, sıcaklık veya tanınabilirlik katıyorsa kullanın. Mesajla yarışmamalı veya dekoratif bir görselin etkileşimli olduğunu düşündürmemelidir. Küçük bir filtre sonucunda basit simge yeterli olabilir; ilk kullanım çalışma alanında içereceği içerik türünün küçük bir örneği yararlı olabilir. Başlangıç içeriği varsa kolayca tanınmalı ve kaldırılabilmelidir.
- Nedene doğrudan yanıt veren tek bir birincil eylem seçin.
- Yalnızca olası bir takip sorusunu yanıtlıyorsa ikincil yardım yolu ekleyin.
- Boş sonuç iyi haberse sakin bir tamamlanma mesajı kullanın.
- Eylemin klavye ve ekran okuyucu kullanıcıları için de anlaşılır olmasını sağlayın.
4. Yalnızca çizimi değil, durumun tamamını inceleyin
Durumu gerçek kapsayıcısında inceleyin: tam ekran ilk kullanım görünümü, küçük kenar çubuğu ve filtrelenmiş tablo farklı alan ve hiyerarşi ihtiyaçlarına sahiptir. Mesajı anlattığı alana yakın tutun. Metin büyüdüğünde veya satıra bölündüğünde okunabilir kaldığından ve birincil eylemin rengi ayırt etmeyi gerektirmeden bulunabildiğinden emin olun. Geçişleri de test edin: yüklenmeden boş duruma, yüklenmeden hataya, yeniden denemeden başarıya ve filtre değişikliğinden sonuçlara dönüş.
Pratik bir kütüphane incelemesi tetikleyici ve beklenen kurtarma yoluyla başlar. Her kalıp için durumu, başlığı, isteğe bağlı açıklamayı, birincil eylemi, ikincil yolu ve seçimden sonra ne olduğunu kaydedin. Yararlı yapı ve görsel hiyerarşi için ekran görüntülerini karşılaştırın; ardından ürün davranışını bağlamında kontrol edin. Durağan görsel, hatadan kurtulmanın mümkün olup olmadığını veya sonucun gerçekten boş olup olmadığını söyleyemez. Görsel referanslar için ScreenKits arayüz kütüphanesine göz atın ve komşu kalıpları bulmak için tüm kategorileri keşfedin.
- Kişi içeriğin yok mu, hâlâ yükleniyor mu, yoksa hata nedeniyle mi kullanılamaz olduğunu anlayabilir mi?
- Mesaj geçerli sorguyu, filtreleri, hesabı veya tamamlanan görevi yansıtıyor mu?
- Eylem yararlı girdileri koruyor ve görünür bir sonuca götürüyor mu?
- Durum küçük boyutlarda, daha uzun yerelleştirilmiş metinlerde ve yardımcı teknolojilerle çalışıyor mu?
- Kişi hatadan kurtulabilir veya başarısız aramayı ayarlamanın yolunu bulabilir mi?
Sık sorulan sorular
Boş durumda her zaman eylem çağrısı olmalı mı?
Hayır. İçerik eklemeye, aramayı ayarlamaya veya sorundan kurtulmaya yardımcı oluyorsa eylem ekleyin. Tamamlanan görev veya doğal olarak boş görünüm için kısa bir onay yeterli olabilir.
Sonuç bulunamadı ekranı hata durumu mudur?
Genellikle değildir. Arama veya filtreleme başarıyla tamamlandıysa eşleşme olmadığını söyleyin ve yararlı bir ayarlama önerin. Sonucun belirlenmesini veya gösterilmesini engelleyen sistem hatalarında hata dili kullanın.
Sonuçlar yüklenirken ne görünmelidir?
İstek tamamlanana kadar yüklenme görünümü veya ilerleme geri bildirimi kullanın. Boş sonucu ancak sistem başarılı yanıtın eşleşen öğe içermediğini doğruladıktan sonra gösterin.
