Nisan ayında Chrome ekibi, 2019 MDN Web DNA Raporu'nda en çok bildirilen sorunlara dayalı olarak kaydırma ve dokunma işlemiyle ilgili bir anket yayınladı. 2021 Kaydırma Anketi Raporu hazır. Chrome Ekibi, anket sonuçlarından edindiğimiz bazı düşünceleri ve yapılacak işlemleri paylaşmak istiyor. Bu sonuçların, tarayıcı satıcılarının ve standart gruplarının web'de kaydırma deneyimini nasıl iyileştireceklerini anlamalarına yardımcı olacağını umuyoruz.
2021 Scroll Survey Report'u görüntüleyin.
Dikkate değer sonuçlar
Ankette 880 gönderi anonim olarak toplandı ve 366 kişi her soruyu yanıtladı.
Kaydırmayı kullanmaya başlamak için overflow-x:
scroll; gibi tek satırlık bir CSS kodu yeterli olsa da kaydırma API'lerinin ve seçeneklerinin kapsamı geniştir ve JavaScript'ten CSS'ye kadar uzanır. Aşağıdaki sonuçlar, web geliştiricilerin karşılaştığı sorunları vurgulamaya yardımcı olur.
Web'de kaydırma işleminden genel memnuniyet
27. Soru
%45
Genel olarak web'de kaydırma işleminden biraz veya çok memnun değilseniz
Bu soru, 26 kaydırma kullanım alanı ve özelliğiyle ilgili soruların ardından anketin sonuna yakın bir yere yerleştirilmiştir. Yanıt, web topluluğunun kaydırma konusunda sorun yaşadığını açıkça gösteriyor. Katılımcıların neredeyse yarısı genel olarak memnuniyetsizlik yaşadığını bildiriyor.
Kaydırma özelliğiyle çalışmayla ilgili genel görüşün bu kadar düşük olmaması gerektiğine inanıyoruz. Bu metrik değiştirilmelidir. Bu, yapılması gereken bir iş olduğunun net bir işaretidir.
Kaydırma ile çalışmada zorluk
2. Soru
%43
kaydırma ile çalışmanın biraz veya
son derece zor olduğunu bildiriyor.
Araştırmamıza göre bu zorluklar, kaydırma özelliğinin çok sayıda kullanım alanından kaynaklanıyor. Kaydırma işlemi şunları içerebilir:
- Öğeleri kaydırılabilir alanlarda konumlandırma
- Sonsuz kaydırma
- Bağlı animasyonu kaydırma
- Bantlar
- Kaydırma görünümü dolgusu
- Döngüsel kaydırma
- Sanallaştırılmış kaydırma
Eksik tarayıcı özellikleri, karmaşık JavaScript ve dokunma, klavye ve oyun kumandaları gibi giriş modlarının desteklenmesi gerektiği için tüm bunlar zorlaşır.
Dokunma etkileşimlerinin önemi
3. Soru
%51
Dokunma etkileşimlerini işleri için
çok veya son derece önemli
olarak bildiriyor.
Ziyaret istatistiklerinde mobil web kullanıcılarının sayısı artmaya devam ederken, katılımcıların yarısının dokunmanın web'deki çalışmaları için çok önemli olduğunu bildirmesi şaşırtıcı olmadı. Bu, CSS kaydırma yakalama ve touch-action gibi web özelliklerinin, web'in yüksek kaliteli dokunma etkileşimi sunabilmesi için ekstra dikkat gerektirdiğini gösterdi.
Sekme tuşu veya gamepad ile gezinmenin zorluğu
5a. Soru
%44
Oyun kumandası ve sekme gezinme işlemlerini yapmanın
biraz veya son derece zor olduğunu bildirin.
Kaydırma, klavye okları, sekme tuşları, boşluk çubuğuna basma ve oyun kumandaları gibi gezinme yöntemlerini içerir. Özel kaydırma işlemi yaparken bunları dahil etmek zor olabilir. Katılımcıların neredeyse yarısı bu girişleri dahil etmenin biraz veya son derece zor olduğunu bildiriyor.
Öğrenme touch-action
9. Soru
%50
Anketten
`touch-action: manipulation`
hakkında bilgi edinin.
Anketteki bazı sorular, belirli API'lerin kullanımıyla ilgiliydi ve "Evet", "Hayır" veya "Bugün öğrendim" şeklinde cevaplanabiliyordu. Önemli bir geri bildirim, kaydırma içinde etkileşim kurması gereken özel dokunma hareketleri oluştururken kritik bir özellik olan touch-action hakkında bilgi edindiğini bildiren kullanıcıların sayısıydı.
Döngüsel kaydırma
27. Soru
%58
bazen, sık sık veya her projede
döngüsel kaydırma kullanarak rapor oluşturun.
döngüsel saniye kaydırma gösteriliyor.
Bu sayılar, web platformu tarafından çok az desteklenen veya hiç desteklenmeyen bir kaydırma özelliği için yüksek. Bu nedenle, özellik genellikle yüksek miktarda teknik borca neden olur. Bu durumda, efekti zorlamak için JavaScript eklenir veya kodlar yinelenir. Ürün bantlarında ve döngüsel kaydırma sunmak için saniye veya dakika cinsinden süre seçerken yaygın olarak 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
Katılımcılar, kaydırılabilir alanların önemini vurgulayarak yüksek kaliteli kaydırma deneyimi sunmak için gereken çabalarla ilgili bir başka sinyal verdi.
Bantlar
20. Soru
%87
Dönen öğeleri kullanmış olmanız gerekir.
%24
kolay yönetilebildiğini bildirir.
Ankete katılanların neredeyse tamamı web çalışmalarında kaydırma çubukları kullanırken yalnızca% 25'i bunları yönetmenin daha kolay olduğunu düşünüyor. Araştırmamız sırasında önceden oluşturulmuş carousellerin popüler olduğu görülse de bu istatistik, sorunun çözüldüğünü göstermediği için bizi şaşırttı.
Sonsuz kaydırma
22. Soru
%65
bazen
her projede kullanabilirsiniz.
%60
biraz veya
son derece zor.
Katılımcıların üçte ikisi web çalışmalarında sonsuz kaydırma özelliğini kullanıyor ve eşit sayıda katılımcı bu özelliği kullanmanın zor olduğunu belirtiyor. Bu da yüksek kullanımın yüksek zorlukla eşleştiği bir başka örnek. Bu durum, dikkat edilmesi gereken bir alan olduğunu gösteriyor.
content-visibility ve
contain-intrinsic-size, uzun kaydırılabilir alanlarda oluşturma maliyetlerini azaltmak için birleştirilebilse de "daha fazla yükle" sonsuz kaydırma kullanıcı deneyiminde yardımcı olmuyor gibi görünüyor.
Kaydırmaya bağlı veya kaydırma tarafından tetiklenen animasyonlar
24. Soru
%47
bazı projelerde her projede kullanın.
%56
biraz veya
son derece zor
Katılımcıların neredeyse yarısı kaydırmaya bağlı animasyonlar kullanıyor ve yarısı da bu animasyonları zor buluyor. Bu da yüksek kullanım oranı ile zorluk arasında bir bağlantı olduğunu gösteriyor.
Yerleşik kaydırma özelliğiyle rekabet etme
26. Soru
%32
always veya
most of the time
%50
bazen
Telefon ve tablet uygulamalarının yerleşik kaydırma ve dokunma etkileşimleri, web'in yetişebileceği açık bir alan olarak kabul edilir. Özellikler arasında kaydırmaya bağlı animasyonlar, programatik arayüzler, ses entegrasyonu, kaydırma ipuçları ve çekerek yenileme API'leri yer alır.
Katılımcıların yalnızca yarısı, yerleşik kaydırma deneyiminin bazen eşleştirilebileceğini düşünüyordu.
Web'de kaydırma etkileşimleri oluşturma konusunda genel memnuniyet
27. Soru
Anketten elde edilen 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ı azaltmayı hedeflediğini duyurdu.
Öncelikle odaklanmanız gereken ilk üç uyumluluk sorunu:
1. Yatay kaydırma uyumluluğu.
1. overscroll-behavior tarayıcılar arası
1. -webkit-scrollbar öğesinden önekleri kaldırma ve standarda uyma
Eğitim
Anket sonuçları, touch-action ve mantıksal
özellikler hakkında daha fazla eğitim verilmesi gerektiğini gösterdi. Tarayıcı, uluslararası düzenin ön saflarında yer alıyor ve yeterince kullanılmadığı ya da yanlış anlaşıldığı açıkça görülüyor.
Odaklanılacak alanlar:
1. touch-action
1. Mantıksal özellikler
API'ler
Kaydırarak tutturma özelliği giderek daha fazla kullanılıyor ve geliştiriciler, bu özelliği popüler kitaplıklar ve eklentilerle birlikte çalışabilir şekilde kullanmak istediklerini belirtiyor. CSS ile eklenti kitaplıkları arasındaki bu boşluğu daraltmak, kaydırma yakalama geliştiricilerinin ve kullanıcı deneyiminin memnuniyetini artıracaktır.
API çalışmalarını scroll-snap üzerine yoğunlaştıracağız:
1. API'nin tarayıcılarda kullanılabilirliği ve uyumluluğu.
1. scroll-start gibi yeni CSS API'leri üzerinde çalışmaya başlayın.
1. snapChanged() gibi yeni JS etkinlikleri üzerinde çalışmaya başlayın.
Özellikler
Anket sonuçları, platform bu bileşenleri eklentiler olmadan veya çok fazla çaba harcamadan oluşturmak için gereken temel öğeleri sağlamadığından kullanıcıların web'deki belirli kaydırma bileşenleriyle ilgili sorun yaşadığını gösterdi. Bu konuyu daha ayrıntılı olarak ele almayı planlıyoruz.
Geliştiricilerin oluşturmakta zorlandığı özellikler şunlardır: 1. Bantlar 1. Sanal kaydırma 1. Sonsuz kaydırma