Site Navigasyonunuzu A/B Testleri ile Optimize Edin — Menüler, Mega Nav ve Header Düzenleri

Site navigasyonu sitenizde en çok etkileşime giren element. Her oturum en az bir kez, çoğu birkaç kez etkileşime girer. Yine de çoğu şirkette navigasyon yıllar önce tasarlanmış, hiç test edilmemiş ve değiştirmek riskli hissettirildiği için dokunulmaz olarak muamele görür. Bu kombinasyon bir problem yaratır: en yüksek etkili yüzey, en düşük deney oranı. Navigasyonlarını test eden ekipler rutinolarak mühendislik ekiplerinin "uğraşmaya değmeyecek kadar küçük" diyeceği değişikliklerden downstream dönüşümde %5-20 artış bulurlar.

Bu rehber neyi test edeceğinizi, navigasyon deneylerini mühendislik olmadan nasıl uygulayacağınızı, navigasyon testlerini sessizce öldüren hataları ve gerçekte neyi ölçmeniz gerektiğini kapsar. Yüksek riskli hissettikleri için navigasyon değişikliklerinden kaçınıyorsanız, A/B testi onları güvenli hale getirmenin yoludur.

Neden navigasyon en yüksek etkili test yüzeyidir

Navigasyon A/B testlerinin neden bu kadar etkili olduğuna dair üç neden.

Her oturum buradan geçer. Ana alan testleri, fiyatlandırma sayfası testleri, checkout testleri sadece ziyaretçilerin bir kısmını etkiler. Navigasyon evrenseldir. Nav katılımında %5'lik bir iyileştirme, her bir aşağı akış hunisinde birleşir: blog okuyucuları doğru bir sonraki makaleyi bulur, ürün ziyaretçileri fiyatlandırmaya daha hızla ulaşır, potansiyel müşteriler demo CTA'larını keşfeder.

Nav değişikliklerinin ikinci derece etkileri vardır. Linkleri yeniden düzenlediğinizde, sadece hangi linklere tıklandığını değiştirmezsiniz. Hangi sayfaların ziyaret edildiğini tamamen değiştirirsiniz. "Fiyatlandırma"yı sadece hover ile açılan mega-menünün arkasına gizleyen bir site, daha az fiyatlandırma ziyareti görür, bu da daha az deneme kaydı, bu da daha düşük gelir demektir. "Fiyatlandırma"yı üst seviye bir link yapmak, genellikle deneme kayıtlarında %10+ artış üreten bir nav testidir.

Risk abartılıyor. Mühendislik ekipleri nav değişikliklerini yüksek riskli olarak değerlendirir çünkü global düzeni etkiler ve her sayfa şablonunda çalışması gerekir. Ancak A/B testing bu riski tamamen tersine çevirir. Değişikliği bir deney arkasında yayınlayın, trafiğin %50'sine maruz bırakın, sorunları izleyin, bir şey bozulursa anında geri alın. Bir nav A/B testinin risk profili, kalıcı bir nav yeniden tasarımından çok daha düşüktür, ancak tüm yüksek potansiyeli yakalayabilirsiniz.

Navigasyon menülerinde yaygın A/B testleri

Sürekli ölçülebilir sonuçlar üreten sekiz nav testi.

1. Birincil navdaki link sırası. "Fiyatlandırma"yı yukarı, "Hakkımızda"yı aşağı, "Demo/Kayıt" CTA'sını sağa taşımayı test edin. En soldaki pozisyonlar orantısız dikkat çeker; en sağdaki (veya CTA stilindeki) en çok aksiyonu alır.

2. Mega-menü vs düz nav. Mega-menü hover ile onlarca linki ortaya çıkarır; düz nav sadece 5-7 üst seviye öğe gösterir. Mega-menüler ne istediklerini bilen kullanıcılara yardım eder. Düz navlar keşfeden kullanıcılara yardım eder. Hangi modun hedef kitlenize uyduğunu test edin.

