PWA (Progresif Web Uygulaması) yüklemeyi teşvik etme şablonları

Mustafa Kurtuldu
Mustafa Kurtuldu
Penny McLachlan
Penny McLachlan

Progresif Web Uygulamanızı (PWA) yüklemek, kullanıcıların uygulamanızı bulmasını ve kullanmasını kolaylaştırabilir. Tarayıcı tanıtımı yapıldığında bile bazı kullanıcılar PWA yükleyebileceklerinin farkında değildir. Bu nedenle, PWA'nızın yüklenmesini tanıtmak ve etkinleştirmek için kullanabileceğiniz bir uygulama içi deneyim sunmanız faydalı olabilir.

PWA'daki basit yükleme düğmesinin ekran görüntüsü.
PWA'nızda sağlanan basit bir yükleme düğmesi.

Bu makale çok kapsamlı değildir ancak PWA'nızın yüklenmesini tanıtmanın farklı yolları için bir başlangıç noktası sunar. Kullandığınız kalıptan bağımsız olarak veya kalıplardan bağımsız olarak, Kendi uygulama içi yükleme deneyiminizi sunma başlıklı makalede açıklandığı gibi, yükleme akışını tetikleyen aynı kod kullanılır.

En iyi uygulamalar

Sitenizde hangi promosyon kalıplarını kullanıyor olursanız olun, geçerli olan bazı en iyi uygulamalar vardır.

  • Tanıtımları, kullanıcı yolculuklarının dışında tutun. Örneğin, PWA giriş sayfasında harekete geçirici mesajı giriş formunun altına yerleştirip gönder düğmesini kullanın. Tanıtım kalıplarının rahatsız edici kullanımı, PWA'nızın kullanılabilirliğini azaltır ve etkileşim metriklerinizi olumsuz etkiler.
  • Promosyonu reddetme veya reddetme olanağı bulunmalıdır. Kullanıcı bu işlemi yaptığında kullanıcının tercihini hatırlayın ve yalnızca kullanıcının içeriğinizle ilişkisinde bir değişiklik olursa (ör. oturum açması veya bir satın alma işlemini tamamlaması gibi) tekrar istem gönderin.
  • Teknikleri PWA'nızın farklı bölümlerinde birleştirin, ancak yükleme tanıtımıyla kullanıcınızı bunaltmamaya veya rahatsız etmemeye dikkat edin.
  • Promosyonu yalnızca beforeinstallprompt etkinliği tetiklendikten sonra gösterin.

Otomatik tarayıcı tanıtımı

Belirli ölçütler karşılandığında çoğu tarayıcı, kullanıcıya İleri Web Uygulamanızın yüklenebilir olduğunu otomatik olarak belirtir. Örneğin, masaüstü Chrome, çok amaçlı adres çubuğunda bir yükle düğmesi gösterir.

Görünür bir yükleme göstergesinin bulunduğu çok amaçlı adres çubuğunun ekran görüntüsü.
Tarayıcı tarafından sağlanan yükleme tanıtımı (masaüstü).
Tarayıcı tarafından sağlanan yükleme tanıtımının ekran görüntüsü.
Tarayıcı tarafından sağlanan yükleme tanıtımı (mobil).

Android için Chrome, kullanıcıya mini bir bilgi çubuğu gösterir, ancak bu durum beforeinstallprompt etkinliğinde preventDefault() çağrısı yapılarak engellenebilir. preventDefault() yöntemini çağırmazsanız banner, bir kullanıcı sitenizi ilk kez ziyaret edip Android'de yüklenebilirlik ölçütlerini karşıladığında, ardından yaklaşık 90 gün sonra tekrar gösterilir.

Kullanıcı arayüzü tanıtım kalıpları

Kullanıcı arayüzü tanıtım kalıpları, neredeyse tüm PWA türleri için kullanılabilir ve sitede gezinme ile banner'lar gibi yerlerde görünür. Diğer tüm promosyon türlerinde olduğu gibi, kullanıcı yolculuğunun kesintiye uğramasını en aza indirmek için kullanıcının bulunduğu bağlama dikkat etmek önemlidir.

