Floating Bar
Floating bar, sayfanın kenarını kaplayan ve içeriğin üzerinde kayarak duran, ekranı tamamen ele geçirmeden kalıcı bir eylem çağrısı sunan ince bir banttır.
Önemli noktalar
- Sayfanın üzerine biner ve yer ayırmaz; hiçbir öğe kaymaz.
- Tetikleme zamanı, onun öneri mi kesinti mi olarak okunacağını belirler.
- Saydam katman bölgesi, altındaki bağlantılara giden tıklamaları yutabilir.
- Sıklık sınırı, okuyucuların onu okumadan kapatmayı öğrenmesini engeller.
- Telefonda görünüm penceresinin üçte birini kaplayan çubuk fiilen bir modaldır.
Derinlemesine
Floating bar, belgenin içine yerleştirilmek yerine üzerine çizilir. Yerleşimde yer kaplamaz; belirdiğinde veya kaybolduğunda hiçbir şey oynamaz, yalnızca kapladığı şeridi örter. Bu, onu kendi alanını ayıran sticky bar ile her şeyi engelleyen bir modal arasına oturtur. Bir katman olduğu için davranışını belge akışının kuralları değil, yığınlama sırası ve işaretçi olaylarının ele alınışı belirler. Bu yüzden neyi gizlediği sayfanın değil, ekranın ölçülerine bağlıdır.
İşin çoğunu zamanlama yapar. Varışta tetiklendiğinde henüz kimsenin okumadığı bir sayfayı böler. Kaydırma derinliği, kalma süresi ya da çıkış niyetiyle tetiklendiğinde ise niyet zaten oluşmuşken gelir ve müdahale değil öneri gibi okunur. İkinci kaldıraç sıklıktır; her oturumun her sayfa görüntülemesinde dönen bir çubuk, insanlara refleksle kapatmayı öğretir. Bunların karşısında içeriği örtmenin gizli maliyeti durur; paragrafını kaybeden okuyucu şikâyet etmediği için toplu raporlarda görünmez.
Metinden çok kurulum ayrıntıları belirleyicidir. Sayfanın üstünde ama her modalın altında durması için açık bir yığınlama bağlamı, altındaki bağlantılara giden tıklamaların yutulmaması için yalnızca görünür öğeyle sınırlı işaretçi olayları ve kapatma denetimine klavyeyle ulaşan bir odak sırası gerekir. Kısa bir giriş animasyonu, işleme hatası değil varış gibi okunur. Lead hunisinde, okuyucunun bağlamı olup henüz bağlılığının olmadığı yazı ortasında skorkarta girmek için sessiz bir davet olur.
Onu riskli yapan tam da katman davranışıdır. İşaretçi olaylarını yine de yakalayan saydam bir bölge, okuyucunun açıkça gördüğü bağlantıları engeller ve arıza, saldırgan bir çubuk gibi değil bozuk bir site gibi görünür. İçeriğin yeniden aktığı yerlerde de güvenilmezdir; sabit bir şeridi örtmek, ancak her genişlikte altında ne olduğunu bildiğinizde güvenlidir. Telefonda ise modaldan ayrımı kaybolur: görünüm penceresinin üçte birini kaplayan bir çubuk, adı ne olursa olsun bir kesintidir.
Pratikte örnek
Nasıl ölçülür
Tıklamaları, çubuğun gerçekten gösterildiği gösterim sayısına karşı ölçün ve rakamı tetikleyiciye göre ayırın. Kaydırmayla ve çıkış niyetiyle oluşan gösterimler farklı zihin durumlarını anlatır; ortalamaları eyleme dönüştürülebilir hiçbir şey vermez. Eş sayı kapatma oranıdır: makul tıklamayla birlikte yüksek kapatma çubuğun kutuplaştırdığını, az tıklamayla yüksek kapatma ise fazla erken geldiğini gösterir.
Sonra maliyetine bakın. Çubuğun tetiklendiği oturumların kaydırma derinliği ve sayfada kalma süresini, aynı sayfalarda tetiklenmediği oturumlarla karşılaştırın; bu, okumayı bölüp bölmediğini ortaya koyar. Örttüğü şeritteki bağlantıların tıklama oranlarını da izleyin. Yayın sonrası düşüş, katmanın olayları kibarca üstte durmak yerine yakaladığının en net kanıtıdır.
Sık yapılan hatalar
Teknik hata, kapsayıcının görünen çubuktan büyük olmasıdır. Görünmez boşluk sayfanın üstünde durur, işaretçi olaylarını yakalar ve altındaki bağlantılar hiçbir analitik raporun açıklayamayacağı bir nedenle yanıt vermez olur. Etkileşimli alanı görünür öğeyle sınırlayın, saydam sarmalayıcıda işaretçi olaylarını kapatın ve yayına aldıktan sonra tasarım dosyasına güvenmek yerine örtülen şeritteki her bağlantıyı gerçek bir cihazda tıklayın.
Stratejik hata, sayfa yüklenirken tetiklemektir. Bu, sayfa henüz dikkati hak etmeden kesintiyi harcar ve aramadan gelen bir ziyaretçi için karşılaştığı ilk şey olur. Bunun yerine kaydırma derinliği, kalma süresi veya çıkış niyetiyle tetikleyin. Buna yakın hata, aynı ziyaretin her sayfasında yeniden göstermektir; bu, faydalı bir öneriyi okunmadan kapatılan bir arka plan gürültüsüne çevirir.
Sıkça sorulan sorular
Floating bar, sticky bar'dan nasıl farklıdır?
İkisi de kaydırırken görünür kalır, ancak floating bar sayfayı içeriğin üzerinde kaplar, sticky bar ise genellikle kenarda kendi alanını ayırır. Fark çoğunlukla katmanlama ve içeriğin yer açmak için kayıp kaymadığıyla ilgilidir.
Floating bar çıkış niyetini kullanabilir mi?
Evet, floating bar'lar genellikle çıkış niyeti, kaydırma derinliği veya zamanlayıcı ile tetiklenir, böylece yüksek niyet anlarında görünür. Bu, teklifi çok erken gösterip yeni ziyaretçileri rahatsız etmekten kaçınmanızı sağlar.
Floating bar sayfamdaki tıklamaları engeller mi?
Uygun bir yığınlama bağlamı veya işaretçi ayarı olmadan etkileşimli öğeleri kaplarsa engelleyebilir. Katmanın, altındaki düğme veya bağlantılara yönelik dokunuşları asla yakalamadığından emin olmak için dikkatlice test edin.
Floating bar ile sticky bar arasındaki gerçek fark nedir?
Yerleşime katılım. Sticky bar yer ayırır; sayfaya buna göre boşluk verilebilir ve hiçbir şey gizlenmez. Floating bar sayfanın üzerine biner ve yer ayırmaz, dolayısıyla altındakini örter. Kayan sürümü mevcut bir şablona eklemek daha kolaydır ve yanlış yapmak da öyle, çünkü neyi gizlediği görünüm penceresine bağlıdır.
Floating bar ne zaman tetiklenmeli?
Ziyaretçi bir miktar ilgi gösterdikten sonra. İlk bölümü geçen kaydırma derinliği, birkaç on saniyelik kalma süresi veya masaüstünde çıkış niyeti işe yarar ve her biri farklı bir sayfa türüne uyar. Uzun yazılar kaydırma derinliğini, fiyat ve karşılaştırma sayfaları çıkış niyetini sever; kısa sayfaların bu desene çoğunlukla ihtiyacı yoktur.
Floating bar ekledikten sonra bağlantılar neden çalışmaz oldu?
Neredeyse her zaman katmanın kapsayıcısı görünen içeriğinden büyük olduğu ve görünmez bir alanda işaretçi olaylarını yakaladığı için. Sarmalayıcıda işaretçi olaylarını kapatıp yalnızca çubuğun kendisinde açın. Yığınlama sırasını da kontrol edin; tam genişlikte bir sarmalayıcıya verilen yüksek bir z-index, tasarımın ima ettiğinden çok daha fazlasını örter.
Aynı ziyaretçi onu ne sıklıkla görmeli?
Oturum başına bir kez güvenli bir varsayılandır ve kapatma onu dakikalarca değil günlerce bastırmalıdır. Desenin değeri, yerinde bir öneri gibi hissettirmesinden gelir; tekrar tam olarak bunu yok eder. Kapatmayı ziyaretçinin cihazında saklayın ve sabit bir takvimle değil, teklif gerçekten değiştiğinde sıfırlayın.
Arama motorları floating bar'ı rahatsız edici ara katman sayar mı?
Çubuk ekranın büyük bölümünü kaplıyorsa ya da aramadan gelen ziyaretçide ana içeriği gizliyorsa sayabilir. Sayfanın ortasında tetiklenen ince bir çubuk ile yüklenir yüklenmez çıkan tam genişlikte bir katman aynı şey değildir. Güvenli ölçüt şudur: telefon ekranında ana içerik hâlâ baskın öğe mi?
Floating bar'ı nasıl erişilebilir yaparım?
Kapatma denetimini klavye odak sırasına ekleyin, ona çıplak bir simge yerine gerçek bir etiket verin ve odağın çubuğun içinde kilitlenmediğinden emin olun. Ekran okuyucuyu cümle ortasında kesmek yerine kibar bir bildirim kullanın ve metnin arka planına göre kontrastının sayfanın geri kalanıyla aynı ölçütü karşıladığını doğrulayın.