3. Hamburger vs görünür nav (mobil). Hamburger menü navı bir ikonun arkasına gizler. Görünür nav sekmeleri veya linkleri doğrudan gösterir. Mobilde, görünür nav genellikle birincil kategoriler için kazanır, çünkük hamburger keşfedilebilirlik sürtünmesi yaratır. Hibrit düzenler (görünür CTA artı diğer her şey için hamburger) genellikle her iki saf düzeni de yener.

4. Navdaki CTA yerleşimi. "Başlayın", "Demo talep edin", "Ücretsiz deneme başlatın", üst-sağ, üst-sol veya hiçbiri. Pozisyonu, metni ve görsel önemini (buton vs link) test edin. Genellikle CTA'nın kendisinde %2 ve %4 tıklama oranı arasındaki fark.

5. Yapışkan vs statik nav. Nav, kullanıcılar scroll yaparken üstte sabit mi kalır, yoksa görünümden çıkar mı? Yapışkan nav CTA'yı her zaman erişilebilir tutar (uzun scroll sayfalar için iyi) ancak ekran alanı kaplar (özellikle mobilde). Her ikisini de test edin. Doğru cevap sayfa uzunluğuna ve içerik tipine bağlıdır.

6. Hover ile açılma vs tıklama ile açılma. Hover ile açma masaüstü geleneğidir. Tıklama ile açma daha mobil dostu ve erişilebilirlik dostudur. Erişilebilirlik ve mobil uyumluluk için test edin, ve yanlışlıkla hover yapan kullanıcıların menüyü anında kapatmasını izleyin.

7. Görünür ürün-kategori etiketleri vs belirsiz etiketler. "Çözümler" vs "Pazarlama Ekipleri İçin / Ürün Ekipleri İçin / Mühendislik İçin". Spesifik etiketler genellikle belirsiz olanları tıklama oranında %15-30 oranında geçer.

8. Birincil navdaki öğe sayısı. 4 öğe vs 6 vs 8. Daha fazla öğe taranması zorlaşır. Daha az öğe bazı sayfaların bulunmasını zorlaştırır. Bilgi mimariniz için doğru dengeyi test edin.

Yaygın nav A/B testing hataları

Nav testlerini sessizce öldüren dört hata.

1. Aşağı akış dönüşümü değil, tıklama oranını ölçmek. Daha fazla tıklaması olan nav varyantı otomatik olarak daha iyi değildir. Bu tıklamalar yanlış sayfalara gidip dönüştürmüyorsa, işleri daha da kötü yapmışsınızdır. Her zaman her ikisini ölçün: nav değişikliği davranışı kaydırdı mı ve aşağı akış dönüşümü gelişti mi? "Fiyatlandırma" tıklamalarını %20 artıran ama kayıtları hareket ettirmeyen test bir beraberlik. Fiyatlandırmadan kayda dönüşümü artıran test bir kazanımdır.

2. Sadece cihaza göre segmentleme. Masaüstü vs mobil açık kesimdir. Ancak B2B vs B2C ziyaretçileri, yeni vs dönen, organik vs ücretli genellikle zıt nav tercihlerine sahiptir. Toplamda kazanan nav varyantı, en yüksek değerli segmentinizde kaybedebilir. Nav test sonuçlarını her zaman trafik kaynağı, kullanıcı tipi ve cihaza göre kesin.

3. Testleri çok kısa süre çalıştırmak. Navigasyon etkileri genellikle dönen kullanıcılar uyum sağlarken günler sürer stabilleşmesi. 3 gün sonra "anlamlı" olan nav testi, yenilik etkisi azalırken sıklıkla 7-10 gün sonra çevirir. Nav testlerini en az 2 tam hafta, ideal olarak 3-4 hafta çalıştırın.

4. Yanlış sayfa setinde test yapmak. Bazı ekipler nav değişikliklerini sadece ana sayfada test eder. Nav her sayfada görünür, bu yüzden test popülasyonunuz her sayfa olmalı, sadece ana sayfa değil. Test aracınızın varyantı global olarak uyguladığından ve tüm oturum boyunca ölçtüğünden emin olun.