Tanıtım kullanıcı arayüzünü ne zaman tetikleyeceklerine dikkat eden siteler daha fazla yükleme elde eder ve yüklemeyle ilgilenmeyen kullanıcıların yolculuklarını sekteye uğratmaz.

Basit yükleme düğmesi

Mümkün olan en basit kullanıcı deneyimi, web içeriğinizde uygun bir yere "Yükle" veya "Uygulamayı al" düğmesi eklemektir. Düğmenin diğer önemli işlevleri engellemediğinden ve kullanıcının uygulamanızdaki yolculuğunun dışında olduğundan emin olun.

Özel yükle düğmesi..
Basit yükleme düğmesi.

Bu, sitenizin başlığının parçası olan bir yükle düğmesidir. Diğer başlık içerikleri genellikle logo ve hamburger menü gibi site marka öğelerini içerir. Başlıklar, sitenizin işlevine ve kullanıcı ihtiyaçlarına bağlı olarak position:fixed olabilir veya olmayabilir.

Başlıktaki özel yükleme düğmesi.
Başlıktaki özel yükleme düğmesi.

Uygun bir şekilde kullanıldığında, sitenizin başlığından PWA yüklemesini tanıtmak, en sadık müşterilerinizin deneyiminize dönmesini kolaylaştırmanın mükemmel bir yoludur. PWA başlığınızdaki pikseller değerlidir. Bu nedenle, yüklemenizin harekete geçirici mesajının uygun boyutta, olası diğer başlık içeriğinden daha büyük ve rahatsız edici olmadığından emin olun.

Başlıktaki özel yükleme düğmesi
Başlıktaki özel yükleme düğmesi

Aşağıdakilerden emin olun:

  • beforeinstallprompt etkinleşmeyene kadar yükle düğmesini göstermeyin.
  • Yüklü kullanım alanınızın değerini kullanıcılarınız için değerlendirin. Tanıtımınızı yalnızca faydalanma olasılığı yüksek kullanıcılara sunmak için seçici hedeflemeyi düşünün.
  • Değerli başlık alanını verimli bir şekilde kullanın. Kullanıcıya başlıkta başka neler sunmanın yararlı olacağını düşünün ve yükleme tanıtımının önceliğini diğer seçeneklere göre değerlendirin.
Gezinme menüsündeki özel yükleme düğmesi
Slaytlı gezinme menüsüne yükleme düğmesi/promosyon ekleyin.

Menüyü açan kullanıcıların deneyiminizle etkileşimine işaret ettiği için gezinme menüsü, uygulamanızın yüklenmesini teşvik etmek için ideal bir yerdir.

Aşağıdakilerden emin olun:

  • Gezinmeyle ilgili önemli içerikleri kesintiye uğratmaktan kaçının. PWA yükleme promosyonunu diğer menü öğelerinin altına yerleştirin.
  • Kullanıcının PWA'nızı yüklemenin neden faydalı olacağına dair kısa ve alakalı bir satış konuşması sunun.

Açılış sayfası

Açılış sayfalarının amacı, ürünlerinizi ve hizmetlerinizi tanıtmaktır. Bu nedenle, PWA'nızı yüklemenin avantajlarını tanıtırken geniş kapsamlı bir başlangıç yapmanın uygun olduğu yer burası.

Açılış sayfasındaki özel yükleme istemi.
Açılış sayfasında özel yükleme istemi.

Önce sitenizin değer teklifini açıklayın, ardından ziyaretçilerle kurulumdan ne elde edeceklerini belirtin.

Aşağıdakilerden emin olun:

  • Ziyaretçileriniz için en önemli özelliklere hitap edin ve onları açılış sayfanıza getirmiş olabilecek anahtar kelimeleri vurgulayın.
  • Yükleme promosyonunuzun ve harekete geçirici mesajınızın dikkat çekici olmasını sağlayın (yalnızca değer teklifinizi netleştirdikten sonra). Sonuçta burası sizin açılış sayfanız.
  • Uygulamanızın, kullanıcıların zamanlarının çoğunu geçirdiği bölümüne bir yükleme promosyonu eklemeyi düşünün.

