Mobil teklif barı içeriği kapatmadan nasıl tasarlanır?

Barda tek bir öncelik belirleyin

Arama, WhatsApp, fiyat, randevu ve kampanya mesajını aynı ince şeride sığdırmaya çalışmayın. Sayfanın amacına göre bir ana eylem seçin. Bir üretim sayfasında “Proje için bilgi iste” mantıklı olabilir; destek arayan mevcut müşteriyi satış formuna yönlendiren bir etiket ise yanıltıcıdır. Eylemin sonucunu buton metninde anlaşılır kılın.

İkinci bir seçenek gerçekten gerekiyorsa rolünü netleştirin. Telefon simgesini açıklamasız bırakmak yerine erişilebilir adını tanımlayın. Bu yazının amacı bütün sitelere sabit bar eklemek değil. Kısa bir sayfada zaten kolay bulunan iletişim bağlantısı varsa, yeni katmanın sağlayacağı faydayı önce gerçek kullanımda gözlemleyin.

Boşluğu barın gerçek yüksekliğine göre ayırın

Barı ekranın üzerine yerleştirmek, belgenin altındaki içeriğin kendiliğinden yer açacağı anlamına gelmez. Son paragrafın, footer bağlantılarının ve form butonunun tamamen görülebileceği alan bırakın. Metin büyütülünce veya İngilizce etiketi iki satıra düşünce barın yüksekliği değişebilir. Yalnızca masaüstü ölçüsünden türetilen sabit bir boşluk bu durumları kaçırır.

Telefonun güvenli ekran alanını ve tarayıcı kontrollerini de inceleyin. Görseldeki ölçüler uygulama için evrensel bir reçete değildir. Gerçek cihazda, yatay yönde ve büyütülmüş metinle deneyin. Ekranın altında boşluk bulunması tek başına yeterli değildir; odaklanan öğenin kaydırma sonrasında nereye geldiği de görülmelidir.

Klavye ve diğer katmanlarla çakışmayı çözün

Form alanına dokunulduğunda klavye açılır. Sabit teklif barı formun gönder düğmesini ikinci kez tekrarlıyor veya alanı örtüyorsa, form kullanımı sırasında görünürlüğünü yeniden değerlendirin. Kullanıcının yazdığı veriyi koruyarak barı geri çekmek bir seçenek olabilir. Her sayfaya aynı görünürlük kuralını uygulamak yerine durumu açıkça tasarlayın.

W3C’nin asgari odak görünürlüğü ölçütü, klavyeyle odaklanan bileşenin geliştiricinin oluşturduğu içerik tarafından tamamen gizlenmemesini ister. Tasarım hedefini mümkün olduğunca tüm bileşeni görünür tutmak olarak belirleyin. Çerez bildirimi, sohbet düğmesi ve kampanya şeridi de aynı incelemeye girer; bu katmanların her birini tek başına test etmek çakışmayı göstermez.

Üç durumu birlikte kontrol edin

Görünürlükten sonra davranışı doğrulayın

Barın düğmesi sayfa içindeki forma gidiyorsa form başlığının menü altında kalmadığını kontrol edin. Bağlantı başka sayfa açıyorsa hedef sayfanın amacı etiketle uyuşmalı. Kaydırırken barın sürekli kaybolup gelmesi dikkat dağıtabilir; gerekli hareketi kısa ve öngörülebilir tutun. Dekoratif yanıp sönen ışık, eylemin ne olduğunu açıklamaz.

Kontrolü bir telefon boyutuyla sınırlamayın. Klavye ile sırayla ilerleyin, uzun hata mesajı gösterin ve metni büyütün. Teklif formu rehberimiz alan seçimini ayrıca ele alır. Mobil web tasarım çalışmasında bar, menü ve formu aynı kabul senaryosuna dahil edin; her parçanın ayrı ayrı güzel görünmesi bütün akışın çalıştığını kanıtlamaz.