20 Başarılı Mobil Paywall'ı Analiz Ederek Öğrendiklerim

RevenueCat’i denedikten ve (herkesin gözü önünde) kullanım kolaylığı konusundaki (kuşkusuz çok yüksek) beklentilerimi karşılamadığını keşfettikten sonra, sorunu kendim çözmeye karar verdim ve açık kaynak kütüphane FreemiumKit üzerinde çalışmaya başladım. Benim için Uygulama İçi Satın Almalar konusunda yardımcı olan bir framework’te “kullanım kolaylığı” 3 şey demek:

1. Nasıl başlanacağına dair net, adım adım bir rehber — App Store Connect dahil.

2. Mevcut kullanıcının satın almalarına dayanan basit ama esnek bir izin sistemi.

3. Yeniden kullanılabilir paywall UI kodu için birleşik bir paywall tasarım framework’ü.

İlk ikisini kütüphanenin README’sinde ele almayı planlıyorum. Bu makale üçüncü konuya odaklanıyor: FreemiumKit başarılı bir paywall’ı hızlıca oluşturmana nasıl yardımcı oluyor? Ve A/B testinde sana nasıl yardımcı olabilir?

FreemiumKit, StoreKit 2 entegrasyonunu çocuk oyuncağı haline getiriyor. Dahili paywall’lar & izinlerle.

Temel Fikir

RevenueCat’ten beklediğim şeylerden biri — insanlar onun hakkında sürekli o kadar olumlu konuşuyordu ki — Swift SDK’larında kullanıma hazır UI bileşenleri sunmalarıydı. Ama sunmuyorlardı. (GÜNCELLEME: Şikayetlerimden sonra üzerinde çalışmaya başladılar!) Tek yaptıkları, paywall sağlama ve farklı tasarımları deneyerek kullanıcıların paywall’larını optimize etmelerine yardımcı olan başka bir servisle entegre olmak: Superwall. Bu arada, A/B testinin ne olduğunu bilmiyorsan — farklı tasarımları deneyip hangisinin en iyi çalıştığını verilere bakarak değerlendirmek aşağı yukarı tanımı. Paywall muhtemelen A/B test edilmesi gereken en önemli ekran. Yani servis fikrini gerçekten beğensem de, fiyatlandırması küçük ölçeğe pek iyi uymuyor: Her satın alma başına $0.20 istiyorlar, ki aylık $1’lık bir abonelik için bu gelirinin %20’si — bu Apple’ın Küçük İşletmeler için tuttuğu %15’ten bile yüksek!

Ayrıca kişisel olarak birçok 3. parti servis kullanmaktan yana değilim, uygulamalarımın gizlilik politikalarını kısa ve basit tutmayı seviyorum, ki her yeni servis eklendikçe bunu yapmak zorlaşıyor. Bu yüzden A/B test desteği (ve diğer şeyler) ile gelen daha “genel amaçlı” bir analitik servisi seçip onu akıllıca tercih etmeyi, birçok mikro servis entegre etmeye tercih ederim. Ama tabii ki bu benim kişisel zevkim ve sen farklı tercih edebilirsin. Superwall hakkında gerçekten bayıldığım bir şey var: PaywallScreens web sitesini yönetiyorlar, burada her uygulamanın tahmini gelirine göre sıralanmış binlerce gerçek paywall’ın güzel bir genel görünümünü bulabilirsin — şu anda YouTube, TikTok ve Disney+ başta.

FreemiumKit’in ilk sürümünde, başarılı bir paywall UI’ı hızlıca oluşturmak için gereken her şeyi göndermek istedim, bu yüzden aylık $500,000’dan fazla tahmini geliri olan uygulamaların tüm 312 paywall ekranını inceledim, en davetkar ve temiz bulduğum 20 ekranı seçtim ve ortak noktalarını bulmak için analiz ettim. Sonra öğrendiklerime dayanarak, analiz ettiğim varyantların çoğunu oluşturmanı sağlayan 2 farklı ve son derece özelleştirilebilir UI bileşeni geliştirdim!

İşte düşen hasılat sırasına göre seçtiğim 20 ekran:

Kaynak: paywallscreens.com

Kaynak: paywallscreens.com

Kaynak: paywallscreens.com

Kaynak: paywallscreens.com

Yaygın Tasarım Tercihleri

En az %50’sinin (bir türde) ortak olduğunu fark ettiğim her şey:

1. %100’ü Aylık veya Haftalık “kısa vadeli” plan sunuyor.

2. %100’ü Yıllık veya Ömür Boyu “uzun vadeli” plan sunuyor.

3. %100’ü planlar veya kilidi açılan özellikler listesi için düz beyaz veya siyah metin kullanıyor.

4. %95’i ilgisiz navigasyon öğeleri olmadan ekranın tamamını kaplıyor.

5. %95’i tüm önemli bilgiyi kaydırma gerekmeden tek ekrana sığdırıyor.