Çoğu kullanıcı, mobil deneyimlerde yükleme banner'larıyla karşılaşmıştır ve banner'ın sunduğu etkileşimlere aşinadır. Banner'lar, kullanıcının çalışmasını bozabileceğinden dikkatli kullanılmalıdır.

Sayfanın üst kısmındaki özel yükleme banner'ı.
Sayfanın üst kısmındaki kapatılabilir bir banner.

Aşağıdakilerden emin olun:

  • Banner'ı göstermeden önce, kullanıcının sitenize ilgi duyduğunu gösterene kadar bekleyin. Kullanıcı banner'ınızı kapatırsa kullanıcı, içeriğinizle daha yüksek düzeyde etkileşim sağladığını gösteren bir dönüşüm etkinliğini (ör. bir e-ticaret sitesinde satın alma işlemi veya hesaba kaydolma) tetiklemediği sürece banner'ınızı bir daha göstermeyin.
  • Banner'da PWA'nızı yüklemenin değerini kısaca açıklayın. Örneğin, PWA'nın kullanıcının cihazında neredeyse hiç depolama alanı kullanmadığını veya mağaza yönlendirmesi olmadan anında yükleneceğini belirterek iOS/Android uygulamalarının bu uygulamalardan ayırt edilmesini sağlayabilirsiniz.

Geçici kullanıcı arayüzü

Snackbar tasarım deseni gibi geçici kullanıcı arayüzü, kullanıcıyı bilgilendirir ve bu durumda uygulama yükleme işlemi gibi bir işlemi kolayca tamamlamasına olanak tanır. Bu tür kullanıcı arayüzü kalıpları, doğru kullanıldığında kullanıcı akışını kesintiye uğratmaz ve kullanıcı tarafından yoksayıldıklarında otomatik olarak kapatılır.

Snackbar olarak özel yükleme banner'ı.
PWA'nın yüklenebilir olduğunu gösteren, kapatılabilir bir atıştırmalık çubuğu.

Uygulamanızla birkaç etkileşimden sonra atıştırmalık çubuğunu gösterin. Sayfa yüklenirken veya bağlam dışında görünüyorsa kolayca gözden kaçabilir ya da bilişsel aşırı yüklenmeye yol açabilir. Böyle bir durumda kullanıcılar gördükleri her şeyi reddederler. Sitenize gelen yeni kullanıcıların PWA'nızı yüklemeye hazır olmayabileceğini unutmayın. Bu nedenle, bu modeli kullanmadan önce kullanıcıdan güçlü ilgi alanı sinyalleri (ör. yinelenen ziyaretler, kullanıcı oturum açma veya benzer bir dönüşüm etkinliği) almadan önce beklemeniz önerilir.

Snackbar olarak özel yükleme banner'ı.
PWA'nın yüklenebilir olduğunu gösteren, kapatılabilir bir atıştırmalık çubuğu.

Aşağıdakilerden emin olun:

  • Snackbar'ı 4 ila 7 saniye boyunca göstererek kullanıcılara engel olmadan, görüp tepki vermeleri için yeterli zaman tanıyın.
  • Banner'lar gibi diğer geçici kullanıcı arayüzünün üzerinde göstermekten kaçının.
  • Bu modeli kullanmadan önce kullanıcıdan güçlü ilgi alanı sinyalleri (ör. yinelenen ziyaretler, kullanıcı oturum açma veya benzer bir dönüşüm etkinliği) gelene kadar bekleyin.

Dönüşümden sonra

Bir kullanıcı dönüşüm etkinliğinden hemen sonra, örneğin bir e-ticaret sitesinde yapılan satın alma işleminden hemen sonra, PWA'nızın yüklenmesini tanıtmak için mükemmel bir fırsattır. Kullanıcı, içeriğinizle açık bir şekilde etkileşimde bulunur ve dönüşüm genellikle kullanıcının hizmetlerinizle tekrar etkileşimde bulunacağına işaret eder.

