Giriş
2020'nin başlarında mobil ve masaüstündeki Chrome ekibi, yüklü web uygulamalarının keşfedilebilirliğini ve etkileşimini iyileştirmek için bir plan hazırladı. Çalışmalarımızla PWA yükleme ve etkileşimlerinde% 100'den fazla artış elde ettik. Bunu, mevcut özellikleri araştırarak, A/B testi denemeleri ve kullanıcılarla görüşmeler yaparak kullanıcıların algıları ve beklentileri hakkında bilgi edinerek başardık. Bu makalede, bu hedefe 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'deki Chrome için Ana ekrana ekle'ye karar vermiştik, ancak Masaüstü Platformlarımızda Yükle'yi vurguladık. Bu tutarsızlığın gerekçesi, ekibin 2016'da yaptığı ve farklı dizeleri karşılaştıran bir çalışmadan geldi. Ekip, Ana ekrana ekle özelliğinin mobil cihazlarda sadece marjinal şekilde daha iyi sonuç verdiğini tespit etti.
2019'da sınıflandırmayla ilgili daha ayrıntılı bir çalışmada ise herhangi bir farklılık görülmedi. 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 diğer araştırmada dil, Yükle, Al ve İndir'in karşılaştırıldığı görüldü ve kullanıcıların Yükle'yi gerçekleşen süreç olarak anladıklarını tespit ettik. Kullanıcılar, İndir etiketli bir düğmeye dokunduklarını, kullanıcıyı bir web sitesine yönlendireceğini, İndir özelliğiyle ise bir dosyanın indirilenler klasörlerine veya eşdeğeri bir klasöre gideceğini düşünüyordu.
Tüm bunları göz önünde bulundurarak, Yükle etiketinin PWA'lara en uygun olduğu sonucuna vardık. Web platformundaki geliştiricilerin bundan sonra tercih edilen dize olarak Yükle'yi kullanmalarını öneririz.
Masaüstünde yükle simgesi
Masaüstü platformlarımızda, bir web sitesi PWA yüklediğinde Chrome'un çok amaçlı adres çubuğunun sağ tarafında bir simge ve Yükle etiketi içeren bir hap gösterdiğine dair bir tasarım kalıbımız vardır. Bundan sonra, kullanıcı bir siteyi ziyaret ettiğinde yalnızca simge görünür. Bu hapın tıklanması masaüstü PWA yüklenmesini tetikler.
Bu simge başlangıçta artı sembolüydü. Bunun bir nedeni de mobil cihazlarda kullanılan Ana ekrana ekle metaforuydu. Ancak belirttiğimiz gibi Yükle dilini kullandık. Geliştirici topluluğundan aldığımız geri bildirim, bu simgenin 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 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.
Geri bildirimlerin büyük kısmı anekdotlardan kaynaklandığı için kullanıcı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 ikonografisini ne anlama geldiğini belirlemek için 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 simge olan artı simgesinin, kullanıcılarımız için en kafa karıştırıcı olduğunu fark ettik. Birçoğu sembolü "ilaç", "ilk yardım" ve "pil" ile karıştırdı.
Ayrıca, kullanıcıların çoğunlukla oklar ve cihazlar gibi görüntüleri yükleme işlemiyle ilişkilendirdiğini tespit ettik. Bu sonuçlara dayanarak Chrome'da bir A/B/C testi yürüttük ve mevcut tasarımı iki alternatifle karşılaştırdık. Oku aşağıyı işaret eden bir monitöre indik. Bu monitör, diğer ikisinden çok daha iyi performans gösterdi. Bu yeni simgeyle, yükleme kullanıcı arayüzünün kapatılmasında da düşüş gördük.
Sonuç olarak, bugün gördüğünüz tasarım ortaya çıktı. Bu tasarımda PWA'ların yükleme oranı web sitelerinde iki kattan fazla arttı. Ayrıca, bu simgeyi ve Materyal Tasarım simge grubumuza mobil eşdeğerini de ekledik. Bu sayede topluluğun en ilgi çekici bulduğumuz ikonları kullanmasına olanak tanımış olduk.
Elbette tek bir simge bile dünyayı değiştirmeyecek. Bu da bizi bir sonraki özelliğimize götürecek.
Ürün içi yardım
Ürün İçi Yardım, belirli ölçütlere göre ilgilerini çekebilecek yeni özellikleri kullanıcıların anlamasını sağlayan mavi baloncuk ipucudur. Kullanıcıları yükleme özellikleri hakkında bilgilendirmek ve yeni simge tasarımını daha fazla desteklemek için bu tasarım kalıbını kullanıma sunmaya karar verdik.
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ğuna ilişkin bilgiler sağlar. chrome://site-engagement/ adresini ziyaret ederek düzenli olarak etkileşim kurduğ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 yükleme için Ürün İçi Yardım kullanıcı arayüzünü gösteririz.
Bu, bir siteyi bir kez ziyaret edebilecek kullanıcıları rahatsız etmemeye değil, yalnızca etkileşimde bulunan kullanıcılara odaklandığımız anlamına geliyordu.
Masaüstünde ürün içi yardımı kullanarak PWA yüklemesinde %100'den fazla artış elde ettik. Bu da etkileşimde bulunan kullanıcılara odaklanmanın web uygulamalarının yüklenebilirliğini artırdığını gösterdi.
Daha Zengin Yükleme Kullanıcı Arayüzü
Çoğu kullanıcı için yükleme paradigması, mağazadır. 2000'lerin ortalarından itibaren kullanıcılara bir uygulamayı yükledikleri zaman bir açıklama, ekran görüntüleri ve uygulamanın istedikleri gibi karar vermelerine yardımcı olacak diğer meta verileri görecekleri konusunda eğitim verdik.
PWA'larda, bir kullanıcı bir web uygulaması yüklemeye karar verdiğinde 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 deneyimlere uygun olan PWA'ları kutlamasını sağlayacak daha zengin bir yükleme deneyimi 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 eklemelerine olanak tanıyan genişletilmiş yükleme kullanıcı arayüzü Zengin Yükleme'yi kullanıma sunduk. Geliştiriciler de bir açıklama ekleyebilirler. Bu açıklama önerilen fakat gerekli değildir. 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 sağladığımızda kullanıcıların, web uygulamalarını yüklemeye daha çok güvendiğini gösteriyor. Bu kullanıcı arayüzünün masaüstü sürümü şu anda devam ediyor.
Sonuç
Ekip, son iki yılı Chrome'da PWA geliştiricilerini mümkün kılıp güçlendiren ve kullanıcıları web deneyimlerinin avantajları hakkında bilgilendirmeye yardımcı olan yeni özellikleri keşfederek ve deneyerek geçirdi. Hâlâ yapabileceğimiz çok çok iş var, ancak hep birlikte kullanıcılarımızın yaşamlarını iyileştirip zenginleştirebilir ve açık web'i daha fazla destekleyebiliriz.