2021 Anket Raporunu Kaydırma

2021 Scroll Survey Report (2021 Scroll Anket Raporu) ve Chrome ekibinin bu durumun Chromium ve web için öncelikleri ve planları nasıl etkilediğine dair söylediklerini edinin.

Nisan ayında Chrome ekibi, 2019 MDN Web DNA'sı Raporu'nda en çok bildirilen sorunlara dayalı kaydırma ve dokunma eylemi anketi yayınladı. 2021 Scroll Survey Raporu hazır. Chrome ekibi, anket sonuçlarından elde ettiğimiz bazı düşünceleri ve yapılacak işleri paylaşmak istiyor. Bu sonuçların, tarayıcı tedarikçilerinin ve standart gruplarının web kaydırmayı nasıl iyileştireceklerini anlamalarına yardımcı olacağını umuyoruz.

2021 Scroll Survey Survey'i (2021 Scroll Anket Raporu) görüntüleyin.

Dikkate değer sonuçlar

Anket anonim olarak 880 gönderim topladı ve her soruya 366 yanıt verildi.

Kaydırmaya başlarken overflow-x: scroll; gibi bir CSS satırı olsa da kaydırma API'lerinin ve seçeneklerinin yüzey alanı geniştir ve JavaScript'i CSS'ye kapsar. Aşağıdaki sonuçlar, web geliştiricilerin karşılaştığı sorunları vurgulamaya yardımcı olur.

Web'de kaydırmaya ilişkin genel memnuniyet

27. Soru

%45

biraz veya genel olarak son derece memnun olmadım
web'de kaydırma.

Bu soru, 26 kaydırma kullanım alanı ve özellik hakkındaki sorulardan sonra bilinçli olarak anketin sonuna doğru yerleştirilmişti. Yanıttan, web topluluğunun kaydırma konusunda zorlandığı anlaşılıyor. Katılımcıların neredeyse yarısı genel memnuniyetsiz olduğunu söylüyor.

Kaydırmayla ç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şler olduğuna işaret ediyor.

Kaydırmayla çalışma güçlüğü

2. Soru

%43

kaydırma ile çalışmanın bir veya
son derece zor
olduğunu bildirdi.
.

Araştırmamız, bu zorlukların kaydırmaya ilişkin çok sayıda kullanım alanından kaynaklandığını göstermektedir. Kaydırma işlevinden bahsederken aşağıdakileri içerebilir: - Öğeleri kaydırılabilir alanlarda konumlandırma - Sonsuz kaydırma - Kaydırma bağlantılı animasyon - Bantlar - Kaydırma görünümü dolgusu - Döngüsel kaydırma - Sanal kaydırma

Eksik tarayıcı özellikleri, karmaşık JavaScript ve dokunmatik, klavye, oyun kumandaları gibi giriş modlarını destekleme ihtiyacı tüm bunları zorlaştırır.

Dokunma etkileşimlerinin önemi

3. Soru

%51

dokunma etkileşimlerini çalışmaları için
çok veya son derece önemli
olarak bildiriyor.

Mobil web kullanıcılarının ziyaret istatistiklerindeki artış devam ederken, katılımcıların yarısının dokunmanın web'deki çalışmaları için çok önemli olduğunu bildirmeleri şaşırtıcı değildi. Bu durum, web'in yüksek kaliteli dokunma etkileşimi sunabilmek için CSS kaydırma anlık görüntüsü ve touch-action gibi web özelliklerine daha fazla dikkat edilmesi gerektiğini gösteriyordu.

Sekme tuşu veya oyun kumandasında gezinmede zorluk

Soru 5a

%44

oyun kumandası ve sekmede gezinme yapması biraz veya çok zor
bildir.

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ışmaları yaparken bunları dahil etmek zor olabilir. Katılımcıların neredeyse yarısı bu girdileri dahil etmenin biraz veya son derece zor olduğunu bildiriyor.

touch-action öğreniliyor

9. Soru

%50

anketten
`touch-action: manipulation`
hakkında öğrendiğinizi bildirin.

Belirli API'lerin kullanımıyla ilgili bazı anket soruları ve olası bir yanıtı Evet, Hayır veya "bugün öğrendim". Dikkate değer geri bildirimlerden biri, ankette touch-action hakkında bilgi edindiklerini bildiren kullanıcı sayısıydı. Bunun nedeni, kaydırma içinde etkileşimde bulunması gereken özel dokunma hareketleri oluştururken bu özelliğin kritik bir özellik olmasıdır.

Döngüsel kaydırma

27. Soru

%58

bazen, sıklıkla veya her projede
döngüsel kaydırmayı kullanarak rapor oluşturun.

Videoda saniye cinsinden döngüsel kaydırmalar gösterilmektedir. 60 saniye sonra
tekrar 0'da başlar.

Bu sayılar, web platformunun çok az desteği olan veya hiç desteği olmayan bir kaydırma özelliği için yüksek. Özellik genellikle bu nedenle yüksek miktarda teknik borç içerir. Etkiyi zorlamak için çoğaltma veya JavaScript yerleştirilir. Ürün bantlarında ve döngüsel kaydırmayı sunmak için saniye veya dakika cinsinden süre seçerken popüler bir uygulamadır.