Dönüşümden sonra yükleme promosyonu.
Kullanıcı bir satın alma işlemini tamamladıktan sonra yükleme promosyonu.

Rezervasyon veya ödeme yolculuğu

Rezervasyon veya ödeme akışları gibi sıralı bir yolculuk sırasında ya da sonrasında bir yükleme promosyonu gösterin. Promosyonu kullanıcı yolculuğu tamamladıktan sonra gösteriyorsanız yolculuk tamamlandıktan sonra genellikle daha belirgin hale getirebilirsiniz.

Kullanıcı yolculuğundan sonra yükleme promosyonu.
Kullanıcı yolculuğundan sonra yükleme promosyonu.

Aşağıdakilerden emin olun:

  • Alakalı bir harekete geçirici mesaj ekleyin. Uygulamanızı yüklemek hangi kullanıcılarda fayda sağlayacak? Neden? Bu bilgi, mevcut yolculuklarıyla ne derece alakalı?
  • Markanızın yüklü uygulama kullanıcıları için benzersiz teklifleri varsa bunlardan bahsedin.
  • Promosyonu yolculuğunuzdaki sonraki adımların dışında tutun. Aksi takdirde yolculuğun tamamlanması oranlarını olumsuz yönde etkileyebilirsiniz. Yukarıdaki e-ticaret örneğinde, ödeme için temel harekete geçirici mesajın uygulama yükleme tanıtımının üzerinde nasıl olduğuna dikkat edin.

Kaydolma, oturum açma veya oturumu kapatma akışı

Bu promosyon, promosyon kartının daha belirgin olabileceği yolculuğun özel bir durumudur.

Kaydolma sayfasında özel bir yükleme düğmesi.
Kayıt sayfasında özel bir yükleme düğmesi.

Bu sayfalar genellikle yalnızca, PWA'nızın değer teklifinin önceden belirlenmiş olduğu, etkileşimde bulunan kullanıcılar tarafından görüntülenir. Ayrıca genellikle bu sayfalara yerleştirilebilecek çok fazla faydalı içerik bulunmaz. Sonuç olarak, sizi engellemediği sürece daha büyük bir harekete geçirici mesaj oluşturmak daha az rahatsız edicidir.

Aşağıdakilerden emin olun:

  • Kayıt formu içinde kullanıcıların yolculuğunu kesintiye uğratmaktan kaçının. Bu çok adımlı bir işlemse kullanıcının yolculuğunu tamamlayana kadar beklemeniz önerilir.
  • Kayıt yaptıran kullanıcılara en alakalı özellikleri tanıtın.
  • Uygulamanızın oturum açılan alanlarına ek bir yükleme promosyonu eklemeyi düşünün.

Satır içi promosyon kalıpları

Satır içi tanıtım teknikleri, tanıtımları site içeriğiyle bir araya getirir. Bu, genellikle bazı ödünleri olan kullanıcı arayüzünde yapılan tanıtımdan daha üstü kapalıdır. Tanıtımınızın, ilgilenen kullanıcıların onu fark edeceği kadar öne çıkmasını istersiniz. Ancak tanıtımın, kullanıcı deneyiminizin kalitesini düşürecek kadar fazla olmaması gerekir.

Feed içi

PWA'nızdaki haber makaleleri veya diğer bilgi kartı listeleri arasında feed içi yükleme promosyonu gösterilir.

İçerik feed'indeki bir yükleme promosyonu.
İçerik feed'indeki bir yükleme promosyonu.

Amacınız, kullanıcılara sevdikleri içeriğe nasıl daha kolay erişebileceklerini göstermektir. Kullanıcılarınıza faydalı olacak özellik ve işlevleri tanıtmaya odaklanın.

Aşağıdakilerden emin olun:

  • Kullanıcıları rahatsız etmemek için tanıtımların sıklığını sınırlayın.
  • Kullanıcılarınıza promosyonları kapatma olanağı sunun.
  • Kullanıcınızın reddetme seçimini hatırlayın.