Giriş
2020'nin başında, mobil ve masaüstü cihazlardaki Chrome ekibi, yüklü web uygulamalarının keşfedilebilirliğini ve etkileşimini artırmak için bir plan hazırladı. Çalışmamız sayesinde PWA yükleme ve etkileşiminde% 100'ün üzerinde bir artış elde ettik. 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 yaparak başardık. Bu makalede bu noktaya nasıl geldiğimiz açıklanmaktadır.
Birleştirilmiş yükleme dili
PWA yüklemesini tetikleyen harekete geçirici mesaj, web platformu genelinde tutarsızdı. Android üzerinde Chrome için Ana ekrana ekle'yi seçtik, ancak Masaüstü Platformlarımızda Yükle'yi vurguladık. Bu tutarsızlığın gerekçesi, ekibin 2016'da yürüttüğü ve farklı dizeleri karşılaştıran bir çalışmadan kaynaklandı. Ekip, Ana ekrana ekle seçeneğinin yalnızca marjinal düzeyde olsa da mobil cihazlarda daha iyi çalıştığını keşfetti.
2019'da sınıflandırma üzerinde yapılan başka bir çalışmada herhangi bir fark bulamadınız. Bu nedenle, PWA yükleme deneyimini birleştirmek isteyen ekip, etiketi Android'de Yükle olarak güncellemeye karar verdi. 2021'de yapılan daha ayrıntılı bir çalışmada Yükle, Al ve İndir dilleri karşılaştırıldı ve kullanıcıların, Yükleme dillerini devam eden süreç olarak anladıkları tespit edildi. Kullanıcılar Al etiketli bir düğmeye dokunduğunuzda, kullanıcıyı bir web sitesine yönlendireceğini, İndir seçeneğinin ise indirilenler klasörüne veya eşdeğer bir klasöre kaydedileceğini düşünüyordu.
Tüm bunları göz önünde bulundurarak, PWA'lar (Progresif Web Uygulaması) için Install (Yükle) etiketinin en uygun olduğu sonucuna vardık. Web platformundaki geliştiricilerin bundan sonra tercih edilen dize olarak Yükle'yi benimsemelerini öneririz.
Masaüstünde yükle simgesi
Masaüstü platformlarımızda tasarım kalıbımız, bir web sitesi PWA yüklediğinde Chrome'un çok amaçlı adres çubuğunun sağ tarafında görünen bir simge ile Yükle etiketini gösteren bir tasarım kalıbıdır. Bundan sonra, kullanıcı bir siteyi ziyaret ettiğinde yalnızca simge görünecektir. Bu hapın tıklanması, masaüstü PWA'nın yüklenmesini tetikler.
Simge başlangıçta artı simgesiydi ve kısmen, mobil cihazlarda kullanılan Ana ekrana ekle metaforu nedeniyle bu simge kullanıldı. Ancak, daha önce de belirtildiği gibi, Yükleme dili kullanılmıştır. Geliştirici topluluğundan aldığımız geri bildirim, bu simgenin kafa karıştırıcı olduğu yönündeydi. Dahası, kullanıcı metni büyütmek için yakınlaştırma işlevini kullandığında, yakınlaştırma simgesi çok benzer görünüyordu ve kullanıcının kafasını daha da karıştırıyordu.
Çoğu geri bildirim yalnızca anekdot olduğundan kullanıcılarımızın algısını araştırmaya karar verdim. Kullanıcıların yükleme ikonlarını anlayıp anlamadıklarını belirlemek için kullanıcı deneyimi araştırmacılarımızla çalışarak ABD ve Endonezya'daki 10.000 kullanıcıyla bir çalışma yaptı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, yani artı simgesinin kullanıcılarımızın en çok kafasını karıştırdığını keşfettik. Pek çok kişi bu sembolü "tıp", "ilk yardım" ve "piller" kelimeleriyle karıştırdı.
Ayrıca, kullanıcıların yükleme işlemini birincil olarak oklar ve cihazlar gibi görüntülerle ilişkilendirdiklerini de tespit ettik. Bu sonuçlara dayanarak Chrome'da bir A/B/C testi yaparak mevcut tasarımı iki alternatifle karşılaştırdık. Diğer ikisinden çok daha iyi performans gösteren oka indik ve bir monitörü aşağı doğru gösterdik. Ayrıca bu yeni simgeyle yükleme kullanıcı arayüzünün kapatılma sayısında da bir düşüş gördük.
Sonuçta, bugün gördüğünüz tasarım sayesinde PWA'ların yükleme oranı web sitelerinde iki kattan fazla artış gösterdi. Ayrıca, bu simgenin yanı sıra Materyal Tasarım simge grubumuza mobil eşdeğerini de ekleyerek topluluğun, en ilgi çekici bulduğumuz ikonografiyi kullanabilmesini sağladık.
Elbette, tek bir simge dünyayı değiştirmeyecek ve bizi bir sonraki özelliğimize götürecektir.
Ürün içi yardım
Ürün İçi Yardım, belirli kriterlere göre kullanıcıların ilgisini çekebilecek yeni özellikleri kullanıma sunan mavi renkli bir ipucudur. Kullanıcıları yükleme özellikleri hakkında bilgilendirmek ve yeni simgenin yeni tasarımını daha fazla desteklemek için bu tasarım kalıbını uygulamaya 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 bir siteyle ne kadar etkileşimde bulunduğu hakkında bilgi sağlar. chrome://site-engagement/ adresini 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 bulunduysa onlara Ürün İçi Yardım kullanıcı arayüzünü yükledik.
Bu da yalnızca etkileşimde bulunan kullanıcılara odaklandığımız ve bir siteyi bir kez ziyaret eden kullanıcıları rahatsız etmediğimiz anlamına geliyordu.
Ürün içi yardımı masaüstünde kullanarak PWA yükleme sayısında %100'den fazla artış gördük. Bu da etkileşimde bulunan kullanıcılara odaklanmanın web uygulamalarının yüklenebilirliğini artırdığını gösteriyor.
Daha Zengin Yükleme Kullanıcı Arayüzü
Çoğu kullanıcı için yükleme paradigması mağazalardır. 2000'lerin ortalarından beri kullanıcılarımızı bir uygulamayı yüklediklerinde, istedikleri bir uygulama olup olmadığına karar vermelerine yardımcı olacak bir açıklama, ekran görüntüleri ve diğer meta veriler görecekleri konusunda eğittik.
PWA'larda, bir kullanıcının web uygulamasını yüklemeye karar verdiğinde gösterdiği kullanıcı arayüzü göreceli olarak yetersiz kalıyordu. Bu nedenle ekip, kullanıcılarımıza web uygulaması hakkında bağlam bilgisi verecek ve geliştiricilerin yerel deneyimlere eşdeğer olan PWA'ları kutlamasını sağlayacak daha zengin bir yükleme deneyimini keşfetmeye karar verdi.
Bu yılın başlarında, Android'deki Chrome'da geliştiricilerin manifest dosyalarına ekran görüntüleri eklemesine olanak tanıyan, genişletilmiş bir yükleme kullanıcı arayüzü olan Daha Zengin Yükleme özelliğini kullanıma sunduk. Geliştiriciler ayrıca, önerilen ancak gerekli olmayan bir açıklama da ekleyebilirler. Bu yeni kullanıcı arayüzü sayesinde, bazı PWA'ların yükleme oranının iki katına çıktığını gördük. Bu da, daha fazla bağlam ve daha zengin deneyimler sunduğumuzda kullanıcıların web uygulamalarını yükleme konusunda daha fazla güven duyduğunu gösteriyor. Bu kullanıcı arayüzünün masaüstü sürümü ile ilgili çalışmalar devam etmektedir.
Sonuç
Ekip, son iki yılı Chrome'da PWA geliştiricilerini etkinleştirip destekleyen ve kullanıcıları web deneyimlerinin avantajları konusunda eğitmeye yardımcı olan yeni özellikleri keşfedip denemeler yaparak geçirdi. Hâlâ yapabileceğimiz çok iş var, ancak hep birlikte kullanıcılarımızın hayatını iyileştirip zenginleştirebilir ve açık web'i daha fazla destekleyebiliriz.