Nisan ayında, Chrome ekibi, Google’dan en çok bildirilen sorunları temel alan bir kaydırma ve dokunma eylemi anketi yayınladı. 2019 MDN Web DNA Raporu. bu 2021 Scroll Anket Raporu hazır ve Chrome ekibi, anket sonuçlarından derlediğimiz bazı düşünce ve eylem öğelerini paylaşmak istiyor. Bu sonuçların, tarayıcı tedarikçilerinin ve standart gruplarının web kaydırmayı nasıl geliştireceklerini anlamalarına yardımcı olacağını umuyoruz.
görüntüle 2021 Scroll Anket Raporu.
dikkate değer sonuçlar #
Anket anonim olarak 880 gönderim topladı ve her soruyu 366 yanıtladı.
Kaydırmaya başlarken, bir satırlık CSS gibi overflow-x: scroll;, kaydırma API’lerinin ve seçeneklerinin yüzey alanı büyüktür ve JavaScript’ten CSS’ye kadar uzanır. Aşağıdaki sonuçlar, web geliştiricilerinin karşılaştığı sorunları vurgulamaya yardımcı olur.
Web kaydırmayla ilgili genel memnuniyet #
Soru 27
45%
vardır biraz veya genel olarak son derece memnuniyetsiz
ile web kaydırma.
Bu soru, 26 kaydırma kullanım durumu ve özellikleriyle ilgili sorulardan sonra kasıtlı olarak anketin sonuna yerleştirildi. Yanıttan, web topluluğunun kaydırma ile mücadele ettiği açık. Ankete katılanların neredeyse yarısı genel bir memnuniyetsizlik düzeyi bildiriyor.
Scroll ile çalışma konusundaki genel duyarlılığın bu kadar düşük olmaması gerektiğine inanıyoruz. Bu metriğin değiştirilmesi gerekiyor; yapılması gereken işlerin olduğunun açık bir işaretidir.
Kaydırma ile çalışma zorluğu #
soru 2
43%
olduğunu bildirdi biraz veya
son derece zor
kaydırma ile çalışmak.
Araştırmamıza göre, bu zorluklar kaydırma için çok sayıda kullanım durumundan kaynaklanmaktadır. Kaydırma hakkında konuştuğumuzda, bu şunları içerebilir:
Eksik tarayıcı özellikleri, karmaşık JavaScript ve dokunma, klavye ve oyun kumandaları dahil olmak üzere giriş modlarını destekleme ihtiyacı, tüm bunları zorlaştırır.
Dokunma etkileşimlerinin önemi #
Soru 3
İle mobil web kullanıcıları ziyaret istatistiklerinde hala artış gösteriyor, yanıtlayanların yarısının dokunmanın web’deki çalışmaları için çok önemli olduğunu bildirmesi şaşırtıcı değildi. Bu, CSS kaydırma eki gibi web özelliklerinin ve touch-action Web’in yüksek kaliteli dokunmatik etkileşim sunabilmesi için ekstra dikkat gerekiyor.
Sekme tuşu veya gamepad gezinme zorluğu #
Soru 5a
44%
rapor biraz veya son derece zor
yapmak oyun kumandası Ve sekme gezintisi.
Kaydırma, klavye okları, sekme tuşları, boşluk çubuğuna basma ve oyun kumandaları gibi gezinme yöntemlerini içerir ve özel kaydırma çalışması yaparken bunları dahil etmek zor olabilir. Yanıt verenlerin neredeyse yarısı, bu girdileri dahil etmenin biraz veya aşırı derecede zor olduğunu bildiriyor.
Öğrenme touch-action #
Soru 9
Anket sorularından bazıları, belirli API’lerin kullanılmasıyla ilgili olarak Evet, Hayır veya “bugün öğrendim” yanıtlarıyla soruldu. Dikkate değer bir geri bildirim parçası, hakkında bir şeyler öğrendiğini bildiren kişilerin sayısıydı. touch-action kaydırma içinde etkileşime girmesi gereken özel dokunma hareketleri oluştururken kritik bir özellik olduğu için anketten.
döngüsel kaydırma #
Soru 27
58%
rapor bazen, sıklıkla veya üzerinde her proje
kullanarak döngüsel kaydırma.
60 saniye sonra tekrar 0’dan başlar.
Bu rakamlar, web platformu tarafından çok az destek sağlanan veya hiç desteklenmeyen bir kaydırma özelliği için yüksektir. Bu özellik, etkiyi zorlamak için çoğaltma veya JavaScript enjekte edildiğinden, genellikle bu nedenle yüksek miktarda teknik borca maruz kalır. Döngüsel kaydırma sunmak için ürün döngüleri ve süreyi saniye veya dakika olarak seçerken popülerdir.
Kaydırılabilir alanlar önemli mi? #
soru 2
55%
çok veya
son derece önemli
16%
rapor hiç de bile
veya biraz önemli
Katılımcılar, kaydırılabilir alanların önemini güçlü bir şekilde hissettiler ve bu, yüksek kaliteli kaydırma sağlamak için gereken mücadeleler hakkında başka bir işaret verdi.
Atlıkarıncalar #
Soru 20
24%
olduklarını bildir
kolay yönetmek.
Neredeyse her katılımcı web işlerinde döngüler sunarken, yalnızca %25’i bunları yönetmeyi kolay buluyor. Araştırmamız sırasında hazır atlıkarıncalar popülerdi, ancak kulağa pek çözülmüş gibi gelmediği için bu istatistik bizi şaşırttı.
Sonsuz kaydırma #
Soru 22
65%
kullan Bazen
ile her proje
60%
biraz veya
son derece zor.
Yanıt verenlerin üçte ikisi web işlerinde sonsuz kaydırma yapıyor ve eşit miktarda kişi bunu yapmanın zor olduğunu belirtiyor. Yüksek zorlukla eşleştirilmiş bir başka yüksek kullanım örneği, bize dikkat edilmesi gereken bir alanı gösterir.
Sırasında content-visibility Ve contain-intrinsic-size uzun kaydırılabilir alanlar için oluşturma maliyetlerini azaltmak üzere birleştirilebilir, “daha fazla yükleme” sonsuz kaydırmalı UX ile yardımcı görünmüyor.
Kaydırma bağlantılı veya kaydırma ile tetiklenen animasyonlar #
Soru 24
47%
kullan Bazen
ile her proje
56%
rapor biraz veya
son derece zor
Yanıt verenlerin neredeyse yarısı kaydırmayla düzenlenmiş animasyonlar kullanıyor ve yanıtlayanların yarısı bunu zor buluyor, bir kez daha yüksek kullanımı zorlukla ilişkilendiriyor.
Yerleşik kaydırma ile rekabet edin #
Soru 26
32%
Her zaman veya
çoğu zaman
Telefon ve tablet uygulamalarının yerleşik kaydırma ve dokunma etkileşimleri, genellikle web’in yetişebileceği net bir yer olarak lanse edilir. Özellikler, kaydırma bağlantılı animasyonlar, programatik arabirimler, ses entegrasyonu, kaydırma ipuçları ve yenilemek için çekme API’lerini içerir.
Yanıt verenlerin sadece yarısı, yerleşik kaydırma deneyimine uymanın yalnızca bazen mümkün olduğunu düşündü.
Web’de kaydırma etkileşimleri oluşturmaktan genel memnuniyet #
Soru 27
Anket Çıkarımları #
Anket sonuçları dört kategoriye ayrılmıştır: uyumluluk, eğitim, API’lerVe özellikler.
Uyumluluk #
Chrome ekibi, kaydırma uyumluluğu da dahil olmak üzere web uyumluluğu sorunlarının sayısını azaltma hedefini açıkladı.
Odaklanılması gereken ilk üç uyumluluk sorunu:
- Yatay kaydırma uyumluluğu.
overscroll-behaviorçapraz tarayıcı- önekleri kaldırma
-webkit-scrollbarve standardı takip etmek.
Eğitim #
Anket sonuçları, çevrede daha fazla eğitim olması gerektiğini gösterdi. touch-action ve mantıksal özellikler. Tarayıcı, uluslararası düzende ön plandadır ve yeterince kullanılmadığı veya yanlış anlaşıldığı açıktır.
Odaklanılacak alanlar:
touch-action- mantıksal özellikler
API’ler #
Kaydırma yakalamanın kullanımı artıyor ve geliştiriciler, özellikleri popüler kitaplıklar ve eklentilerle birlikte çalışabilir şekilde kullanmak istediklerini söylediler. CSS ve eklenti kitaplıkları arasındaki bu boşluğun küçültülmesi, scroll snap geliştiricisi ve kullanıcı deneyiminin tatmin edilmesine yardımcı olacaktır.
API çalışmasına odaklanacağız scroll-snap:
- Tarayıcılar arasında API kullanılabilirliği ve uyumluluğu.
- üzerinde çalışmaya başla yeni CSS API’leri beğenmek
scroll-start. - üzerinde çalışmaya başla yeni js etkinlikleri beğenmek
snapChanged().
Özellikler #
Anket sonuçları, platform, eklentiler veya yüksek düzeyde çaba olmadan bunları oluşturmak için ihtiyaç duydukları ilkelleri sağlamadığından, kullanıcıların web’de kaydırmayla ilgili bazı belirli bileşenlerle mücadele ettiğini gösterdi. Bu, daha derinlemesine keşfetmeyi umduğumuz bir alandır.
Geliştiricilerin oluşturmakta zorlandıkları özellikler şunları içerir:
- Atlıkarıncalar
- sanal kaydırma
- Sonsuz kaydırma
Kaynaklar #
Küçük resim resmi: fotoğraflayan Taylor Wilcox Açık Unsplash.