Giriş
2020'nin başlarında, mobil ve masaüstü platformlarında Chrome ekibi, yüklü web uygulamalarının keşfedilebilirliğini ve etkileşimini iyileştirmeyi amaçlayan bir plan hazırladı. Çalışmalarımız, PWA yükleme ve etkileşimde% 100'den fazla artış sağladı. Bunu, mevcut özellikleri araştırarak, kullanıcıların algıları ve beklentileri hakkında bilgi edinmek için A/B testi denemeleri ve kullanıcı görüşmeleri gerçekleştirerek başardık. Bu makalede, bu noktaya nasıl geldiğimizi ele alıyoruz.
Birleştirilmiş yükleme dili
PWA yüklemesini tetikleyen harekete geçirici mesaj, web platformunda tutarlı değildi. Android'deki Chrome için Ana ekrana ekle'yi tercih ettik ancak masaüstü platformlarımızda Yükle'ye vurgu yaptık. Bu tutarsızlığın nedeni, ekibin 2016'da farklı dizeleri karşılaştırdığı bir çalışmadan kaynaklanmaktadır. Ekip, Ana ekrana ekle'nin mobil cihazlarda, küçük de olsa daha iyi çalıştığını tespit etti.
2019'da sınıflandırmayla ilgili yapılan başka bir çalışmada herhangi bir fark bulunamadı. Bu nedenle, PWA yükleme deneyimini birleştirmek isteyen ekip, etiketi Android'de Yükle olarak güncellemeye karar verdi. 2021'de yapılan bir başka çalışmada, Yükle, Al ve İndir ifadelerinin dilsel karşılaştırması yapıldı. Kullanıcıların Yükle ifadesini, gerçekleşmekte olan bir işlem olarak anladığını tespit ettik. Kullanıcılar, Al etiketli bir düğmeye dokunduklarında bir web sitesine yönlendirileceklerini, İndir etiketli bir düğmeye dokunduklarında ise bir dosyanın indirme klasörlerine veya eşdeğer bir klasöre ekleneceğini varsayıyordu.
Tüm bunları göz önünde bulundurarak, PWA'lar için en uygun etiketin Yükle olduğuna karar verdik. Web platformundaki geliştiricilerin bundan sonra tercih edilen dize olarak Install'ı kullanmalarını öneririz.
Simgeyi masaüstüne yükleme
Masaüstü platformlarımızda, bir web sitesi PWA yüklediğinde Chrome'un, genel amaçlı kutunun sağ tarafında bir simge ve Yükle etiketi içeren bir hap göstermesini sağlayan bir tasarım kalıbımız vardır. Bu işlemden sonra, kullanıcı bir siteyi ziyaret ettiğinde yalnızca simge gösterilir. Bu hapı tıkladığınızda masaüstü PWA'nın yüklenmesi tetiklenir.
Simge başlangıçta, kısmen mobil cihazlarda kullanılan Ana ekrana ekle metaforundan dolayı artı işaretiydi. Ancak, belirtildiği gibi kullandığımız dil Yükle idi. Geliştirici topluluğundan aldığımız geri bildirim, bu simgesinin kafa karıştırıcı olduğu yönündeydi. Ayrıca, kullanıcı metni büyütmek için yakınlaştırma işlevini kullanıyorsa yakınlaştırma simgesinin çok benzer olması kullanıcının kafasını daha da karıştırıyordu.
Geri bildirimlerin çoğu anekdot olduğu için kullanıcılarımızın algısını araştırmaya karar verdim. Kullanıcı deneyimi araştırmacılarımızla birlikte, kullanıcıların yükleme simgelerini nasıl anladığını belirlemek için ABD ve Endonezya'da 10.000 kullanıcıyla bir çalışma yürüttük. Mevcut tasarım da dahil olmak üzere beş farklı tasarımı test ettik ve kullanıcılara "Yükle"nin ne anlama geldiğini sorduk. Mevcut simgenin (artı işareti) kullanıcılarımızı en çok kafa karıştıran simge olduğunu tespit ettik. Birçok kullanıcı bu simgeyi "ilaç", "ilk yardım" ve "pil" ile karıştırdı.
Ayrıca kullanıcıların, yüklemeyle ilişkilendirdikleri görsellerin öncelikle ok ve cihaz gibi öğeler olduğunu tespit ettik. Bu sonuçlara dayanarak, mevcut tasarımı iki alternatifle karşılaştıran bir Chrome A/B/C testi çalıştırdık. Aşağı doğru bir monitöre işaret eden oka ulaştık. Bu ok, diğer ikisinden önemli ölçüde daha iyi performans gösteriyordu. Ayrıca, bu yeni simgeyle birlikte yükleme kullanıcı arayüzünün kapatılma oranında da düşüş gözlemledik.
Sonuç olarak, bugün gördüğünüz tasarım ortaya çıktı. Bu tasarım sayesinde, PWA'ların yükleme oranı web sitelerine kıyasla iki kattan fazla arttı. Ayrıca bu simgeyi ve mobil cihazlara yönelik eşdeğerini Materyal Tasarım simge setimize ekledik. Böylece topluluğumuzun en ilgi çekici bulduğumuz simgelerden yararlanmasını sağladık.
Elbette tek bir simge dünyayı değiştiremez. Bu da bizi bir sonraki özelliğimize getiriyor.
Ürün içi yardım
Ürün içi yardım, kullanıcıları belirli ölçütlere göre ilgilerini çekebilecek yeni özelliklere ilk katılımlarında yönlendiren mavi bir balon ipucudur. Kullanıcıları yükleme özellikleri hakkında bilgilendirmek ve yeni simgenin yeniden tasarlanmasını desteklemek için bu tasarım kalıbını kullanıma sunmaya karar verdik.
Bir kullanıcı bir web sitesini düzenli olarak ziyaret ettiğinde Chrome, Site Etkileşimi olarak bilinen bir hizmeti kullanır.
Bu, kullanıcının siteyle ne kadar etkileşim kurduğu hakkında bilgi sağlar. chrome://site-engagement/ sayfasını ziyaret ederek düzenli olarak etkileşimde bulunduğunuz siteleri görebilirsiniz. Bu puanları kullanarak kullanıcının bir web sitesiyle ilgilenip ilgilenmediğini belirleyebiliriz. Site bir PWA ise ve kullanıcı etkileşimde bulunuyorsa kullanıcıya yüklemeyle ilgili Ürün İçi Yardım kullanıcı arayüzünü gösteririz.
Bu, yalnızca etkileşimde bulunan kullanıcılara odaklandığımız ve siteyi bir kez ziyaret eden kullanıcıları rahatsız etmediğimiz anlamına geliyordu.
Masaüstünde ürün içi yardım özelliğini kullanarak PWA yüklemelerinde %100'den fazla artış elde ettik. Bu da etkileşimde bulunan kullanıcılara odaklanmanın web uygulamalarının yüklenilebilirliğini artırdığını gösteriyor.
Daha zengin yükleme kullanıcı arayüzü
Çoğu kullanıcı için yükleme paradigması bir mağazadır. 2000'lerin ortalarından beri kullanıcıları, uygulama yüklerken uygulamanın istedikleri bir uygulama olup olmadığına karar vermelerine yardımcı olacak açıklama, ekran görüntüsü ve diğer meta veriler görecekleri konusunda bilgilendiriyoruz.
PWA'larda, kullanıcı bir web uygulaması yüklemeye karar verdikten sonra gösterdiğimiz kullanıcı arayüzü nispeten yetersizdi. Bu nedenle ekip, kullanıcılarımıza web uygulaması hakkında bağlam bilgisi verecek ve geliştiricilerin yerel deneyimlerle aynı düzeyde olan PWA'ları öne çıkarmasını sağlayacak daha zengin bir yükleme deneyimi keşfetmeye karar verdi.
Bu yılın başlarında, Android'de Chrome'da geliştiricilerin manifest dosyalarına ekran görüntüsü eklemesine olanak tanıyan genişletilmiş bir yükleme kullanıcı arayüzü olan Zengin Yükleme'yi kullanıma sunduk. Geliştiriciler açıklama da ekleyebilir. Bu, önerilir ancak zorunlu değildir. Bu yeni kullanıcı arayüzü sayesinde, bazı PWA'ların yükleme oranının ikiye katlandığını gördük. Bu da kullanıcılara daha fazla bağlam ve daha zengin deneyimler sunduğumuzda web uygulamalarını yükleme konusunda daha fazla güven duydukları anlamına geliyor. Bu kullanıcı arayüzünün masaüstü sürümü üzerinde çalışmalarımız devam ediyor.
Sonuç
Ekip, son iki yılını Chrome'daki yeni özellikleri keşfetmeye ve denemeye adadı. Bu özellikler, PWA geliştiricilerini destekledi ve güçlendirdi, ayrıca kullanıcıların web deneyimlerinin avantajları hakkında bilgi edinmesine yardımcı oldu. Yapabileceğimiz çok şey var. Ancak birlikte çalışarak kullanıcılarımızın yaşamlarını iyileştirebilir, zenginleştirebilir ve açık web'i daha fazla destekleyebiliriz.