Web Sitesi Boş Durum Tasarımı Nasıl Yapılır?
Bir sitede ekranların çoğu, içerik dolu olduğu varsayımıyla tasarlanır. Oysa ziyaretçi sık sık boş bir ekranla karşılaşır: arama sonuç vermemiştir, sepet henüz boştur, favori listesi doldurulmamıştır ya da hesap yeni açılmıştır. Bu anlar boş bırakıldığında ziyaretçi ne yapacağını bilemez ve çoğu zaman siteden ayrılır. web sitesi boş durum tasarımı, bu ekranları yönlendiren birer fırsata dönüştürür. Bu yazıda konuyu ele alıyoruz.
Peki web sitesi boş durum tasarımı nasıl yapılır? Türlerden içeriğe kadar başlıkları sırayla inceliyoruz. Kullanıcı odaklı bir site için Weblike ile çalışabilirsiniz.
web sitesi boş durum tasarımı nedir
web sitesi boş durum tasarımı, gösterilecek içeriğin bulunmadığı ekranlarda ziyaretçiye durumu açıklayan ve bir sonraki adımı öneren tasarımın kurgulanmasıdır.
Neden Önemlidir
Boş bir ekran, ziyaretçiye bir şeylerin bozuk olduğu izlenimi verir. Açıklama ve yönlendirme bu izlenimi tersine çevirir.
En Sık Karşılaşılan Yerler
Arama sonuç sayfası, sepet, favoriler, sipariş geçmişi, bildirim listesi ve yeni açılan hesap panelleri en yaygın örneklerdir.
Arama Sonuçsuz Kaldığında
Sonuç bulunamadığında yalnızca bulunamadı yazmak yetersizdir; öneriler sunulmalıdır.
Alternatif Öneriler
Benzer aramalar, popüler ürünler ya da kategori bağlantıları sunmak, ziyaretçiyi yolda tutar.
Yazım Hatası İhtimali
Arama teriminde olası bir yazım hatası için düzeltme önerisi sunulması, en etkili çözümlerden biridir.
Site İçi Arama Verisi
Sonuçsuz aramaların kaydedilmesi, hem içerik eksiğini gösterir hem boş durum içeriğini geliştirir. Site içi arama bu konuyu anlatır.
Boş Sepet
Boş sepet ekranı, alışverişe dönüş için en doğal yönlendirme noktasıdır; öne çıkan ürün ya da kategori bağlantıları sunulmalıdır.
Sepet Sayfası Kurgusu
Boş sepet, sepet sayfasının bir parçası olarak tasarlanmalıdır. Sepet sayfası optimizasyonu bu konuyu ele alır.
Yeni Hesap Paneli
Henüz hiçbir işlem yapmamış kullanıcıya boş bir panel yerine ilk adımları anlatan kısa bir yönlendirme gösterilmelidir.
İlk Kullanım Deneyimi
Boş durumlar, yeni kullanıcıya sistemi tanıtmak için en doğal fırsattır ve onboarding akışının parçasıdır.
Filtre Sonucu Boşsa
Uygulanan filtreler sonuç vermediğinde hangi filtrenin kaldırılabileceğinin önerilmesi, ziyaretçiyi baştan başlamaktan kurtarır. Filtreleme özellikleri bu konuyu anlatır.
Hata Durumundan Ayırmak
Boş durum ile hata durumu farklıdır. Teknik bir sorun varsa bu açıkça belirtilmeli, boş durum gibi gösterilmemelidir.
Hata Mesajlarıyla İlişki
İki durumun dili ve tasarımı birbirinden ayrılmalı; hata mesajları sorunun ne olduğunu ve ne yapılacağını açıkça söylemelidir.
Mesajın Dili
Kısa, açık ve suçlayıcı olmayan bir dil kullanılmalıdır. Ziyaretçi kendini hatalı hissetmemelidir.
Neden Boş Açıklaması
Ekranın neden boş olduğunun tek cümleyle açıklanması, belirsizliği ortadan kaldırır.
Sonraki Adımı Göstermek
Her boş durumda ziyaretçinin yapabileceği en az bir eylem önerilmelidir. Bu, boş durumun asıl işlevidir.
Tek Bir Çağrı
Birden fazla eylem sunmak kararsızlık yaratır. Öne çıkan tek bir adım daha iyi sonuç verir. Çağrı metni bu konuyu anlatır.
Görsel Kullanımı
Sade bir çizim ya da simge, boş ekranı daha dostane kılar; ancak görselin mesajın önüne geçmemesi gerekir.
Marka Diliyle Uyum
Boş durum ekranları da markanın dilini taşımalıdır; bu ekranlar çoğu zaman tasarımın unutulan köşeleridir.
Mizah Kullanımı
Hafif bir espri deneyimi yumuşatabilir; ancak ziyaretçi bir sorunla karşılaşmışsa şaka rahatsız edici olur.
Aşırı Süslemeden Kaçınmak
Büyük çizimler ve uzun metinler, ekranın asıl amacını gölgeler. Sadelik burada işlevseldir.
Mobil Düzen
Boş durum ekranlarının mobilde de ortalanmış, okunaklı ve tıklanabilir olması gerekir.
Yükleniyor Durumuyla Karıştırmamak
İçerik henüz yüklenirken boş durum gösterilmesi ziyaretçiyi yanıltır. Yükleme göstergesi ayrı tasarlanmalı ve sayfa hızı Google PageSpeed Insights ile düzenli ölçülmelidir.
Yer Tutucu Kullanımı
İçerik yüklenirken gösterilen yer tutucular, bekleme süresini daha kısa hissettirir.
Erişilebilirlik
Boş durum mesajlarının ekran okuyucular tarafından okunabilmesi ve odak yönetiminin doğru olması gerekir. Erişilebilirlik bu konuyu anlatır.
Renk ve Kontrast
Soluk gri bir metin, mesajın fark edilmemesine yol açar. Yeterli kontrast sağlanmalıdır.
Kurumsal Sitelerde
Blog kategorisinde henüz yazı yoksa ya da referans listesi boşsa, bu durumun da bilinçli tasarlanması gerekir.
İçeriksiz Sayfalar
Henüz doldurulmamış sayfaların yayına alınmaması, boş durum tasarımından daha doğru bir yaklaşımdır.
Geçici Boşluklar
Stok tükendiğinde ya da kampanya bittiğinde oluşan boşlukların da yönlendirme içermesi gerekir.
Kişiselleştirme
Geçmiş davranışa göre sunulan öneriler, boş ekranı çok daha faydalı hale getirir.
Veriye Dayalı Öneri
Sepeti boş olan ziyaretçiye daha önce incelediği ürünlerin hatırlatılması, en etkili boş durum kurgularından biridir.
Ölçmek
Boş durum ekranlarının ne sıklıkla görüldüğü ve sonrasında ziyaretçinin ne yaptığı izlenmelidir.
Sık Görülen Boşluklar
Aynı boş durumun çok sık görülmesi, arkasındaki asıl sorunun çözülmesi gerektiğini gösterir.
Kök Nedeni Çözmek
Sonuçsuz aramaların çokluğu, sözlük ya da içerik eksikliğine işaret edebilir; tasarım bu eksiği gizlemez.
Test Etmek
Farklı yönlendirme ve mesajların denenmesi, hangi kurgunun ziyaretçiyi yolda tuttuğunu gösterir. A/B testi bu yöntemi anlatır.
Kullanıcı Testi
Birkaç kişinin boş durumla karşılaştığı anın izlenmesi, mesajın anlaşılıp anlaşılmadığını en hızlı gösterir.
Tasarım Sistemi
Boş durumların tutarlı bir şablona bağlanması, her ekranda yeniden karar vermeyi önler.
Ekip İçinde Standart
Yeni sayfalar geliştirilirken boş durumun da tasarlanması, listede standart bir madde olmalıdır.
Boşluğu Fırsata Çevirmek
Bazı boş ekranlar, kampanya duyurusu ya da öne çıkan içerik için doğal bir alan sunar; ancak bu alan reklam panosuna dönüşmemelidir.
Yapmanın Özeti
Durumu açıklayan kısa bir mesaj, tek ve net bir sonraki adım, sade görsel, marka diliyle uyum, mobil uyumlu düzen ve kök nedenin izlenmesi tasarımın temelidir.
Gösterilecek içeriğin bulunmadığı ekranlarda durumu açıklayan ve bir sonraki adımı öneren tasarımın kurgulanmasıdır.
Sonuçsuz arama, boş sepet, favori listesi, sipariş geçmişi, bildirimler ve yeni açılan hesap panelleri en yaygın örneklerdir.
Ekranın neden boş olduğu tek cümleyle açıklanmalı ve ziyaretçinin yapabileceği bir eylem önerilmelidir.
Tek ve net bir adım, birden fazla seçenekten daha iyi sonuç verir.
Değildir. Teknik bir sorun varsa açıkça belirtilmeli, boş durum gibi gösterilmemelidir.
Sade bir çizim ekranı dostane kılar; ancak görselin mesajın ve yönlendirmenin önüne geçmemesi gerekir.
Hafif bir espri deneyimi yumuşatabilir; ancak ziyaretçi bir sorunla karşılaşmışsa rahatsız edici olur.
Karıştırılmamalıdır. İçerik yüklenirken yer tutucu gösterilmeli, boş durum yalnızca gerçekten içerik yoksa çıkmalıdır.
Arkasındaki asıl sorun çözülmelidir; tasarım bu eksiği gizlemek için kullanılmamalıdır.
İyi bir site, dolu ekranları kadar boş ekranlarında da ziyaretçiye yol gösterir. web sitesi boş durum tasarımı yapılırken durumu kısaca açıklamak, tek ve net bir sonraki adım sunmak, görseli sade tutmak, marka diliyle uyumu korumak, mobil düzeni çözmek ve sık görülen boşlukların kök nedenini gidermek hem deneyimi hem dönüşümü iyileştirir. Deneyimi bütün olarak ele almak için UX UI tasarım yazımızı inceleyebilirsiniz.
BİZE ULAŞIN
Bizimle iletişime geçerek projeniz için hemen ücretsiz teklif alabilirsiniz.
