2021 Kaydırma Anketi Raporu'nu ve Chrome ekibinin, bu durumun Chromium ve web'deki öncelikleri ve planları nasıl etkilediğiyle ilgili sözlerini inceleyin.
Chrome ekibi Nisan ayında 2019 MDN Web DNA Raporu'nda en çok bildirilen sorunlara dayalı bir kaydırma ve dokunma eylemi anketi yayınladı. 2021 Kaydırma Anket Raporu hazır ve Chrome ekibi, anket sonuçlarından edindiğimiz bazı düşünceleri ve işlem öğelerini paylaşmak istiyor. Bu sonuçların, tarayıcı tedarikçilerinin ve standartlar gruplarının web'de kaydırma işlemini nasıl iyileştireceğini anlamalarına yardımcı olacağını umuyoruz.
2021 Kaydırma Anket Raporuna göz atın.
Dikkate değer sonuçlar
Anket, 880 anonim gönderim topladı. Bu gönderimlerin 366'sı tüm soruları yanıtladı.
Kaydırma işlemine başlamak için overflow-x:
scroll; gibi tek bir CSS satırı yeterli olsa da kaydırma API'lerinin ve seçeneklerinin kapsam alanı JavaScript'ten CSS'ye kadar geniş bir yelpazeyi kapsar. Aşağıdaki sonuçlar, web geliştiricilerin karşılaştığı sorunları vurgulamaya yardımcı olur.
Web'de kaydırmayla ilgili genel memnuniyet
27. Soru
%45
web'de kaydırma özelliğinden bir şekilde veya genel olarak son derece memnun değilim
.
Bu soru, 26 kaydırma kullanım alanı ve özelliğiyle ilgili soruların ardından, anketin sonuna doğru kasıtlı olarak yerleştirilmiştir. Yanıtlardan, web topluluğunun kaydırmayla ilgili sorunlar yaşadığı anlaşılıyor. Ankete katılanların neredeyse yarısı genel memnuniyetsizliği bildiriyor.
Kaydırmayla çalışmayla ilgili genel duyarlılığın bu kadar düşük olmaması gerektiğine inanıyoruz. Bu metriğin değiştirilmesi gerekir. Bu, yapılması gereken bir iş olduğunun açık bir işaretidir.
Kaydırma çubuğunu kullanma zorluğu
2. Soru
%43
Bir miktar veya
son derece zor
kaydırmayla çalışmak
Araştırmalarımız, bu zorlukların kaydırma özelliğinin çok sayıda kullanım alanından kaynaklandığını gösteriyor. Kaydırma, aşağıdakileri kapsayabilir: - Kaydırılabilir alanlarda öğelerin konumlandırılması - Sonsuz kaydırma - Kaydırmayla bağlantılı animasyon - Bandrollar - Kaydırma görünümü dolgusu - Döngüsel kaydırma - Sanal kaydırma
Eksik tarayıcı özellikleri, karmaşık JavaScript ve dokunma, klavye, oyun pad'i gibi giriş modlarını destekleme ihtiyacı tüm bunları zorlaştırır.
Dokunmatik etkileşimlerin önemi
3. Soru
%51
Dokunma etkileşimlerini
çok veya son derece önemli
olarak bildiriyorlar.
Mobil web kullanıcılarının ziyaret istatistiklerinde artış göstermeye devam ettiği göz önüne alındığında, katılımcıların yarısının dokunmanın web'deki çalışmaları için çok önemli olduğunu belirtmesi şaşırtıcı değildi. Bu, web'in yüksek kaliteli dokunmatik etkileşim sunabilmesi için CSS kaydırma sabitleme ve touch-action gibi web özelliklerine daha fazla dikkat edilmesi gerektiğini gösteriyordu.
Sekme tuşu veya oyun kumandası ile gezinme zorluğu
5a. Soru
%44
Oyun kumandasını ve sekme gezinmesini biraz veya son derece zor
olarak bildirebilirsiniz.
Kaydırma, klavye okları, Sekme tuşları, Boşluk tuşuna basma ve oyun kumandası gibi gezinme yöntemlerini içerir. Özel kaydırma işlemi yaparken bunları dahil etmek zor olabilir. Katılımcıların yarısı bu girdileri eklemenin biraz veya son derece zor olduğunu bildiriyor.
touch-action öğreniyor
9. Soru
%50
`touch-action: manipulation`
hakkında öğrendiklerini ankete ekleyin.
Bazı API'lerin kullanımıyla ilgili olarak sorulan anket sorularında “Evet, Hayır” veya “Bugün öğrendim”
olabilir. Kaydırma sırasında etkileşimde bulunması gereken özel dokunma hareketleri oluştururken kritik bir özellik olduğundan, önemli bir geri bildirimden biri de ankette touch-action hakkında bilgi edindiklerini bildiren kullanıcı sayısıydı.
Döngüsel kaydırma
27. Soru
%58
bazen, sık veya her proje için
döngüsel kaydırma kullanarak rapor oluşturun.
60 saniye sonra tekrar 0'dan başlar.
Bu sayılar, web platformu tarafından çok az veya hiç destek verilmeyen bir kaydırma özelliği için yüksektir. Bu nedenle, etkinin uygulanması için kopyalama veya JavaScript'in yerleştirilmesi nedeniyle özellik genellikle yüksek miktarda teknik yüke neden olur. Döngüsel kaydırma sunmak için ürün bantlarında ve saniye veya dakika cinsinden zaman seçerken kullanılır.
Kaydırılabilir alanlar önemli mi?
2. Soru
%55
çok veya
son derece önemli
%16
Hiç önemli değil
veya Pek önemli değil olarak bildirebilirsiniz.
Katılımcılar, kaydırılabilir alanların önemini vurguladı. Bu da yüksek kaliteli kaydırma sunmak için gereken zorluklar hakkında başka bir sinyal verdi.
Bantlar
20. Soru
%87
Bantları kullandıysanız
%24
kolay yönettiklerini bildirmektedir.
Katılımcıların neredeyse tamamı web çalışmalarında bantlar kullanıyor ancak bunların yalnızca %25'i bantları yönetmeyi kolay buluyor. Hazır bantlar, araştırmamız sırasında popüler bir araç olarak karşımıza çıktı. Ancak bu istatistik, sorunun çözülmüş gibi görünmediği için bizi şaşırttı.
Sonsuz kaydırma
22. Soru
%65
Bazen
her projede
%60
kısmen veya
son derece zor.
Katılımcıların üçte ikisi web çalışmalarında sonsuz kaydırma sunuyor ve eşit sayıda katılımcı bunun zor olduğunu belirtiyor. Yüksek kullanımla birlikte yüksek zorluk içeren başka bir örnek de dikkatimizi bu alana çekiyor.
content-visibility ve contain-intrinsic-size, uzun kaydırılabilir alanların oluşturma maliyetlerini azaltmak için birleştirilebilir ancak "daha fazla yükle" sonsuz kaydırma kullanıcı deneyimine yardımcı olmuyor.
Kaydırma bağlantılı veya kaydırma tetiklemeli animasyonlar
24. Soru
47%
Bazen
her projede
%56
biraz veya
son derece zor bildirin
Tüm katılımcıların neredeyse yarısı kaydırmayla senkronize edilmiş animasyonlar kullanıyor ve katılımcıların yarısı bunu zor buluyor. Bu da yüksek kullanım oranının zorlukla ilişkilendirildiğini bir kez daha gösteriyor.
Yerleşik kaydırma özelliğiyle rekabet edin
26. Soru
%32
her zaman veya
çoğu zaman
%50
bazen
Telefon ve tablet uygulamalarının yerleşik kaydırma ve dokunma etkileşimleri, web'in yakalayabileceği net bir alan olarak sıklıkla öne çıkarılır. Özellikler arasında kaydırmayla bağlantılı animasyonlar, programatik arayüzler, ses entegrasyonu, kaydırma ipuçları ve kaydırarak yenileme API'leri yer alır.
Katılımcıların yalnızca yarısı yerleşik kaydırma deneyimiyle eşleşmenin ancak bazen mümkün olduğunu düşünmüştür.
Web'de kaydırma etkileşimleri oluşturma ile ilgili genel memnuniyet
27. Soru
Anketten Çıkarılan Önemli Bilgiler
Anket sonuçları dört kategoriye ayrılmıştır: uyumluluk, eğitim, API'ler ve ö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:
1. Yatay kaydırma uyumluluğu.
1. overscroll-behavior tarayıcı.
1. -webkit-scrollbar ön ekleri kaldırılıyor ve standartlara uyuyor.
Eğitim
Anket sonuçları, touch-action ve mantıksal özellikler hakkında daha fazla eğitime ihtiyaç olduğunu gösterdi. Tarayıcı, uluslararası düzenin ön saflarında yer alıyor ve yeterince kullanılmadığı veya yanlış anlaşıldığı anlaşılıyor.
Odaklanılması gereken alanlar:
1. touch-action
1. Mantıksal özellikler
API'ler
Kaydırmayla sabitleme özelliğinin kullanımı artıyor ve geliştiriciler, özellikleri popüler kitaplıklar ve eklentilerle birlikte kullanmak istediklerini belirtiyor. CSS ile eklenti kitaplıkları arasındaki bu boşluğu daraltmak, kaydırma anında sabitleme özelliğinin geliştirici ve kullanıcı deneyimini iyileştirmeye yardımcı olacaktır.
API ile ilgili çalışmalarımızın odağında scroll-snap:
1. Tarayıcılar arasında API kullanılabilirliği ve uyumluluk.
1. scroll-start gibi yeni CSS API'leriyle çalışmaya başlayın.
1. snapChanged() gibi yeni JS etkinlikleri üzerinde çalışmaya başlayın.
Özellikler
Anket sonuçları, platformda bu tür bileşenleri oluşturmak için ihtiyaç duydukları temel öğeleri eklenti veya yüksek düzeyde çaba olmadan sunmadığından kullanıcıların web'de kaydırmayla ilgili belirli bileşen türleriyle ilgili zorluk yaşadığını gösterdi. Bu konuyu daha ayrıntılı bir şekilde incelemeyi umuyoruz.
Geliştiricilerin oluşturmakta zorlandığı özellikler arasında şunlar yer alır: 1. Bantlar 1. Sanal kaydırma 1. Sonsuz kaydırma
Kaynaklar
- Scroll Survey Report
- Anket Duyurusu
- Mozilla DNA Raporları
- Compat2021: Web'deki en önemli beş uyumluluk sorununu ortadan kaldırma
Küçük resim: Taylor Wilcox'un Unsplash'teki fotoğrafı.