Desktop ve Mobil Web’in Geleceği 2: Seamless Sign in ve One Tap Checkout
1. Mobil Neden Önemli?
2. Mobil E-Ticarette Sayfa Performansları
3. Mobil’in Temel Sorunları Üzerine Çözümler
- Progressive Webapps
- Accelerated Mobile Pages (AMP)
- Seamless Sign In
- One Tap Checkout
1. Mobile Neden Önemli?
2015, 2016, 2017 ve 2018… “Bu yıl mobilin yılı olacak” sözünü sıkça duyuyoruz. Bu sözün arkasında yatan sebebi grafikler açıklıyor.
Aşağıda 2015 yılına ait platformlara göre geçirilen ortalama süre gösteriliyor.
Bir diğer rapor ise internette geçirilen sürenin platformlara göre bölünmesi ile oluşturulmuş.
Özetle grafikler mobilin hayatımızın vazgeçilmez bir parçası olduğunu ve bu cihazlarla etkileşimimizin giderek arttığını gösteriyor.
Mobil E-Ticaret Sayfa Performansları
Mobil e-ticaret’te en popüler ve en sorunlu sayfalar neler?
Aşağıda 2016/ 3. çeyrek e-ticaret üçgeni, mobil e-ticaretin performansını gösteriyor.
Top of Funnel- Ürün Detay Yeni Ana Sayfa
Sosyal medya, e-mail ve mesaj uygulamalarının yaygınlaşmasıyla ürün detay sayfaları (product list, product detail) ana sayfadan daha çok trafik alıyor. Yaygınlaşmış kanı kullanıcıların ana sayfadan gelip bu sayfadaki yönlendirmelerle satın almanın gerçekleştiği üzerine; ancak mobildeki kullanıcı profili ana sayfadan değil daha çok ürün detay ve listeleme sayfaları üzerinden ilerliyor. Dolayısıyla listeleme ve ürün detay sayfalarını, “kullanıcılar ilk ana sayfa değil bu sayfalara geliyor” yaklaşımıyla düşünüp, yönlendirmeleri ve development süreçlerini buna göre yapmalıyız.
Bottom of Funnel
Mobil platformdaki temel sorun, kullanıcıların bu platformu satın almak değil ürün gezmek için kullanması… Bu noktada kullanıcılar daha çok desktoptan satın alıyor. Aşağıdaki grafik hem bu bilgileri hem de bottom funnel’ da yaşanan sorunların Revenue’a(Gelir) ve Conversion Rate’e de (Ziyaret başına satın alma) yansıdığını gösteriyor.
Desktop Conversion Rate (ziyaret başına satın alma): mobil’in 2.8 katı;
Tablet Conversion Rate mobilin 2 katı.
Avarage Order Value, (sepetin ortalama değeri) desktop’ta 155 dolar iken; mobilde 120 dolara düşüyor.
Bu rakamlara göre Revenue Per Visit’i (Ziyaret başına gelir) hesapladığımızda:
(Conversion Rate x Average Order Value)
Smartphone: 120*1= 120
Desktop: 155*2,8= 434
434 / 120 = 3,6
Desktop’ın mobilden ziyaret başına 3,6 kat daha yüksek bir rakama sahip olduğunu görüyoruz.
Küçük Ekran Daha Küçük Sipariş Gelirleri
Yukarıdaki raporlarda ekran küçüldükçe Revenue ve Conversion Rate’in azaldığını görüyoruz. (Adobe’nin hazırladığı bu raporda ise Revenue Per Visit = 3,4 olarak gösterilmiş)
Mobil ve desktop kullanımı karşılaştırdığımızda mobilde daha fazla göz atma ve daha az satın alma gerçekleştiğini görüyoruz.
Kullanıcılar neden desktoptan satın alıyor?
ADOBE, mobilden gezip desktoptan satın alan kullanıcılar üzerine bir araştırma yapmış.
Araştırmaya göre kullanıcıların,
%28'i daha kolay kullanım,
%23'ü sipariş vermeden önce ürün büyük ekranda görmek istediğinden,
%17'si kolay bir şekilde ödeme adımlarını tamamlamak için,
%15'i kredi kartı kullanımda yaşadığı endişeler nedeniyle,
desktop’ı tercih ettiklerini söylüyor.
Cep telefonu kullanırken nelerden rahatsız oluyoruz?
Bir diğer ADOBE araştırmasında da mobil kullanıcıların en çok rahatsız olduğu konular ortaya çıkıyor. Kullanıcılar akıllı telefon kullanırken:
Yavaşlık,
Küçük ekran,
Kullanım zorluğu,
Kötü tasarım ve düzen
gibi sorunlardan rahatsız oluyorlar.
Mobil sepet ve üye girişi
Kullanıcıların yüzde 44'ü mobil ödeme adımında sayfayı terkediyor. (Check out abandonment, Satın Al buttonuna tıklayıp sepete gelen; fakat satın almayı tamamlamayan kullanıcılardır.)
Yukarıdaki %44 oranını sayfalara böldüğümüzde Login‘den itibaren yüksek oranda sayfadan çıkma aksiyonunu görüyoruz.
2. Mobil’in Temel Sorunları Üzerine Çözümler
Mobilin insan hayatındaki öneminin artmasına rağmen kullanımında yaşanan sorunlar Google’ın da gündeminde. Google, mobil kullanıcıların rahatsız oldukları konuları aşağıdaki geliştirmelerle çözmeyi planlıyor.
Progressive Web Apps (PWA)
Accelerated Mobile Pages (AMP),
Push Notifications
Seamless Sign-in
One Tap Checkout
1. Progressive Web Apps (PWApps)
2. Accelerated Mobile Pages (AMP)
2016 yılından itibaren duymaya başladığımız mobil içeriği optimize etmek için geliştirilen yöntem AMP, içeriğin mobilde daha hızlı yüklenmesini sağlıyor.
AMP’nin faydaları:
Daha iyi SEO: Organic search e-ticaret sitelerinin en önemli gelir kaynaklarından… Google AMP sonuçlarını ön planda göstereceğini söylüyor.
Düşük Bounce rate: (Bir siteye girip hiçbir şey yapmadan çıkma) Sayfanın uzun sürede yüklenmesi Bounce Rate’i arttırıyor. 3 saniyeden sonra Bounce Rate artıyor.
Hız: Sayfanın hızlı yüklenmesi Conversion Rate üzerinde etkili bir faktör. AMP ile PWApp’in birleşimiyle performans artışı daha da yükseliyor.
Hız Mobil Aramalarda Ön Sırada Çıkmanın Yolu
Google, mobile için yeni ranking algoritması paylaştı. Speed Update adını verdikleri algoritma, mobilde sadece yavaş deneyim veren sayfaların rankingini düşürecek. Yani mobilde Google’a girdin ve iPhone X yazıp arama yaptın. Buradaki sonuçlarda ön sıralarda çıkmak istiyorsan site hızın da iyi olması gerekiyor. Google halen bu search querylerde sıralama için 200’e yakın ölçüt kullanıyor. Mobil de artık bu ölçütler arasında.
3. Push Notifications
4. Seamless Sign-in
Üye girişi ekranları kullanıcıların en çok sorun yaşadığı alanlardan biri.
Düşünme, hatırlama ve defalarca doğru şifre/e-mail yazma denemeleri bu sayfanın performansını olumsuz etkiliyor.
Araştırmalara göre kullanıcıların:
%54'ü üye olmak yerine siteyi terkediyor,
% 92'si şifresini sıfırlamak yerine siteyi terkediyor.
Üye giriş sayfasındaki bu sorunu nasıl çözebiliriz? Credential Management API ile Smart Lock.
Smart Lock nasıl çalışır?
Kullanıcı bir siteden üye girişi yapınca Smart Lock ile şifreni kaydetmek isteyip istemediğini soruyor.
“Kaydet” cevabını verilirse bir sonraki Aliexpress mobile site, desktop ve uygulama ziyaretlerinde otomatik olarak üye girişi yapılıyor. Böylece tekrardan form doldurmamıza gerek kalmıyor.
Smart Lock’un Avantajları
Farklı cihazlarda otomatik üye girişi,
Klavye kullanımını en aza indirme,
Birden çok hesabın passwordunu tutar ve bunlardan birini seçmeni sağlar.
Kalıcı bir oturum açar.
Smart Lock’un Etkisi
Smart Lock, Google’un partnerleri tarafından denenmiş ve bazı başarılar elde etmiş. Google Case Study’de listeyi bulabilirsiniz.
Aliexpress
- %11 conversion rate’de artış *
- %85 web üye girişi ekranında hataları azalması
- %60 sign in de geçirilen süre azalması.
Kullanıcı otomatik olarak üyelik sayfasını geçtikten sonra kullanıcı checkout yolculuğuna başlar. Burada kullanıcının şifresini hatırlamasına gerek yoktur.
Smart Lock’ın üyelik formundaki adımları(E-mail, Ad, soyadı) doldurması yazma hatalarını en aza indirecektir.
Aliexpress’in Smart Lock’ı implement ve test etmesi 3 günlerini almış.
- Transaction’a etkisi olduğu Sign in Api ile Sign in api’siz versiyonları karşılaştırılarak bulunmuştur.*
- %10 web login oranında artış.
- %3 user engagement artışı
Netflix
- Netflix, 2 hafta içinde Smart Lock’u uygulamalarına entegre etti.
- Netflix kullanıcıları, kullanıcı adı veya şifrelerini unuttuklarında müşteri hizmetleri ile iletişime geçmek zorunda kalıyor yada Netflix’e erişmekten tamamen vazgeçiyordu.
- Smart Lock uygulandıktan sonra %20 oranında müşteri hizmetleri aramalarında düşüş kaydedildi.
Daha fazla case study’e aşağıdan ulaşabilirsiniz.
Smart Lock İmplemantasyon
Implemantasyon konusunda tüm bilgileri aşağıdaki makaleden öğrenebilirsiniz.
Örnek bir demo.
Smart Lock’tan Kayıt silmek
Kaydettiğiniz şifreyi Chrome üzerinden kaldırmak için Chrome Settings menüsünden- Show advanced setting’e tıkladığınızda Manage passwords’e girmeniz gerekiyor. Silmek istediğiniz passwordu bulun ve silin.
iOS Auto Sign in
Apple tarafında da Auto Sign In ile ilgili bir çalışma Safari ile Keychain üzerinden yapılıyor. Çalışma mantığı Smart Lock ile aynı olan bu özelliğin ilk örneği Amazon tarafından gerçekleştirildi.
5. One Tap Checkout
One Tap Chekout, kullanıcıların tek bir hareketle bir ürünü satın alması olarak tanımlanabilir. One Tap Checkout, kullanıcıların en çok sorun yaşadığı 3 noktayı ele alarak ilerliyor:
Üye girişi
Teslimat
Ödeme
5.1. Nasıl çalışıyor?
Paymen Request API ve Credential Managemetn API ile kullanıcılar adres ve ödeme bilgilerini Smart Lock’a kaydetmişse teslimat ve ödeme adımlarına uğramadan ürünü hızlıca satın alıyorlar. Satın alma işleminin onaylanması için CVC girmeniz gerekiyor.
CVC girdikten sonra kulllanıcı satın almanın gerçekleştiği Success Page’e geliyor. Bu sayfa aynı zamanda kullanıcının siteye üye olması gerektiğini anlatan bir üye giriş sayfasıdır da. Bu nedenle “Üye ol %10 indirim kazan” veya “Sipariş takibi için üye ol” gibi yönlendirmeler ile kullanıcılar üye olmaya yönlendiriliyor.
Aşağıda One Tap Check Out‘la ilgili video, Paymen Request API’ın çalışma mantığını anlatıyor.
Kullanıcı siten için yeni olabilir; ama tarayıcı için asla
Geleneksel satın alma aksiyonlarında her bir sayfa için bilgilerimizi doldurmamız gerekiyor.
One Tap Checkout’ta ise browser için yeni bir kullanıcı olmadığınız için Smart Lock ile bir tap ile satın alma işlemi gerçekleşiyor.
One Tap Checkout’la ilgili dökümanlarda en çok bahsedilen site Pure Formulas. Pure Formulas’da bir ürünü sepete ekleyip satın almak istediğinizde sizi üye girişi sayfasına atıyor. Burada “Quick Guest Checkout” buttonundan Smart Lock’a kaydettiğiniz bilgiler ile hızlı satın almayı gerçekleştiriyorsunuz.
Progressive Web Apps ve One Tap Check out entegrasyonundan 2 ay sonra Pure Formulas:
Revenue Per Visit (Ziyaret Başına Gelir) PWapps’de %23 oranında,
Conversion Rate (Ziyaret Başına Satın Alma) %14 oranında
Avarage Order Value (Sepetin Ortalama Değeri) % 9 oranında
bir artış oldu.
