2021 Anket Raporunu Kaydırma

2021 Kaydırma Anketi Raporu'nun yanı sıra Chrome Ekibi'nin bu durumun Chromium ve web ile ilgili öncelikleri ve planları nasıl etkilediği hakkındaki görüşlerini edinin.

Adam Argyle

Sam Dutton

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ırma özelliğini 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

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 zorlandığını açıkça gösteriyor. Katılımcıların neredeyse yarısı genel olarak memnuniyetsizlik yaşadığını bildiriyor.

Kaydırma ile çalışma konusundaki 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ışma zorluğu

2. Soru

Araştırmamıza göre bu zorluklar, kaydırma özelliğinin çok sayıda kullanım alanından kaynaklanıyor. Kaydırma ile ilgili olarak şunlardan bahsedebiliriz: - Kaydırılabilir alanlardaki öğeleri konumlandırma - Sonsuz kaydırma - Kaydırmaya bağlı animasyon - Dönen öğeler - 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 ve oyun kumandaları gibi giriş modlarının desteklenmesi gerektiği için tüm bunlar zorlaşır.

Dokunma etkileşimlerinin önemi

3. Soru

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

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 bu yöntemleri 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

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 belirten kullanıcıların sayısıydı.

Döngüsel kaydırma

27. Soru

Bu sayılar, web platformu tarafından çok az desteklenen veya hiç desteklenmeyen bir kaydırma özelliği için yüksektir. 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

Katılımcılar, kaydırılabilir alanların önemini vurgulayarak yüksek kaliteli kaydırma deneyimi sunmak için gereken çabalarla ilgili bir sinyal daha verdi.

Bantlar

20. Soru

Ankete katılanların neredeyse tamamı web çalışmalarında kaydırma çubukları kullanırken yalnızca% 25'i bunları yönetmeyi kolay buluyor. Araştırmamız sırasında hazır carousel'ler popülerdi ancak bu istatistik bizi şaşırttı çünkü bu sorun çözülmüş gibi görünmüyor.

Sonsuz kaydırma

22. Soru

Katılımcıların üçte ikisi web çalışmalarında sonsuz kaydırma kullanıyor ve eşit sayıda katılımcı bunu yapmanın zor olduğunu belirtiyor. Yüksek kullanımın yüksek zorlukla eşleştiği bir başka örnek olan bu durum, dikkat edilmesi gereken bir alanı 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ırmayla tetiklenen animasyonlar

24. Soru

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

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 yenilemek için çekme 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 Sonuçlar

Anket sonuçları dört kategoriye ayrılı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üzen konusunda öncü bir konumda olsa da yeterince kullanılmadığı veya 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 veya yüksek düzeyde çaba gerektirmeden 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

Kaynaklar

• Kaydırma Anketi Raporu
• Anket Duyurusu
• Mozilla DNA Reports
• Compat2021: Web'deki en büyük beş uyumluluk sorununu ortadan kaldırma

Küçük resim: Taylor Wilcox'un Unsplash'teki fotoğrafı.