Mühendislik desteği olmadan navigasyon testleri uygulama

Bu pratik kısım: bir mühendislik tiketi açmadan navigasyon A/B testini gerçekte nasıl hayata geçireceğiniz.

Varify.io'nun görsel editörü ile iş akışı şöyle:

• Görsel editörü açın - navigasyonun bulunduğu sayfada. Herhangi bir sayfa işe yarar, çünkü navigasyon globaldir.
• Değiştirmek istediğiniz navigasyon öğesine tıklayın. Editör yapısal değişiklikleri tanır: öğeleri sürükle-bırak ile yeniden sırala, etiketleri yeniden adlandır, öğe ekle veya çıkar, cihaza göre görünürlüğü değiştir.
• Aynı editörde masaüstü ve mobilde önizleme yapın. Mobil önizleme varyantın telefonda tam olarak nasıl göründüğünü gösterir - bu navigasyon testleri için kritiktir çünkü mobil ve masaüstü farklı deneyimlerdir.
• Hedef kitle hedeflemesi ayarlayın. Ziyaretçilerin %100'ünde, sadece telefonlarda, belirli bir ülkede, sadece geri dönen ziyaretçilerde çalıştırın - hipotezinize uygun ne varsa.
• Yayınlayın. Varyantlar dakikalar içinde canlıya çıkar. Orijinal aynen korunur. Kod değişikliği yok, deploy yok, mühendislik tiketi yok.
• Bir şey bozulursa anında geri alın. Varify panelinde tek tık. Orijinal navigasyon tüm ziyaretçilere anında geri döner. Bu, navigasyon testini baştan düşük riskli yapan "anında-geri-alma-güvenliği"dir.

Kod gerektiren daha karmaşık navigasyon değişiklikleri için (örneğin tamamen yeni bir mega-menü yapısı tanıtmak), Varify deneylerde özel JavaScript ve CSS'i destekler. Geliştiriciniz kodu bir kez yazar, pazarlamacı deney yaşam döngüsünü yönetir.

Navigasyon A/B testlerinde neleri ölçmek gerekir

Her biri bir öncekinden daha önemli olan dört metrik katmanı.

Katman 1: Katılım derinliği. Oturum başına sayfa, oturum başına süre, açılış sayfasında kaydırma derinliği. Bunlar önde gelen göstergeler. Katılım derinliğini artıran bir navigasyon varyantı genellikle sonraki kazanımlara çevrilir, ancak yayınlama kararı verilecek metrik değildir.

Katman 2: Navigasyonun kendi tık dağılımı. Hangi navigasyon öğeleri tıklandı, hangi sırayla. Davranışsal olarak neyin değiştiğini anlamak için kullanışlı, ancak optimize edilecek metrik değil.

Katman 3: Sonraki dönüşüm. Test varyantı gerçek iş sonucunu hareket ettirdi mi? Deneme kayıtları, demo talepleri, satın almalar, MQL'ler. Yayınlama kararı verilecek metrik budur. Bir navigasyon testinin amacı ziyaretçileri dönüşümle ilgili sayfalara yönlendirmek ve daha fazlasını dönüştürmektir.

Katman 4: Hemen çıkma oranı ve oturum kalitesi. Dönüşümü artıran ve hemen çıkma oranını azaltan bir navigasyon varyantı açık bir kazançtır. Dönüşümü artıran ama aynı zamanda hemen çıkma oranını da artıran varyant şüpheli. Farklı (muhtemelen daha kötü) bir kullanıcı karışımına doğru kaymış olabilirsin.

Bunu doğru şekilde yapmak için raporlama altyapısı: test aracını GA4'e veya veri ambarına bağla. Varify experiment_id ve variant_id'yi GA4'e gönderir, böylece navigasyon testlerini diğer GA4 hunileriyle aynı derinlikte analiz edebilirsin. Gerektiğinde kohort düzeyinde analiz için BigQuery ile birleştir.