6. %90’ı ana eylem çağrısı düğmesini vurgulamak için arka plan rengi kullanıyor.

7. %85’i fiyatlandırma planlarını ekranın alt yarısında listeliyor.

8. %80’i seçili seçeneği vurgulamak için yuvarlak kenarlıklı çerçeve kullanıyor.

9. %80’inin çıkmak için üstte bir geri oku veya “X” düğmesi var.

10. “X” düğmelerinin %61’i sol köşeye konulmuş (çoğu kişi için ulaşması daha zor).

11. %80’inin en altta açıkça vurgulanmış bir eylem çağrısı düğmesi var.

12. Eylem çağrısı düğmelerinin %75’i kapsül şeklinde (uçları %100 yuvarlatılmış).

13. Eylem çağrısı düğmelerinin %56’sı tam olarak aynı başlığı kullanıyor: “Continue”

14. %70’i farklı plan seçenekleri için dikey düğme listesi kullanıyor.

15. Ön seçim yapanların %70’i uzun vadeli tekrarlayan seçeneği tercih ediyor.

16. %60’ı seçilebilecek planlar listesinin arkasında beyaz arka plan kullanıyor.

17. %55’i üst yarıda bir yerde uygulamanın adını belirtiyor.

18. %65’i kilidi açılan 2-6 (ort. 4) özellikle bir liste, ızgara veya sayfa görünümü sunuyor.

19. Liste sunanların %77’si her özelliğin önünde onay işareti ikonu kullanıyor.

20. %55’i ekranın üst kenarına kadar uzanan bir arka plan resmi kullanıyor.

21. %50’si en az bir ücretli plan için ücretsiz deneme sunuyor.

22. %50’si diğer seçeneklere kıyasla bir indirim yüzdesi belirtiyor.

Daha Az Yaygın Tasarım Tercihleri

Bazı paywall’ların yaptığını fark ettiğim ama çoğunluğun yapmadığı şeyler:

1. %45’i seçili plan için farklı bir arka plan rengi kullanıyor.

2. %35’inin satın alma seçeneklerinden birinde “Popüler” / “Önerilen” etiketi var.

3. %30’unda seçimi vurgulamak için nokta veya onay kutusu gibi bir radyo düğmesi var.

4. %30’u farklı plan seçenekleri için yatay düğme listesi kullanıyor.

5. %30’u paywall içinde (daha az vurgulu) bir “Geri Yükle” düğmesi sunuyor.

6. %30’u kullanım koşulları ve gizlilik politikasına (daha az vurgulu) bir bağlantı sunuyor.

7. %15’i satın almayla kilidi açılan özellikleri göstermek için sayfa görünümü kullanıyor.

8. %10’u Aylık/Yıllık vb. arasında geçiş yapmak için segmentli kontrol sunuyor.

9. %5’inin eylem çağrısı düğmesinde (veya başka bir yerde) animasyon var.

Paywall Şablonu

Yukarıdaki öğrendiklerimle hepsini bir araya getiren bir “şablon” oluşturdum:

Profesyonel bir tasarımcı değilim, ama FreemiumKit’in ilk halka açık sürümü için yeterince iyi olduğunu düşünüyorum. Benden daha iyi tasarımcılar olan topluluk üyeleri gösterişli iyileştirmeler veya tamamen farklı tasarımlar katkıda bulunmaya davetli. README’de kendi tasarımlarını nasıl oluşturacağını açıklayan özel bir bölüm var. Bu ekranın genel görünümüne ve incelediğim 20 paywall tasarımına bakınca, framework’ün daha fazla mantık içeren kısma odaklanmasının akıllıca olduğunu düşünüyorum. Ekranın üst yarısı SwiftUI’da çok basit (sadece .overlay‘li bir Image, bir Button ve Text view’larından oluşan bir List). Ve en alttaki daha az vurgulu “Kullanım Koşulları”, “Geri Yükle” ve “Gizlilik Politikası” düğmeleri için de aynı şey geçerli.

Bu, paywall şablonundaki karmaşık mantık içeren tek kısım.

O zaman mevcut ürünleri yükleyip listeleyen, mevcut seçimi vurgulayan, potansiyel olarak mevcut deneme sürelerini, uzun vadeli plan indirimlerini, fiyat etiketini, daha iyi karşılaştırma için ikinci bir aylık fiyat etiketini, “En İyi Değer” veya “En Popüler” rozeti gösteren, mevcut plan seçimini yöneten ve gerektiğinde “Continue” düğmesini gösterip devre dışı bırakan kısma odaklanalım. Gördüğün gibi, bu kısım doğru yapmak için oldukça karmaşık ve (neredeyse) tüm bu bilgiler aslında StoreKit tarafından uygulamaya sağlandığı için, işleri basitleştirmek harika bir fırsat. Ekranın geri kalanını yukarıda paylaşılan öğrendiklerle ve şablonla geliştiriciye/tasarımcıya bırakarak, kütüphane kullanıcıları uygulamalarının paywall’ı için benzersiz bir görünüm oluşturmak konusunda tam özgürlük ve esnekliğe sahip olmalı.