Kaydırılabilir alanlar önemli mi?

2. Soru

%55

çok veya
son derece önemli

%16

rapor hiç
veya biraz önemli

Katılımcılar kaydırılabilir alanların önemini kavradıkları için yüksek kaliteli kaydırma yaparken ne kadar zorlandıklarına da bir işaret daha vermiş oldular.

Bantlar

20. Soru

%87

bant kullanmışsınızdır.

%24

yönetilmeleri
kolay olduklarını belirtiyor.

Ankete katılanların hemen hepsi web işlerinde bantlar sunarken yalnızca% 25'i bu bantları yönetmenin kolay olduğunu düşünüyor. Kullanıma hazır bantlar, araştırmamız sırasında çok popülerdi. Ancak bu istatistik henüz çözümlenmemiş olduğu için bizi şaşırttı.

Sonsuz kaydırma

22. Soru

%65

bazen
her projede kullanın

%60

biraz veya
son derece zor.

Katılımcıların üçte ikisi web çalışmalarında sonsuz kaydırma sunar ve bu raporu hazırlamak da güçtür. Bu da bize dikkat edilmesi gereken bir alana işaret eden ve yüksek zorluk düzeyinin yüksek kullanımla ilgili başka bir örneğidir.

content-visibility ve contain-intrinsic-size, uzun kaydırılabilir alanlarda oluşturma maliyetlerini azaltmak için birleştirilebilir, ancak "daha fazla" sonsuz kaydırma kullanıcı deneyimi konusunda işe yaramaz.

Kaydırma bağlantılı veya kaydırma tetikli animasyonlar

24. Soru

%47

bazen
her projede kullanın

%56

rapor biraz veya
son derece zor

Tüm katılımcıların neredeyse yarısı, kaydırmaya göre düzenlenmiş animasyonlar kullanıyor ve katılımcıların yarısı bu konuda zorlanıyor. Bu durum da bir kez daha yüksek kullanım düzeyi ile zorluk arasında bağlantı oluşturuyor.

Yerleşik kaydırmayla rekabet

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, genellikle web'in yetişebileceği açık bir yer olarak tanıtılır. Bu özellikler arasında kaydırmaya bağlı animasyonlar, programatik arayüzler, ses entegrasyonu, kaydırma ipuçları ve yenilemek için çekme API'leri bulunur.

Katılımcıların yalnızca yarısı, yerleşik kaydırma deneyimiyle örtüşmenin yalnızca bazen mümkün olduğunu düşünmüştür.

Web'de kaydırma etkileşimleri oluşturma konusunda genel memnuniyet

27. Soru

5 bölüm gösteren bir pasta grafiği: %6,3 hiç memnun değilim, %2,7 çok memnunum, %23,4 çok memnunum, %23,4 kısmen memnunum, %28,8 ne memnunum ne değilim, %38,7 hiç memnun değilim.

Anket Çıkarımları

Anket sonuçları dört kategoriye ayrılır: uyumluluk, eğitim, API'ler ve özellikler.

Uyumluluk

Chrome ekibi, kaydırma uyumluluğu dahil olmak üzere web uyumluluğu sorunlarının sayısını azaltmayı hedeflediğini belirtti.

Odaklanılması gereken ilk üç uyumluluk sorunu: 1. Yatay kaydırma uyumluluğu. 1. overscroll-behavior tarayıcı genelinde. 1. -webkit-scrollbar öğesinden ön ekleri kaldırıp standarda uyu.

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 temelinde yer alır ve yetersiz kullanıldığı veya yanlış anlaşıldığı açıktır.

Odaklanılacak alanlar: 1. touch-action 1. Mantıksal özellikler

API'ler

Kaydırma yapıştırma özelliğinin kullanımı giderek artmaktadır ve geliştiriciler, özellikleri popüler kitaplık ve eklentilerle birlikte çalışabilir şekilde kullanmak istediklerini bildirmektedir. CSS ile eklenti kitaplıkları arasındaki bu boşluğun küçültülmesi, kaydırma yapıştırma geliştirici ve kullanıcı deneyimini memnun eder.

API çalışmalarını scroll-snap üzerinde odaklayacağız: 1. API kullanılabilirliği ve tarayıcılar arasında uyumluluk. 1. scroll-start gibi yeni CSS API'lerinde çalışmaya başlayın. 1. snapChanged() gibi yeni JS etkinlikleri üzerinde çalışmaya başlayın.

Özellikler

Anket sonuçları, kullanıcıların web'de kaydırmayla ilgili bazı bileşen türleriyle ilgili sorun yaşadığını gösterdi. Bunun nedeni, platformun bunları eklenti kullanmadan veya çok fazla çaba harcamadan oluşturmak için ihtiyaç duydukları temel öğeleri sağlamamasıdır. Bu, daha derinlemesine keşfetmeyi umduğumuz bir alandır.

Geliştiricilerin oluşturmakta zorlandığı özellikler şunlardır: 1. Rulolar 1. Sanal kaydırma 1. Sonsuz kaydırma

Kaynaklar

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