İşleri daha eğlenceli hale getirmek ve FreemiumKit’in ilk sürümünde bile A/B testini mümkün kılmak için, şöyle bir yatay liste varyantı da oluşturalım:

İkisini tam ekran hallerinde yan yana koyunca şöyle karşılaştırılıyorlar:

Dikey (sol) ve yatay (sağ) paywall şablonları, yan yana.

Dikey & Yatay Ürün Stili

FreemiumKit, AsyncImage‘e oldukça benzeyen AsyncProducts adında bir SwiftUI view’ı ile geliyor: Paywall’ında göstermek istediğin ürün tanımlayıcılarını sağlıyorsun (AsyncImage‘e resmin URL’sini verdiğin gibi) ve AsyncProducts ürünleri App Store’dan çekmeyi hallediyor (AsyncImage‘in resimleri web’den çekmesi gibi), veriler yüklenirken bir yer tutucu gösteriyor ve hatta ağ sorunları olduğunda yeniden yükleme düğmesiyle bir hata mesajı sunuyor. Başka bir deyişle: Tüm zor işi o yapıyor, senin tek yapman gereken paywall’ında nereye yerleştireceğine ve hangi boyutun en iyi çalışacağına karar vermek:

AsyncProducts(
   style: PlainProductsStyle(),
   productIDs: ProductID.allCases,
   inAppPurchase: AppDelegate.inAppPurchase
)

AsyncProducts’ın örnek kullanımı.

productIDs & inAppPurchase parametreleri README içindeki adım adım Başlangıç Rehberi’nde açıklanıyor. Bu makalede bizi ilgilendiren, UI bileşeni için farklı tasarımlar geçirmenize izin veren style parametresi. PlainProductsStyle, kendi stillerini oluşturmak isteyenler için minimal bir stil uygulaması gösteren sadece bir demo stil. Doğrudan kullanım için tasarlanmamış. FreemiumKit’in 1.0’da birlikte gönderdiği iki gerçek stil şunlar:

• Yukarıdaki sol tasarım için VerticalPickerProductsStyle

• Yukarıdaki sağ tasarım için HorizontalPickerProductsStyle (devam ediyor)

Ayrıca, Apple’ın en yeni uygulaması Final Cut Pro for iPad’deki paywall’da kullanılan “Continue” düğmesi olmayan bir UI uygulayan HorizontalButtonsProductStyle gibi bir şey adıyla en az bir stil daha eklemeyi planlıyorum:

Apple’ın yeni Final Cut Pro for iPad uygulamasındaki paywall.

Ama bugün mevcut olan stillere odaklanalım ve dikey seçiciyi kullanalım:

AsyncProducts(
   style: VerticalPickerProductsStyle(
      preselectedProductID: ProductID.proYearly,
      tintColor: .blue
   ),
   ...
)

İki argüman alıyor, biri ön seçim olarak vurgulamak istediğin ürünü belirlemenizi sağlıyor. Yukarıdaki analizden 15. öğrendik bize %70’inin uzun vadeli tekrarlayan seçeneği ön seçtiğini söylüyor. Diğer argüman ton rengini seçmeni sağlıyor, bu hem “Continue” düğmesinin arka planı hem de kullanıcının mevcut seçimini vurgulamak için kullanılıyor. Beyazla güzel bir kontrast oluşturan bir renk seçtiğinden emin ol çünkü devam düğmesinin metin rengi bu.

Farklı paywall tasarımlarını denemek istiyorsan, A/B testi için stili değiştirmek çok kolay: Sadece VerticalPickerProductsStyle yerine HorizontalPickerProductsStyle koy ve her şey çalışmalı. Bu iki stil aynı argümanları bile alıyor, yani gerçekten kolay. Planlanan HorizontalButtonsProductsStyle gibi diğer stiller farklı argümanlara sahip olacak çünkü sadece düğmeli böyle bir stilde “seçim” kavramı yok, ama yine de değiştirmek yeterince kolay olmalı. Tüm stiller AsyncProductsStyle protokolüne uyuyor, yani A/B test grubuna göre farklı stiller atayabileceğin bir değişken oluşturmak istersen, türü olarak any AsyncProductsStyle kullanabilirsin.

Sonuç

İşte bunlar, 20 başarılı paywall’ı analiz ederek öğrendiklerim. Tüm öğrendiklerimi FreemiumKit’te gönderilen VerticalPickerProductsStyle‘a aktardım, böylece karmaşık mantıkla uğraşmak yerine SwiftUI’da kolayca AsyncProducts view’ını kullanabilirsin. Tek hatırlaman gereken, AsyncProducts’ı ekranın alt yarısına yerleştirmek, hem kısa vadeli hem uzun vadeli bir abonelik sunmak veya üst yarıda kilidi açılacak özelliklerin bir listesini sunmak gibi daha az karmaşık öğrendikleri uygulamak.